fully work

Author: draedful

package-lock.json

@@ -19,8 +19,8 @@
   "scripts": {
     "dev": "npm run storybook",
     "build": "npm run clean && npm run build:graph && npm run build:react",
-    "build:graph": "npm run clean:graph && rollup -c --config-package graph",
-    "build:react": "npm run clean:react && rollup -c --config-package react",
+    "build:graph": "npm run clean:graph && rollup -c --config-package graph && tsc --project packages/graph/tsconfig.json --emitDeclarationOnly",
+    "build:react": "npm run clean:react && rollup -c --config-package react && tsc --project packages/react/tsconfig.json --emitDeclarationOnly",
     "watch": "rollup -c --watch",
     "typecheck": "tsc -b",
     "typecheck:watch": "tsc -b --watch",

package.json

@@ -24,6 +24,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.js"
+    },
     "./devtools": {
       "types": "./dist/plugins/devtools/index.d.ts",
       "default": "./dist/plugins/devtools/index.js"

packages/graph/package.json

@@ -473,14 +473,13 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
   }
 
   protected renderBody(ctx: CanvasRenderingContext2D) {
-    const colors = this.context.colors;
-    if (!colors) return;
-
-    ctx.fillStyle = colors.block.background;
-    ctx.strokeStyle = colors.block.border;
+    ctx.fillStyle = this.context.colors.block.background;
+    ctx.strokeStyle = this.context.colors.block.border;
 
     ctx.fillRect(this.state.x, this.state.y, this.state.width, this.state.height);
-    this.renderStroke(this.state.selected ? colors.block.selectedBorder : colors.block.border);
+    this.renderStroke(
+      this.state.selected ? this.context.colors.block.selectedBorder : this.context.colors.block.border
+    );
   }
 
   public renderSchematicView(ctx: CanvasRenderingContext2D) {

packages/graph/src/components/canvas/blocks/Block.ts

@@ -1,13 +1,13 @@
 import { Component } from "../../../lib/Component";
-import { CoreComponent } from "../../../lib/CoreComponent";
+import { ComponentConstructor, CoreComponent } from "../../../lib/CoreComponent";
 import { BlockState } from "../../../store/block/Block";
 import { TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
 
 import { Block } from "./Block";
 
 export class Blocks extends Component {
   protected blocks: BlockState[] = [];
-  protected blocksView: Record<string, unknown> = {};
+  protected blocksView: Record<string, ComponentConstructor<Block>> = {};
 
   public declare context: TGraphLayerContext;
 
@@ -24,7 +24,7 @@ export class Blocks extends Component {
   }
 
   protected getFontScale() {
-    return this.context.graph.rootStore.settings.getConfigFlag("scaleFontSize");
+    return this.context.graph.rootStore.settings.getConfigFlag("scaleFontSize") as number;
   }
 
   protected rerender() {
@@ -59,7 +59,8 @@ export class Blocks extends Component {
 
   protected updateChildren() {
     return this.blocks.map((block, index) => {
-      return (this.blocksView[block.$state.value.is] || Block).create(
+      const Component = this.blocksView[block.$state.value.is] || Block;
+      return Component.create(
         {
           id: block.id,
           initialIndex: index,

packages/graph/src/components/canvas/blocks/Blocks.ts

@@ -65,13 +65,13 @@ export class BlockController {
         autopanning: true,
       })
         .on(EVENTS.DRAG_START, (_event: MouseEvent) => {
-          dispatchEvents(draggingElements, createCustomDragEvent(EVENTS.DRAG_START, _event));
+          dispatchEvents(draggingElements as EventTarget[], createCustomDragEvent(EVENTS.DRAG_START, _event));
         })
         .on(EVENTS.DRAG_UPDATE, (_event: MouseEvent) => {
-          dispatchEvents(draggingElements, createCustomDragEvent(EVENTS.DRAG_UPDATE, _event));
+          dispatchEvents(draggingElements as EventTarget[], createCustomDragEvent(EVENTS.DRAG_UPDATE, _event));
         })
         .on(EVENTS.DRAG_END, (_event: MouseEvent) => {
-          dispatchEvents(draggingElements, createCustomDragEvent(EVENTS.DRAG_END, _event));
+          dispatchEvents(draggingElements as EventTarget[], createCustomDragEvent(EVENTS.DRAG_END, _event));
         });
     });
   }

packages/graph/src/components/canvas/blocks/controllers/BlockController.ts

@@ -41,9 +41,7 @@ export type GraphMouseEvent = CustomEvent<{
 }>;
 
 export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
-  public declare $: Component & { camera: Camera };
-
-  private camera: ICamera;
+  public declare $: Record<string, Component | undefined> & { camera: Camera };
 
   private targetComponent: EventedComponent;
 
@@ -89,8 +87,6 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
       this.attachListeners();
     }
 
-    this.camera = this.props.camera;
-
     this.performRender = this.performRender.bind(this);
   }
 

packages/graph/src/components/canvas/layers/graphLayer/GraphLayer.ts

@@ -140,7 +140,7 @@ export class NewBlockLayer extends Layer<
     const colors = this.context.colors;
     render(this.context.ctx, (ctx) => {
       ctx.beginPath();
-      ctx.fillStyle = this.props.ghostBackground || colors?.block.border || "#ccc";
+      ctx.fillStyle = this.props.ghostBackground || colors.block.border || "#ccc";
 
       // Draw each block ghost
       for (const blockState of this.blockStates) {

packages/graph/src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts

@@ -6,7 +6,14 @@ export * from "./graph";
 export type { ZoomConfig } from "./api/PublicGraphApi";
 export type { TGraphColors, TGraphConstants, TMouseWheelBehavior } from "./graphConfig";
 export { initGraphColors, initGraphConstants } from "./graphConfig";
-export { type UnwrapGraphEventsDetail, type SelectionEvent } from "./graphEvents";
+export type {
+  GraphEventsDefinitions,
+  UnwrapGraphEvents,
+  UnwrapGraphEventsDetail,
+  UnwrapBaseGraphEvents,
+  UnwrapBaseGraphEventsDetail,
+  SelectionEvent,
+} from "./graphEvents";
 export * from "./plugins";
 export { ECameraScaleLevel } from "./services/camera/CameraService";
 export * from "./services/Layer";
@@ -16,17 +23,11 @@ export type { BlockState, TBlockId } from "./store/block/Block";
 export type { ConnectionState, TConnection, TConnectionId } from "./store/connection/ConnectionState";
 export type { AnchorState } from "./store/anchor/Anchor";
 export { ECanChangeBlockGeometry } from "./store/settings";
-export { type TMeasureTextOptions, type TWrapText, measureText } from "./utils/functions/text";
 export { ESchedulerPriority } from "./lib/Scheduler";
-export { debounce, throttle, schedule } from "./utils/functions";
-export type { RecursivePartial, Constructor } from "./utils/types/helpers";
-export * from "./utils/renderers/text";
-export { renderSVG } from "./utils/renderers/svgPath";
 export { random } from "./components/canvas/blocks/generate";
-export { EVENTS } from "./utils/types/events";
-export { type TPoint, type TRect } from "./utils/types/shapes";
 export { ESelectionStrategy } from "./services/selection/types";
-export * from "./utils/shapes";
+export { type HitBoxData } from "./services/HitTest";
+export { isPointInStroke } from "./components/canvas/connections/bezierHelpers";
 
 export * from "./components/canvas/groups";
 

packages/graph/src/index.ts

@@ -1,3 +1,5 @@
+import { Constructor } from "../utils/types/helpers";
+
 import { CoreComponent, CoreComponentContext, CoreComponentProps } from "./CoreComponent";
 import { assign } from "./utils";