wip

panning.js

@@ -0,0 +1,98 @@
+import { TpFlowNode } from './tp-flow-node.js';
+
+export const panning = function(superClass) {
+  return class extends superClass {
+    static get properties() {
+      return {
+        isDragging: { type: Boolean },
+        currentX: { type: Number },
+        currentY: { type: Number },
+        initialX: { type: Number },
+        initialY: { type: Number },
+        xOffset: { type: Number },
+        yOffset: { type: Number },
+        highestZIndex: { type: Number }
+      };
+    }
+
+    constructor() {
+      super();
+      this.isDragging = false;
+      this.currentX = 0;
+      this.currentY = 0;
+      this.initialX = 0;
+      this.initialY = 0;
+      this.xOffset = 0;
+      this.yOffset = 0;
+      this.targetElement = null;
+      this.highestZIndex = 1;
+    }
+
+    firstUpdated() {
+      super.firstUpdated();
+      this.canvas = this.shadowRoot.querySelector('.canvas');
+      this.addEventListener('mousedown', this._startDrag.bind(this));
+      document.addEventListener('mousemove', this._drag.bind(this));
+      document.addEventListener('mouseup', this._endDrag.bind(this));
+    }
+
+    _getTopNodeAtPoint(x, y) {
+      const nodes = this.shadowRoot.elementsFromPoint(x, y)
+        .filter(el => el instanceof TpFlowNode)
+        .sort((a, b) => {
+          const aZ = parseInt(getComputedStyle(a).zIndex) || 0;
+          const bZ = parseInt(getComputedStyle(b).zIndex) || 0;
+          return bZ - aZ;
+        });
+      
+      return nodes[0] || null;
+    }
+
+    _bringToFront(element) {
+      if (!(element instanceof TpFlowNode)) return;
+      
+      this.highestZIndex++;
+      element.style.zIndex = this.highestZIndex;
+    }
+
+    _startDrag(e) {
+      const topNode = this._getTopNodeAtPoint(e.clientX, e.clientY);
+      
+      if (topNode) {
+        this.targetElement = topNode;
+        this._bringToFront(topNode);
+      } else {
+        this.targetElement = this.canvas;
+      }
+    
+      if (this.targetElement) {
+        this.isDragging = true;
+        
+        const transform = window.getComputedStyle(this.targetElement).transform;
+        const matrix = new DOMMatrix(transform);
+        this.xOffset = matrix.m41;
+        this.yOffset = matrix.m42;
+        
+        this.initialX = e.clientX - this.xOffset;
+        this.initialY = e.clientY - this.yOffset;
+      }
+    }
+
+    _drag(e) {
+      if (this.isDragging && this.targetElement) {
+        e.preventDefault();
+        
+        this.currentX = e.clientX - this.initialX;
+        this.currentY = e.clientY - this.initialY;
+
+        this.targetElement.style.transform = 
+          `translate(${this.currentX}px, ${this.currentY}px)`;
+      }
+    }
+
+    _endDrag() {
+      this.isDragging = false;
+      this.targetElement = null;
+    }
+  };
+};