Fixes and improvements

panning.js

@@ -7,6 +7,8 @@ export const panning = function(superClass) {
         isDragging: { type: Boolean },
         currentX: { type: Number },
         currentY: { type: Number },
+        currentNodeX: { type: Number },
+        currentNodeY: { type: Number },
         initialX: { type: Number },
         initialY: { type: Number },
         xOffset: { type: Number },
@@ -20,6 +22,8 @@ export const panning = function(superClass) {
       this.isDragging = false;
       this.currentX = 0;
       this.currentY = 0;
+      this.currentNodeX = 0;
+      this.currentNodeY = 0;
       this.initialX = 0;
       this.initialY = 0;
       this.xOffset = 0;
@@ -51,8 +55,17 @@ export const panning = function(superClass) {
     _bringToFront(element) {
       if (!(element instanceof TpFlowNode)) return;
       
-      this.highestZIndex++;
-      element.style.zIndex = this.highestZIndex;
+      // Get all elements and filter for TpFlowNode instances
+      const nodes = Array.from(this.shadowRoot.querySelector('.canvas').children)
+        .filter(node => node instanceof TpFlowNode);
+
+      for (const node of nodes) {
+        node.style.zIndex = 1;
+        node.classList.remove('focused');
+      }
+      
+      element.style.zIndex = 2;
+      element.classList.add('focused');
     }
 
     _startDrag(e) {
@@ -61,6 +74,11 @@ export const panning = function(superClass) {
       if (topNode) {
         this.targetElement = topNode;
         this._bringToFront(topNode);
+
+        // Check if a element with the "drag-node" attribute is part of the event path. Only then we can start dragging.
+        if (!e.composedPath().some(el => typeof el.hasAttribute === 'function' && el.hasAttribute('drag-node'))) {
+          return;
+        }
       } else {
         this.targetElement = this.canvas;
       }
@@ -96,10 +114,10 @@ export const panning = function(superClass) {
             `translate(${this.currentX}px, ${this.currentY}px) scale(${this.scale})`;
         } else {
           // For nodes, compensate for canvas scale
-          this.currentX = (e.clientX - this.initialX) / this.scale;
-          this.currentY = (e.clientY - this.initialY) / this.scale;
+          this.currentNodeX = (e.clientX - this.initialX) / this.scale;
+          this.currentNodeY = (e.clientY - this.initialY) / this.scale;
           this.targetElement.style.transform = 
-            `translate(${this.currentX}px, ${this.currentY}px)`;
+            `translate(${this.currentNodeX}px, ${this.currentNodeY}px)`;
         }
     
         this.requestUpdate();
@@ -113,8 +131,8 @@ export const panning = function(superClass) {
           data: {
             nodeId: this.targetElement.id,
             position: {
-              x: this.currentX,
-              y: this.currentY
+              x: this.currentNodeX,
+              y: this.currentNodeY
             }
           }
         });