@aibee/owlly 1.0.25

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

@@ -0,0 +1,50 @@
+import { NS_THREE } from '../stage/externals';
+import { CSS3DRenderer } from '../../external/renderers/css-3d-renderer';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+
+class CSS3DOverlay extends Overlay {
+  private container: HTMLElement;
+
+  private parent: View;
+
+  renderer: CSS3DRenderer | null;
+
+  init(parent: View, container = new HTMLElement()): void {
+    this.container = container;
+    this.parent = parent;
+    const { clientWidth, clientHeight } = this.container;
+    this.renderer = new CSS3DRenderer();
+    this.renderer.setSize(clientWidth, clientHeight);
+    this.renderer.domElement.style.position = 'absolute';
+    this.renderer.domElement.style.top = '0';
+    this.renderer.domElement.style.left = '0';
+    this.renderer.domElement.style.userSelect = 'none';
+    // this.renderer.domElement.style.pointerEvents = '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(scene: NS_THREE.Scene): void {
+    if (!this.parent.camera) return;
+    this.renderer!.render(scene, this.parent.camera);
+  }
+
+  dispose(): void {
+    this.container.removeChild(this.renderer!.domElement);
+    this.renderer = null;
+  }
+}
+
+export { CSS3DOverlay };

package/src/owlly/overlay/index.ts

@@ -0,0 +1,11 @@
+// #if WEB_ONLY
+export * from './overlay';
+// #endif
+// export * from './path-overlay';
+export * from './path-overlay2';
+// export * from './label-overlay';
+export * from './css-2d-overlay';
+// export * from './css-3d-overlay';
+export * from './poi-overlay';
+export * from './canvas-overlay';
+export * from './poi-overlay-3d';

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

