Create per.js

js/per.js

@@ -0,0 +1,70 @@
+import 'grapesjs/dist/css/grapes.min.css'
+
+import grapesjs, { usePlugin } from 'grapesjs'
+import grapesjsBlocks from 'grapesjs-blocks-basic'
+
+import type { Editor, Component } from 'grapesjs'
+
+function runExample () {
+  const protectedCss: string = `
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    html, body, [data-gjs-type="wrapper"] {
+      width: 100%;
+      height: 100%;
+    }
+  `
+  const editor = grapesjs.init({
+    container: '#gjs', // same as id in the "index.html" file
+    height: '100vh',
+    canvas: {
+      infiniteCanvas: true
+    },
+    fromElement: true,
+    storageManager: false,
+    protectedCss,
+    plugins: [
+      usePlugin(grapesjsBlocks, {
+        flexGrid: true
+      })
+    ]
+  })
+
+  let isDragging = false;
+  let offsetX = 0;
+  let offsetY = 0;
+  let selectedComponent: Component | null = null;
+
+  function startDrag(e: MouseEvent, component: Component) {
+    isDragging = true;
+    selectedComponent = component;
+    const rect = component.getEl().getBoundingClientRect();
+    offsetX = e.clientX - rect.left;
+    offsetY = e.clientY - rect.top;
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', stopDrag);
+  }
+
+  function drag(e: MouseEvent) {
+    if (!isDragging || !selectedComponent) return;
+    const newX = e.clientX - offsetX;
+    const newY = e.clientY - offsetY;
+    selectedComponent.set('position', { x: newX, y: newY });
+  }
+
+  function stopDrag() {
+    isDragging = false;
+    selectedComponent = null;
+    document.removeEventListener('mousemove', drag);
+    document.removeEventListener('mouseup', stopDrag);
+  }
+
+  editor.on('component:selected', (component: Component) => {
+    component.getEl().addEventListener('mousedown', (e: MouseEvent) => startDrag(e, component));
+  });
+}
+
+runExample()