Forem: Nikita Mizev

Infinite workspace without Canvas

Nikita Mizev — Fri, 17 Mar 2023 11:14:26 +0000

In the previous article, I talked about how we draw connections in Flode between nodes in our spaces. Now I'll tell you how our spaces themselves are implemented!

The working space in our application is an infinite board on which nodes can move. It is necessary to implement pan and zoom for it. We do all this without using Canvas, since the application is built on React, the design system uses antd, and nodes can be huge forms. Implementing such interfaces would be much more difficult if we didn't have access to native HTML-5 tools.

Workaround

If you have read the article about connections, you already have an idea of how DOM is structured. Let's go into more detail here. Everything is wrapped in .app with position: relative, as well as width and height set to 100%. relative is needed to control the divs with absolute positioning inside itself, and width and height are obviously used to occupy the entire screen. The other containers have similar styles, with the only difference being that the main container has overflow: hidden.

<div class="app">
    <div class="container">
        <div class="nodes-container">
            <div class="node">node #1</div>
            <div class="node">node #2</div>
            <div class="node">node #3</div>
        </div>
    </div>
</div>

html, body {
  width: 100%;
  height: 100%;
}

.app {
    overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}

.container, .nodes-container  {
    position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.container {
  overflow: hidden;
}

.node {
    position: absolute;
}

To display the pan and zoom, it will be enough to use only one CSS property transform with parameters in the form of two functions: translate, which performs displacement along x and y by the given values, and scale, which changes the size of the element by the given multiplier. An example that will move an element by 20px on the x axis, 40px on the y axis, and increase it by 2 times:

transform: translate(20px, 40px) scale(2);

This property will be applied to .nodes-container. As mentioned earlier, all containers are the same size as the user's screen resolution. .container has overflow: hidden, so the native scroll will not appear, no matter how large the internal elements are. At the same time, .node relative to .nodes-container can have any position, including outside its bounds, and translate has no restrictions. Thus, the effect of infinity is achieved, when .node can be assigned any coordinates, and by shifting .nodes-container, display it on the screen:

<div class="nodes-container" style="transform: translate(0px, 0px) scale(1);">
    <div class="node" style="top: -20px; left: -60px;">node #1</div>
    <div class="node" style="top: 230px; left: 150px;">node #2</div>
    <div class="node" style="top: 330px; left: 350px;">node #3</div>
    <div class="node" style="top: 1200px; left: 600px;">node #4</div>
</div>

translate(0px, 0px)

translate(300px, 170px)

translate(-100px, -1000px)

Movement

Now we need to give the user the ability to control the offset. This will be implemented through drag-n-drop.

In further examples, React components will be used to shorten and provide more clarity, but all the techniques mentioned can be applied with other libraries as well as native JS.

The component will use two states: viewport to store information about the current position and isDragging to track when to capture cursor movements. viewport contains offset, an object of displacement along the x and y axes, and zoom is the multiplier for scaling. Let's assume that by default the displacement is 0, and the zoom is 1.

We will need to track three events:

mouseDown - start tracking cursor movements.
mouseUp - stop tracking cursor movements.
mouseMove - actually track movement.

The handlers of these events will be hanging on .app to work in any part of the screen. The first two are clear, they simply change isDragging when mouse button pressed and released. We will focus more on handleMouseMove. Firstly, this event should trigger only when isDragging === true. Secondly, if e.buttons !== 1, that is, no button is pressed, isDragging is changed to false, and tracking is stopped. This is done so that if, for some reason, releasing the button was not detected by handleMouseUp (for example, it was released on the address bar, outside the application), tracking the cursor movement would stop forcibly. Finally, if all checks are passed, viewport is updated.

MouseEvent provides properties movementX and movementY, which are the delta of cursor movement. It is sufficient to add this delta to the previous offset. Thus, each time mouseMove is triggered, viewport will be updated, which, in turn, will change the transform of .nodes-container.

The entire component code:

export default function App() {
  const [viewport, setViewport] = useState({
    offset: {
      x: 0.0,
      y: 0.0
    },
    zoom: 1
  });

  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = () => {
    setIsDragging(true);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) {
      return;
    }

    if (e.buttons !== 1) {
      setIsDragging(false);

      return;
    }

    setViewport((prev) => ({
      ...prev,
      offset: {
        x: prev.offset.x + e.movementX,
        y: prev.offset.y + e.movementY
      }
    }));
  };

  return (
    <div
      className="app"
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseMove={handleMouseMove}
    >
      <div className="container">
        <div
          className="nodes-container"
          style={{
            transform: `translate(${viewport.offset.x}px, ${viewport.offset.y}px) scale(${viewport.zoom})`
          }}
        >
          {/* ... */}
        </div>
      </div>
    </div>
  );
}

