@flowgram.ai/free-layout-core 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/esm/typings/index.js

@@ -15,7 +15,7 @@ import {
 import "../chunk-DDJTYHXN.js";
 import {
   WorkflowOperationBaseService
-} from "../chunk-O4WKIIW2.js";
+} from "../chunk-3UW6BHP2.js";
 import "../chunk-EUXUH3YW.js";
 export {
   LineColors,

package/dist/esm/typings/workflow-operation.js

@@ -1,6 +1,6 @@
 import {
   WorkflowOperationBaseService
-} from "../chunk-O4WKIIW2.js";
+} from "../chunk-3UW6BHP2.js";
 import "../chunk-EUXUH3YW.js";
 export {
   WorkflowOperationBaseService

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 import { PlaygroundConfigEntity, CommandService, PlaygroundDragEvent, EntityData } from '@flowgram.ai/core';
 export { bindConfigEntity, useConfigEntity, useEntities, useEntityDataFromContext, useEntityFromContext, useListenEvents, usePlayground, usePlaygroundContainer, usePlaygroundContext, useRefresh, useService } from '@flowgram.ai/core';
 import { NodeFormProps } from '@flowgram.ai/node';
-import { FlowOperationBaseService, FlowNodeType, FlowOperationBaseServiceImpl, FlowNodeEntityOrId, FlowNodeEntity } from '@flowgram.ai/document';
-import { W as WorkflowJSON, L as LineCenterPoint, a as WorkflowDocument, b as WorkflowNodeEntity, c as WorkflowHoverService, d as WorkflowLinesManager, e as WorkflowSelectService, f as WorkflowDocumentOptions, g as LineEventProps, N as NodesDragEvent, h as WorkflowNodeJSON, i as WorkflowPortEntity, j as WorkflowLineEntity, O as OnDragLineEnd, k as LineRenderType, l as WorkflowLineRenderContribution, m as LinePosition } from './workflow-node-entity-B-9mEm2k.mjs';
-export { X as HoverPosition, F as LINE_HOVER_DISTANCE, x as LineColor, y as LineColors, w as LinePoint, v as LinePointLocation, u as LineType, C as NodesDragEndEvent, B as NodesDragStartEvent, D as NodesDraggingEvent, P as POINT_RADIUS, K as PORT_SIZE, p as WORKFLOW_LINE_ENTITY, Y as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, _ as WorkflowDocumentOptionsDefault, Z as WorkflowDocumentProvider, V as WorkflowEntityHoverable, H as WorkflowLineEntityOpts, I as WorkflowLineInfo, G as WorkflowLinePortInfo, z as WorkflowLineRenderContributionFactory, J as WorkflowLineUIState, T as WorkflowNodeLines, U as WorkflowNodeLinesData, t as WorkflowNodeMeta, S as WorkflowNodePortsData, M as WorkflowPort, R as WorkflowPortEntityOpts, n as WorkflowPortType, Q as WorkflowPorts, A as WorkflowSubCanvas, q as domReactToBounds, o as getPortEntityId, E as onDragLineEndParams } from './workflow-node-entity-B-9mEm2k.mjs';
+import { FlowNodeType, FlowOperationBaseServiceImpl, FlowNodeEntityOrId, FlowNodeEntity } from '@flowgram.ai/document';
+import { W as WorkflowJSON, L as LineCenterPoint, a as WorkflowDocument, b as WorkflowNodeEntity, c as WorkflowHoverService, d as WorkflowLinesManager, e as WorkflowSelectService, f as WorkflowDocumentOptions, g as LineEventProps, N as NodesDragEvent, h as WorkflowNodeJSON, i as WorkflowPortEntity, j as WorkflowLineEntity, O as OnDragLineEnd, k as LineRenderType, l as WorkflowLineRenderContribution, m as LinePosition } from './workflow-node-entity-DH5qlw7I.mjs';
+export { X as HoverPosition, F as LINE_HOVER_DISTANCE, x as LineColor, y as LineColors, w as LinePoint, v as LinePointLocation, u as LineType, C as NodesDragEndEvent, B as NodesDragStartEvent, D as NodesDraggingEvent, P as POINT_RADIUS, K as PORT_SIZE, p as WORKFLOW_LINE_ENTITY, Y as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, _ as WorkflowDocumentOptionsDefault, Z as WorkflowDocumentProvider, V as WorkflowEntityHoverable, H as WorkflowLineEntityOpts, I as WorkflowLineInfo, G as WorkflowLinePortInfo, z as WorkflowLineRenderContributionFactory, J as WorkflowLineUIState, T as WorkflowNodeLines, U as WorkflowNodeLinesData, t as WorkflowNodeMeta, S as WorkflowNodePortsData, M as WorkflowPort, R as WorkflowPortEntityOpts, n as WorkflowPortType, Q as WorkflowPorts, A as WorkflowSubCanvas, q as domReactToBounds, o as getPortEntityId, E as onDragLineEndParams } from './workflow-node-entity-DH5qlw7I.mjs';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
 import { IPoint, Rectangle, DisposableCollection, Disposable } from '@flowgram.ai/utils';
 export { compose, composeAsync, delay } from '@flowgram.ai/utils';
@@ -75,7 +75,7 @@ declare class WorkflowDragService {
     protected linesManager: WorkflowLinesManager;
     protected commandService: CommandService;
     protected selectService: WorkflowSelectService;
-    protected operationService: FlowOperationBaseService;
+    protected operationService: WorkflowOperationBaseService;
     readonly options: WorkflowDocumentOptions;
     private _onDragLineEventEmitter;
     readonly onDragLineEventChange: _flowgram_ai_utils.Event<LineEventProps>;
@@ -228,9 +228,11 @@ declare class WorkflowResetLayoutService {
 
 declare class WorkflowOperationBaseServiceImpl extends FlowOperationBaseServiceImpl implements WorkflowOperationBaseService {
     protected document: WorkflowDocument;
+    linesManager: WorkflowLinesManager;
     private onNodePostionUpdateEmitter;
     readonly onNodePostionUpdate: _flowgram_ai_utils.Event<NodePostionUpdateEvent>;
     updateNodePosition(nodeOrId: FlowNodeEntityOrId, position: IPoint): void;
+    fromJSON(json: WorkflowJSON): void;
 }
 
 /**
@@ -355,7 +357,7 @@ interface NodeRenderReturnType {
      * 更新节点的扩展数据
      * @param extInfo
      */
-    updateExtInfo<T = any>(extInfo: T): void;
+    updateExtInfo<T = any>(extInfo: T, fullUpdate?: boolean): void;
     /**
      * 展开/收起节点
      * @param expanded

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { PlaygroundConfigEntity, CommandService, PlaygroundDragEvent, EntityData } from '@flowgram.ai/core';
 export { bindConfigEntity, useConfigEntity, useEntities, useEntityDataFromContext, useEntityFromContext, useListenEvents, usePlayground, usePlaygroundContainer, usePlaygroundContext, useRefresh, useService } from '@flowgram.ai/core';
 import { NodeFormProps } from '@flowgram.ai/node';
-import { FlowOperationBaseService, FlowNodeType, FlowOperationBaseServiceImpl, FlowNodeEntityOrId, FlowNodeEntity } from '@flowgram.ai/document';
-import { W as WorkflowJSON, L as LineCenterPoint, a as WorkflowDocument, b as WorkflowNodeEntity, c as WorkflowHoverService, d as WorkflowLinesManager, e as WorkflowSelectService, f as WorkflowDocumentOptions, g as LineEventProps, N as NodesDragEvent, h as WorkflowNodeJSON, i as WorkflowPortEntity, j as WorkflowLineEntity, O as OnDragLineEnd, k as LineRenderType, l as WorkflowLineRenderContribution, m as LinePosition } from './workflow-node-entity-DvBGZ5Ve.js';
-export { X as HoverPosition, F as LINE_HOVER_DISTANCE, x as LineColor, y as LineColors, w as LinePoint, v as LinePointLocation, u as LineType, C as NodesDragEndEvent, B as NodesDragStartEvent, D as NodesDraggingEvent, P as POINT_RADIUS, K as PORT_SIZE, p as WORKFLOW_LINE_ENTITY, Y as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, _ as WorkflowDocumentOptionsDefault, Z as WorkflowDocumentProvider, V as WorkflowEntityHoverable, H as WorkflowLineEntityOpts, I as WorkflowLineInfo, G as WorkflowLinePortInfo, z as WorkflowLineRenderContributionFactory, J as WorkflowLineUIState, T as WorkflowNodeLines, U as WorkflowNodeLinesData, t as WorkflowNodeMeta, S as WorkflowNodePortsData, M as WorkflowPort, R as WorkflowPortEntityOpts, n as WorkflowPortType, Q as WorkflowPorts, A as WorkflowSubCanvas, q as domReactToBounds, o as getPortEntityId, E as onDragLineEndParams } from './workflow-node-entity-DvBGZ5Ve.js';
+import { FlowNodeType, FlowOperationBaseServiceImpl, FlowNodeEntityOrId, FlowNodeEntity } from '@flowgram.ai/document';
+import { W as WorkflowJSON, L as LineCenterPoint, a as WorkflowDocument, b as WorkflowNodeEntity, c as WorkflowHoverService, d as WorkflowLinesManager, e as WorkflowSelectService, f as WorkflowDocumentOptions, g as LineEventProps, N as NodesDragEvent, h as WorkflowNodeJSON, i as WorkflowPortEntity, j as WorkflowLineEntity, O as OnDragLineEnd, k as LineRenderType, l as WorkflowLineRenderContribution, m as LinePosition } from './workflow-node-entity-DWVtlA2a.js';
+export { X as HoverPosition, F as LINE_HOVER_DISTANCE, x as LineColor, y as LineColors, w as LinePoint, v as LinePointLocation, u as LineType, C as NodesDragEndEvent, B as NodesDragStartEvent, D as NodesDraggingEvent, P as POINT_RADIUS, K as PORT_SIZE, p as WORKFLOW_LINE_ENTITY, Y as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, _ as WorkflowDocumentOptionsDefault, Z as WorkflowDocumentProvider, V as WorkflowEntityHoverable, H as WorkflowLineEntityOpts, I as WorkflowLineInfo, G as WorkflowLinePortInfo, z as WorkflowLineRenderContributionFactory, J as WorkflowLineUIState, T as WorkflowNodeLines, U as WorkflowNodeLinesData, t as WorkflowNodeMeta, S as WorkflowNodePortsData, M as WorkflowPort, R as WorkflowPortEntityOpts, n as WorkflowPortType, Q as WorkflowPorts, A as WorkflowSubCanvas, q as domReactToBounds, o as getPortEntityId, E as onDragLineEndParams } from './workflow-node-entity-DWVtlA2a.js';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
 import { IPoint, Rectangle, DisposableCollection, Disposable } from '@flowgram.ai/utils';
 export { compose, composeAsync, delay } from '@flowgram.ai/utils';
@@ -75,7 +75,7 @@ declare class WorkflowDragService {
     protected linesManager: WorkflowLinesManager;
     protected commandService: CommandService;
     protected selectService: WorkflowSelectService;
-    protected operationService: FlowOperationBaseService;
+    protected operationService: WorkflowOperationBaseService;
     readonly options: WorkflowDocumentOptions;
     private _onDragLineEventEmitter;
     readonly onDragLineEventChange: _flowgram_ai_utils.Event<LineEventProps>;
@@ -228,9 +228,11 @@ declare class WorkflowResetLayoutService {
 
 declare class WorkflowOperationBaseServiceImpl extends FlowOperationBaseServiceImpl implements WorkflowOperationBaseService {
     protected document: WorkflowDocument;
+    linesManager: WorkflowLinesManager;
     private onNodePostionUpdateEmitter;
     readonly onNodePostionUpdate: _flowgram_ai_utils.Event<NodePostionUpdateEvent>;
     updateNodePosition(nodeOrId: FlowNodeEntityOrId, position: IPoint): void;
+    fromJSON(json: WorkflowJSON): void;
 }
 
 /**
@@ -355,7 +357,7 @@ interface NodeRenderReturnType {
      * 更新节点的扩展数据
      * @param extInfo
      */
-    updateExtInfo<T = any>(extInfo: T): void;
+    updateExtInfo<T = any>(extInfo: T, fullUpdate?: boolean): void;
     /**
      * 展开/收起节点
      * @param expanded

package/dist/index.js

@@ -225,6 +225,27 @@ var import_core5 = require("@flowgram.ai/core");
 var import_utils5 = require("@flowgram.ai/utils");
 var import_document3 = require("@flowgram.ai/document");
 var import_core4 = require("@flowgram.ai/core");
+
+// src/utils/location-config-to-point.ts
+function locationConfigToPoint(bounds, config, _offset = { x: 0, y: 0 }) {
+  const offset = { ..._offset };
+  if (config.left !== void 0) {
+    offset.x += typeof config.left === "string" ? parseFloat(config.left) * 0.01 * bounds.width : config.left;
+  } else if (config.right !== void 0) {
+    offset.x += bounds.width - (typeof config.right === "string" ? parseFloat(config.right) * 0.01 * bounds.width : config.right);
+  }
+  if (config.top !== void 0) {
+    offset.y += typeof config.top === "string" ? parseFloat(config.top) * 0.01 * bounds.height : config.top;
+  } else if (config.bottom !== void 0) {
+    offset.y += bounds.height - (typeof config.bottom === "string" ? parseFloat(config.bottom) * 0.01 * bounds.height : config.bottom);
+  }
+  return {
+    x: bounds.x + offset.x,
+    y: bounds.y + offset.y
+  };
+}
+
+// src/entities/workflow-port-entity.ts
 var PORT_SIZE = 24;
 var WorkflowPortEntity = class extends import_core4.Entity {
   constructor(opts) {
@@ -237,6 +258,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
     this.portType = opts.type;
     this._disabled = opts.disabled;
     this._offset = opts.offset;
+    this._locationConfig = opts.locationConfig;
     this._location = opts.location;
     this._size = opts.size;
     this.node = opts.node;
@@ -284,7 +306,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
     return "right";
   }
   get point() {
-    const { targetElement } = this;
+    const { targetElement, _locationConfig } = this;
     const { bounds } = this.node.getData(import_document3.FlowNodeTransformData);
     const location2 = this.location;
     if (targetElement) {
@@ -299,8 +321,14 @@ var WorkflowPortEntity = class extends import_core4.Entity {
         location: location2
       };
     }
-    let point = { x: 0, y: 0 };
+    if (_locationConfig) {
+      return {
+        ...locationConfigToPoint(bounds, _locationConfig, this._offset),
+        location: location2
+      };
+    }
     const offset = this._offset || { x: 0, y: 0 };
+    let point = { x: 0, y: 0 };
     switch (location2) {
       case "left":
         point = bounds.leftCenter;
@@ -413,6 +441,10 @@ var WorkflowPortEntity = class extends import_core4.Entity {
       this._offset = data.offset;
       changed = true;
     }
+    if (import_utils5.Compare.isChanged(data.locationConfig, this._locationConfig)) {
+      this._locationConfig = data.locationConfig;
+      changed = true;
+    }
     if (import_utils5.Compare.isChanged(data.size, this._size)) {
       this._size = data.size;
       changed = true;
@@ -1513,10 +1545,11 @@ function initFormDataFromJSON(node, json, isFirstCreate) {
 // src/workflow-document-option.ts
 var WorkflowDocumentOptions = Symbol("WorkflowDocumentOptions");
 var WorkflowDocumentOptionsDefault = {
-  cursors: {
-    grab: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC40ODczIDIuNjIzNzhDOS45MDczMSAyLjYyMzc4IDkuNDM3MTMgMy4wOTM5NiA5LjQzNzEzIDMuNjczOTZWNS4xNDM3NkM5LjM5NDI4IDQuNDAyNzQgOC43Nzk3OCAzLjgxNTA0IDguMDI4MDIgMy44MTUwNEM3LjI0ODQ4IDMuODE1MDQgNi42MTY1MyA0LjQ0Njk5IDYuNjE2NTMgNS4yMjY1M1YxMS44Mjg5TDUuNjc0MTggMTEuMDA0OUM1LjE1NDg3IDEwLjU1MDkgNC40MDk1IDEwLjQ2MzYgMy43OTkzOCAxMC43ODU1TDMuNjk2OTQgMTAuODM5NkMzLjA2MjE3IDExLjE3NDUgMi45MjI2IDEyLjAyMjggMy40MTY2MiAxMi41NDM0TDcuMzM5NTkgMTYuNjc3NVYxNy4zMjU5QzcuMzM5NTkgMTcuNzg2MiA3LjcxMjY5IDE4LjE1OTMgOC4xNzI5MiAxOC4xNTkzSDEzLjgwODRDMTQuMjY4NyAxOC4xNTkzIDE0LjY0MTcgMTcuNzg2MiAxNC42NDE3IDE3LjMyNTlWMTYuNzkzNUMxNS44MDk0IDE1LjY0ODUgMTYuNDY3MyAxNC4wODE5IDE2LjQ2NzMgMTIuNDQ2NVYxMS40OTY3TDE2LjQ2NzEgNi42MzY4NUMxNi40NjcxIDUuOTU2MyAxNS45MTU0IDUuNDA0NjEgMTUuMjM0OCA1LjQwNDYxQzE0LjU1NDMgNS40MDQ2MSAxNC4wMDI2IDUuOTU2MyAxNC4wMDI2IDYuNjM2ODVMMTQuMDAyMSA1LjA0NzI4QzE0LjAwMjEgNC4zNjY3MyAxMy40NTA0IDMuODE1MDQgMTIuNzY5OCAzLjgxNTA0QzEyLjA4OTMgMy44MTUwNCAxMS41Mzc2IDQuMzY2NzMgMTEuNTM3NiA1LjA0NzI4TDExLjUzNzUgMy42NzM5NUMxMS41Mzc1IDMuMDkzOTYgMTEuMDY3MyAyLjYyMzc4IDEwLjQ4NzMgMi42MjM3OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3NCAxLjM3NDAyQzExLjM2MTIgMS4zNzQwMiAxMi4xMjExIDEuODYxMTggMTIuNTEwNSAyLjU3ODY4QzEyLjU5NTggMi41Njk4MyAxMi42ODIzIDIuNTY1MjggMTIuNzcgMi41NjUyOEMxMy44Mjc4IDIuNTY1MjggMTQuNzMxMSAzLjIyNzAxIDE1LjA4ODUgNC4xNTkxMUMxNS4xMzcgNC4xNTYyOSAxNS4xODU4IDQuMTU0ODYgMTUuMjM1IDQuMTU0ODZDMTYuNjA1OSA0LjE1NDg2IDE3LjcxNzIgNS4yNjYxOSAxNy43MTcyIDYuNjM3MDlMMTcuNzE3NCAxMi40NDY3QzE3LjcxNzQgMTQuMjM1NSAxNy4wNjQ0IDE1Ljk1NTkgMTUuODkxOSAxNy4yOTA0VjE3LjMyNjJDMTUuODkxOSAxOC40NzY4IDE0Ljk1OTEgMTkuNDA5NSAxMy44MDg1IDE5LjQwOTVIOC4xNzMwNkM3LjAyMjQ3IDE5LjQwOTUgNi4wODk3MyAxOC40NzY4IDYuMDg5NzMgMTcuMzI2MlYxNy4xNzY0TDIuNTEwMDMgMTMuNDA0MUMxLjQ0NTk5IDEyLjI4MjggMS43NDY2IDEwLjQ1NTUgMy4xMTM3OSA5LjczNDI0TDMuMjE2MjQgOS42ODAxOUMzLjg5MTY4IDkuMzIzODMgNC42NjE4NSA5LjI1NDAxIDUuMzY2NjYgOS40NTE5OFY1LjIyNjc4QzUuMzY2NjYgMy43NTY4NyA2LjU1ODI2IDIuNTY1MjggOC4wMjgxNiAyLjU2NTI4QzguMTcyOTMgMi41NjUyOCA4LjMxNDk5IDIuNTc2ODQgOC40NTM0NyAyLjU5OTA3QzguODM5NDMgMS44NzA0MiA5LjYwNTQ2IDEuMzc0MDIgMTAuNDg3NCAxLjM3NDAyWk0xMi40NDc2IDMuODU3ODdWOS40NzY0NkMxMi40NDc2IDkuNzI4NTIgMTIuMjQzMyA5LjkzMjg1IDExLjk5MTMgOS45MzI4NUMxMS43MzkyIDkuOTMyODUgMTEuNTM0OSA5LjcyODUyIDExLjUzNDkgOS40NzY0NlYzLjc5NjU1QzExLjUzNDkgMy43Nzk1NiAxMS41MzU4IDMuNzYyNzcgMTEuNTM3NiAzLjc0NjI2VjMuNjc0MkMxMS41Mzc2IDMuNDMyODIgMTEuNDU2MiAzLjIxMDQ2IDExLjMxOTMgMy4wMzMwOUMxMS4xMjcyIDIuNzg0MjggMTAuODI2MSAyLjYyNDAyIDEwLjQ4NzQgMi42MjQwMkMxMC4xMjM4IDIuNjI0MDIgOS44MDMzMiAyLjgwODg2IDkuNjE0ODMgMy4wODk3QzkuNTAyNjkgMy4yNTY3OSA5LjQzNzI2IDMuNDU3ODUgOS40MzcyNiAzLjY3NDJWMy43ODU3M0M5LjQzNzM1IDMuNzg5MzMgOS40MzczOSAzLjc5Mjk0IDkuNDM3MzkgMy43OTY1NVY5LjkwMTdDOS40MzczOSAxMC4xNTM3IDkuMjMzMDYgMTAuMzU4MSA4Ljk4MTAxIDEwLjM1ODFDOC43Mjg5NSAxMC4zNTgxIDguNTI0NjIgMTAuMTUzNyA4LjUyNDYyIDkuOTAxN1YzLjkwNTA3QzguNDE3NzMgMy44NjQ5IDguMzA0NjggMy44MzczMiA4LjE4NzI2IDMuODI0MTVDOC4xMzUwNCAzLjgxODI5IDguMDgxOTUgMy44MTUyOCA4LjAyODE2IDMuODE1MjhDNy4yNDg2MSAzLjgxNTI4IDYuNjE2NjYgNC40NDcyMyA2LjYxNjY2IDUuMjI2NzhWMTEuODI5Mkw1LjY3NDMxIDExLjAwNTJDNS41Nzg2OCAxMC45MjE2IDUuNDc1MzcgMTAuODUwNCA1LjM2NjY2IDEwLjc5MTlDNC44ODUwNiAxMC41MzI5IDQuMjk3MjggMTAuNTIzMSAzLjc5OTUyIDEwLjc4NThMMy42OTcwNyAxMC44Mzk4QzMuMDYyMzEgMTEuMTc0NyAyLjkyMjczIDEyLjAyMzEgMy40MTY3NSAxMi41NDM3TDcuMzM5NzMgMTYuNjc3N1YxNy4zMjYyQzcuMzM5NzMgMTcuNzg2NCA3LjcxMjgyIDE4LjE1OTUgOC4xNzMwNiAxOC4xNTk1SDEzLjgwODVDMTQuMjY4OCAxOC4xNTk1IDE0LjY0MTkgMTcuNzg2NCAxNC42NDE5IDE3LjMyNjJWMTYuNzkzOEMxNS43Mzc5IDE1LjcxOSAxNi4zODQ3IDE0LjI3MjggMTYuNDYgMTIuNzQ3QzE2LjQ2NDEgMTIuNjY0MSAxNi40NjY1IDEyLjU4MDkgMTYuNDY3MiAxMi40OTc1TDE2LjQ2NzQgMTIuNDQ2N0wxNi40NjcyIDYuNjM3MDlDMTYuNDY3MiA1Ljk2MjMgMTUuOTI0OCA1LjQxNDE5IDE1LjI1MjIgNS40MDQ5N0wxNS4yMzUgNS40MDQ4NkMxNS4xMjQ2IDUuNDA0ODYgMTUuMDE3NyA1LjQxOTM2IDE0LjkxNTkgNS40NDY1NlY5LjYwMjI2QzE0LjkxNTkgOS44NTQzMSAxNC43MTE2IDEwLjA1ODYgMTQuNDU5NSAxMC4wNTg2QzE0LjIwNzUgMTAuMDU4NiAxNC4wMDMxIDkuODU0MzEgMTQuMDAzMSA5LjYwMjI2VjYuNjA1MTRDMTQuMDAyOSA2LjYxNTc2IDE0LjAwMjcgNi42MjY0MSAxNC4wMDI3IDYuNjM3MDlWOS4yNzcwNUwxNC4wMDIyIDUuMDQ3NTJDMTQuMDAyMiA0Ljg2OTEzIDEzLjk2NDMgNC42OTk2IDEzLjg5NjEgNC41NDY1M0MxMy43MDY0IDQuMTIwNzIgMTMuMjgyMiAzLjgyMjM1IDEyLjc4NzYgMy44MTU0MUwxMi43NyAzLjgxNTI4QzEyLjY1ODQgMy44MTUyOCAxMi41NTA0IDMuODMwMSAxMi40NDc2IDMuODU3ODdaIiBmaWxsPSIjMUQxQzIzIi8+Cjwvc3ZnPg=="), auto',
-    grabbing: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjYxODE3IDUuNTk4NzVDNi42MTgxNyA0LjgxOTIgNy4yNTAxMiA0LjE4NzI2IDguMDI5NjcgNC4xODcyNkM4Ljc3ODczIDQuMTg3MjYgOS4zOTE1MiA0Ljc3MDc1IDkuNDM4MjkgNS41MDgwMUM5LjQ1OTkyIDQuOTQ3MSA5LjkyMTQ3IDQuNDk5MDIgMTAuNDg3NyA0LjQ5OTAyQzExLjA2NzcgNC40OTkwMiAxMS41Mzc4IDQuOTY5MiAxMS41Mzc4IDUuNTQ5MTlWOC43NjI0NkwxMS41Mzc5IDYuNzExNUMxMS41Mzc5IDYuMDMwOTUgMTIuMDg5NiA1LjQ3OTI2IDEyLjc3MDIgNS40NzkyNkMxMy40NTA3IDUuNDc5MjYgMTQuMDAyNCA2LjAzMDk1IDE0LjAwMjQgNi43MTE1TDE0LjAwMjQgOC43NjI0NkwxNC4wMDI5IDguMDE5ODNDMTQuMDAyOSA3LjMzOTI5IDE0LjU1NDYgNi43ODc1OSAxNS4yMzUyIDYuNzg3NTlDMTUuOTE1NyA2Ljc4NzU5IDE2LjQ2NzQgNy4zMzkyOCAxNi40Njc0IDguMDE5ODNWMTEuNDk3TDE2LjQ2NzUgMTIuNDQ2N0MxNi40Njc1IDE0LjA4MjEgMTUuODA5NiAxNS42NDg3IDE0LjY0MiAxNi43OTM4VjE3LjMyNjJDMTQuNjQyIDE3Ljc4NjQgMTQuMjY4OSAxOC4xNTk1IDEzLjgwODcgMTguMTU5NUg4LjE3MzE3QzcuNzEyOTMgMTguMTU5NSA3LjMzOTg0IDE3Ljc4NjQgNy4zMzk4NCAxNy4zMjYyVjE1Ljk0MjRMNS4zNDU2MiAxNC43NTM0QzQuNTg5MjQgMTQuMzAyNCA0LjEyNTkxIDEzLjQ4NjcgNC4xMjU4OSAxMi42MDYxTDQuMTI1ODMgOS4yODM4M0M0LjEyNTgyIDguOTU0MjcgNC4zMjAwMyA4LjY1NTY2IDQuNjIxMjkgOC41MjIwNUw2LjYxODE3IDcuNjM2MzRWNS41OTg3NVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3OCAzLjI0OTAyQzExLjI3OTYgMy4yNDkwMiAxMS45Nzc4IDMuNjQ5MDIgMTIuMzkxNyA0LjI1Nzk2QzEyLjUxNTEgNC4yMzkwNiAxMi42NDE2IDQuMjI5MjYgMTIuNzcwMyA0LjIyOTI2QzEzLjcyMjQgNC4yMjkyNiAxNC41NDkzIDQuNzY1MzEgMTQuOTY1NyA1LjU1MjA3QzE1LjA1NDMgNS41NDI1IDE1LjE0NDIgNS41Mzc1OSAxNS4yMzUzIDUuNTM3NTlDMTYuNjA2MiA1LjUzNzU5IDE3LjcxNzYgNi42NDg5MyAxNy43MTc2IDguMDE5ODNMMTcuNzE3NyAxMi40NDY3QzE3LjcxNzcgMTQuMjM1NSAxNy4wNjQ3IDE1Ljk1NTkgMTUuODkyMSAxNy4yOTA0VjE3LjMyNjJDMTUuODkyMSAxOC40NzY4IDE0Ljk1OTQgMTkuNDA5NSAxMy44MDg4IDE5LjQwOTVIOC4xNzMzMkM3LjAyMjczIDE5LjQwOTUgNi4wODk5OCAxOC40NzY4IDYuMDg5OTggMTcuMzI2MlYxNi42NTI0TDQuNzA1NjMgMTUuODI3QzMuNTcxMDYgMTUuMTUwNSAyLjg3NjA3IDEzLjkyNzEgMi44NzYwNCAxMi42MDYxTDIuODc1OTggOS4yODM4NUMyLjg3NTk2IDguNDU5OTYgMy4zNjE0OSA3LjcxMzQ1IDQuMTE0NjIgNy4zNzk0TDUuMzY4MzIgNi44MjMzM1Y1LjU5ODc1QzUuMzY4MzIgNC4xMjg4NSA2LjU1OTkxIDIuOTM3MjYgOC4wMjk4MiAyLjkzNzI2QzguNjA4MzEgMi45MzcyNiA5LjE0MzU1IDMuMTIxNyA5LjU4MDA1IDMuNDM1MDVDOS44NTg1MyAzLjMxNTMyIDEwLjE2NTQgMy4yNDkwMiAxMC40ODc4IDMuMjQ5MDJaTTEyLjQ0NzkgNS41MjE4NlY5LjQ3NTU3QzEyLjQ0NzkgOS43Mjc2MiAxMi4yNDM2IDkuOTMxOTUgMTEuOTkxNiA5LjkzMTk1QzExLjc1NjggOS45MzE5NSAxMS41NjM0IDkuNzU0NjUgMTEuNTM4IDkuNTI2NjNDMTEuNTM2MSA5LjUwOTg3IDExLjUzNTIgOS40OTI4MyAxMS41MzUyIDkuNDc1NTdWNS40NzE1OEMxMS41MTU0IDUuMjAwODMgMTEuMzkzIDQuOTU4NTggMTEuMjA2NiA0Ljc4MzU4QzExLjAxODggNC42MDcxMSAxMC43NjU5IDQuNDk5MDIgMTAuNDg3OCA0LjQ5OTAyQzEwLjQ3NjYgNC40OTkwMiAxMC40NjU0IDQuNDk5MTkgMTAuNDU0MiA0LjQ5OTU0QzkuOTAzNDcgNC41MTY4NCA5LjQ1OTY0IDQuOTU4MjQgOS40Mzg0NCA1LjUwODAxQzkuNDM4MiA1LjUwNDMgOS40Mzc5NSA1LjUwMDU4IDkuNDM3NjkgNS40OTY4OFY5LjkwMjQzQzkuNDM3NjkgMTAuMTU0NSA5LjIzMzM2IDEwLjM1ODggOC45ODEzMSAxMC4zNTg4QzguNzI5MjUgMTAuMzU4OCA4LjUyNDkyIDEwLjE1NDUgOC41MjQ5MiA5LjkwMjQzVjQuMjc2NTNDOC4zNzA4NiA0LjIxODgyIDguMjA0MDIgNC4xODcyNiA4LjAyOTgyIDQuMTg3MjZDNy4yNTAyNyA0LjE4NzI2IDYuNjE4MzIgNC44MTkyIDYuNjE4MzIgNS41OTg3NUw2LjYxODI3IDkuOTc1OTlDNi42MTgyNyAxMC4yMjggNi40MTM5NCAxMC40MzI0IDYuMTYxODkgMTAuNDMyNEM1LjkwOTgzIDEwLjQzMjQgNS43MDU1IDEwLjIyOCA1LjcwNTUgOS45NzU5OVY4LjA0MTIyTDQuNjIxNDQgOC41MjIwNUM0LjMyMDE4IDguNjU1NjYgNC4xMjU5NyA4Ljk1NDI3IDQuMTI1OTggOS4yODM4M0w0LjEyNjA0IDEyLjYwNjFDNC4xMjYwNiAxMy40ODY3IDQuNTg5MzkgMTQuMzAyNCA1LjM0NTc2IDE0Ljc1MzRMNy4zMzk5OCAxNS45NDI0VjE3LjMyNjJDNy4zMzk5OCAxNy43ODY0IDcuNzEzMDggMTguMTU5NSA4LjE3MzMyIDE4LjE1OTVIMTMuODA4OEMxNC4yNjkgMTguMTU5NSAxNC42NDIxIDE3Ljc4NjQgMTQuNjQyMSAxNy4zMjYyVjE2Ljc5MzhDMTUuNzM4MSAxNS43MTkgMTYuMzg1IDE0LjI3MjggMTYuNDYwMyAxMi43NDdDMTYuNDY0NiAxMi42NiAxNi40NjcgMTIuNTcyOCAxNi40Njc2IDEyLjQ4NTRMMTYuNDY3NyAxMi40NDY3TDE2LjQ2NzYgOC4wMTk4M0MxNi40Njc2IDcuMzQ1MDQgMTUuOTI1MiA2Ljc5NjkzIDE1LjI1MjUgNi43ODc3MUwxNS4yMzUzIDYuNzg3NTlDMTUuMTI1IDYuNzg3NTkgMTUuMDE4IDYuODAyMSAxNC45MTYyIDYuODI5MzFWOS42MDEzNkMxNC45MTYyIDkuODUzNDIgMTQuNzExOSAxMC4wNTc3IDE0LjQ1OTggMTAuMDU3N0MxNC4yMDc4IDEwLjA1NzcgMTQuMDAzNCA5Ljg1MzQxIDE0LjAwMzQgOS42MDEzNlY3Ljk4OTg1QzE0LjAwMzIgNy45OTk4MiAxNC4wMDMxIDguMDA5ODEgMTQuMDAzMSA4LjAxOTgzTDE0LjAwMzQgOS42MDEzNkwxNC4wMDI1IDYuNzExNUMxNC4wMDI1IDYuNDQ5NzQgMTMuOTIwOSA2LjIwNzA1IDEzLjc4MTggNi4wMDc0OEMxMy41NjIgNS42OTI0MiAxMy4xOTg5IDUuNDg0ODMgMTIuNzg3IDUuNDc5MzdMMTIuNzcwMyA1LjQ3OTI2QzEyLjY1ODggNS40NzkyNiAxMi41NTA3IDUuNDk0MDggMTIuNDQ3OSA1LjUyMTg2WiIgZmlsbD0iIzFEMUMyMyIvPgo8L3N2Zz4="), auto'
-  },
+  // cursors: {
+  //   grab: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC40ODczIDIuNjIzNzhDOS45MDczMSAyLjYyMzc4IDkuNDM3MTMgMy4wOTM5NiA5LjQzNzEzIDMuNjczOTZWNS4xNDM3NkM5LjM5NDI4IDQuNDAyNzQgOC43Nzk3OCAzLjgxNTA0IDguMDI4MDIgMy44MTUwNEM3LjI0ODQ4IDMuODE1MDQgNi42MTY1MyA0LjQ0Njk5IDYuNjE2NTMgNS4yMjY1M1YxMS44Mjg5TDUuNjc0MTggMTEuMDA0OUM1LjE1NDg3IDEwLjU1MDkgNC40MDk1IDEwLjQ2MzYgMy43OTkzOCAxMC43ODU1TDMuNjk2OTQgMTAuODM5NkMzLjA2MjE3IDExLjE3NDUgMi45MjI2IDEyLjAyMjggMy40MTY2MiAxMi41NDM0TDcuMzM5NTkgMTYuNjc3NVYxNy4zMjU5QzcuMzM5NTkgMTcuNzg2MiA3LjcxMjY5IDE4LjE1OTMgOC4xNzI5MiAxOC4xNTkzSDEzLjgwODRDMTQuMjY4NyAxOC4xNTkzIDE0LjY0MTcgMTcuNzg2MiAxNC42NDE3IDE3LjMyNTlWMTYuNzkzNUMxNS44MDk0IDE1LjY0ODUgMTYuNDY3MyAxNC4wODE5IDE2LjQ2NzMgMTIuNDQ2NVYxMS40OTY3TDE2LjQ2NzEgNi42MzY4NUMxNi40NjcxIDUuOTU2MyAxNS45MTU0IDUuNDA0NjEgMTUuMjM0OCA1LjQwNDYxQzE0LjU1NDMgNS40MDQ2MSAxNC4wMDI2IDUuOTU2MyAxNC4wMDI2IDYuNjM2ODVMMTQuMDAyMSA1LjA0NzI4QzE0LjAwMjEgNC4zNjY3MyAxMy40NTA0IDMuODE1MDQgMTIuNzY5OCAzLjgxNTA0QzEyLjA4OTMgMy44MTUwNCAxMS41Mzc2IDQuMzY2NzMgMTEuNTM3NiA1LjA0NzI4TDExLjUzNzUgMy42NzM5NUMxMS41Mzc1IDMuMDkzOTYgMTEuMDY3MyAyLjYyMzc4IDEwLjQ4NzMgMi42MjM3OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3NCAxLjM3NDAyQzExLjM2MTIgMS4zNzQwMiAxMi4xMjExIDEuODYxMTggMTIuNTEwNSAyLjU3ODY4QzEyLjU5NTggMi41Njk4MyAxMi42ODIzIDIuNTY1MjggMTIuNzcgMi41NjUyOEMxMy44Mjc4IDIuNTY1MjggMTQuNzMxMSAzLjIyNzAxIDE1LjA4ODUgNC4xNTkxMUMxNS4xMzcgNC4xNTYyOSAxNS4xODU4IDQuMTU0ODYgMTUuMjM1IDQuMTU0ODZDMTYuNjA1OSA0LjE1NDg2IDE3LjcxNzIgNS4yNjYxOSAxNy43MTcyIDYuNjM3MDlMMTcuNzE3NCAxMi40NDY3QzE3LjcxNzQgMTQuMjM1NSAxNy4wNjQ0IDE1Ljk1NTkgMTUuODkxOSAxNy4yOTA0VjE3LjMyNjJDMTUuODkxOSAxOC40NzY4IDE0Ljk1OTEgMTkuNDA5NSAxMy44MDg1IDE5LjQwOTVIOC4xNzMwNkM3LjAyMjQ3IDE5LjQwOTUgNi4wODk3MyAxOC40NzY4IDYuMDg5NzMgMTcuMzI2MlYxNy4xNzY0TDIuNTEwMDMgMTMuNDA0MUMxLjQ0NTk5IDEyLjI4MjggMS43NDY2IDEwLjQ1NTUgMy4xMTM3OSA5LjczNDI0TDMuMjE2MjQgOS42ODAxOUMzLjg5MTY4IDkuMzIzODMgNC42NjE4NSA5LjI1NDAxIDUuMzY2NjYgOS40NTE5OFY1LjIyNjc4QzUuMzY2NjYgMy43NTY4NyA2LjU1ODI2IDIuNTY1MjggOC4wMjgxNiAyLjU2NTI4QzguMTcyOTMgMi41NjUyOCA4LjMxNDk5IDIuNTc2ODQgOC40NTM0NyAyLjU5OTA3QzguODM5NDMgMS44NzA0MiA5LjYwNTQ2IDEuMzc0MDIgMTAuNDg3NCAxLjM3NDAyWk0xMi40NDc2IDMuODU3ODdWOS40NzY0NkMxMi40NDc2IDkuNzI4NTIgMTIuMjQzMyA5LjkzMjg1IDExLjk5MTMgOS45MzI4NUMxMS43MzkyIDkuOTMyODUgMTEuNTM0OSA5LjcyODUyIDExLjUzNDkgOS40NzY0NlYzLjc5NjU1QzExLjUzNDkgMy43Nzk1NiAxMS41MzU4IDMuNzYyNzcgMTEuNTM3NiAzLjc0NjI2VjMuNjc0MkMxMS41Mzc2IDMuNDMyODIgMTEuNDU2MiAzLjIxMDQ2IDExLjMxOTMgMy4wMzMwOUMxMS4xMjcyIDIuNzg0MjggMTAuODI2MSAyLjYyNDAyIDEwLjQ4NzQgMi42MjQwMkMxMC4xMjM4IDIuNjI0MDIgOS44MDMzMiAyLjgwODg2IDkuNjE0ODMgMy4wODk3QzkuNTAyNjkgMy4yNTY3OSA5LjQzNzI2IDMuNDU3ODUgOS40MzcyNiAzLjY3NDJWMy43ODU3M0M5LjQzNzM1IDMuNzg5MzMgOS40MzczOSAzLjc5Mjk0IDkuNDM3MzkgMy43OTY1NVY5LjkwMTdDOS40MzczOSAxMC4xNTM3IDkuMjMzMDYgMTAuMzU4MSA4Ljk4MTAxIDEwLjM1ODFDOC43Mjg5NSAxMC4zNTgxIDguNTI0NjIgMTAuMTUzNyA4LjUyNDYyIDkuOTAxN1YzLjkwNTA3QzguNDE3NzMgMy44NjQ5IDguMzA0NjggMy44MzczMiA4LjE4NzI2IDMuODI0MTVDOC4xMzUwNCAzLjgxODI5IDguMDgxOTUgMy44MTUyOCA4LjAyODE2IDMuODE1MjhDNy4yNDg2MSAzLjgxNTI4IDYuNjE2NjYgNC40NDcyMyA2LjYxNjY2IDUuMjI2NzhWMTEuODI5Mkw1LjY3NDMxIDExLjAwNTJDNS41Nzg2OCAxMC45MjE2IDUuNDc1MzcgMTAuODUwNCA1LjM2NjY2IDEwLjc5MTlDNC44ODUwNiAxMC41MzI5IDQuMjk3MjggMTAuNTIzMSAzLjc5OTUyIDEwLjc4NThMMy42OTcwNyAxMC44Mzk4QzMuMDYyMzEgMTEuMTc0NyAyLjkyMjczIDEyLjAyMzEgMy40MTY3NSAxMi41NDM3TDcuMzM5NzMgMTYuNjc3N1YxNy4zMjYyQzcuMzM5NzMgMTcuNzg2NCA3LjcxMjgyIDE4LjE1OTUgOC4xNzMwNiAxOC4xNTk1SDEzLjgwODVDMTQuMjY4OCAxOC4xNTk1IDE0LjY0MTkgMTcuNzg2NCAxNC42NDE5IDE3LjMyNjJWMTYuNzkzOEMxNS43Mzc5IDE1LjcxOSAxNi4zODQ3IDE0LjI3MjggMTYuNDYgMTIuNzQ3QzE2LjQ2NDEgMTIuNjY0MSAxNi40NjY1IDEyLjU4MDkgMTYuNDY3MiAxMi40OTc1TDE2LjQ2NzQgMTIuNDQ2N0wxNi40NjcyIDYuNjM3MDlDMTYuNDY3MiA1Ljk2MjMgMTUuOTI0OCA1LjQxNDE5IDE1LjI1MjIgNS40MDQ5N0wxNS4yMzUgNS40MDQ4NkMxNS4xMjQ2IDUuNDA0ODYgMTUuMDE3NyA1LjQxOTM2IDE0LjkxNTkgNS40NDY1NlY5LjYwMjI2QzE0LjkxNTkgOS44NTQzMSAxNC43MTE2IDEwLjA1ODYgMTQuNDU5NSAxMC4wNTg2QzE0LjIwNzUgMTAuMDU4NiAxNC4wMDMxIDkuODU0MzEgMTQuMDAzMSA5LjYwMjI2VjYuNjA1MTRDMTQuMDAyOSA2LjYxNTc2IDE0LjAwMjcgNi42MjY0MSAxNC4wMDI3IDYuNjM3MDlWOS4yNzcwNUwxNC4wMDIyIDUuMDQ3NTJDMTQuMDAyMiA0Ljg2OTEzIDEzLjk2NDMgNC42OTk2IDEzLjg5NjEgNC41NDY1M0MxMy43MDY0IDQuMTIwNzIgMTMuMjgyMiAzLjgyMjM1IDEyLjc4NzYgMy44MTU0MUwxMi43NyAzLjgxNTI4QzEyLjY1ODQgMy44MTUyOCAxMi41NTA0IDMuODMwMSAxMi40NDc2IDMuODU3ODdaIiBmaWxsPSIjMUQxQzIzIi8+Cjwvc3ZnPg=="), auto',
+  //   grabbing:
+  //     'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjYxODE3IDUuNTk4NzVDNi42MTgxNyA0LjgxOTIgNy4yNTAxMiA0LjE4NzI2IDguMDI5NjcgNC4xODcyNkM4Ljc3ODczIDQuMTg3MjYgOS4zOTE1MiA0Ljc3MDc1IDkuNDM4MjkgNS41MDgwMUM5LjQ1OTkyIDQuOTQ3MSA5LjkyMTQ3IDQuNDk5MDIgMTAuNDg3NyA0LjQ5OTAyQzExLjA2NzcgNC40OTkwMiAxMS41Mzc4IDQuOTY5MiAxMS41Mzc4IDUuNTQ5MTlWOC43NjI0NkwxMS41Mzc5IDYuNzExNUMxMS41Mzc5IDYuMDMwOTUgMTIuMDg5NiA1LjQ3OTI2IDEyLjc3MDIgNS40NzkyNkMxMy40NTA3IDUuNDc5MjYgMTQuMDAyNCA2LjAzMDk1IDE0LjAwMjQgNi43MTE1TDE0LjAwMjQgOC43NjI0NkwxNC4wMDI5IDguMDE5ODNDMTQuMDAyOSA3LjMzOTI5IDE0LjU1NDYgNi43ODc1OSAxNS4yMzUyIDYuNzg3NTlDMTUuOTE1NyA2Ljc4NzU5IDE2LjQ2NzQgNy4zMzkyOCAxNi40Njc0IDguMDE5ODNWMTEuNDk3TDE2LjQ2NzUgMTIuNDQ2N0MxNi40Njc1IDE0LjA4MjEgMTUuODA5NiAxNS42NDg3IDE0LjY0MiAxNi43OTM4VjE3LjMyNjJDMTQuNjQyIDE3Ljc4NjQgMTQuMjY4OSAxOC4xNTk1IDEzLjgwODcgMTguMTU5NUg4LjE3MzE3QzcuNzEyOTMgMTguMTU5NSA3LjMzOTg0IDE3Ljc4NjQgNy4zMzk4NCAxNy4zMjYyVjE1Ljk0MjRMNS4zNDU2MiAxNC43NTM0QzQuNTg5MjQgMTQuMzAyNCA0LjEyNTkxIDEzLjQ4NjcgNC4xMjU4OSAxMi42MDYxTDQuMTI1ODMgOS4yODM4M0M0LjEyNTgyIDguOTU0MjcgNC4zMjAwMyA4LjY1NTY2IDQuNjIxMjkgOC41MjIwNUw2LjYxODE3IDcuNjM2MzRWNS41OTg3NVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3OCAzLjI0OTAyQzExLjI3OTYgMy4yNDkwMiAxMS45Nzc4IDMuNjQ5MDIgMTIuMzkxNyA0LjI1Nzk2QzEyLjUxNTEgNC4yMzkwNiAxMi42NDE2IDQuMjI5MjYgMTIuNzcwMyA0LjIyOTI2QzEzLjcyMjQgNC4yMjkyNiAxNC41NDkzIDQuNzY1MzEgMTQuOTY1NyA1LjU1MjA3QzE1LjA1NDMgNS41NDI1IDE1LjE0NDIgNS41Mzc1OSAxNS4yMzUzIDUuNTM3NTlDMTYuNjA2MiA1LjUzNzU5IDE3LjcxNzYgNi42NDg5MyAxNy43MTc2IDguMDE5ODNMMTcuNzE3NyAxMi40NDY3QzE3LjcxNzcgMTQuMjM1NSAxNy4wNjQ3IDE1Ljk1NTkgMTUuODkyMSAxNy4yOTA0VjE3LjMyNjJDMTUuODkyMSAxOC40NzY4IDE0Ljk1OTQgMTkuNDA5NSAxMy44MDg4IDE5LjQwOTVIOC4xNzMzMkM3LjAyMjczIDE5LjQwOTUgNi4wODk5OCAxOC40NzY4IDYuMDg5OTggMTcuMzI2MlYxNi42NTI0TDQuNzA1NjMgMTUuODI3QzMuNTcxMDYgMTUuMTUwNSAyLjg3NjA3IDEzLjkyNzEgMi44NzYwNCAxMi42MDYxTDIuODc1OTggOS4yODM4NUMyLjg3NTk2IDguNDU5OTYgMy4zNjE0OSA3LjcxMzQ1IDQuMTE0NjIgNy4zNzk0TDUuMzY4MzIgNi44MjMzM1Y1LjU5ODc1QzUuMzY4MzIgNC4xMjg4NSA2LjU1OTkxIDIuOTM3MjYgOC4wMjk4MiAyLjkzNzI2QzguNjA4MzEgMi45MzcyNiA5LjE0MzU1IDMuMTIxNyA5LjU4MDA1IDMuNDM1MDVDOS44NTg1MyAzLjMxNTMyIDEwLjE2NTQgMy4yNDkwMiAxMC40ODc4IDMuMjQ5MDJaTTEyLjQ0NzkgNS41MjE4NlY5LjQ3NTU3QzEyLjQ0NzkgOS43Mjc2MiAxMi4yNDM2IDkuOTMxOTUgMTEuOTkxNiA5LjkzMTk1QzExLjc1NjggOS45MzE5NSAxMS41NjM0IDkuNzU0NjUgMTEuNTM4IDkuNTI2NjNDMTEuNTM2MSA5LjUwOTg3IDExLjUzNTIgOS40OTI4MyAxMS41MzUyIDkuNDc1NTdWNS40NzE1OEMxMS41MTU0IDUuMjAwODMgMTEuMzkzIDQuOTU4NTggMTEuMjA2NiA0Ljc4MzU4QzExLjAxODggNC42MDcxMSAxMC43NjU5IDQuNDk5MDIgMTAuNDg3OCA0LjQ5OTAyQzEwLjQ3NjYgNC40OTkwMiAxMC40NjU0IDQuNDk5MTkgMTAuNDU0MiA0LjQ5OTU0QzkuOTAzNDcgNC41MTY4NCA5LjQ1OTY0IDQuOTU4MjQgOS40Mzg0NCA1LjUwODAxQzkuNDM4MiA1LjUwNDMgOS40Mzc5NSA1LjUwMDU4IDkuNDM3NjkgNS40OTY4OFY5LjkwMjQzQzkuNDM3NjkgMTAuMTU0NSA5LjIzMzM2IDEwLjM1ODggOC45ODEzMSAxMC4zNTg4QzguNzI5MjUgMTAuMzU4OCA4LjUyNDkyIDEwLjE1NDUgOC41MjQ5MiA5LjkwMjQzVjQuMjc2NTNDOC4zNzA4NiA0LjIxODgyIDguMjA0MDIgNC4xODcyNiA4LjAyOTgyIDQuMTg3MjZDNy4yNTAyNyA0LjE4NzI2IDYuNjE4MzIgNC44MTkyIDYuNjE4MzIgNS41OTg3NUw2LjYxODI3IDkuOTc1OTlDNi42MTgyNyAxMC4yMjggNi40MTM5NCAxMC40MzI0IDYuMTYxODkgMTAuNDMyNEM1LjkwOTgzIDEwLjQzMjQgNS43MDU1IDEwLjIyOCA1LjcwNTUgOS45NzU5OVY4LjA0MTIyTDQuNjIxNDQgOC41MjIwNUM0LjMyMDE4IDguNjU1NjYgNC4xMjU5NyA4Ljk1NDI3IDQuMTI1OTggOS4yODM4M0w0LjEyNjA0IDEyLjYwNjFDNC4xMjYwNiAxMy40ODY3IDQuNTg5MzkgMTQuMzAyNCA1LjM0NTc2IDE0Ljc1MzRMNy4zMzk5OCAxNS45NDI0VjE3LjMyNjJDNy4zMzk5OCAxNy43ODY0IDcuNzEzMDggMTguMTU5NSA4LjE3MzMyIDE4LjE1OTVIMTMuODA4OEMxNC4yNjkgMTguMTU5NSAxNC42NDIxIDE3Ljc4NjQgMTQuNjQyMSAxNy4zMjYyVjE2Ljc5MzhDMTUuNzM4MSAxNS43MTkgMTYuMzg1IDE0LjI3MjggMTYuNDYwMyAxMi43NDdDMTYuNDY0NiAxMi42NiAxNi40NjcgMTIuNTcyOCAxNi40Njc2IDEyLjQ4NTRMMTYuNDY3NyAxMi40NDY3TDE2LjQ2NzYgOC4wMTk4M0MxNi40Njc2IDcuMzQ1MDQgMTUuOTI1MiA2Ljc5NjkzIDE1LjI1MjUgNi43ODc3MUwxNS4yMzUzIDYuNzg3NTlDMTUuMTI1IDYuNzg3NTkgMTUuMDE4IDYuODAyMSAxNC45MTYyIDYuODI5MzFWOS42MDEzNkMxNC45MTYyIDkuODUzNDIgMTQuNzExOSAxMC4wNTc3IDE0LjQ1OTggMTAuMDU3N0MxNC4yMDc4IDEwLjA1NzcgMTQuMDAzNCA5Ljg1MzQxIDE0LjAwMzQgOS42MDEzNlY3Ljk4OTg1QzE0LjAwMzIgNy45OTk4MiAxNC4wMDMxIDguMDA5ODEgMTQuMDAzMSA4LjAxOTgzTDE0LjAwMzQgOS42MDEzNkwxNC4wMDI1IDYuNzExNUMxNC4wMDI1IDYuNDQ5NzQgMTMuOTIwOSA2LjIwNzA1IDEzLjc4MTggNi4wMDc0OEMxMy41NjIgNS42OTI0MiAxMy4xOTg5IDUuNDg0ODMgMTIuNzg3IDUuNDc5MzdMMTIuNzcwMyA1LjQ3OTI2QzEyLjY1ODggNS40NzkyNiAxMi41NTA3IDUuNDk0MDggMTIuNDQ3OSA1LjUyMTg2WiIgZmlsbD0iIzFEMUMyMyIvPgo8L3N2Zz4="), auto',
+  // },
   fromNodeJSON(node, json, isFirstCreate) {
     initFormDataFromJSON(node, json, isFirstCreate);
     return;
@@ -2104,6 +2137,9 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
     this._loading = false;
     this.onLoadedEmitter.fire();
   }
+  /**
+   * @deprecated use `ctx.operation.fromJSON` instead
+   */
   async reload(json, delayTime = 0) {
     if (this.disposed) return;
     this._loading = true;
@@ -2124,7 +2160,7 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
       edges: json.edges ?? []
     };
     this.entityManager.changeEntityLocked = true;
-    this.renderJSON(workflowJSON);
+    this.batchAddFromJSON(workflowJSON);
     this.entityManager.changeEntityLocked = false;
     this.transformer.loading = false;
     if (fireRender) {
@@ -2144,9 +2180,17 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
    * 创建流程节点
    * @param json
    */
-  createWorkflowNode(json, isClone = false, parentId) {
+  createWorkflowNode(json, isClone = false, parentID) {
+    return this._createWorkflowNode(json, { parentID });
+  }
+  /**
+   * 创建流程节点
+   * @param json
+   */
+  _createWorkflowNode(json, options) {
+    const { parentID, onNodeCreated, onEdgeCreated } = options ?? {};
     const isExistedNode = this.getNode(json.id);
-    const parent = this.getNode(parentId ?? this.root.id) ?? this.root;
+    const parent = this.getNode(parentID ?? this.root.id) ?? this.root;
     const node = this.addNode(
       {
         ...json,
@@ -2173,15 +2217,19 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
     node.getData(import_core14.TransformData).update({
       position
     });
-    if (formMeta && formData && !formData.formModel.initialized) {
-      formData.createForm(formMeta, json.data);
-      formData.onDataChange(() => {
-        this.fireContentChange({
-          type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
-          toJSON: () => formData.toJSON(),
-          entity: node
+    if (formMeta && formData) {
+      if (!formData.formModel.initialized) {
+        formData.createForm(formMeta, json.data);
+        formData.onDataChange(() => {
+          this.fireContentChange({
+            type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
+            toJSON: () => formData.toJSON(),
+            entity: node
+          });
         });
-      });
+      } else {
+        formData.updateFormValues(json.data);
+      }
     }
     const positionData = node.getData(import_core14.PositionData);
     if (!isExistedNode) {
@@ -2220,11 +2268,12 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
       });
     }
     if (json.blocks) {
-      this.renderJSON(
+      this.batchAddFromJSON(
         { nodes: json.blocks, edges: json.edges ?? [] },
         {
           parent: node,
-          isClone
+          onNodeCreated,
+          onEdgeCreated
         }
       );
     }
@@ -2356,7 +2405,7 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
         throw new Error(`[WorkflowDocument.createWorkflowNodeByType] Node Id "${id}" duplicated.`);
       }
     }
-    return this.createWorkflowNode(
+    return this._createWorkflowNode(
       {
         ...json,
         id,
@@ -2367,13 +2416,15 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
         blocks: json?.blocks,
         edges: json?.edges
       },
-      false,
-      parentID
+      { parentID }
     );
   }
   getAllNodes() {
     return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== import_document8.FlowNodeBaseType.ROOT);
   }
+  getAllEdges() {
+    return this.entityManager.getEntities(WorkflowLineEntity);
+  }
   getAllPorts() {
     return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== import_document8.FlowNodeBaseType.ROOT);
   }
@@ -2474,7 +2525,7 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
       x: json.meta.position.x + 30,
       y: json.meta.position.y + 30
     };
-    return this.createWorkflowNode(
+    return this._createWorkflowNode(
       {
         id: newNodeId || `1${nanoid2()}`,
         type: node.flowNodeType,
@@ -2486,16 +2537,17 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
         blocks: json.blocks,
         edges: json.edges
       },
-      true,
-      node.parent?.id
+      {
+        parentID: node.parent?.id
+      }
     );
   }
-  copyNodeFromJSON(flowNodeType, nodeJSON, newNodeId, position, parentId) {
+  copyNodeFromJSON(flowNodeType, nodeJSON, newNodeId, position, parentID) {
     position = position || {
       x: nodeJSON.meta.position.x + 30,
       y: nodeJSON.meta.position.y + 30
     };
-    return this.createWorkflowNode(
+    return this._createWorkflowNode(
       {
         id: newNodeId || `1${nanoid2()}`,
         type: flowNodeType,
@@ -2507,8 +2559,9 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
         blocks: nodeJSON.blocks,
         edges: nodeJSON.edges
       },
-      true,
-      parentId
+      {
+        parentID
+      }
     );
   }
   canRemove(node, silent) {
@@ -2563,13 +2616,19 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
    * 批量添加节点
    */
   batchAddFromJSON(json, options) {
-    const { parent = this.root, isClone = false } = options ?? {};
-    const containerID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
+    const { parent = this.root, onNodeCreated, onEdgeCreated } = options ?? {};
+    const parentID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
     const processedJSON = buildGroupJSON(json);
     const nodes = processedJSON.nodes.map(
-      (nodeJSON) => this.createWorkflowNode(nodeJSON, isClone, containerID)
+      (nodeJSON) => this._createWorkflowNode(nodeJSON, {
+        parentID,
+        onNodeCreated,
+        onEdgeCreated
+      })
     );
-    const edges = processedJSON.edges.map((edge) => this.createWorkflowLine(edge, containerID)).filter(Boolean);
+    const edges = processedJSON.edges.map((edge) => this.createWorkflowLine(edge, parentID)).filter(Boolean);
+    nodes.forEach((node) => options?.onNodeCreated?.(node));
+    edges.forEach((edge) => options?.onEdgeCreated?.(edge));
     return { nodes, edges };
   }
   getNodeSubCanvas(node) {
@@ -2618,7 +2677,7 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
     }
     return lineJSON;
   }
-  createWorkflowLine(json, parentId) {
+  createWorkflowLine(json, parentID) {
     const fromNode = this.getNode(json.sourceNodeID);
     const toNode = this.getNode(json.targetNodeID);
     if (!fromNode || !toNode) {
@@ -2631,10 +2690,10 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
       toPort: json.targetPortID,
       data: json.data
     };
-    if (!parentId) {
+    if (!parentID) {
       return this.linesManager.createLine(lineInfo);
     }
-    const canvasNode = this.getNode(parentId);
+    const canvasNode = this.getNode(parentID);
     if (!canvasNode) {
       return this.linesManager.createLine(lineInfo);
     }
@@ -3097,20 +3156,16 @@ var WorkflowDragService = class {
       })
     );
     const containerTransform = container.getData(import_core15.TransformData);
-    containerTransform.update({
-      position: {
-        x: containerTransform.position.x + bounds.x,
-        y: containerTransform.position.y + bounds.y
-      }
+    this.operationService.updateNodePosition(container, {
+      x: containerTransform.position.x + bounds.x,
+      y: containerTransform.position.y + bounds.y
     });
     this.document.layout.updateAffectedTransform(container);
     container.blocks.forEach((node) => {
       const transform = node.getData(import_core15.TransformData);
-      transform.update({
-        position: {
-          x: transform.position.x - bounds.x,
-          y: transform.position.y - bounds.y
-        }
+      this.operationService.updateNodePosition(node, {
+        x: transform.position.x - bounds.x,
+        y: transform.position.y - bounds.y
       });
       this.document.layout.updateAffectedTransform(node);
     });
@@ -3431,7 +3486,7 @@ __decorateClass([
   (0, import_inversify6.inject)(WorkflowSelectService)
 ], WorkflowDragService.prototype, "selectService", 2);
 __decorateClass([
-  (0, import_inversify6.inject)(import_document9.FlowOperationBaseService)
+  (0, import_inversify6.inject)(WorkflowOperationBaseService)
 ], WorkflowDragService.prototype, "operationService", 2);
 __decorateClass([
   (0, import_inversify6.inject)(WorkflowDocumentOptions)
@@ -3579,10 +3634,64 @@ var WorkflowOperationBaseServiceImpl = class extends import_document12.FlowOpera
       newPosition: position
     });
   }
+  fromJSON(json) {
+    if (this.document.disposed) return;
+    const workflowJSON = {
+      nodes: json.nodes ?? [],
+      edges: json.edges ?? []
+    };
+    const oldNodes = this.document.getAllNodes();
+    const oldEdges = this.linesManager.getAllLines();
+    const oldPositionMap = new Map(
+      oldNodes.map((node) => [
+        node.id,
+        {
+          x: node.transform.transform.position.x,
+          y: node.transform.transform.position.y
+        }
+      ])
+    );
+    const newNodes = [];
+    const newEdges = [];
+    this.document.batchAddFromJSON(workflowJSON, {
+      onNodeCreated: (node) => newNodes.push(node),
+      onEdgeCreated: (edge) => newEdges.push(edge)
+    });
+    const newEdgeIDSet = new Set(newEdges.map((edge) => edge.id));
+    oldEdges.forEach((edge) => {
+      if (!newEdgeIDSet.has(edge.id)) {
+        edge.dispose();
+        return;
+      }
+    });
+    const newNodeIDSet = new Set(newNodes.map((node) => node.id));
+    oldNodes.forEach((node) => {
+      if (!newNodeIDSet.has(node.id)) {
+        node.dispose();
+        return;
+      }
+      const oldPosition = oldPositionMap.get(node.id);
+      const newPosition = {
+        x: node.transform.transform.position.x,
+        y: node.transform.transform.position.y
+      };
+      if (oldPosition && (oldPosition.x !== newPosition.x || oldPosition.y !== newPosition.y)) {
+        this.onNodePostionUpdateEmitter.fire({
+          node,
+          oldPosition,
+          newPosition
+        });
+      }
+    });
+    this.document.fireRender();
+  }
 };
 __decorateClass([
   (0, import_inversify8.inject)(WorkflowDocument)
 ], WorkflowOperationBaseServiceImpl.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify8.inject)(WorkflowLinesManager)
+], WorkflowOperationBaseServiceImpl.prototype, "linesManager", 2);
 
 // src/hooks/use-playground-readonly-state.ts
 var import_react = require("react");
@@ -3680,8 +3789,8 @@ function useNodeRender(nodeFromProps) {
   }, []);
   const getExtInfo = (0, import_react2.useCallback)(() => node.getExtInfo(), [node]);
   const updateExtInfo = (0, import_react2.useCallback)(
-    (data) => {
-      node.updateExtInfo(data);
+    (data, fullUpdate) => {
+      node.updateExtInfo(data, fullUpdate);
     },
     [node]
   );
@@ -3716,7 +3825,7 @@ function useNodeRender(nodeFromProps) {
         if (form) {
           form.updateFormValues(values);
         } else {
-          updateExtInfo(values);
+          updateExtInfo(values, true);
         }
       },
       node,