chore: lint

.gitignore

@@ -2,6 +2,7 @@ node_modules
 .parcel-cache
 dist
 .idea
+.vscode
 .DS_Store
 storybook-static
 .tsbuildinfo

src/components/canvas/blocks/Block.ts

@@ -1,4 +1,4 @@
-import { effect, signal } from "@preact/signals-core";
+import { signal } from "@preact/signals-core";
 import isObject from "lodash/isObject";
 
 import { ECameraScaleLevel } from "../../../services/camera/CameraService";

src/components/canvas/connections/BaseConnection.ts

@@ -123,12 +123,12 @@ export class BaseConnection<
 
   private updateHitBox = () => {
     const [x1, y1, x2, y2] = this.getBBox();
-    const threshold = this.context.constants.connection.THRESHOLD_LINE_HIT;
-    this.setHitBox(
-      Math.min(x1, x2) - threshold,
-      Math.min(y1, y2) - threshold,
-      Math.max(x1, x2) + threshold,
-      Math.max(y1, y2) + threshold
-    );
+      const threshold = this.context.constants.connection.THRESHOLD_LINE_HIT;
+      this.setHitBox(
+        Math.min(x1, x2) - threshold,
+        Math.min(y1, y2) - threshold,
+        Math.max(x1, x2) + threshold,
+        Math.max(y1, y2) + threshold
+      );
   };
 }

src/components/canvas/graphComponent/index.tsx

@@ -48,7 +48,7 @@ export class GraphComponent<
 
   }
 