Zoom

From a UX point of view, the optimal actions that a user should take to zoom are to hold down Ctrl and scroll the mouse wheel. Firstly, this is an established and understandable process. Secondly, it is supported and mimicked by many touchpads on laptops when detecting the "pinch" gesture.

Let's add another event listener to .app using onwheel. However, this time we will not use component props, but instead use a ref. This has an interesting explanation: if we attach a listener to an element using React, it acquires the passive: true property, which breaks the entire logic because we need to use preventDefault(). First, we will call it and stopPropagation() to prevent zooming, which is implemented in the browser. We will also check if the ctrl key is pressed.

Next, we need to calculate the multiplier speedFactor for the scroll delta. The thing is that its unit of measurement can be in pixels, lines, or pages, and we need to convert this delta to 0.2px per unit for maximum smoothness. WheelEvent.deltaMode contains this information as an "unsigned long", and below I will provide a table according to which speedFactor will be calculated:

Constant	Value	speedFactor
DOM_DELTA_PIXEL	0x00	0.2
DOM_DELTA_LINE	0x01	5
DOM_DELTA_PAGE	0x02	10

Ultimately, pinchDelta will be the key value for calculating the new zoom. It is the product of the negative delta and speedFactor. It is negative to handle the correct directions of the mouse wheel movement.

It is also necessary to limit the approximation value so that users do not get carried away with pixel-perfect layout scrutiny. Let's take, for example, 0.1 as the lower limit and 1.3 as the upper limit. To maintain smoothness, the zoom will increase exponentially, which means it will be multiplied by 2 to the power of pinchDelta each time:

export default function App() {
  const [viewport, setViewport] = useState({
    offset: {
      x: 0.0,
      y: 0.0
    },
    zoom: 1
  });

  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = () => {
    setIsDragging(true);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) {
      return;
    }

    if (e.buttons !== 1) {
      setIsDragging(false);

      return;
    }

    setViewport((prev) => ({
      ...prev,
      offset: {
        x: prev.offset.x + e.movementX,
        y: prev.offset.y + e.movementY
      }
    }));
  };

  const handleWheel = (e: React.WheelEvent) => {
    if (!e.ctrlKey) {
      return;
    }

    e.preventDefault();

    const delta = -e.deltaY / 1000;
    const newZoom = Math.pow(2, Math.log2(viewport.zoom) + delta);

    const minZoom = 0.1;
    const maxZoom = 10;

    if (newZoom < minZoom || newZoom > maxZoom) {
      return;
    }

    setViewport((prev) => ({
      ...prev,
      zoom: newZoom
    }));
  };

  return (
    <div
      className="app"
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseMove={handleMouseMove}
      onWheel={handleWheel}
    >
      <div className="container">
        <div
          className="nodes-container"
          style={{
            transform: `translate(${viewport.offset.x}px, ${viewport.offset.y}px) scale(${viewport.zoom})`
          }}
        >
          {/* ... */}
        </div>
      </div>
    </div>
  );
}

Good additions to this space would be support for scrolling to move both vertically and horizontally (which is very convenient for laptop users), touch support, and movement restriction based on extreme nodes. All of this can be easily added with a ready-made base. That's all, thank you for your attention!

Source from examples

How to draw beautiful connections with SVG

Nikita Mizev — Mon, 06 Mar 2023 16:51:13 +0000

At Flode, we are building a system for simulating various processes, in which the user can describe and see how a particular process works using visual programming. In other words, to check how the result of the process is affected by certain cause-and-effect relationships. The entire system is based on nodes - visual representations of functions that receive, process, display, and ultimately send data to the next nodes.

I can think of only two ways to represent the connections between nodes so that it is clear and beautiful:

Lines with straight angles like in UML diagrams. Such type of connections is good when we need to show clear hierarchies and relationships between connecting objects, for which, often, there is no difference where this connection comes from. In the real world, this could resemble a pipeline, with various branches and intersections, which connects reservoirs.
Smooth curves, such as those used by Nodes in UE4 or Shader Nodes in Blender. They visually show not only the relationships between objects, but also their interaction, and also define specific inputs and outputs for different data. In turn, these connections can be represented as wires in an analog modular synthesizer, which connect sound generators and a multitude of filters to extract a unique sound.

The second option looks perfect for solving the problem - our nodes may not have a clear structure and hierarchy, they may have several inputs and outputs, but between them, the interactions of input and output data types are strictly limited. How can we draw these connections?

Implementation

Since our application does not use canvas, the solution should also use DOM capabilities to display connections. The first candidate for drawing curves is <path /> in SVG.

Below is an example of what the main workspace looks like:

