Update pages.html

pages.html

@@ -1196,7 +1196,19 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
   
   
+<style>
+  /* Ваши стили */
+  #grabbed-info {
+    position: fixed;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+  }
+</style>
 
+<div id="grabbed-info"></div>
 
 <script type="text/javascript">
   var editor = grapesjs.init({
@@ -1220,7 +1232,8 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
       "grapesjs-tooltip", // Плагин подсказок
       "grapesjs-script-editor", // Плагин редактора скриптов
       "grapesjs-rulers", // Добавляем плагин линеек
-      "grapesjs-tui-image-editor" // Добавляем плагин редактора изображений
+      "grapesjs-tui-image-editor", // Добавляем плагин редактора изображений
+      "grapesjs-click" // Добавляем плагин grapesjs-click
     ],
     pluginsOpts: {
       "gjs-blocks-basic": {
@@ -1315,11 +1328,12 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
         hideHeader: true,
         addToAssets: true,
         upload: false
+      },
+      "grapesjs-click": {
+        // Настройки для grapesjs-click
       }
     }
   });
-</script>
-<script>
 
   // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки
   editor.Panels.addButton('options', {
@@ -1331,8 +1345,38 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
     command: 'ruler-visibility', // Команда для переключения видимости линеек
     attributes: { title: 'Toggle Rulers' }
   });
+
+  // Функция для обновления информации о положении элемента
+  function updatePositionInfo(component) {
+    const positionInfo = document.getElementById('position-info');
+    if (component) {
+      const { x, y, width, height } = component.getBoundingRect();
+      const { width: canvasWidth, height: canvasHeight } = editor.Canvas.getCanvasElement().getBoundingClientRect();
+      const xPercent = (x / canvasWidth * 100).toFixed(2);
+      const yPercent = (y / canvasHeight * 100).toFixed(2);
+      positionInfo.textContent = `Position: X: ${x}px (${xPercent}%), Y: ${y}px (${yPercent}%), Width: ${width}px, Height: ${height}px`;
+    } else {
+      positionInfo.textContent = 'Position: ';
+    }
+  }
+
+  // Подписываемся на события перетаскивания и выбора элемента
+  editor.on('component:drag:start', (component) => {
+    updatePositionInfo(component);
+  });
+
+  editor.on('component:drag', (component) => {
+    updatePositionInfo(component);
+  });
+
+  editor.on('component:drag:stop', (component) => {
+    updatePositionInfo(component);
+  });
+
+  editor.on('component:selected', (component) => {
+    updatePositionInfo(component);
+  });
 </script>
-  
 
 <script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></script>