feat(utils): add vanilla drag and panzoom (#3108)

* refactor(panzoom): create vanilla helper

* feat(svelte): add interaction example

* refactor(panzoom): cleanup

* Update function-runner.ts

* refactor(panzoom): cleanup

* refactor(panzoom): rename functions

* feat(utils): add vanilla drag helper (#3107)

* feat(utils): add vanilla drag helper

* refactor(drag): cleanup

* refactor(drag): cleanup

* chore(packages): cleanup

* refactor(panzoom): cleanup and simplify

packages/system/src/types/general.ts

@@ -2,8 +2,9 @@
 import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
 
 import type { XYPosition, Rect } from './utils';
-import type { BaseNode, NodeOrigin } from './nodes';
+import type { BaseNode, NodeDragItem, NodeOrigin } from './nodes';
 import type { HandleType } from './handles';
+import { PanZoomInstance } from './panzoom';
 
 export type Project = (position: XYPosition) => XYPosition;
 
@@ -39,8 +40,7 @@ export type FitViewParamsBase<NodeType extends BaseNode> = {
   nodes: NodeType[];
   width: number;
   height: number;
-  d3Zoom: D3ZoomInstance;
-  d3Selection: D3SelectionInstance;
+  panZoom: PanZoomInstance;
   minZoom: number;
   maxZoom: number;
   nodeOrigin?: NodeOrigin;
@@ -117,3 +117,10 @@ export type SelectionRect = Rect & {
 };
 
 export type OnError = (id: string, message: string) => void;
+
+export type UpdateNodePositions = (
+  dragItems: NodeDragItem[] | BaseNode[],
+  positionChanged?: boolean,
+  dragging?: boolean
+) => void;
+export type PanBy = (delta: XYPosition) => boolean;

packages/system/src/types/index.ts

@@ -3,3 +3,4 @@ export * from './nodes';
 export * from './edges';
 export * from './handles';
 export * from './utils';
+export * from './panzoom';

packages/system/src/types/nodes.ts

@@ -84,3 +84,7 @@ export type NodeDragItem = {
 };
 
 export type NodeOrigin = [number, number];
+
+export type OnNodeDrag = (event: MouseEvent, node: BaseNode, nodes: BaseNode[]) => void;
+
+export type OnSelectionDrag = (event: MouseEvent, nodes: BaseNode[]) => void;

packages/system/src/types/panzoom.ts

@@ -0,0 +1,56 @@
+import { ZoomTransform } from 'd3-zoom';
+import { CoordinateExtent, PanOnScrollMode, Transform, Viewport } from './';
+
+export type OnDraggingChange = (dragging: boolean) => void;
+export type OnTransformChange = (transform: Transform) => void;
+
+export type PanZoomParams = {
+  domNode: Element;
+  minZoom: number;
+  maxZoom: number;
+  viewport: Viewport;
+  translateExtent: CoordinateExtent;
+  onTransformChange: OnTransformChange;
+  onDraggingChange: OnDraggingChange;
+  onPanZoomStart?: OnPanZoom;
+  onPanZoom?: OnPanZoom;
+  onPanZoomEnd?: OnPanZoom;
+};
+
+export type PanZoomTransformOptions = {
+  duration?: number;
+};
+
+export type OnPanZoom = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
+
+export type PanZoomUpdateOptions = {
+  noWheelClassName: string;
+  noPanClassName: string;
+  onPaneContextMenu?: (event: MouseEvent) => void;
+  preventScrolling: boolean;
+  panOnScroll: boolean;
+  panOnDrag: boolean | number[];
+  panOnScrollMode: PanOnScrollMode;
+  panOnScrollSpeed: number;
+  userSelectionActive: boolean;
+  zoomOnPinch: boolean;
+  zoomOnScroll: boolean;
+  zoomOnDoubleClick: boolean;
+  zoomActivationKeyPressed: boolean;
+};
+
+export type PanZoomInstance = {
+  update: (params: PanZoomUpdateOptions) => void;
+  destroy: () => void;
+  getViewport: () => Viewport;
+  setViewport: (viewport: Viewport, options?: PanZoomTransformOptions) => ZoomTransform | undefined;
+  setViewportConstrained: (
+    viewport: Viewport,
+    extent: CoordinateExtent,
+    translateExtent: CoordinateExtent
+  ) => ZoomTransform | undefined;
+  setScaleExtent: (scaleExtent: [number, number]) => void;
+  setTranslateExtent: (translateExtent: CoordinateExtent) => void;
+  scaleTo: (scale: number, options?: PanZoomTransformOptions) => void;
+  scaleBy: (factor: number, options?: PanZoomTransformOptions) => void;
+};