feat(core): implement figma controls

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/store/hooks.ts

@@ -31,6 +31,11 @@ export const createHooks = (): FlowHooks => ({
   selectionDrag: createEventHook(),
   selectionDragStop: createEventHook(),
   selectionContextMenu: createEventHook(),
+  selectionStart: createEventHook(),
+  selectionEnd: createEventHook(),
+  viewportChangeStart: createEventHook(),
+  viewportChange: createEventHook(),
+  viewportChangeEnd: createEventHook(),
   paneScroll: createEventHook(),
   paneClick: createEventHook(),
   paneContextMenu: createEventHook(),

packages/core/src/store/state.ts

@@ -1,5 +1,5 @@
 import type { DefaultEdgeTypes, DefaultNodeTypes, FlowOptions, State } from '~/types'
-import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '~/types'
+import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '~/types'
 import {
   BezierEdge,
   DefaultNode,
@@ -56,6 +56,8 @@ const defaultState = (): State => ({
     [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
   ],
 
+  selectionMode: SelectionMode.Full,
+  paneDragging: false,
   preventScrolling: true,
   zoomOnScroll: true,
   zoomOnPinch: true,
@@ -71,6 +73,8 @@ const defaultState = (): State => ({
   nodesSelectionActive: false,
   userSelectionActive: false,
 
+  userSelectionRect: null,
+
   defaultMarkerColor: '#b1b1b7',
   connectionLineStyle: {},
   connectionLineType: ConnectionLineType.Bezier,
@@ -94,11 +98,13 @@ const defaultState = (): State => ({
   nodesDraggable: true,
   elementsSelectable: true,
   selectNodesOnDrag: true,
+  selectionOnDrag: false,
   multiSelectionActive: false,
   selectionKeyCode: 'Shift',
   multiSelectionKeyCode: 'Meta',
   zoomActivationKeyCode: 'Meta',
   deleteKeyCode: 'Backspace',
+  panActivationKeyCode: 'Space',
 
   hooks: createHooks(),