removes unnecessary copyNodeStyle, adds willTransform properties

formkit · Jan 2, 2025 · f0d014f · f0d014f
1 parent 6dad1fb
commit f0d014f
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 100 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -25,7 +25,6 @@ __export(src_exports, {
   addNodeClass: () => addNodeClass,
   addParentClass: () => addParentClass,
   animations: () => animations,
-  copyNodeStyle: () => copyNodeStyle,
   dragAndDrop: () => dragAndDrop,
   dragStateProps: () => dragStateProps,
   dragValues: () => dragValues,
@@ -1227,29 +1226,6 @@ function handleRootKeydown(e) {
 }
 function handleRootDrop(_e) {
 }
-function copyNodeStyle(sourceNode, targetNode, omitKeys = false) {
-  const computedStyle = window.getComputedStyle(sourceNode);
-  const omittedKeys = [
-    "position",
-    "z-index",
-    "top",
-    "left",
-    "x",
-    "pointer-events",
-    "y",
-    "transform-origin",
-    "filter",
-    "-webkit-text-fill-color"
-  ];
-  for (const key of Array.from(computedStyle)) {
-    if (omitKeys === false && key && omittedKeys.includes(key)) continue;
-    targetNode.style.setProperty(
-      key,
-      computedStyle.getPropertyValue(key),
-      computedStyle.getPropertyPriority(key)
-    );
-  }
-}
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
   pd(e);
@@ -2358,14 +2334,13 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
       zIndex: 9999,
       pointerEvents: "none",
       margin: 0,
+      willChange: "transform",
       overflow: "hidden",
       display: "none"
     });
   } else {
     if (!config.multiDrag || draggedNodes2.length === 1) {
-      console.log("boom");
       dragImage = node.el.cloneNode(true);
-      copyNodeStyle(node.el, dragImage);
       dragImage.id = "dnd-dragged-node-clone";
       display = dragImage.style.display;
       dragImage.setAttribute("popover", "manual");
@@ -2375,16 +2350,15 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
         width: node.el.getBoundingClientRect().width + "px",
         overflow: "hidden",
         margin: 0,
+        willChange: "transform",
         pointerEvents: "none",
         zIndex: 9999
       });
     } else {
       const wrapper = document.createElement("div");
-      console.log("getting here");
       wrapper.setAttribute("popover", "manual");
       for (const node2 of draggedNodes2) {
         const clonedNode = node2.el.cloneNode(true);
-        copyNodeStyle(node2.el, clonedNode);
         clonedNode.style.pointerEvents = "none";
         wrapper.append(clonedNode);
       }
@@ -2470,9 +2444,12 @@ function moveNode(e, state2, scrollX2 = 0, scrollY2 = 0) {
   state2.coordinates.x = x;
   const startLeft = state2.startLeft ?? 0;
   const startTop = state2.startTop ?? 0;
+  console.log("window scroll y", window.scrollY);
+  console.log("start top", startTop);
   const translateX = x - startLeft + window.scrollX;
   const translateY = y - startTop + window.scrollY;
   state2.clonedDraggedNode.style.transform = `translate(${translateX + scrollX2}px, ${translateY + scrollY2}px)`;
+  console.log("translate y", translateY + scrollY2);
   if (e.cancelable) pd(e);
   pointermoveClasses(state2, state2.initialParent.data.config);
 }
@@ -2928,7 +2905,6 @@ function addEvents(el, events) {
   addNodeClass,
   addParentClass,
   animations,
-  copyNodeStyle,
   dragAndDrop,
   dragStateProps,
   dragValues,

diff --git a/dist/index.cjs.map b/dist/index.cjs.map
diff --git a/dist/index.d.cts b/dist/index.d.cts
@@ -960,7 +960,6 @@ declare function resetState(): void;
  * @returns void
  */
 declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
-declare function copyNodeStyle(sourceNode: HTMLElement, targetNode: HTMLElement, omitKeys?: boolean): void;
 /**
  * Initializes the drag and drop functionality for a given parent.
  *
@@ -1386,4 +1385,4 @@ declare function isNode(el: unknown): el is Node;
  */
 declare function addEvents(el: Document | ShadowRoot | Node | HTMLElement | Window, events: EventHandlers | any): AbortController;
 
-export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
+export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -960,7 +960,6 @@ declare function resetState(): void;
  * @returns void
  */
 declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
-declare function copyNodeStyle(sourceNode: HTMLElement, targetNode: HTMLElement, omitKeys?: boolean): void;
 /**
  * Initializes the drag and drop functionality for a given parent.
  *
@@ -1386,4 +1385,4 @@ declare function isNode(el: unknown): el is Node;
  */
 declare function addEvents(el: Document | ShadowRoot | Node | HTMLElement | Window, events: EventHandlers | any): AbortController;
 
-export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
+export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -1137,29 +1137,6 @@ function handleRootKeydown(e) {
 }
 function handleRootDrop(_e) {
 }
-function copyNodeStyle(sourceNode, targetNode, omitKeys = false) {
-  const computedStyle = window.getComputedStyle(sourceNode);
-  const omittedKeys = [
-    "position",
-    "z-index",
-    "top",
-    "left",
-    "x",
-    "pointer-events",
-    "y",
-    "transform-origin",
-    "filter",
-    "-webkit-text-fill-color"
-  ];
-  for (const key of Array.from(computedStyle)) {
-    if (omitKeys === false && key && omittedKeys.includes(key)) continue;
-    targetNode.style.setProperty(
-      key,
-      computedStyle.getPropertyValue(key),
-      computedStyle.getPropertyPriority(key)
-    );
-  }
-}
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
   pd(e);
@@ -2268,14 +2245,13 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
       zIndex: 9999,
       pointerEvents: "none",
       margin: 0,
+      willChange: "transform",
       overflow: "hidden",
       display: "none"
     });
   } else {
     if (!config.multiDrag || draggedNodes2.length === 1) {
-      console.log("boom");
       dragImage = node.el.cloneNode(true);
-      copyNodeStyle(node.el, dragImage);
       dragImage.id = "dnd-dragged-node-clone";
       display = dragImage.style.display;
       dragImage.setAttribute("popover", "manual");
@@ -2285,16 +2261,15 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
         width: node.el.getBoundingClientRect().width + "px",
         overflow: "hidden",
         margin: 0,
+        willChange: "transform",
         pointerEvents: "none",
         zIndex: 9999
       });
     } else {
       const wrapper = document.createElement("div");
-      console.log("getting here");
       wrapper.setAttribute("popover", "manual");
       for (const node2 of draggedNodes2) {
         const clonedNode = node2.el.cloneNode(true);
-        copyNodeStyle(node2.el, clonedNode);
         clonedNode.style.pointerEvents = "none";
         wrapper.append(clonedNode);
       }
@@ -2380,9 +2355,12 @@ function moveNode(e, state2, scrollX2 = 0, scrollY2 = 0) {
   state2.coordinates.x = x;
   const startLeft = state2.startLeft ?? 0;
   const startTop = state2.startTop ?? 0;
+  console.log("window scroll y", window.scrollY);
+  console.log("start top", startTop);
   const translateX = x - startLeft + window.scrollX;
   const translateY = y - startTop + window.scrollY;
   state2.clonedDraggedNode.style.transform = `translate(${translateX + scrollX2}px, ${translateY + scrollY2}px)`;
+  console.log("translate y", translateY + scrollY2);
   if (e.cancelable) pd(e);
   pointermoveClasses(state2, state2.initialParent.data.config);
 }
@@ -2837,7 +2815,6 @@ export {
   addNodeClass,
   addParentClass,
   animations,
-  copyNodeStyle,
   dragAndDrop,
   dragStateProps,
   dragValues,

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/src/index.ts b/src/index.ts
@@ -241,37 +241,6 @@ function handleRootKeydown(e: KeyboardEvent) {
 
 function handleRootDrop(_e: DragEvent) {}
 
-export function copyNodeStyle(
-  sourceNode: HTMLElement,
-  targetNode: HTMLElement,
-  omitKeys = false
-) {
-  const computedStyle = window.getComputedStyle(sourceNode);
-
-  const omittedKeys = [
-    "position",
-    "z-index",
-    "top",
-    "left",
-    "x",
-    "pointer-events",
-    "y",
-    "transform-origin",
-    "filter",
-    "-webkit-text-fill-color",
-  ];
-
-  for (const key of Array.from(computedStyle)) {
-    if (omitKeys === false && key && omittedKeys.includes(key)) continue;
-
-    targetNode.style.setProperty(
-      key,
-      computedStyle.getPropertyValue(key),
-      computedStyle.getPropertyPriority(key)
-    );
-  }
-}
-
 /**
  * If we are currently dragging, then let's prevent default on dragover to avoid
  * the default behavior of the browser on drop.
@@ -2172,16 +2141,14 @@ function initSynthDrag<T>(
       zIndex: 9999,
       pointerEvents: "none",
       margin: 0,
+      willChange: "transform",
       overflow: "hidden",
       display: "none",
     });
   } else {
     if (!config.multiDrag || draggedNodes.length === 1) {
-      console.log("boom");
       dragImage = node.el.cloneNode(true) as HTMLElement;
 
-      copyNodeStyle(node.el, dragImage);
-
       dragImage.id = "dnd-dragged-node-clone";
 
       display = dragImage.style.display;
@@ -2194,20 +2161,18 @@ function initSynthDrag<T>(
         width: node.el.getBoundingClientRect().width + "px",
         overflow: "hidden",
         margin: 0,
+        willChange: "transform",
         pointerEvents: "none",
         zIndex: 9999,
       });
     } else {
       const wrapper = document.createElement("div");
-      console.log("getting here");
 
       wrapper.setAttribute("popover", "manual");
 
       for (const node of draggedNodes) {
         const clonedNode = node.el.cloneNode(true) as HTMLElement;
 
-        copyNodeStyle(node.el, clonedNode);
-
         clonedNode.style.pointerEvents = "none";
 
         wrapper.append(clonedNode);