@@ -0,0 +1,419 @@
+import { NS_THREE } from '../stage/externals';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+import { Events } from '../utils/events';
+
+interface LabelPoint {
+  element: HTMLElement;
+  labelElement: HTMLElement;
+  pointElement: HTMLElement;
+  guidelineElement?: HTMLElement;
+  position: NS_THREE.Vector3;
+  name: string;
+  size: [number, number];
+  ready: boolean;
+  id: string;
+  priority: number;
+  alwaysShow: boolean;
+}
+
+/**
+ * 该文件应被舍弃, 不再使用
+ * @deprecated
+ */
+class LabelOverlay extends Overlay {
+  private container: HTMLElement;
+
+  private parent: View;
+
+  private overlay: HTMLDivElement;
+
+  private iconPoints: { element: HTMLImageElement; position: NS_THREE.Vector3; offsetX: number; offsetY: number }[];
+
+  private labelPoints: LabelPoint[];
+
+  private bubblePoint: {
+    element: HTMLElement;
+    imageElement: HTMLImageElement;
+    messageElement: HTMLDivElement;
+    position: NS_THREE.Vector3;
+    message: string;
+  };
+
+  private renderThisFrame: boolean;
+
+  init(parent: View, container = new HTMLElement()): void {
+    this.container = container;
+    this.parent = parent;
+    if (!this.parent.camera) {
+      throw new Error('Parent view should have a camera to rely on');
+    }
+    this.iconPoints = [];
+    this.labelPoints = [];
+    this.renderThisFrame = false;
+    this.overlay = document.createElement('div');
+    this.overlay.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    `;
+    this.container.appendChild(this.overlay);
+  }
+
+  update(): boolean {
+    this.labelPoints.forEach(({ labelElement, ready }, i) => {
+      if (ready) return;
+      const { width, height } = labelElement.getBoundingClientRect();
+      labelElement.style.setProperty('left', `${-width * 0.5}px`);
+      labelElement.style.setProperty('top', `${-height - 4}px`);
+      this.labelPoints[i].ready = true;
+    });
+    if (this.renderThisFrame) {
+      this.renderThisFrame = false;
+      return true;
+    }
+    return false;
+  }
+
+  render(): void {
+    const { clientWidth, clientHeight } = this.container;
+    const widthHalf = clientWidth / 2;
+    const heightHalf = clientHeight / 2;
+    this.iconPoints.forEach(({
+      element, position, offsetX, offsetY,
+    }) => {
+      if (!this.parent.camera) return;
+      const p = position.clone();
+      p.project(this.parent.camera);
+      element.style.setProperty('left', `${(p.x + 1) * widthHalf - 20 + offsetX}px`);
+      element.style.setProperty('top', `${(1 - p.y) * heightHalf - 40 + offsetY}px`);
+    });
+    this.emit(Events.LABEL_ICONS_POSITION_UPDATED, this.iconPoints.map((p) => (p.element)));
+    if (
+      this.bubblePoint
+      && this.bubblePoint.message
+      && this.bubblePoint.message.length
+      && this.parent.camera
+    ) {
+      const p = this.bubblePoint.position.clone();
+      p.project(this.parent.camera);
+      this.bubblePoint.element.style.setProperty('left', `${(p.x + 1) * widthHalf}px`);
+      this.bubblePoint.element.style.setProperty('top', `${(1 - p.y) * heightHalf}px`);
+    }
+    const range: number[][] = [];
+    this.labelPoints.forEach(({
+      element, labelElement, position, pointElement, alwaysShow,
+    }, i) => {
+      if (!this.parent.camera) return;
+      const p = position.clone();
+      p.project(this.parent.camera);
+      if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) return;
+      const posX = (p.x + 1) * widthHalf;
+      const posY = (1 - p.y) * heightHalf;
+      element.style.setProperty('left', `${posX}px`);
+      element.style.setProperty('top', `${posY}px`);
+      const { width, height } = labelElement.getBoundingClientRect();
+      const leftX = posX - width / 2 - 8;
+      const rightX = posX + width / 2 + 8;
+      const topY = posY - height - 4 - 8;
+      const bottomY = posY - 4 + 8;
+
+      if (i === 0) {
+        range.push([leftX, rightX, topY, bottomY]);
+        return;
+      }
+
+      const valid = alwaysShow || !range.some(([lx, rx, ty, by]) => {
+        if (leftX >= lx && leftX >= rx) return false;
+        if (leftX <= rx && rightX <= lx) return false;
+        if (topY >= ty && topY >= by) return false;
+        if (topY <= by && bottomY <= ty) return false;
+        return true;
+      });
+
+      if (valid) {
+        range.push([leftX, rightX, topY, bottomY]);
+        labelElement.style.setProperty('opacity', '1');
+        pointElement.style.setProperty('opacity', '1');
+      } else {
+        labelElement.style.setProperty('opacity', '0');
+        pointElement.style.setProperty('opacity', '0');
+      }
+    });
+  }
+
+  setRenderOrder(order: number): void {
+    this.overlay.style.setProperty('z-index', `${order}`);
+  }
+
+  dispose(): void {
+    if (this.container) this.container.removeChild(this.overlay);
+    delete (this as any).overlay; // eslint-disable-line
+  }
+
+  static getBiggerPos(arr: number[][], target: number, index: number): number {
+    let i = 0;
+    let j = arr.length - 1;
+    while (i !== j) {
+      const p = Math.ceil((i + j) / 2);
+      const v = arr[p][index];
+      if (target >= v) {
+        i = p;
+      } else {
+        j = p - 1;
+      }
+    }
+    return i;
+  }
+
+  static getSmallerPos(arr: number[][], target: number, index: number): number {
+    let i = 0;
+    let j = arr.length - 1;
+    while (i !== j) {
+      const p = Math.floor((i + j) / 2);
+      const v = arr[p][index];
+      if (target >= v) {
+        i = p + 1;
+      } else {
+        j = p;
+      }
+    }
+    return i;
+  }
+
+  public setBubble(
+    {
+      position, message, imageStyle, messageStyle, fontSize,
+    }: {
+      position: NS_THREE.Vector3;
+      message: string | null;
+      fontSize: number;
+      imageStyle: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+      };
+      messageStyle: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+      };
+    },
+  ): void {
+    if (
+      this.bubblePoint
+      && this.bubblePoint.message
+      && this.bubblePoint.message.length
+    ) {
+      this.overlay.removeChild(this.bubblePoint.element);
+      this.bubblePoint.message = '';
+    }
+    if (!message || !message.length) return;
+    this.bubblePoint = {
+      element: document.createElement('div'),
+      imageElement: document.createElement('img'),
+      messageElement: document.createElement('div'),
+      position,
+      message,
+    };
+    this.bubblePoint.element.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      z-index: 2;
+    `;
+    this.bubblePoint.imageElement.src = 'imgs/bubble.png';
+    this.bubblePoint.imageElement.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: ${imageStyle.top || -110}px;
+      left: ${imageStyle.left || -103.5}px;
+      width: ${imageStyle.width || 207}px;
+      height: ${imageStyle.height || 85}px;
+      object-fit: contain;
+      z-index: 2;
+    `;
+    this.bubblePoint.messageElement.innerHTML = `
+      <span style="text-align: center;">
+        ${message}
+      </span>
+    `;
+    this.bubblePoint.messageElement.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: ${messageStyle.top || -104}px;
+      left: ${messageStyle.left || -82}px;
+      width: ${messageStyle.width || 164}px;
+      height: ${messageStyle.height || 42}px;
+      color: #000;
+      font-size: ${fontSize}px;
+      z-index: 3;
+    `;
+    this.bubblePoint.element.appendChild(this.bubblePoint.imageElement);
+    this.bubblePoint.element.appendChild(this.bubblePoint.messageElement);
+    this.overlay.appendChild(this.bubblePoint.element);
+    this.renderThisFrame = true;
+  }
+
+  public setIconPoints(
+    points: {
+      position: NS_THREE.Vector3;
+      src: string;
+      width: number;
+      height: number;
+      offsetX: number;
+      offsetY: number;
+    }[],
+  ): void {
+    const srcSet = new Set<string>();
+    const srcMap = new Map<
+      string,
+      { element: HTMLImageElement; position: NS_THREE.Vector3; offsetX: number; offsetY: number }
+    >();
+    points.forEach(({ src }) => { srcSet.add(src); });
+    while (this.iconPoints.length) {
+      const p = this.iconPoints.pop();
+      if (p) {
+        const s = p.element.src;
+        if (srcSet.has(s)) srcMap.set(s, p);
+        else this.overlay.removeChild(p.element);
+      }
+    }
+    this.iconPoints.push(...srcMap.values());
+    points.forEach(({
+      position, src, width, height, offsetX, offsetY,
+    }) => {
+      if (srcMap.has(src)) {
+        srcMap.get(src)!.position = position;
+        return;
+      }
+      const point = {
+        element: document.createElement('img'), position, offsetX, offsetY,
+      };
+      point.element.src = src;
+      point.element.style.cssText = `
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: ${width || 40}px;
+        height: ${height || 40}px;
+        object-fit: contain;
+        z-index: 2;
+      `;
+      this.iconPoints.push(point);
+      this.overlay.appendChild(point.element);
+    });
+    this.renderThisFrame = true;
+  }
+
+  public setLabelPoints(
+    points: {
+      position: NS_THREE.Vector3;
+      name: string;
+      nodeId: string;
+      color?: string;
+      pointSize?: number;
+      offsetX?: number;
+      offsetY?: number;
+      showGuideline?: boolean;
+      fontSize?: number;
+      alwaysShow?: boolean;
+    }[],
+  ): void {
+    while (this.labelPoints.length) {
+      const p = this.labelPoints.pop();
+      if (p) this.overlay.removeChild(p.element);
+    }
+    points.forEach(({
+      position, name, nodeId, color, pointSize,
+      offsetX, offsetY, showGuideline, fontSize, alwaysShow,
+    }) => {
+      const pSize = pointSize || 4;
+      const offX = offsetX || 0;
+      const offY = offsetY || 0;
+      const point = {
+        element: document.createElement('div'),
+        labelElement: document.createElement('div'),
+        pointElement: document.createElement('div'),
+        position,
+        name,
+        size: [0, 0] as [number, number],
+        ready: false,
+        id: nodeId,
+        priority: 0,
+        alwaysShow: !!alwaysShow,
+      } as LabelPoint;
+      point.element.style.cssText = `
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        z-index: 1;
+      `;
+      point.labelElement.innerHTML = name;
+      // TODO(jyfang): Free color settings.
+      point.labelElement.style.cssText = `
+        position: absolute;
+        font-size: ${fontSize || 16}px;
+        white-space: nowrap;
+        color: ${color || '#A57D50'};
+        font-weight: 500;
+        text-shadow: 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white;
+        transform: translate(${offX}px, ${offY}px);
+      `;
+      point.pointElement.style.cssText = `
+        display: inline-block;
+        position: absolute;
+        top: -${pSize / 2}px;
+        left: -${pSize / 2}px;
+        height: ${pSize}px;
+        width: ${pSize}px;
+        background-color: ${color || '#A57D50'};
+        border-radius: 50%;
+        box-shadow: 0 0 1px 2px #fff;
+      `;
+      point.element.appendChild(point.labelElement);
+      point.element.appendChild(point.pointElement);
+      if (showGuideline) {
+        point.guidelineElement = document.createElement('div');
+        point.guidelineElement.style.cssText = `
+          position: absolute;
+          width: 2px;
+          height: ${Math.abs(offY) - 20}px;
+          top: ${Math.sign(offY) * (Math.abs(offY) - 20)}px;
+          left: -1px;
+          background-color: #fff;
+        `;
+        point.element.appendChild(point.guidelineElement);
+      }
+      this.labelPoints.push(point);
+      this.overlay.appendChild(point.element);
+    });
+    this.renderThisFrame = true;
+  }
+
+  public setPriorLabelPoints(ids: string[]): void {
+    const idSet = new Set<string>();
+    ids.forEach((id) => { idSet.add(id); });
+    this.labelPoints.forEach((p) => {
+      if (idSet.has(p.id)) p.priority = 999;
+      else p.priority = 0;
+    });
+    this.labelPoints.sort((a, b) => b.priority - a.priority);
+  }
+}
+
+export { LabelOverlay };

