@flowgram.ai/renderer 0.4.12 → 0.4.15

package/dist/esm/index.js

@@ -10,12 +10,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/entities/flow-drag-entity.tsx
+import { Rectangle } from "@flowgram.ai/utils";
 import {
   FlowTransitionLabelEnum,
   LABEL_SIDE_TYPE
 } from "@flowgram.ai/document";
 import { ConfigEntity, PlaygroundConfigEntity } from "@flowgram.ai/core";
-import { Rectangle } from "@flowgram.ai/utils";
 
 // src/components/utils.tsx
 import {
@@ -394,23 +394,24 @@ var FlowDragEntity = class extends 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 */;
@@ -2416,8 +2417,9 @@ var FlowDragLayer = class extends Layer7 {
       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 Rectangle8(
           dragBlockX,
@@ -2900,6 +2902,7 @@ FlowSelectorBoundsLayer = __decorateClass([
 // src/layers/flow-context-menu-layer.tsx
 import React17 from "react";
 import { inject as inject11, injectable as injectable12 } from "inversify";
+import { domUtils as domUtils9 } from "@flowgram.ai/utils";
 import {
   CommandRegistry as CommandRegistry2,
   ContextMenuService as ContextMenuService2,
@@ -2911,7 +2914,6 @@ import {
   PlaygroundConfigEntity as PlaygroundConfigEntity5,
   SelectionService as SelectionService2
 } from "@flowgram.ai/core";
-import { domUtils as domUtils9 } from "@flowgram.ai/utils";
 var FlowContextMenuLayer = class extends Layer10 {
   constructor() {
     super(...arguments);
@@ -2938,8 +2940,9 @@ var FlowContextMenuLayer = class extends Layer10 {
           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`;
         },