-  public isVisible() {
+  protected isVisible() {
     return this.context.camera.isRectVisible(...this.getHitBox());
   }
 

src/components/canvas/layers/belowLayer/BelowLayer.ts

@@ -1,5 +1,4 @@
 import { Graph } from "../../../../graph";
-import { CoreComponent } from "../../../../lib";
 import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
 import { ICamera } from "../../../../services/camera/CameraService";
 

src/components/canvas/layers/graphLayer/helpers.ts

@@ -5,7 +5,7 @@ export class DrawBelow extends GraphComponent {
 
   protected shouldRenderChildren = false;
 
-  public isVisible(): boolean {
+  protected isVisible(): boolean {
     return true;
   }
 
@@ -20,7 +20,7 @@ export class DrawOver extends GraphComponent {
 
   protected shouldRenderChildren = false;
 
-  public isVisible(): boolean {
+  protected isVisible(): boolean {
     return true;
   }
 

src/components/canvas/layers/overLayer/OverLayer.ts

@@ -1,5 +1,4 @@
 import { Graph } from "../../../../graph";
-import { CoreComponent } from "../../../../lib";
 import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
 import { ICamera } from "../../../../services/camera/CameraService";
 import { NewBlockComponent } from "../../../../services/newBlock/NewBlockComponent";

src/graph.ts

@@ -2,16 +2,13 @@ import { batch, signal } from "@preact/signals-core";
 import merge from "lodash/merge";
 
 import { PublicGraphApi, ZoomConfig } from "./api/PublicGraphApi";
-import { Anchor } from "./components/canvas/anchors";
-import { Block, TBlock } from "./components/canvas/blocks/Block";
-import { BlockConnection } from "./components/canvas/connections/BlockConnection";
+import { TBlock } from "./components/canvas/blocks/Block";
 import { GraphComponent } from "./components/canvas/graphComponent";
 import { BelowLayer } from "./components/canvas/layers/belowLayer/BelowLayer";
 import { GraphLayer } from "./components/canvas/layers/graphLayer/GraphLayer";
 import { OverLayer } from "./components/canvas/layers/overLayer/OverLayer";
 import { TGraphColors, TGraphConstants, initGraphColors, initGraphConstants } from "./graphConfig";
 import { GraphEventParams, GraphEventsDefinitions } from "./graphEvents";
-import { Component } from "./lib/Component";
 import { scheduler } from "./lib/Scheduler";
 import { HitTest } from "./services/HitTest";
 import { Layer } from "./services/Layer";

src/lib/CoreComponent.ts

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 import { Scheduler } from "./Scheduler";
-import { Tree } from "./Tree";
+import { ITree, Tree } from "./Tree";
 
 type TOptions = {
   readonly key?: string;
@@ -24,7 +24,17 @@ type TPrivateComponentData = {
 export type CoreComponentProps = Record<string, unknown>;
 export type CoreComponentContext = Record<string, unknown>;
 
-export class CoreComponent<Props extends CoreComponentProps = CoreComponentProps, Context extends CoreComponentContext = CoreComponentContext> {
+function createDefaultPrivateContext() {
+  return {
+    scheduler: new Scheduler(),
+    globalIterateId: 0,
+  };
+}
+
+export class CoreComponent<
+  Props extends CoreComponentProps = CoreComponentProps,
+  Context extends CoreComponentContext = CoreComponentContext
+> implements ITree {
   public $: object = {};
 
   public context: Context = {} as Context;
@@ -46,19 +56,12 @@ export class CoreComponent<Props extends CoreComponentProps = CoreComponentProps
     return this.__comp.treeNode.renderOrder;
   }
 
-  protected static createDefaultPrivateContext() {
-    return {
-      scheduler: new Scheduler(),
-      globalIterateId: 0,
-    };
-  }
-
   constructor(props: Props, parent?: CoreComponent) {
     this.context = parent?.context as Context || {} as Context;
 
     this.__comp = {
       parent,
-      context: parent ? parent.__comp.context : (this.constructor as typeof CoreComponent).createDefaultPrivateContext(),
+      context: parent ? parent.__comp.context : createDefaultPrivateContext(),
       treeNode: new Tree(this),
       children: {},
       childrenKeys: [],

src/lib/Tree.spec.ts

@@ -0,0 +1,78 @@
+import { ITree, Tree } from "./Tree";
+
+
+describe('Tree', () => {
+  const createChildData = () => ({
+    iterate: jest.fn(),
+  } as ITree)
+  test('Creation of a Tree object', () => {
+    const tree = new Tree(createChildData());
+    expect(tree).toBeInstanceOf(Tree);
+  });
+
+  test('Adding and removing child elements', () => {
+    const parent = new Tree(createChildData());
+    const child1 = new Tree(createChildData());
+    const child2 = new Tree(createChildData());
+
+    parent.append(child1);
+    parent.append(child2);
+
+    expect(parent.children.has(child1)).toBe(true);
+    expect(parent.children.has(child2)).toBe(true);
+
+    parent.remove(child1);
+    parent.remove(child2);
+
+    expect(parent.children.size).toBe(0);
+  });
+
+  test('Changing the rendering order', () => {
+    const parent = new Tree(createChildData());
+    const child1 = new Tree(createChildData());
+    const child2 = new Tree(createChildData());
+
+    parent.append(child1);
+    parent.append(child2);
+
+    child1.renderOrder = 1;
+    child2.renderOrder = 2;
+
+    expect(child1.renderOrder).toBe(1);
+    expect(child2.renderOrder).toBe(2);
+  });
+
+  test('Changing the z-index', () => {
+    const parent = new Tree(createChildData());
+    const child1 = new Tree(createChildData());
+    const child2 = new Tree(createChildData());
+
+    parent.append(child1);
+    parent.append(child2);
+
+    child1.zIndex = 1;
+    child2.zIndex = 2;
+
+    expect(child1.zIndex).toBe(1);
+    expect(child2.zIndex).toBe(2);
+  });
+
+  test('Traversing the tree', () => {
+    const root = new Tree(createChildData());
+    const child1 = new Tree(createChildData());
+    const child2 = new Tree(createChildData());
+
+    root.append(child1);
+    root.append(child2);
+
+    let count = 0;
+
+    root.traverseDown((node) => {
+      count++;
+      expect(node).toBeInstanceOf(Tree);
+      return true;
+    });
+
+    expect(count).toBe(3); // Including the root
+  });
+});

src/lib/Tree.ts

@@ -1,13 +1,16 @@
-import { CoreComponent } from "./CoreComponent";
 import { cache } from "./utils";
 
-type TIterator = (Node) => boolean;
+type TIterator = (node: Tree) => boolean;
 
-export class Tree<T extends CoreComponent = CoreComponent> {
+export interface ITree {
+  iterate(): void;
+}
+
+export class Tree<T extends ITree = ITree> {
   public data: T;
   public parent: Tree;
 
-  protected children: Set<Tree> = new Set();
+  public children: Set<Tree> = new Set();
 
   private childrenArray: Tree[] = [];
 

src/plugins/minimap/layer.ts

@@ -1,5 +1,4 @@
 import { TGraphLayerContext } from "../../components/canvas/layers/graphLayer/GraphLayer";
-import { Component } from "../../lib";
 import { Layer, LayerContext, LayerProps } from "../../services/Layer";
 import { computeCssVariable, noop } from "../../utils/functions";
 import { dragListener } from "../../utils/functions/dragListener";

src/services/camera/Camera.ts

@@ -1,5 +1,5 @@
 import { TGraphLayerContext } from "../../components/canvas/layers/graphLayer/GraphLayer";
-import { Component, CoreComponent } from "../../lib";
+import { Component } from "../../lib";
 import { EventedComponent } from "../../mixins/withEvents";
 import { getXY, isMetaKeyEvent, isTrackpadWheelEvent, isWindows } from "../../utils/functions";
 import { clamp } from "../../utils/functions/clamp";

src/services/newBlock/NewBlockComponent.ts

@@ -1,4 +1,4 @@
-import { OverLayer, TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer";
+import { TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer";
 import { Component } from "../../lib/Component";
 import { getXY } from "../../utils/functions";
 import { render } from "../../utils/renderers/render";

src/services/newConnection/NewConnection.ts

@@ -1,6 +1,6 @@
 import { Anchor } from "../../components/canvas/anchors";
 import { Block } from "../../components/canvas/blocks/Block";
-import { OverLayer, TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer";
+import { TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer";
 import { Component } from "../../lib/Component";
 import { getXY } from "../../utils/functions";
 import { render } from "../../utils/renderers/render";

src/services/selection/SelectionArea.ts

@@ -1,4 +1,4 @@
-import { OverLayer, TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer";
+import { TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer";
 import { Component } from "../../lib/Component";
 import { getXY } from "../../utils/functions";
 import { render } from "../../utils/renderers/render";