technotariat

export function getControlPointCoords(points, edge) {
  const affectedPoints = edge.points.map((i) => points[i]);
  const otherAxis = edge.axis === 'y' ? 'x' : 'y';
  return {
    [otherAxis]: affectedPoints[0][otherAxis] + (affectedPoints[1][otherAxis] - affectedPoints[0][otherAxis]) / 2,
    [edge.axis]: affectedPoints[0][edge.axis],
  }
}

technotariat

export function getControlPointAxis(point1, point2) {
  if (point1.y === point2.y && point1.x !== point2.x) {
    return "y";
  }
  return "x";
}

function calculateExtrudableEdges(points) {
  const endPoints = [points.length - 2, points.length - 1];
  return [

technotariat

import React, { useState } from "react";
import { render } from "react-dom";
import { Stage, Layer, Rect, Text, Line } from "react-konva";
import { INITIAL_STATE, SIZE } from "./config";
import { Border } from "./Border";

function createConnectionPoints(source, destination) {
  return [source.x, source.y, destination.x, destination.y];
}

technotariat

import React, { useState } from "react";
import { render } from "react-dom";
import { Stage, Layer, Rect, Text, Line } from "react-konva";
import { INITIAL_STATE, SIZE } from "./config";
import { Border } from "./Border";

function createConnectionPoints(source, destination) {
  return [source.x, source.y, destination.x, destination.y];
}

technotariat

import React from "react";
import { Line, Circle } from "react-konva";

const SIZE = 50
const points = [0, 0, SIZE, 0, SIZE, SIZE, 0, SIZE, 0, 0];

function getAnchorPoints(x, y) {
  const halfSize = SIZE / 2;
  return [
    {

technotariat

import React from "react";
import { Stage, Layer, Rect, Text, Line } from "react-konva";

const SIZE = 50;
const points = [0, 0, SIZE, 0, SIZE, SIZE, 0, SIZE, 0, 0];

function Border({ step, id }) {
  const { x, y } = step;
  return (
    <Line

technotariat

{
  "to": "object-1",
  "from": "object-2",
  "offsets": {
    "to": {
      "x": -15,
      "y": 305
    },
    "from": {
      "x": 170,

technotariat

 function addItem(e) {
    e.preventDefault();
    const stage = stageRef.current;
    setItems([
      ...items,
      {
        x: stage.width() / 2,
        y: stage.height() / 2,
        type: 'circle'
      }

technotariat

import React, { useState, useRef } from "react";
import { Stage, Layer, Circle, Rect } from "react-konva";

function getItem(item) {
  if (item.type === "circle") {
    return <Circle x={item.x} y={item.y} fill="red" radius={20} />;
  }
  return <Rect x={item.x} y={item.y} fill="green" width={20} height={20} />;
}

technotariat

.card.hide {
  opacity: 0;
}