style: add drag handler

penpot · Oct 7, 2024 · f5b149b · f5b149b
1 parent 937ac3f
commit f5b149b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/libs/plugins-runtime/src/lib/assets/resize.svg b/libs/plugins-runtime/src/lib/assets/resize.svg
diff --git a/libs/plugins-runtime/src/lib/create-modal.ts b/libs/plugins-runtime/src/lib/create-modal.ts
@@ -20,19 +20,24 @@ export function createModal(
 
   const initialPosition = {
     blockStart: 40,
-    inlineEnd: 320,
+    // To be able to resize the element as expected the position must be absolute from the right.
+    // This value is the length of the window minus the width of the element plus the width of the design tab.
+    inlineStart: window.innerWidth - defaultWidth - 270,
   };
 
+  console.log(initialPosition.inlineStart);
+  console.log(window.innerWidth, defaultWidth);
+
   modal.style.setProperty(
     '--modal-block-start',
     `${initialPosition.blockStart}px`
   );
   modal.style.setProperty(
-    '--modal-inline-end',
-    `${initialPosition.inlineEnd}px`
+    '--modal-inline-start',
+    `${initialPosition.inlineStart}px`
   );
 
-  const maxWidth = window.innerWidth - initialPosition.inlineEnd;
+  const maxWidth = window.innerWidth - initialPosition.inlineStart;
   const maxHeight = window.innerHeight - initialPosition.blockStart;
   let width = Math.min(options?.width || defaultWidth, maxWidth);
   let height = Math.min(options?.height || defaultHeight, maxHeight);

diff --git a/libs/plugins-runtime/src/lib/drag-handler.ts b/libs/plugins-runtime/src/lib/drag-handler.ts
@@ -10,7 +10,7 @@ export const dragHandler = (el: HTMLElement, target: HTMLElement = el, move?: ()
 
     currentTranslate = { x: deltaX, y: deltaY };
 
-    target.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(-1, 1)`;
+    target.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
 
     move?.();
   };

diff --git a/libs/plugins-runtime/src/lib/modal/plugin.modal.css b/libs/plugins-runtime/src/lib/modal/plugin.modal.css
@@ -25,13 +25,21 @@
   color: var(--color-foreground-secondary);
 }
 
+::-webkit-resizer {
+  display: none;
+  /* background-image: url('../assets/resize.svg');
+  position: relative;
+  inset-block-end: 10px;
+  inset-inline-end: 10px; */
+}
+
 .wrapper {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   position: absolute;
   inset-block-start: var(--modal-block-start);
-  inset-inline-end: var(--modal-inline-end);
+  inset-inline-start: var(--modal-inline-start);
   z-index: 1000;
   padding: 10px;
   border-radius: 15px;
@@ -41,13 +49,23 @@
   min-inline-size: 25px;
   min-block-size: 200px;
   resize: both;
-  transform: scale(-1, 1);
+  cursor: se-resize;
+  &:after {
+    content: '';
+    inline-size: 1rem;
+    block-size: 1rem;
+    background-image: url('../assets/resize.svg');
+    background-position: center;
+    right: 5px;
+    bottom: 5px;
+    pointer-events: none;
+    position: absolute;
+  }
 }
 
 .inner {
-  padding: 10px; 
-  cursor:grab;
-  transform: scale(-1, 1);
+  padding: 10px;
+  cursor: grab;
 }
 
 .header {