package/src/owlly/overlay/overlay.ts

@@ -0,0 +1,17 @@
+import { NS_THREE } from '../stage/externals';
+
+import { View } from '../view/view';
+import { EventHubClassic } from '../utils/event-hub';
+
+class Overlay extends EventHubClassic { }
+
+interface Overlay {
+  init(parent: View): void;
+  update(): boolean;
+  render(scene?: NS_THREE.Scene): void;
+  setRenderOrder(order: number): void;
+  resize?(containerWidth: number, containerHeight: number): void;
+  dispose(): void;
+}
+
+export { Overlay };

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

@@ -0,0 +1,170 @@
+import { NS_THREE } from '../stage/externals';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+
+/**
+ * 该类应该被舍弃, 不再使用
+ * @deprecated
+ */
+class PathOverlay extends Overlay {
+  private container: HTMLElement;
+
+  private parent: View;
+
+  private canvas: HTMLCanvasElement;
+
+  private context: CanvasRenderingContext2D | null;
+
+  private devicePixelRatio: number;
+
+  // private forceRender: boolean;
+  private path: NS_THREE.Vector3[];
+
+  private showEndPoints: boolean;
+
+  private startColor: { r: number; g: number; b: number };
+
+  private endColor: { r: number; g: number; b: number };
+
+  private lineWidth: number;
+
+  private setCanvasHeight(
+    containerWidth: number,
+    containerHeight: number,
+  ): void {
+    this.canvas.width = containerWidth * this.devicePixelRatio;
+    this.canvas.height = containerHeight * this.devicePixelRatio;
+    this.canvas.style.width = `${containerWidth}px`;
+    this.canvas.style.height = `${containerHeight}px`;
+  }
+
+  init(parent: View, container = new HTMLElement()): void {
+    this.container = container;
+    this.parent = parent;
+    this.devicePixelRatio = window.devicePixelRatio;
+    this.canvas = document.createElement('canvas');
+    this.path = [];
+    this.context = this.canvas.getContext('2d');
+    this.showEndPoints = true;
+    // this.forceRender = false;
+    this.canvas.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+    `;
+    const { clientWidth, clientHeight } = this.container;
+    this.setCanvasHeight(clientWidth, clientHeight);
+    this.container.appendChild(this.canvas);
+    this.startColor = { r: 109, g: 150, b: 253 };
+    this.endColor = { r: 109, g: 150, b: 253 };
+    this.lineWidth = 9;
+  }
+
+  resize(containerWidth: number, containerHeight: number): void {
+    this.setCanvasHeight(containerWidth, containerHeight);
+  }
+
+  update(): boolean {
+    return false;
+  }
+
+  render(): void {
+    if (!this.context) return;
+    const widthHalf = this.canvas.width / 2;
+    const heightHalf = this.canvas.height / 2;
+    const renderPath: [number, number][] = [];
+    this.path.forEach((v) => {
+      if (!this.parent.camera) return;
+      const p = v.clone();
+      p.project(this.parent.camera);
+      renderPath.push([(p.x + 1) * widthHalf, (1 - p.y) * heightHalf]);
+    });
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    if (!renderPath.length) return;
+    this.context.lineCap = 'round';
+    this.context.lineJoin = 'round';
+    const diff = {
+      r: this.endColor.r - this.startColor.r,
+      g: this.endColor.g - this.startColor.g,
+      b: this.endColor.b - this.startColor.b,
+    };
+    diff.r /= (renderPath.length - 1);
+    diff.g /= (renderPath.length - 1);
+    diff.b /= (renderPath.length - 1);
+    const currentColor = { ...this.startColor };
+    this.context.lineWidth = this.lineWidth;
+    this.context.beginPath();
+    renderPath.forEach((p: [number, number], i: number) => {
+      if (!this.context) return;
+      if (i === 0) {
+        this.context.moveTo(...p);
+      } else {
+        this.context.lineTo(...p);
+        currentColor.r += diff.r;
+        currentColor.g += diff.g;
+        currentColor.b += diff.b;
+        this.context.strokeStyle = `rgb(${currentColor.r}, ${currentColor.g}, ${currentColor.b})`;
+        this.context.stroke();
+        this.context.beginPath();
+        this.context.moveTo(...p);
+      }
+    });
+    if (!this.showEndPoints) return;
+    this.context.fillStyle = '#6F8DFF';
+    this.context.beginPath();
+    this.context.arc(renderPath[0][0], renderPath[0][1], 16, 0, Math.PI * 2);
+    this.context.arc(
+      renderPath[renderPath.length - 1][0],
+      renderPath[renderPath.length - 1][1],
+      16,
+      0,
+      Math.PI * 2,
+    );
+    this.context.fill();
+    this.context.fillStyle = '#FFFFFF';
+    this.context.strokeStyle = 'none';
+    this.context.beginPath();
+    this.context.arc(renderPath[0][0], renderPath[0][1], 8, 0, Math.PI * 2);
+    this.context.arc(
+      renderPath[renderPath.length - 1][0],
+      renderPath[renderPath.length - 1][1],
+      8,
+      0,
+      Math.PI * 2,
+    );
+    this.context.fill();
+  }
+
+  setRenderOrder(order: number): void {
+    this.canvas.style.setProperty('z-index', `${order}`);
+  }
+
+  dispose(): void {
+    if (this.container) this.container.removeChild(this.canvas);
+    delete (this as any).canvas; // eslint-disable-line
+  }
+
+  public setPath3D(path: NS_THREE.Vector3[]): void {
+    this.path = path;
+    this.render();
+  }
+
+  public setEndPointsVisible(value: boolean): void {
+    this.showEndPoints = value;
+  }
+
+  public setColors(
+    start: { r: number; g: number; b: number },
+    end: { r: number; g: number; b: number },
+  ): void {
+    this.startColor = start;
+    this.endColor = end;
+  }
+
+  public setLineWidth(lineWidth: number): void {
+    this.lineWidth = lineWidth;
+  }
+}
+
+export { PathOverlay };