@aibee/owlly 1.0.25

package/src/owlly/overlay/canvas-overlay.ts

@@ -0,0 +1,642 @@
+import { Externals, NS_THREE, NS_KONVA } from '../stage/externals';
+import { Overlay } from './overlay';
+import { Owlly2D } from '../owlly-2d';
+import { Shape, ShapeData } from '../element/map-kit/shape';
+import { View } from '../view/view';
+import { Events } from '../utils/events';
+// import { BasicTools } from '../utils';
+
+class ShapeGroup {
+  shape: NS_KONVA.Shape;
+
+  rawShape: Shape;
+
+  baseZoom: { x: number; y: number };
+
+  zIndices: number[];
+
+  points: NS_KONVA.Shape[];
+
+  vertexOptions: NS_KONVA.CircleConfig;
+
+  lineJointsStyle: 'none' | 'endpoints' | 'joints';
+
+  constructor(shape: NS_KONVA.Shape, rawShape: Shape, baseZoom: { x: number; y: number }, zIndices: number[] = []) {
+    this.shape = shape;
+    this.rawShape = rawShape;
+    this.baseZoom = baseZoom;
+    this.zIndices = zIndices;
+    this.points = [];
+    this.lineJointsStyle = 'joints';
+    this.vertexOptions = {
+      radius: 0,
+      fill: '#fff',
+      shadowColor: '#000',
+      shadowBlur: 3,
+      shadowOffset: { x: 1, y: 2 },
+      shadowOpacity: 0.3,
+      shadowEnabled: false,
+    };
+  }
+}
+
+enum MouseState {
+  IDLE,
+  DOWN,
+  MOVE,
+}
+
+/**
+ * POI覆盖层, 可以展示POI图标与文字, 存在图标时以图标中心为中心, 否则为文字中心
+ * @example
+ * ```typescript
+ * const poiOverlay = new PoiOverlay();
+ * // 任意View
+ * view.addOverlay(poiOverlay);
+ * ```
+ */
+class CanvasOverlay extends Overlay {
+  private owlly2D: Owlly2D;
+
+  private container: HTMLElement;
+
+  private parent: View;
+
+  private layer: NS_KONVA.Layer;
+
+  private renderThisFrame: boolean;
+
+  private shapes: ShapeGroup[];
+
+  private mouseState: MouseState;
+
+  private mousePositionBuffer: NS_THREE.Vector2;
+
+  private eventTarget: ShapeGroup;
+
+  private enabled: boolean;
+
+  private listeners: {
+    pointerDown: (event: MouseEvent) => void;
+    pointerUp: (event: MouseEvent) => void;
+    touchStart: (event: TouchEvent) => void;
+    touchEnd: (event: TouchEvent) => void;
+    nodePointerDown: (event: NS_KONVA.KonvaEventObject<MouseEvent>) => void;
+    nodePointerUp: (event: NS_KONVA.KonvaEventObject<MouseEvent>) => void;
+  };
+
+  init(parent: View, container = new HTMLElement()): void {
+    const { THREE } = Externals.getInstance();
+    this.container = container;
+    this.parent = parent;
+    this.owlly2D = Owlly2D.getInstance(container);
+    this.layer = this.owlly2D.addLayer();
+    this.shapes = [];
+    this.renderThisFrame = true;
+    this.layer.zIndex(0);
+    this.enabled = true;
+
+    this.mouseState = MouseState.IDLE;
+    this.mousePositionBuffer = new THREE.Vector2();
+    this.listeners = {
+      pointerDown: (e): void => { this.onPointerDown(e); },
+      pointerUp: (e): void => { this.onPointerUp(e); },
+      touchStart: (e): void => { this.onTouchStart(e); },
+      touchEnd: (e): void => { this.onTouchEnd(e); },
+      nodePointerDown: (e): void => { this.onNodePointerDown(e); },
+      nodePointerUp: (): void => { this.onNodePointerUp(); },
+    };
+    this.container.addEventListener('pointerdown', this.listeners.pointerDown, true);
+    this.container.addEventListener('pointerup', this.listeners.pointerUp, true);
+    this.container.addEventListener('touchstart', this.listeners.touchStart, true);
+    this.container.addEventListener('touchend', this.listeners.touchEnd, true);
+  }
+
+  /**
+   * 打开交互
+   */
+  openInteraction(): void {
+    this.owlly2D.openInteraction();
+  }
+
+  /**
+   * 关闭交互
+   */
+  closeInteraction(): void {
+    this.owlly2D.closeInteraction();
+  }
+
+  update(): boolean {
+    if (this.renderThisFrame) {
+      this.renderThisFrame = false;
+      return true;
+    }
+    return false;
+  }
+
+  render(): void {
+    if (!this.enabled) return;
+
+    if (this.parent.camera) {
+      const { camera } = this.parent;
+      const { clientHeight, clientWidth } = this.container;
+      const widthHalf = clientWidth / 2;
+      const heightHalf = clientHeight / 2;
+      this.shapes.forEach(({
+        shape, rawShape, zIndices, points, vertexOptions, lineJointsStyle,
+      }) => {
+        this.updateShapeDataToKonvaShape(
+          shape,
+          rawShape,
+          camera,
+          widthHalf,
+          heightHalf,
+          points,
+          vertexOptions,
+          zIndices,
+          lineJointsStyle,
+        );
+      });
+    }
+    this.layer.draw();
+  }
+
+  setRenderOrder(order: number): void {
+    this.layer.zIndex(order);
+  }
+
+  dispose(): void {
+    this.shapes.forEach((s) => {
+      const konvaObject = s.shape;
+      konvaObject.destroy();
+
+      if (s.shape.children.length === 0) {
+        s.shape.destroy();
+        s.points.forEach((p) => {
+          p.off('mousedown touchdown');
+          p.destroy();
+        });
+      }
+
+      if (s && s.shape) delete (s as any).shape; // eslint-disable-line
+    });
+
+    this.renderThisFrame = true;
+
+    this.container.removeEventListener('pointerdown', this.listeners.pointerDown, true);
+    this.container.removeEventListener('pointerup', this.listeners.pointerUp, true);
+    this.container.removeEventListener('touchstart', this.listeners.touchStart, true);
+    this.container.removeEventListener('touchend', this.listeners.touchEnd, true);
+    this.layer.destroy();
+  }
+
+  private onPointerDown(e: MouseEvent): void {
+    this.owlly2D.stage._mousedown(e); // eslint-disable-line no-underscore-dangle
+  }
+
+  private onPointerUp(e: MouseEvent): void {
+    const { THREE } = Externals.getInstance();
+    this.owlly2D.stage._mouseup(e); // eslint-disable-line no-underscore-dangle
+    const { clientX, clientY } = e;
+    const { left: rectX, top: rectY } = this.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+    const distance = new THREE.Vector2(x, y).distanceToSquared(this.mousePositionBuffer);
+    this.emit(Events.CANVAS_VERTEX_UP, this.eventTarget, e.button);
+    if (this.mouseState === MouseState.DOWN && distance < 100) {
+      this.emit(Events.CANVAS_VERTEX_CLICKED, this.eventTarget, e.button);
+    }
+    this.mouseState = MouseState.IDLE;
+  }
+
+  private onTouchStart(e: TouchEvent): void {
+    this.owlly2D.stage._touchstart(e); // eslint-disable-line no-underscore-dangle
+  }
+
+  private onTouchEnd(e: TouchEvent): void {
+    const { THREE } = Externals.getInstance();
+    this.owlly2D.stage._touchend(e); // eslint-disable-line no-underscore-dangle
+    const { clientX, clientY } = e.changedTouches[0];
+    // const { clientWidth, clientHeight } = this.container;
+    const { left: rectX, top: rectY } = this.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+    const distance = new THREE.Vector2(x, y).distanceToSquared(this.mousePositionBuffer);
+    this.emit(Events.CANVAS_VERTEX_UP, this.eventTarget, 0);
+    if (this.mouseState === MouseState.DOWN && distance < 100) {
+      this.emit(Events.CANVAS_VERTEX_CLICKED, this.eventTarget, 0);
+    }
+    this.mouseState = MouseState.IDLE;
+  }
+
+  private onNodePointerDown(e: NS_KONVA.KonvaEventObject<MouseEvent | TouchEvent>): void {
+    // console.log('node pointer down', e);
+    if (this.mouseState !== MouseState.IDLE) return;
+    let index = -1;
+    const target = this.shapes.find((shape) => {
+      const i = shape.points.indexOf((e.currentTarget) as NS_KONVA.Circle);
+      if (i >= 0) index = i;
+      return i >= 0;
+    });
+    if (!target) return;
+    this.mouseState = MouseState.DOWN;
+    const { clientX, clientY } = e.evt instanceof MouseEvent ? e.evt : e.evt.touches[0];
+    // const { clientWidth, clientHeight } = this.container;
+    const { left: rectX, top: rectY } = this.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+    this.mousePositionBuffer.set(x, y);
+    this.eventTarget = target;
+    this.emit(Events.CANVAS_VERTEX_DOWN, target, index, e.evt instanceof MouseEvent ? e.evt.button : 0);
+  }
+
+  private onNodePointerUp(): void {
+    // do nothing
+  }
+
+  /**
+   * 清空画布
+   */
+  public clearShapes(): void {
+    this.shapes.forEach((shape) => {
+      shape.shape.destroy();
+      shape.points.forEach((point) => {
+        point.destroy();
+      });
+      delete (shape as any).shape; // eslint-disable-line
+    });
+    this.shapes = [];
+
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 删除Shape
+   * @param shape Shape
+   */
+  public removeShape(
+    shape: Shape | NS_KONVA.Shape,
+  ): void {
+    if (!shape) return;
+
+    for (let i = 0; i < this.shapes.length; i++) {
+      if (this.shapes[i].rawShape === shape || this.shapes[i].shape === shape) {
+        const konvaObject = this.shapes[i].shape;
+        konvaObject.destroy();
+
+        const shapeToRemove = this.shapes[i];
+
+        if (this.shapes[i].shape.children.length === 0) {
+          this.shapes[i].shape.destroy();
+          this.shapes[i].points.forEach((p) => {
+            p.off('mousedown touchdown');
+            p.destroy();
+          });
+          this.shapes.splice(i, 1);
+        }
+
+        if (shapeToRemove === this.shapes[i] && this.shapes[i].shape) delete (this.shapes[i] as any).shape; // eslint-disable-line
+
+        this.renderThisFrame = true;
+      }
+    }
+  }
+
+  /**
+   * 更新Shape
+   * @param shape Shape
+   */
+  public updateShape(
+    shape: Shape | NS_KONVA.Shape,
+    zIndices: number[] = [],
+  ): NS_KONVA.Shape | null {
+    if (!shape) return null;
+
+    const { Konva } = Externals.getInstance();
+
+    for (let i = 0; i < this.shapes.length; i++) {
+      if (this.shapes[i].rawShape === shape || this.shapes[i].shape === shape) {
+        const konvaObject = this.shapes[i].shape;
+        this.shapes[i].zIndices = zIndices;
+        if (konvaObject instanceof Konva.Shape) {
+          const newShape = this.transformShapeDataToKonvaShape(this.shapes[i].rawShape.getData());
+          if (newShape) {
+            konvaObject.setAttrs(newShape!.attrs);
+          }
+          this.shapes[i].points.forEach((p) => { p.setAttrs(this.shapes[i].vertexOptions); });
+        }
+        this.renderThisFrame = true;
+
+        return this.shapes[i].shape;
+      }
+    }
+
+    return null;
+  }
+
+  public setVertexConfig(shape: Shape | NS_KONVA.Shape, config: NS_KONVA.CircleConfig): NS_KONVA.Shape | null {
+    if (!shape) return null;
+
+    for (let i = 0; i < this.shapes.length; i++) {
+      if (this.shapes[i].rawShape === shape || this.shapes[i].shape === shape) {
+        const newConfig = Object.assign(this.shapes[i].vertexOptions, config);
+        this.shapes[i].points.forEach((p) => {
+          p.setAttrs(newConfig);
+        });
+        this.renderThisFrame = true;
+
+        return this.shapes[i].shape;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * 将shapeData转换为Konva.Path对象
+   * @param shapeData ShapeData
+   */
+  private transformShapeDataToKonvaShape(shapeData: ShapeData): NS_KONVA.Shape | null {
+    const { shapeType } = shapeData;
+    const { Konva } = Externals.getInstance();
+    if (shapeType === 'point') {
+      const circle = new Konva.Circle({
+        radius: shapeData.radius,
+        id: shapeData.id,
+        x: shapeData.x,
+        y: shapeData.y,
+        stroke: shapeData.stroke,
+        strokeWidth: shapeData.strokeWidth,
+        fill: shapeData.fill,
+      });
+      return circle;
+    } if (shapeType === 'line') {
+      const path = new Konva.Path({
+        id: shapeData.id,
+        x: shapeData.x,
+        y: shapeData.y,
+        data: `${shapeData.path.toUpperCase()}`,
+        stroke: shapeData.stroke,
+        strokeWidth: shapeData.strokeWidth,
+        lineJoin: 'round',
+        lineCap: 'round',
+      });
+      return path;
+    } if (shapeType === 'shape') {
+      const path = new Konva.Path({
+        id: shapeData.id,
+        x: shapeData.x,
+        y: shapeData.y,
+        data: `${shapeData.path.toUpperCase()}z`,
+        stroke: shapeData.stroke,
+        strokeWidth: shapeData.strokeWidth,
+        fill: shapeData.fill,
+        lineJoin: 'round',
+        lineCap: 'round',
+      });
+      return path;
+    }
+
+    return null;
+  }
+
+  // private sideOfVecToCamera(camera: Camera, vec: Vector3, norm: Vector3): number {
+  //   return vec.clone().sub(camera.position).dot(norm);
+  // }
+
+  private updateShapeDataToKonvaShape(
+    shape: NS_KONVA.Shape,
+    rawShape: Shape,
+    camera: NS_THREE.Camera,
+    halfW: number,
+    halfH: number,
+    points: NS_KONVA.Shape[],
+    pointOptions: NS_KONVA.ShapeConfig,
+    zIndices: number[] = [],
+    lineJointsStyle: 'none' | 'endpoints' | 'joints' = 'joints',
+  ): void {
+    const { THREE, Konva } = Externals.getInstance();
+    const shapeData = rawShape.getData();
+    const { shapeType } = shapeData;
+    const frustum = new THREE.Frustum();
+    frustum.setFromProjectionMatrix(
+      new THREE.Matrix4().multiplyMatrices(
+        camera.projectionMatrix,
+        camera.matrixWorldInverse,
+      ),
+    );
+    if (shapeType === 'point') {
+      const circle = shape as NS_KONVA.Circle;
+      const v = new THREE.Vector3(shapeData.x, shapeData.y, shapeData.zIndex);
+      const coordinate2 = v.project(camera!);
+      const x = (coordinate2.x + 1) * halfW;
+      const y = (1 - coordinate2.y) * halfH;
+      circle.x(x);
+      circle.y(y);
+    } else if (camera instanceof THREE.OrthographicCamera) {
+      const path = shape as NS_KONVA.Path;
+      const pathSteps = rawShape.getSteps();
+      const globalZ = shapeData.zIndex;
+      let data = pathSteps.map((s, i) => {
+        let z = globalZ;
+        if (i < zIndices.length) z = zIndices[i];
+        const coords = s.coords.map(([x, y]) => {
+          const v = new THREE.Vector3(x, y, z);
+          const coordinate2 = v.project(camera!);
+          const sx = (coordinate2.x + 1) * halfW;
+          const sy = (1 - coordinate2.y) * halfH;
+          return `${sx},${sy}`;
+        }).join(',');
+        return `${s.command}${coords}`;
+      }).join('').toUpperCase();
+      if (shapeType === 'shape') data += 'z';
+      path.data(data);
+    } else {
+      const path = shape as NS_KONVA.Path;
+      const pathSteps = rawShape.getSteps();
+      const globalZ = shapeData.zIndex;
+      const lookAtVec = new THREE.Vector3(0, 0, -1);
+      lookAtVec.applyQuaternion(camera.quaternion);
+
+      let prevVecVisible = false;
+      let currentVecVisible = false;
+      const prevVec = new THREE.Vector3();
+
+      let data = pathSteps.map((s, i) => {
+        let z = globalZ;
+        if (i < zIndices.length) z = zIndices[i];
+
+        const [x, y] = s.coords[s.coords.length - 1];
+        const v = new THREE.Vector3(x, y, z);
+        let addOn = '';
+        currentVecVisible = frustum.containsPoint(v);
+        if (i > 0) {
+          const line = new THREE.Line3(prevVec.clone(), v.clone());
+
+          const lVisible = prevVecVisible && currentVecVisible;
+          if (!lVisible) {
+            const intersections = frustum.planes.map((p) => {
+              const intersects = p.intersectLine(line, new THREE.Vector3());
+              if (!intersects) return null;
+              const valid = !frustum.planes.filter((pl) => pl !== p).some(
+                (pl) => (pl.distanceToPoint(intersects) < 0),
+              );
+              return valid ? intersects : null;
+            }).filter((p) => p) as NS_THREE.Vector3[];
+            if (intersections.length) {
+              intersections.sort((a, b) => (a.distanceToSquared(prevVec) - b.distanceToSquared(prevVec)));
+              addOn = intersections.map((vec, j) => {
+                const coord = vec.project(camera!);
+                const sign = coord.z > 1 ? -1 : 1;
+                const sx = (coord.x + 1) * halfW * sign;
+                const sy = (1 - coord.y) * halfH * sign;
+                if (j === 0) return `${prevVecVisible ? 'l' : 'm'}${sx},${sy}`;
+                return `l${sx},${sy}`;
+              }).join('');
+            }
+          }
+        }
+        prevVec.copy(v);
+        const coordinate2 = v.project(camera!);
+        const sign = coordinate2.z > 1 ? -1 : 1;
+        const sx = (coordinate2.x + 1) * halfW * sign;
+        const sy = (1 - coordinate2.y) * halfH * sign;
+        const pointVisible = lineJointsStyle === 'joints' || (lineJointsStyle === 'endpoints' && (i === 0 || i === zIndices.length - 1));
+
+        if (i < points.length) {
+          const point = points[i];
+          point.x(sx);
+          point.y(sy);
+          point.visible(pointVisible && currentVecVisible && path.visible());
+          point.setAttrs(pointOptions);
+        } else {
+          const point = new Konva.Circle({
+            radius: 0,
+            x: sx,
+            y: sy,
+            stroke: 'transparent',
+            strokeWidth: 0,
+          });
+          point.visible(pointVisible && currentVecVisible && path.visible());
+          point.setAttrs(pointOptions);
+          point.on('mousedown touchdown', this.listeners.nodePointerDown);
+          this.layer.add(point);
+          points.push(point);
+        }
+
+        prevVecVisible = currentVecVisible;
+
+        return `${addOn}${currentVecVisible ? 'l' : 'm'}${sx},${sy}`;
+      }).join('').toUpperCase();
+
+      while (points.length > pathSteps.length) {
+        const point = points.pop();
+        point!.off('mousedown touchdown');
+        point!.destroy();
+      }
+
+      if (shapeType === 'shape') data += 'z';
+      path.data(data);
+    }
+  }
+
+  public addShape(
+    shapes: Shape | Shape[],
+    baseZoom: { x: number; y: number } = { x: 1, y: 1 },
+    zIndices: number[] | number[][] = [],
+  ): NS_KONVA.Shape | NS_KONVA.Shape[] | null {
+    const ret: NS_KONVA.Shape[] = [];
+    const shapeList = Array.isArray(shapes) ? shapes : [shapes];
+    const zIndicesList = (zIndices.length && Array.isArray(zIndices[0]) ? zIndices : [zIndices]) as number[][];
+    shapeList.forEach((shape, i) => {
+      const shapeData = shape.getData();
+      const konvaShape = this.transformShapeDataToKonvaShape(shapeData);
+      if (konvaShape !== null) {
+        ret.push(konvaShape);
+        this.layer.add(konvaShape);
+        const shapeGroup = new ShapeGroup(konvaShape, shape, baseZoom, zIndicesList[i]);
+        shapeGroup.points.forEach((p) => { p.setAttrs(shapeGroup.vertexOptions); });
+        this.shapes.push(shapeGroup);
+      }
+    });
+
+    this.renderThisFrame = true;
+
+    if (Array.isArray(shapes)) {
+      return ret;
+    } if (ret.length > 0) {
+      return ret[0];
+    }
+    return null;
+  }
+
+  public getShapeGroup(shape: Shape | NS_KONVA.Shape): ShapeGroup | undefined {
+    return this.shapes.find((s) => s.rawShape === shape || s.shape === shape);
+  }
+
+  public forceRender(): void {
+    this.renderThisFrame = true;
+  }
+
+  /**
+   * 计算路径距离中点
+   * @param shape 目标图形
+   */
+  public getMiddlePoint(shape: Shape | NS_KONVA.Shape): NS_THREE.Vector3 | null {
+    const shapeGroup = this.getShapeGroup(shape);
+    if (!shapeGroup) return null;
+    const steps = shapeGroup.rawShape.getSteps();
+    const { zIndices } = shapeGroup;
+    const { THREE } = Externals.getInstance();
+
+    if (!steps.length) return null;
+
+    const distArray = [0];
+    let dist = 0;
+    const prevPoint = new THREE.Vector3(
+      steps[0].coords[steps[0].coords.length - 1][0],
+      steps[0].coords[steps[0].coords.length - 1][1],
+      zIndices.length > 0 ? zIndices[0] : 0,
+    );
+    const currentPoint = new THREE.Vector3();
+    const result = new THREE.Vector3().copy(prevPoint);
+    for (let i = 1; i < steps.length; i += 1) {
+      const [x, y] = steps[i].coords[steps[i].coords.length - 1];
+      const z = zIndices[i];
+      currentPoint.set(x, y, z);
+      const d = currentPoint.distanceTo(prevPoint);
+      dist += d;
+      distArray.push(dist);
+      prevPoint.copy(currentPoint);
+    }
+    const distHalf = dist / 2;
+    let middleIndex = 0;
+    while (middleIndex + 1 < distArray.length && distArray[middleIndex + 1] < distHalf) middleIndex += 1;
+    result.set(
+      steps[middleIndex].coords[steps[middleIndex].coords.length - 1][0],
+      steps[middleIndex].coords[steps[middleIndex].coords.length - 1][1],
+      zIndices.length > middleIndex ? zIndices[middleIndex] : 0,
+    );
+    if (middleIndex + 1 < distArray.length) {
+      const segmentLength = distArray[middleIndex + 1] - distArray[middleIndex];
+      const ratio = (distHalf - distArray[middleIndex]) / segmentLength;
+      const furtherPoint = new THREE.Vector3(
+        steps[middleIndex + 1].coords[steps[middleIndex + 1].coords.length - 1][0],
+        steps[middleIndex + 1].coords[steps[middleIndex + 1].coords.length - 1][1],
+        zIndices.length > middleIndex + 1 ? zIndices[middleIndex + 1] : 0,
+      );
+      result.add(furtherPoint.sub(result).multiplyScalar(ratio));
+    }
+    return result;
+  }
+
+  public setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
+
+  resize(containerWidth: number, containerHeight: number): void {
+    this.owlly2D.resize(containerWidth, containerHeight);
+  }
+}
+
+export { CanvasOverlay, ShapeGroup };

package/src/owlly/overlay/css-2d-overlay.ts

@@ -0,0 +1,48 @@
+import { CSS2DRenderer } from '../../external/renderers/css-2d-renderer';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+
+class CSS2DOverlay extends Overlay {
+  private container: HTMLElement;
+
+  private parent: View;
+
+  private renderer: CSS2DRenderer | null;
+
+  init(parent: View, container = parent.container): void {
+    this.container = container;
+    this.parent = parent;
+    const { clientWidth, clientHeight } = this.container;
+    this.renderer = new CSS2DRenderer();
+    this.renderer.setSize(clientWidth, clientHeight);
+    this.renderer.domElement.style.position = 'absolute';
+    this.renderer.domElement.style.top = '0';
+    this.renderer.domElement.style.userSelect = 'none';
+    this.container.appendChild(this.renderer.domElement);
+  }
+
+  resize(containerWidth: number, containerHeight: number): void {
+    this.renderer!.setSize(containerWidth, containerHeight);
+  }
+
+  setRenderOrder(order: number): void {
+    this.renderer!.domElement.style.setProperty('z-index', `${order}`);
+  }
+
+  update(): boolean {
+    return false;
+  }
+
+  render(): void {
+    if (!this.parent.camera) return;
+    this.renderer!.render(this.parent.stage.scene, this.parent.camera);
+  }
+
+  dispose(): void {
+    this.container.removeChild(this.renderer!.domElement);
+    this.renderer = null;
+    this.container = null as unknown as HTMLElement;
+  }
+}
+
+export { CSS2DOverlay };