@flowgram.ai/renderer 0.4.13 → 0.4.15

package/dist/index.d.mts

@@ -1,7 +1,7 @@
-import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
-import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
 import { Rectangle, Disposable, CacheOriginItem, ScrollSchema } from '@flowgram.ai/utils';
+import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
+import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
 import React from 'react';
 import { throttle } from 'lodash-es';
 import { ContainerModule } from 'inversify';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
-import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
 import { Rectangle, Disposable, CacheOriginItem, ScrollSchema } from '@flowgram.ai/utils';
+import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
+import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
 import React from 'react';
 import { throttle } from 'lodash-es';
 import { ContainerModule } from 'inversify';

package/dist/index.js

@@ -36,8 +36,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   FlowContextMenuLayer: () => FlowContextMenuLayer,
   FlowDebugLayer: () => FlowDebugLayer,
   FlowDragEntity: () => FlowDragEntity,
@@ -65,12 +65,12 @@ __export(src_exports, {
   createLines: () => createLines,
   useBaseColor: () => useBaseColor
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/entities/flow-drag-entity.tsx
+var import_utils = require("@flowgram.ai/utils");
 var import_document3 = require("@flowgram.ai/document");
 var import_core2 = require("@flowgram.ai/core");
-var import_utils = require("@flowgram.ai/utils");
 
 // src/components/utils.tsx
 var import_document2 = require("@flowgram.ai/document");
@@ -444,23 +444,24 @@ var FlowDragEntity = class extends import_core2.ConfigEntity {
     this.containerDom = containerDom;
     this.containerX = x;
     this.containerY = y;
-    const mouseToBottom = playgroundConfig.height + playgroundConfig.clientY - e.clientY;
+    const clientRect = this.playgroundConfigEntity.playgroundDomNode.getBoundingClientRect();
+    const mouseToBottom = playgroundConfig.height + clientRect.y - e.clientY;
     if (mouseToBottom < SCROLL_BOUNDING) {
       this._startScrollY(currentScrollY, true);
       return 1 /* BOTTOM */;
     }
-    const mouseToTop = e.clientY - playgroundConfig.clientY;
+    const mouseToTop = e.clientY - clientRect.y;
     if (mouseToTop < SCROLL_BOUNDING) {
       this._startScrollY(currentScrollY, false);
       return 0 /* TOP */;
     }
     this._stopScrollY();
-    const mouseToRight = playgroundConfig.width + playgroundConfig.clientX - e.clientX;
+    const mouseToRight = playgroundConfig.width + clientRect.x - e.clientX;
     if (mouseToRight < SCROLL_BOUNDING) {
       this._startScrollX(currentScrollX, true);
       return 3 /* RIGHT */;
     }
-    const mouseToLeft = e.clientX - playgroundConfig.clientX;
+    const mouseToLeft = e.clientX - clientRect.x;
     if (mouseToLeft < SCROLL_BOUNDING + EDITOR_LEFT_BAR_WIDTH) {
       this._startScrollX(currentScrollX, false);
       return 2 /* LEFT */;
@@ -2393,8 +2394,9 @@ var FlowDragLayer = class extends import_core15.Layer {
       const scale = this.playgroundConfigEntity.finalScale;
       if (this.containerRef.current) {
         const dragNode = this.containerRef.current.children?.[0];
-        const dragBlockX = event.clientX - (this.pipelineNode.offsetLeft || 0) - this.playgroundConfigEntity.config.clientX - (dragNode.clientWidth - this.dragOffset.x) * scale;
-        const dragBlockY = event.clientY - (this.pipelineNode.offsetTop || 0) - this.playgroundConfigEntity.config.clientY - (dragNode.clientHeight - this.dragOffset.y) * scale;
+        const clientBounds = this.playgroundConfigEntity.getClientBounds();
+        const dragBlockX = event.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x - (dragNode.clientWidth - this.dragOffset.x) * scale;
+        const dragBlockY = event.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y - (dragNode.clientHeight - this.dragOffset.y) * scale;
         const isBranch = this.service.isDragBranch;
         const draggingRect = new import_utils22.Rectangle(
           dragBlockX,
@@ -2860,8 +2862,8 @@ FlowSelectorBoundsLayer = __decorateClass([
 // src/layers/flow-context-menu-layer.tsx
 var import_react17 = __toESM(require("react"));
 var import_inversify12 = require("inversify");
-var import_core19 = require("@flowgram.ai/core");
 var import_utils25 = require("@flowgram.ai/utils");
+var import_core19 = require("@flowgram.ai/core");
 var FlowContextMenuLayer = class extends import_core19.Layer {
   constructor() {
     super(...arguments);
@@ -2888,8 +2890,9 @@ var FlowContextMenuLayer = class extends import_core19.Layer {
           e.stopPropagation();
           e.preventDefault();
           this.nodeRef.current?.setVisible(true);
-          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - this.playgroundConfigEntity.config.clientX;
-          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - this.playgroundConfigEntity.config.clientY;
+          const clientBounds = this.playgroundConfigEntity.getClientBounds();
+          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x;
+          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y;
           this.node.style.left = `${dragBlockX}px`;
           this.node.style.top = `${dragBlockY}px`;
         },