From 6fda79b6c75852bbe400a3df04b4eb2129555799 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Thu, 14 Nov 2024 21:58:11 +0100
Subject: [PATCH] add render of markers to editor #4

---
 editor/editor.css | 10 ++++++++++
 editor/editor.js  | 22 ++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/editor/editor.css b/editor/editor.css
index a835523..94e678c 100644
--- a/editor/editor.css
+++ b/editor/editor.css
@@ -159,6 +159,16 @@ body.viewer .editor {
     flex-shrink: 1;
 }
 
+.imgContainer{
+    position: relative;
+    overflow: hidden;
+}
+
+.imageMarker{
+    position: absolute;
+    border: 2px solid red;
+}
+
 .step img{
     width: 100%;
     border-radius: 12px;
diff --git a/editor/editor.js b/editor/editor.js
index 676f126..692751e 100644
--- a/editor/editor.js
+++ b/editor/editor.js
@@ -101,12 +101,19 @@ function loadGuide(data){
     const stepsContainer = document.getElementById("stepsContainer");
 
     for (const step of steps){
-        const element = createStepElement(step.label, step.description, step.image, step.action, step.element);
+        const element = createStepElement(step);
         stepsContainer.append(element);
     }
 }
 
-function createStepElement(label, description, imgSrc, triggerAction, triggerElement){
+function createStepElement(step){
+    // define constants
+    const label = step.label;
+    const description = step.description;
+    const imgSrc = step.image;
+    const triggerAction = step.action;
+    const triggerElement = step.element;
+
     // create container
     const container = document.createElement("div");
     container.classList = "step";
@@ -119,6 +126,7 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
     const textContainer = document.createElement("div");
     const stepControls = document.createElement("div");
     const imgContainer = document.createElement("div");
+    imgContainer.classList = "imgContainer";
 
     // create title
     const title = document.createElement("h2");
@@ -137,6 +145,16 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
     image.src = imgSrc;
     imgContainer.appendChild(image);
 
+    if(step.elementPosition){
+        const imageMarker = document.createElement("div");
+        imageMarker.classList = "imageMarker";
+        imageMarker.style.left = `${step.elementPosition.startX}px`;
+        imageMarker.style.top = `${step.elementPosition.startY}px`;
+        imageMarker.style.width = `${step.elementPosition.endX - step.elementPosition.startX}px`;
+        imageMarker.style.height = `${step.elementPosition.endY - step.elementPosition.startY}px`;
+        imgContainer.appendChild(imageMarker);
+    }
+
     // create stepcontrol + delete button
     const delBtn = document.createElement("button");
     const delBtnIcon = document.createElement("span");