Arrows (At Length)
From Author:
Love linking lines? Join me in considering the humble arrow as both a programming problem and a user experience challenge. In this talk, I'll present the many complex problems and solutions that I've encountered when working with arrows in my open source library perfect-arrows and later in tldraw (tldraw.com). With a narrow scope and plenty of animations to guide the way, we'll look at intersections, arrow heads, arrow head angles, and all of the different user interface issues behind authoring and adjusting arrows between shapes, other shapes, and points.
This talk has been presented at React Advanced Conference 2022, check out the latest edition of this React Conference.
FAQ
Teal Draw is a drawing and diagramming app that allows for collaborative whiteboarding. It is file-based, local first, and free to use. The platform is designed to help developers build apps for spatial canvas projects.
You can follow Steve Ruiz on Twitter at his handle @SteveRuizOK.
Arrows in Teal Draw are specially considered with multiple customization options including different shapes, directions, and the ability to connect to specific points on shapes using connectors or intersections.
The future plans for Teal Draw include transforming it into a developer product platform that allows users to build their own types of diagramming or drawing apps on top of Teal Draw's existing infrastructure.
Teal Draw handles different shapes and their connectors by allowing arrows to connect at designated connector points, which can vary based on the shape's structure. For more organic shapes, intersection methods are used to ensure arrows connect accurately.
The new version of Teal Draw improves arrow functionality by refining how arrows intersect with shapes, adjusting arrowheads for better aesthetics, and enhancing the control users have over curved arrows through advanced handle and anchor point adjustments.
You can try out Teal Draw by visiting TealDraw.com for the current version or LITE.TealDraw.com for the new version which is still in early stages of development.
Yes, Teal Draw is suitable for professional diagramming, offering various tools and features that support complex diagram creation and collaboration in a professional setting.
Video Transcription
1. Introduction to Arrows at Length
Welcome to my talk, Arrows at Length. I'm Steve Ruiz, the founder of Teal Draw, a drawing app. Today, we'll focus on arrows and their unique features.
Hello, and welcome to my talk, Arrows at Length. My name is Steve Ruiz and I am on Twitter at SteveRuizOK. You can follow me using this QR code and if you like arrows then you should probably follow me or if you like other kind of visual algorithm stuff. I'm the founder of a, well it used to be a side project, now it's a startup called Teal Draw. And Teal Draw is a tiny little drawing app, you can go to it at TealDraw.com and I'll show you what it looks like. It is, like I said, kind of a drawing app, diagramming app.
You can use it for collaborative white boarding. It's free, it's file based and kind of local first. And we are working on the new version of that app which is kind of designed more to be a developer product platform that you can build these types of apps with. So if you have an idea for a spatial canvas, a kind of a figma for x type of an app, then you could potentially build that on top of teal draw rather than starting from scratch. And it's pretty good you get a lot for free. So who knows maybe I'll be back next year and I can talk about that. But for today, yeah, we're going to be talking about teal draw and specifically we're going to be talking about arrows. There's a lot that we could talk about like we could talk about the minimap or the digital ink both of those things are super complex and interesting I think developer stories to tell. But instead we're going to just talk about the arrows and I've spent a lot of time working on arrows and if you've used teal draw you might notice that the arrows are special, they're considered. There's a lot of different ways that you could do an arrow. I'll show you the ways that we do it and also a little bit of background on why and why we don't do it a different way. So let's jump into it. Let's say hello to arrows, whatever.
2. Understanding Arrows and Connectors
An arrow is a line that links two different things, such as points in space or shapes. It can also connect a shape and a place, or a place and a place inside a shape. Most arrows have a specific direction indicated by an arrowhead, which can be used to represent relationships in diagramming frameworks. Arrows can have different shapes, such as elbows, curves, arcs, or splines. Users may find it tricky to adjust these types of arrows. Arrows in diagramming tools connect to specific places called connectors, allowing for connections between certain connectors.
What is an arrow? An arrow is a line. Specifically, it's like a linking line. It's linking two different things. It could be linking two points in space like we see here. It could be connecting two things, like two shapes, like these two rectangles.
It could be connecting a shape and a place or a place and a shape. Or a place and a place inside of a shape. So the idea of indicating a specific area of a specific thing, rather than just the thing itself.
Most arrows are directed in the sense that they go in a certain direction. We indicate that direction with an arrowhead that can go whatever. This way, that way, both ways. And arrowheads can also be used in different kind of diagramming frameworks to represent different things. So maybe you have a graph of entities or servers. Different arrowheads could be used to represent different relationships between those two things. So they can also be labeled. Labels could look like this or like this. Kind of hard to get it right like this, so I do it like this.
And then the arrows themselves can also have different shapes. So you don't always want a straight line. Maybe you want some sort of elbows. Maybe you want some curves along those elbows. Maybe you want an arc or a spline. And the place where this really gets complicated and interesting is when you consider how users author these types of arrows. How do you adjust an elbow line or a spline like this? That's where it really becomes a little tricky, as we'll see.
Most arrows and most diagramming tools connect to specific things called connectors. They are specific places on either side of the shape where the arrows can connect. So let's call them northeast-southwest. In this case we would have east connecting to west. That's pretty straightforward. You want to connect certain connectors to each other.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
Comments