WIP: marker element

mistic100 · Jul 11, 2023 · a5c56f4 · a5c56f4
1 parent 11460f3
commit a5c56f4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/examples/plugin-markers.html b/examples/plugin-markers.html
@@ -42,6 +42,10 @@
     <body>
         <div id="photosphere"></div>
 
+        <div id="html-marker">
+            Loading
+        </div>
+
         <!-- text used for the marker description -->
         <script type="text/template" id="pin-content">
             <h1>HTML Ipsum Presents</h1>
@@ -288,8 +292,10 @@ <h2>Lorem ipsum</h2>
 
                             a.push({
                                 id: 'text',
-                                html: `<code>HTML</code> content <img src="${baseUrl}pictos/pin-blue.png" style="height: 24px; vertical-align: top;"/>`,
+                                html: document.querySelector('#html-marker'),
+                                // html: `<code>HTML</code> content <img src="${baseUrl}pictos/pin-blue.png" style="height: 24px; vertical-align: top;"/>`,
                                 anchor: 'bottom right',
+                                scale: {yaw: [1, 0.5] },
                                 style: {
                                     color: 'white',
                                     fontSize: '20px',
@@ -434,6 +440,11 @@ <h2>Lorem ipsum</h2>
                 ],
             });
 
+            setTimeout(() => {
+                document.querySelector('#html-marker').innerHTML = `<code>HTML</code> content <img src="${baseUrl}pictos/pin-blue.png" style="height: 24px; vertical-align: top;"/>`;
+                viewer.needsUpdate();
+            }, 2000);
+
             const markers = viewer.getPlugin(MarkersPlugin);
 
             viewer.addEventListener('ready', () => {

diff --git a/packages/markers-plugin/src/Marker.ts b/packages/markers-plugin/src/Marker.ts
@@ -222,7 +222,6 @@ export class Marker {
      * Returns the markers list content for the marker, it can be either :
      * - the `listContent`
      * - the `tooltip`
-     * - the `html`
      * - the `id`
      * @internal
      */
@@ -231,8 +230,6 @@ export class Marker {
             return this.config.listContent;
         } else if (this.config.tooltip?.content) {
             return this.config.tooltip.content;
-        } else if (this.config.html) {
-            return this.config.html;
         } else {
             return this.id;
         }
@@ -433,7 +430,11 @@ export class Marker {
                 break;
             case MarkerType.html:
                 this.definition = this.config.html;
-                element.innerHTML = this.config.html;
+                if (this.config.html instanceof HTMLElement) {
+                    element.appendChild(this.config.html);
+                } else {
+                    element.innerHTML = this.config.html;
+                }
                 break
         }
 
@@ -720,35 +721,34 @@ export class Marker {
         }
 
         const element = this.domElement;
+        const init = !this.state.size;
 
-        element.classList.add('psv-marker--transparent');
-
-        const transform = element.style.transform;
-        element.style.transform = '';
+        if (init) {
+            element.classList.add('psv-marker--transparent');
+        }
 
-        let rect;
         if (this.isSvg()) {
-            rect = (element.firstElementChild as SVGElement).getBoundingClientRect();
-            // the real size must be declared on the SVG root
-            element.style.width = rect.width + 'px';
-            element.style.height = rect.height + 'px';
+            const rect = (element.firstElementChild as SVGElement).getBoundingClientRect();
+            this.state.size = {
+                width: rect.width,
+                height: rect.height,
+            };
         } else {
-            rect = element.getBoundingClientRect();
+            this.state.size = {
+                width: (element as HTMLElement).offsetWidth,
+                height: (element as HTMLElement).offsetHeight,
+            };
         }
 
-        this.state.size = {
-            width: rect.width,
-            height: rect.height,
-        };
-
-        element.classList.remove('psv-marker--transparent');
-
-        if (transform) {
-            element.style.transform = transform;
+        if (init) {
+            element.classList.remove('psv-marker--transparent');
         }
 
-        // the size is no longer dynamic once known
-        this.state.dynamicSize = false;
+        if (this.isSvg()) {
+            // the real size must be declared on the SVG root
+            element.style.width = this.state.size.width + 'px';
+            element.style.height = this.state.size.height + 'px';
+        }
     }
 
     /**

diff --git a/packages/markers-plugin/src/model.ts b/packages/markers-plugin/src/model.ts
@@ -15,7 +15,7 @@ export type MarkerConfig = {
     /**
      * HTML content of the marker
      */
-    html?: string;
+    html?: string | HTMLElement;
     /**
      * Size of the square
      */