From 22ad9eb6ccbc0ebebab6ae83506cf24bca670e04 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 15 Aug 2024 22:49:11 +0200
Subject: [PATCH] feat: add new draggable elements

---
 source/screens/demo/examples/ui/drag.njk | 141 ++++++++++++-----------
 1 file changed, 76 insertions(+), 65 deletions(-)

diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index fbf7234..13b48d7 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -21,89 +21,100 @@ tags:
 {% endblock %}
 
 {% block body %}
-    <div id="space"></div>
+  <button id="addFrame">Add</button>
+  <div id="space"></div>
 {% endblock %}
 
 {%- block script %}
   <script>
 // Get the space element
 const space = document.getElementById('space');
+const addFrameButton = document.getElementById('addFrame');
 
-// Create a new div element
-const newDiv = document.createElement('div');
-newDiv.style.position = 'absolute';
-newDiv.style.width = '100px';
-newDiv.style.height = '100px';
-newDiv.style.background = 'cyan';
-newDiv.style.cursor = 'move';
+// Function to create a new div element
+function createNewDiv() {
+  const newDiv = document.createElement('div');
+  newDiv.style.position = 'absolute';
+  newDiv.style.width = '100px';
+  newDiv.style.height = '100px';
+  newDiv.style.background = 'red';
+  newDiv.style.cursor = 'move';
 
-// Add event listeners for dragging
-let isDown = false;
-let offset = [0, 0];
+  // Add event listeners for dragging
+  let isDown = false;
+  let offset = [0, 0];
 
-newDiv.addEventListener('mousedown', (event) => {
-  if (event.button === 0) { // Left mouse button
-    isDown = true;
-    offset = [
-      newDiv.offsetLeft - event.clientX,
-      newDiv.offsetTop - event.clientY
-    ];
-  }
-});
+  newDiv.addEventListener('mousedown', (event) => {
+    if (event.button === 0) { // Left mouse button
+      isDown = true;
+      offset = [
+        newDiv.offsetLeft - event.clientX,
+        newDiv.offsetTop - event.clientY
+      ];
+    }
+  });
 
-document.addEventListener('mouseup', () => {
-  isDown = false;
-});
+  document.addEventListener('mouseup', () => {
+    isDown = false;
+  });
 
-document.addEventListener('mousemove', (event) => {
-  if (isDown) {
-    const maxX = window.innerWidth - newDiv.offsetWidth;
-    const maxY = window.innerHeight - newDiv.offsetHeight;
-    let x = event.clientX + offset[0];
-    let y = event.clientY + offset[1];
+  document.addEventListener('mousemove', (event) => {
+    if (isDown) {
+      const maxX = window.innerWidth - newDiv.offsetWidth;
+      const maxY = window.innerHeight - newDiv.offsetHeight;
+      let x = event.clientX + offset[0];
+      let y = event.clientY + offset[1];
 
-    // Boundary checks
-    if (x < 0) x = 0;
-    if (y < 0) y = 0;
-    if (x > maxX) x = maxX;
-    if (y > maxY) y = maxY;
+      // Boundary checks
+      if (x < 0) x = 0;
+      if (y < 0) y = 0;
+      if (x > maxX) x = maxX;
+      if (y > maxY) y = maxY;
 
-    newDiv.style.left = `${x}px`;
-    newDiv.style.top = `${y}px`;
-  }
-});
+      newDiv.style.left = `${x}px`;
+      newDiv.style.top = `${y}px`;
+    }
+  });
 
-// Save position and size
-const saveData = () => {
-  const data = {
-    x: newDiv.offsetLeft,
-    y: newDiv.offsetTop,
-    width: newDiv.offsetWidth,
-    height: newDiv.offsetHeight
+  // Save position and size
+  const saveData = () => {
+    const data = {
+      x: newDiv.offsetLeft,
+      y: newDiv.offsetTop,
+      width: newDiv.offsetWidth,
+      height: newDiv.offsetHeight
+    };
+    // Save data to local storage or a database
+    localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
   };
-  // Save data to local storage or a database
-  localStorage.setItem('divData', JSON.stringify(data));
-};
 
-// Load saved data
-const loadData = () => {
-  const data = localStorage.getItem('divData');
-  if (data) {
-    const parsedData = JSON.parse(data);
-    newDiv.style.left = `${parsedData.x}px`;
-    newDiv.style.top = `${parsedData.y}px`;
-    newDiv.style.width = `${parsedData.width}px`;
-    newDiv.style.height = `${parsedData.height}px`;
-  }
-};
+  // Load saved data
+  const loadData = () => {
+    const data = localStorage.getItem(`divData${newDiv.id}`);
+    if (data) {
+      const parsedData = JSON.parse(data);
+      newDiv.style.left = `${parsedData.x}px`;
+      newDiv.style.top = `${parsedData.y}px`;
+      newDiv.style.width = `${parsedData.width}px`;
+      newDiv.style.height = `${parsedData.height}px`;
+    }
+  };
 
-// Add the new div to the space
-space.appendChild(newDiv);
+  // Add the new div to the space
+  newDiv.id = `newDiv${space.children.length}`;
+  space.appendChild(newDiv);
 
-// Call the save function when the user stops dragging
-document.addEventListener('mouseup', saveData);
+  // Call the save function when the user stops dragging
+  document.addEventListener('mouseup', saveData);
 
-// Load saved data on page load
-loadData();
+  // Load saved data on page load
+  loadData();
+}
+
+// Add event listener to the add space button
+addFrameButton.addEventListener('click', createNewDiv);
+
+// Create the first new div element
+createNewDiv();
   </script>
 {% endblock %}
\ No newline at end of file