<div class="container">
    <div class="nodes-container">
        <!--...-->
    </div>
</div>

.container {
    position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.nodes-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-origin: left top;
    /* Set dynamically, but here and further for convenience these values will be used */
    transform: translate(640px, 360px) scale(0.5);
}

Place <svg /> in the DOM above nodes-container so that it is rendered first and is located below. Also, add some styles to it so that it takes up all the space and does not intercept events, and wrap all connections in <g /> inside to synchronize transform with nodes-container.

<div class="container">
    <svg class="connections-container">
        <g transform="translate(640, 360) scale(0.5)">
            <!--...-->
        </g>
    </svg>
    <div class="nodes-container">
        <!--...-->
    </div>
</div>

.container {
    /* ... */
}

.nodes-container {
    /* ... */
}

.connections-container {
    pointer-events: none;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left top;
}

The preparation is complete, and we can move on to drawing the connections themselves. To begin with, let's connect the ports with straight lines to figure out their positioning. The <path/> element has a d attribute that describes the geometry of the shape. For a straight line, only two commands are sufficient - “Move to” - M and “Line to” - L. The first specifies the point from which the shape drawing starts, and the second draws a line to the next point. Both commands have the following syntax:

M x, y
L x, y

We know the centers of the ports in the { x, y } format, so for connecting the points { x: 20, y: 60 } and { x: 45, y: 90 }, the d expression would look like this:

M 20, 60 L 45, 90

The <path /> element needs to add a few more properties to prevent the figure from filling, as well as specify the color and thickness of the line itself:

<path
  d="M 20 60 L 45 90"
  fill="transparent"
  stroke="rgba(0, 0, 0, 0.2)"
  stroke-width="1"
></path>

Now it's time to add beauty and add a natural curve to the resulting lines for cases where the node ports are at different heights. To do this, we will use a combination of two quadratic Bezier curves. As a result, we should get a curve that resembles the letter S in shape, as the node ports can be on the left and right, but not on top or bottom. A quadratic Bezier curve is defined by three control points P₀ (initial), P₁ (control) and P₂ (final), and its equation looks like this:

The Q command with arguments P₁ and P₂ is used to display such a curve in d. In turn, the point P₀ is determined by the previous command of the d expression, which in our case is M, indicating the starting point of the shape. Thus, half of the required line is obtained.

M x0, y0 Q x1, y1 x2, y2

To draw the second half - the same curve reflected horizontally, just use the T command. This command takes only one point P₂ as an argument for the equation. P₀ for it is the end point of the previous curve, and P₁ is calculated as a reflection of the previous control point relative to the current P₀. In other words, the line continues as a reflection of the previous Bezier curve to the specified point.

M x0, y0 Q x1, y1 x2, y2 T x3, y3

Let's write a function to generate the required d expression. We know the points { x0, y0 } and { x3, y3 } - these are the coordinates of the output and input ports. The point { x2, y2 } will be the center of the line between these two points.

type Point = {
    x: number,
    y: number
}

function calculatePath(start: Point, end: Point) {
    const center = {
        x: (start.x + end.x) / 2,
        y: (start.y + end.y) / 2,
    }

    return `M ${start.x},${start.y} Q x1, y1 ${center.x},${center.y} T ${end.x},${end.y}`
}

It remains to calculate the control point {x1, y1}. To do this, we will move the line start point along the X axis. The initial y must be left to ensure that the line for input and output points tends to a horizontal position. To calculate the offset, we take the minimum of the distance between the start and end points, half the distance along the Y axis, and limitations of 150 to avoid excessive stretching of the curve at large distances between nodes.

type Point = {
    x: number,
    y: number
}

function distance(start: Point, end: Point)
{
    const dx = to.x - from.x
    const dy = to.y - from.y

    return Math.sqrt(dx * dx + dy * dy)
}

function calculatePath(start: Point, end: Point) {
    const center = {
        x: (start.x + end.x) / 2,
        y: (start.y + end.y) / 2,
    }

    const controlPoint = {
        x: start.x + Math.min(
            distance(start, end),
            Math.abs(end.y - start.y) / 2,
            150
        ),
        y: start.y,
    }

    return `M ${start.x},${start.y} Q ${controlPoint.x}, ${controlPoint.y} ${center.x},${center.y} T ${end.x},${end.y}`
}

With this calculation of the control point, when the ports are at the same height, the line will be straight, but it will bend proportionally to the distance between the nodes when they are separated.

Conclusion

This way of drawing connections is fair for nodes whose ports are located on opposite sides. However, for ports located on the same side, cubic Bezier curves can be used, adding the same calculation of the second control point, which will use the offset from the end.

Thank you for reading this article, I hope you enjoyed!