Fix #1132 markers: add "zIndex" option & fix click detection

mistic100 · Oct 25, 2023 · 477582a · 477582a
1 parent 4739b27
commit 477582a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/docs/plugins/markers.md b/docs/plugins/markers.md
@@ -427,6 +427,19 @@ _(This option is ignored for polygons, polylines and `imageLayer` markers)._
 
 Opacity of the marker.
 
+#### `zIndex`
+
+-   type: `number`
+-   default: `1`
+
+Ordering of the marker.
+
+_(This option is ignored for polygons and polylines markers)._
+
+::: warning
+`imageLayer` and `videoLayer` are always renderer first, then `polygon` and `polyline`, then standard markers.
+:::
+
 #### `className`
 
 -   type: `string`

diff --git a/packages/markers-plugin/src/Marker.ts b/packages/markers-plugin/src/Marker.ts
@@ -391,6 +391,12 @@ export class Marker {
         if (utils.isNil(this.config.visible)) {
             this.config.visible = true;
         }
+        if (utils.isNil(this.config.zIndex)) {
+            this.config.zIndex = 1;
+        }
+        if (utils.isNil(this.config.opacity)) {
+            this.config.opacity = 1;
+        }
 
         this.state.anchor = utils.parsePoint(this.config.anchor);
 
@@ -418,7 +424,8 @@ export class Marker {
             }
 
             // apply style
-            element.style.opacity = `${this.config.opacity ?? 1}`;
+            element.style.opacity = `${this.config.opacity}`;
+            element.style.zIndex = `${30 + this.config.zIndex}`; // 30 is the base z-index in the stylesheet
             if (this.config.style) {
                 Object.assign(element.style, this.config.style);
             }
@@ -771,7 +778,8 @@ export class Marker {
             // no default
         }
 
-        mesh.material.opacity = this.config.opacity ?? 1;
+        mesh.material.opacity = this.config.opacity;
+        mesh.renderOrder = 1000 + this.config.zIndex;
     }
 
     /**

diff --git a/packages/markers-plugin/src/MarkersPlugin.ts b/packages/markers-plugin/src/MarkersPlugin.ts
@@ -1,6 +1,6 @@
 import type { Point, Position, Viewer } from '@photo-sphere-viewer/core';
 import { AbstractConfigurablePlugin, PSVError, events, utils } from '@photo-sphere-viewer/core';
-import { Vector3 } from 'three';
+import { Object3D, Vector3 } from 'three';
 import { Marker, MarkerType } from './Marker';
 import { MarkersButton } from './MarkersButton';
 import { MarkersListButton } from './MarkersListButton';
@@ -764,9 +764,20 @@ export class MarkersPlugin extends AbstractConfigurablePlugin<
     /**
      * Returns the marker associated to an event target
      */
-    private __getTargetMarker(target: HTMLElement, closest = false): Marker {
-        const target2 = closest ? utils.getClosest(target, '.psv-marker') : target;
-        return target2 ? (target2 as any)[MARKER_DATA] : undefined;
+    private __getTargetMarker(target: HTMLElement, closest?: boolean): Marker;
+    private __getTargetMarker(target: Object3D[]): Marker;
+    private __getTargetMarker(target: HTMLElement | Object3D[], closest = false): Marker {
+        if (target instanceof Node) {
+            const target2 = closest ? utils.getClosest(target, '.psv-marker') : target;
+            return target2 ? (target2 as any)[MARKER_DATA] : undefined;
+        } else if (Array.isArray(target)) {
+            return target
+                .map((o) => o.userData[MARKER_DATA] as Marker)
+                .filter((m) => !!m)
+                .sort((a, b) => b.config.zIndex - a.config.zIndex)[0];
+        } else {
+            return null;
+        }
     }
 
     /**
@@ -832,11 +843,11 @@ export class MarkersPlugin extends AbstractConfigurablePlugin<
      * Handles mouse click events, select the marker and open the panel if necessary
      */
     private __onClick(e: events.ClickEvent | events.DoubleClickEvent, dblclick: boolean) {
-        let marker = e.data.objects.find((o) => o.userData[MARKER_DATA])?.userData[MARKER_DATA];
+        const threeMarker = this.__getTargetMarker(e.data.objects);
+        const stdMarker = this.__getTargetMarker(e.data.target, true);
 
-        if (!marker) {
-            marker = this.__getTargetMarker(e.data.target, true);
-        }
+        // give priority to standard markers which are always on top of Three markers
+        const marker = stdMarker || threeMarker;
 
         if (this.state.currentMarker && this.state.currentMarker !== marker) {
             this.dispatchEvent(new UnselectMarkerEvent(this.state.currentMarker));

diff --git a/packages/markers-plugin/src/model.ts b/packages/markers-plugin/src/model.ts
@@ -114,6 +114,11 @@ export type MarkerConfig = {
      * @default 1
      */
     opacity?: number;
+    /**
+     * Drawing order
+     * @default 1
+     */
+    zIndex?: number;
     /**
      * CSS class(es) added to the marker element (ignored for `imageLayer`, `videoLayer`)
      */