feat: custom connections

gravity-ui · Nov 10, 2024 · 8086c12 · 8086c12
1 parent 846eae8
commit 8086c12
Show file tree

Hide file tree

Showing 12 changed files with 2,089 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "monaco-editor": "^0.52.0",
     "prettier": "^3.0.0",
+    "prettier-eslint": "^16.3.0",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/components/canvas/connections/BlockConnection.ts b/src/components/canvas/connections/BlockConnection.ts
@@ -16,9 +16,9 @@ import { Block } from "../blocks/Block";
 import { GraphLayer, TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
 
 import withBatchedConnection from "./batchMixins/withBatchedConnection";
+import { TConnectionRenderSettings } from "./batchMixins/withBatchedConnections";
 import { bezierCurveLine, generateBezierParams, getArrowCoords, isPointInStroke } from "./bezierHelpers";
 import { getLabelCoords } from "./labelHelper";
-import { TConnectionRenderSettings } from "./batchMixins/withBatchedConnections";
 
 export type TConnectionProps = {
   id: TConnectionId;
@@ -100,16 +100,18 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
       }),
     ];
   }
-
 
   protected updateSourceAndTargetBlock() {
     this.sourceBlock = this.connectedState.$sourceBlock.value?.getViewComponent();
     this.targetBlock = this.connectedState.$targetBlock.value?.getViewComponent();
 
-    if (this.connectedState.sourceAnchorId && this.connectedState.targetAnchorId) {
+    if (this.connectedState.sourceAnchorId) {
       this.sourceAnchor = this.sourceBlock.connectedState
         .getAnchorById(this.connectedState.sourceAnchorId)
         ?.asTAnchor();
+    }
+
+    if (this.connectedState.targetAnchorId) {
       this.targetAnchor = this.targetBlock.connectedState
         .getAnchorById(this.connectedState.targetAnchorId)
         ?.asTAnchor();
@@ -142,12 +144,7 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
   }
 
   public isConnectionVisible() {
-    return this.context.camera.isLineVisible(
-      this.geometry.x1,
-      this.geometry.y1,
-      this.geometry.x2,
-      this.geometry.y2
-    );
+    return this.context.camera.isLineVisible(this.geometry.x1, this.geometry.y1, this.geometry.x2, this.geometry.y2);
   }
 
   public computeRenderSettings(props, state: TConnectionState): TConnectionRenderSettings {
@@ -194,7 +191,7 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
     }
   }
 
-  public calculateHitBoxHash () {
+  public calculateHitBoxHash() {
     return this.geometry.x1 + this.geometry.y1 + this.geometry.x2 + this.geometry.y2;
   }
 
@@ -264,7 +261,7 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
 
   public onHitBox(shape: HitBoxData): boolean {
     const THRESHOLD_LINE_HIT = this.context.constants.connection.THRESHOLD_LINE_HIT;
-    const relativeTreshold = THRESHOLD_LINE_HIT / this.context.camera.getCameraScale();
+    const relativeThreshold = THRESHOLD_LINE_HIT / this.context.camera.getCameraScale();
     const x = (shape.minX + shape.maxX) / 2;
     const y = (shape.minY + shape.maxY) / 2;
 
@@ -274,25 +271,25 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
       this.props.useBezier && this.path2d
         ? isPointInStroke(this.context.ctx, this.path2d, shape.x, shape.y, THRESHOLD_LINE_HIT * 2)
         : intersects.boxLine(
-          x - relativeTreshold / 2,
-          y - relativeTreshold / 2,
-          relativeTreshold,
-          relativeTreshold,
-          this.geometry.x1,
-          this.geometry.y1,
-          this.geometry.x2,
-          this.geometry.y2
-        );
+            x - relativeThreshold / 2,
+            y - relativeThreshold / 2,
+            relativeThreshold,
+            relativeThreshold,
+            this.geometry.x1,
+            this.geometry.y1,
+            this.geometry.x2,
+            this.geometry.y2
+          );
 
     if (this.labelGeometry !== undefined) {
       return (
         superHit &&
         (intersectsLine ||
           intersects.boxBox(
-            x - relativeTreshold / 2,
-            y - relativeTreshold / 2,
-            relativeTreshold,
-            relativeTreshold,
+            x - relativeThreshold / 2,
+            y - relativeThreshold / 2,
+            relativeThreshold,
+            relativeThreshold,
             this.labelGeometry.x,
             this.labelGeometry.y,
             this.labelGeometry.width,

diff --git a/src/components/canvas/connections/BlockConnections.ts b/src/components/canvas/connections/BlockConnections.ts
@@ -18,7 +18,7 @@ export class BlockConnections extends withBatchedConnections(Component) {
 
   protected connectionsView = {};
 
-  public constructor(props: {}, parent: GraphLayer) {
+  constructor(props: {}, parent: GraphLayer) {
     super(props, parent);
     this.unsubscribe = this.subscribe();
   }

diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -1,7 +1,7 @@
 import { computed, signal } from "@preact/signals-core";
 
 import type { Block, TBlock } from "../components/canvas/blocks/Block";
-import { type BlockConnection } from "../components/canvas/connections/BlockConnection";
+import type { BlockConnection } from "../components/canvas/connections/BlockConnection";
 
 import { RootStore } from "./index";
 
@@ -55,7 +55,7 @@ export class GraphEditorSettings {
   public $connectionComponents = computed(() => {
     return this.$settings.value.connectionComponents;
   });
-  public constructor(public rootStore: RootStore) {}
+  constructor(public rootStore: RootStore) {}
 
   public setupSettings(config: Partial<TGraphSettingsConfig>) {
     this.$settings.value = Object.assign({}, this.$settings.value, config);