@aibee/owlly 1.0.25

package/src/owlly/element/dom-label-2d.ts

@@ -0,0 +1,497 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { DOM2DElement } from './dom-2d-element';
+import { ElementFrameContext } from './element';
+import { Events } from '../utils/events';
+
+type AnchorPosition = 'center'|'left'|'right'|'top'|'bottom'|'topleft'|'topright'|'bottomleft'|'bottomright';
+
+type TextAttributes = {
+  content?: string;
+  visible?: boolean;
+  fontSize?: number;
+  color?: string;
+  padding?: { left?: number; right?: number; top?: number; bottom?: number };
+  anchor?: AnchorPosition;
+  offset?: { x: number; y: number };
+  align?: string;
+  borderWidth?: number;
+  borderColor?: string;
+  borderRadius?: number;
+  backgroundColor?: string;
+};
+
+type ImageAttributes = {
+  src?: string;
+  visible?: boolean;
+  size?: { width: number; height: number };
+  anchor?: AnchorPosition;
+  offset?: { x: number; y: number };
+}
+
+type LabelAttributes = {
+  position?: NS_THREE.Vector3;
+  visible?: boolean;
+  bBoxVisible?: boolean;
+  bBoxBorderWidth?: number;
+  bBoxBorderColor?: string;
+};
+
+/**
+ * 2D DOM 标签, 可展示文字与图片
+ */
+class DOMLabel2D extends DOM2DElement {
+  private static ANCHOR_MAP = {
+    center: { x: '-50%', y: '-50%' },
+    left: { x: '0', y: '-50%' },
+    right: { x: '-100%', y: '-50%' },
+    top: { x: '-50%', y: '0' },
+    bottom: { x: '-50%', y: '-100%' },
+    topleft: { x: '0', y: '0' },
+    topright: { x: '-100%', y: '0' },
+    bottomleft: { x: '0', y: '-100%' },
+    bottomright: { x: '-100%', y: '-100%' },
+  };
+
+  private boundingBox: HTMLDivElement;
+
+  private textElement: HTMLDivElement;
+
+  private textPositionInfo: {
+    anchor: AnchorPosition;
+    offsetX: number;
+    offsetY: number;
+  }
+
+  private imageElement: HTMLImageElement;
+
+  private imagePositionInfo: {
+    anchor: AnchorPosition;
+    offsetX: number;
+    offsetY: number;
+  }
+
+  private calcBBoxNextFrame: boolean;
+
+  private needCalcBBox: boolean;
+
+  private listeners: {
+    onTouchStart: (e: TouchEvent) => void;
+    onTouchMove: (e: TouchEvent) => void;
+    onTouchEnd: (e: TouchEvent) => void;
+    onMouseDown: (e: PointerEvent) => void;
+    onMouseMove: (e: PointerEvent) => void;
+    onMouseUp: (e: PointerEvent) => void;
+    /* Image Events */
+    onImageLoaded: () => void;
+  };
+
+  private status: 'idle' | 'down' | 'move';
+
+  private mouseStart: NS_THREE.Vector2;
+
+  private mouseEnd: NS_THREE.Vector2;
+
+  labelID: number;
+
+  constructor() {
+    super(document.createElement('div')); // this.domElement === wrapper
+    const { THREE } = Externals.getInstance();
+
+    this.boundingBox = document.createElement('div');
+    this.textElement = document.createElement('div');
+    this.imageElement = document.createElement('img');
+
+    this.textPositionInfo = { anchor: 'center', offsetX: 0, offsetY: 0 };
+    this.imagePositionInfo = { anchor: 'center', offsetX: 0, offsetY: 0 };
+
+    this.imageElement.setAttribute('draggable', 'false');
+
+    this.textElement.style.cssText = `
+      position: absolute;
+      transform: translate(-50%, -50%);
+      white-space: nowrap;
+      border-style: solid;
+      border-width: 0;
+      border-color: white;
+      line-height: 1.5;
+    `;
+
+    this.imageElement.style.cssText = `
+      position: absolute;
+      transform: translate(-50%, -50%);
+    `;
+
+    this.boundingBox.style.cssText = `
+      position: absolute;
+      transform: translate(-50%, -50%);
+      display: none;
+      border-style: solid;
+      border-width: 2px;
+      border-color: red;
+      border-radius: 4px;
+      pointer-events: none;
+    `;
+
+    this.status = 'idle';
+
+    this.mouseStart = new THREE.Vector2();
+    this.mouseEnd = new THREE.Vector2();
+
+    this.listeners = {
+      onImageLoaded: (): void => { this.onImageLoaded(); },
+      onMouseDown: (e: PointerEvent): void => { this.onMouseDown(e); },
+      onMouseMove: (e: PointerEvent): void => { this.onMouseMove(e); },
+      onMouseUp: (e: PointerEvent): void => { this.onMouseUp(e); },
+      onTouchStart: (e: TouchEvent): void => { this.onTouchStart(e); },
+      onTouchMove: (e: TouchEvent): void => { this.onTouchMove(e); },
+      onTouchEnd: (e: TouchEvent): void => { this.onTouchEnd(e); },
+    };
+    this.registerListeners();
+
+    this.domElement.appendChild(this.imageElement);
+    this.domElement.appendChild(this.textElement);
+    this.domElement.appendChild(this.boundingBox);
+    this.calcBBoxNextFrame = true;
+  }
+
+  private updateTextTransform(): void {
+    const { offsetX, offsetY, anchor } = this.textPositionInfo;
+    const { x, y } = DOMLabel2D.ANCHOR_MAP[anchor];
+    this.textElement.style.transform = `translate(${x}, ${y}) translate(${offsetX}px, ${offsetY}px)`;
+  }
+
+  private updateImageTransform(): void {
+    const { offsetX, offsetY, anchor } = this.imagePositionInfo;
+    const { x, y } = DOMLabel2D.ANCHOR_MAP[anchor];
+    this.imageElement.style.transform = `translate(${x}, ${y}) translate(${offsetX}px, ${offsetY}px)`;
+  }
+
+  private calcBBox(): void {
+    if (!this.visible || this.boundingBox.style.display === 'none') return;
+
+    const wrapperBoundingRect = this.domElement.getBoundingClientRect();
+    const textBoundingRect = this.textElement.getBoundingClientRect();
+    const imageBoundingRect = this.imageElement.getBoundingClientRect();
+
+    const {
+      left: textMinX, right: textMaxX, top: textMinY, bottom: textMaxY,
+    } = textBoundingRect;
+    const {
+      left: imageMinX, right: imageMaxX, top: imageMinY, bottom: imageMaxY,
+    } = imageBoundingRect;
+
+    const points = [];
+    const { THREE } = Externals.getInstance();
+    if (this.textElement.style.display !== 'none') {
+      points.push(new THREE.Vector2(textMinX, textMinY));
+      points.push(new THREE.Vector2(textMaxX, textMaxY));
+    }
+    if (this.imageElement.style.display !== 'none') {
+      points.push(new THREE.Vector2(imageMinX, imageMinY));
+      points.push(new THREE.Vector2(imageMaxX, imageMaxY));
+    }
+
+    let width = 0;
+    let height = 0;
+    let offsetX = 0;
+    let offsetY = 0;
+
+    if (points.length) {
+      const box2 = new THREE.Box2().setFromPoints(points);
+      const { x, y } = wrapperBoundingRect;
+      width = box2.max.x - box2.min.x + 12;
+      height = box2.max.y - box2.min.y + 12;
+      offsetX = box2.min.x - x - 6;
+      offsetY = box2.min.y - y - 6;
+    }
+
+    this.boundingBox.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+    this.boundingBox.style.width = `${width}px`;
+    this.boundingBox.style.height = `${height}px`;
+  }
+
+  /* EventListeners */
+
+  private registerListeners(): void {
+    this.imageElement.addEventListener('load', this.listeners.onImageLoaded);
+    this.imageElement.addEventListener('pointerdown', this.listeners.onMouseDown);
+    this.imageElement.addEventListener('touchstart', this.listeners.onTouchStart);
+    this.imageElement.addEventListener('touchmove', this.listeners.onTouchMove);
+    this.imageElement.addEventListener('touchend', this.listeners.onTouchEnd);
+    this.textElement.addEventListener('pointerdown', this.listeners.onMouseDown);
+    this.textElement.addEventListener('touchstart', this.listeners.onTouchStart);
+    this.textElement.addEventListener('touchmove', this.listeners.onTouchMove);
+    this.textElement.addEventListener('touchend', this.listeners.onTouchEnd);
+  }
+
+  private unregisterListeners(): void {
+    this.imageElement.removeEventListener('load', this.listeners.onImageLoaded);
+    this.imageElement.removeEventListener('pointerdown', this.listeners.onMouseDown);
+    this.imageElement.removeEventListener('touchstart', this.listeners.onTouchStart);
+    this.imageElement.removeEventListener('touchmove', this.listeners.onTouchMove);
+    this.imageElement.removeEventListener('touchend', this.listeners.onTouchEnd);
+    this.textElement.removeEventListener('pointerdown', this.listeners.onMouseDown);
+    this.textElement.removeEventListener('touchstart', this.listeners.onTouchStart);
+    this.textElement.removeEventListener('touchmove', this.listeners.onTouchMove);
+    this.textElement.removeEventListener('touchend', this.listeners.onTouchEnd);
+  }
+
+  private onImageLoaded(): void {
+    if (this.imageElement.style.width === '') {
+      this.imageElement.style.width = `${this.imageElement.width}px`;
+    }
+    if (this.imageElement.style.height === '') {
+      this.imageElement.style.height = `${this.imageElement.height}px`;
+    }
+    this.calcBBoxNextFrame = true;
+  }
+
+  private onMouseDown(e: PointerEvent): void {
+    if (this.status !== 'idle' || e.pointerType !== 'mouse' || e.button !== 0) return;
+    this.mouseStart.set(e.clientX, e.clientY);
+    this.emit(Events.LABEL_DOWN, this, null, 0);
+    this.imageElement.ownerDocument!.addEventListener('pointermove', this.listeners.onMouseMove);
+    this.imageElement.ownerDocument!.addEventListener('pointerup', this.listeners.onMouseUp);
+    this.status = 'down';
+  }
+
+  private onMouseMove(e: PointerEvent): void {
+    if (this.status !== 'down' || e.pointerType !== 'mouse' || e.button !== 0) return;
+    this.status = 'move';
+  }
+
+  private onMouseUp(e: PointerEvent): void {
+    if (this.status === 'idle' || e.pointerType !== 'mouse') return;
+    this.mouseEnd.set(e.clientX, e.clientY);
+    if (this.status === 'down' || this.mouseStart.distanceToSquared(this.mouseEnd) < 100) {
+      this.emit(Events.ELEMENT_SELECTED, this, null, 0);
+    }
+    this.imageElement.ownerDocument!.removeEventListener('pointermove', this.listeners.onMouseMove);
+    this.imageElement.ownerDocument!.removeEventListener('pointerup', this.listeners.onMouseUp);
+    this.status = 'idle';
+  }
+
+  private onTouchStart(e: TouchEvent): void {
+    if (this.status !== 'idle' || e.touches.length > 1) return;
+    this.mouseStart.set(e.touches[0].pageX, e.touches[0].pageY);
+    this.emit(Events.LABEL_DOWN, this, null, 0);
+    this.status = 'down';
+  }
+
+  private onTouchMove(e: TouchEvent): void {
+    if (this.status !== 'down' || e.touches.length > 1) return;
+    this.status = 'move';
+  }
+
+  private onTouchEnd(e: TouchEvent): void {
+    if (this.status === 'idle') return;
+    this.mouseEnd.set(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+    if (this.status === 'down' || this.mouseStart.distanceToSquared(this.mouseEnd) < 100) {
+      this.emit(Events.ELEMENT_SELECTED, this, null, 0);
+    }
+    this.status = 'idle';
+  }
+
+  /* LABEL WRAPPER */
+
+  public setAttributes({ labelAttrs, imageAttrs, textAttrs }: {
+    labelAttrs: LabelAttributes;
+    imageAttrs: ImageAttributes;
+    textAttrs: TextAttributes;
+  }): void {
+    if (labelAttrs !== undefined) this.setLabelAttrs(labelAttrs);
+    if (imageAttrs !== undefined) this.setImageAttrs(imageAttrs);
+    if (textAttrs !== undefined) this.setTextAttrs(textAttrs);
+  }
+
+  public setLabelAttrs(attrs: LabelAttributes): void {
+    if (attrs.position !== undefined) this.setPosition(attrs.position);
+    if (attrs.visible !== undefined) this.setVisible(attrs.visible);
+    if (attrs.bBoxVisible !== undefined) this.setBBoxVisible(attrs.bBoxVisible);
+    if (attrs.bBoxBorderWidth !== undefined) this.setBBoxBorderWidth(attrs.bBoxBorderWidth);
+    if (attrs.bBoxBorderColor !== undefined) this.setBBoxBorderColor(attrs.bBoxBorderColor);
+  }
+
+  public setPosition(position: NS_THREE.Vector3): void {
+    this.position.copy(position);
+    this.needUpdate = true;
+  }
+
+  public setVisible(visible: boolean): void {
+    this.visible = visible;
+    this.cssObject.visible = visible;
+    this.needUpdate = true;
+  }
+
+  public setBBoxVisible(visible: boolean): void {
+    this.boundingBox.style.display = visible ? 'block' : 'none';
+    if (visible) this.calcBBoxNextFrame = true;
+  }
+
+  public setBBoxBorderWidth(width: number): void {
+    this.boundingBox.style.borderWidth = `${width}px`;
+  }
+
+  public setBBoxBorderColor(color: string): void {
+    this.boundingBox.style.borderColor = color;
+  }
+
+  /* LABEL IMAGE */
+
+  public setImageAttrs(attrs: ImageAttributes): void {
+    if (attrs.src !== undefined) this.setImageSource(attrs.src);
+    if (attrs.visible !== undefined) this.setImageVisible(attrs.visible);
+    if (attrs.size !== undefined) this.setImageSize(attrs.size.width, attrs.size.height);
+    if (attrs.anchor !== undefined) this.setImageAnchor(attrs.anchor);
+    if (attrs.offset !== undefined) this.setImageOffset(attrs.offset.x, attrs.offset.y);
+  }
+
+  public setImageVisible(visible: boolean): void {
+    this.imageElement.style.display = visible ? 'block' : 'none';
+  }
+
+  public setImageSource(src: string): void {
+    this.imageElement.src = src;
+  }
+
+  public setImageSize(width: number, height: number): void {
+    this.imageElement.style.height = `${height}px`;
+    this.imageElement.style.width = `${width}px`;
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setImageAnchor(anchor: AnchorPosition): void {
+    this.imagePositionInfo.anchor = anchor;
+    this.updateImageTransform();
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setImageOffset(offsetX: number, offsetY: number): void {
+    this.imagePositionInfo.offsetX = offsetX;
+    this.imagePositionInfo.offsetY = offsetY;
+    this.updateImageTransform();
+    this.calcBBoxNextFrame = true;
+  }
+
+  /* LABEL TEXT */
+
+  public setTextAttrs(attrs: TextAttributes): void {
+    if (attrs.content !== undefined) this.setTextContent(attrs.content);
+    if (attrs.visible !== undefined) this.setTextVisible(attrs.visible);
+    if (attrs.fontSize !== undefined) this.setTextFontSize(attrs.fontSize);
+    if (attrs.color !== undefined) this.setTextColor(attrs.color);
+    if (attrs.padding !== undefined) this.setTextPadding(attrs.padding);
+    if (attrs.anchor !== undefined) this.setTextAnchor(attrs.anchor);
+    if (attrs.offset !== undefined) this.setTextOffset(attrs.offset.x, attrs.offset.y);
+    if (attrs.align !== undefined) this.setTextAlign(attrs.align);
+    if (attrs.borderWidth !== undefined) this.setTextBorderWidth(attrs.borderWidth);
+    if (attrs.borderColor !== undefined) this.setTextBorderColor(attrs.borderColor);
+    if (attrs.borderRadius !== undefined) this.setTextBorderRadius(attrs.borderRadius);
+    if (attrs.backgroundColor !== undefined) this.setTextBackgroundColor(attrs.backgroundColor);
+  }
+
+  public setTextVisible(visible: boolean): void {
+    this.textElement.style.display = visible ? 'block' : 'none';
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextContent(text: string): void {
+    this.textElement.innerText = text;
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextFontSize(size: number): void {
+    this.textElement.style.fontSize = `${size}px`;
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextColor(color: string): void {
+    this.textElement.style.color = color;
+  }
+
+  public setTextPadding(padding: { left?: number; right?: number; top?: number; bottom?: number }): void {
+    const targetPadding = {
+      left: 0, right: 0, top: 0, bottom: 0,
+    };
+
+    if (padding.left !== undefined) targetPadding.left = padding.left;
+    if (padding.right !== undefined) targetPadding.right = padding.right;
+    if (padding.top !== undefined) targetPadding.top = padding.top;
+    if (padding.bottom !== undefined) targetPadding.bottom = padding.bottom;
+
+    const {
+      left, right, top, bottom,
+    } = targetPadding;
+
+    this.textElement.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextAnchor(anchor: AnchorPosition): void {
+    this.textPositionInfo.anchor = anchor;
+    this.updateTextTransform();
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextOffset(offsetX: number, offsetY: number): void {
+    this.textPositionInfo.offsetX = offsetX;
+    this.textPositionInfo.offsetY = offsetY;
+    this.updateTextTransform();
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextBorderWidth(width: number): void {
+    this.textElement.style.borderWidth = `${width}px`;
+    this.calcBBoxNextFrame = true;
+  }
+
+  public setTextAlign(align: string): void {
+    this.textElement.style.textAlign = align;
+  }
+
+  public setTextBorderColor(color: string): void {
+    this.textElement.style.borderColor = color;
+  }
+
+  public setTextBorderRadius(radius: number): void {
+    this.textElement.style.borderRadius = `${radius}px`;
+  }
+
+  public setTextBackgroundColor(color: string): void {
+    this.textElement.style.backgroundColor = color;
+  }
+
+  public setLabelID(labelID: number): void {
+    this.labelID = labelID;
+  }
+
+  update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+
+    if (this.needCalcBBox) this.calcBBox();
+    this.needCalcBBox = false;
+
+    if (this.calcBBoxNextFrame) this.needCalcBBox = true;
+    this.calcBBoxNextFrame = false;
+
+    if (this.initialzed) {
+      frameContext.shouldPlaceElement = true;
+      this.initialzed = false;
+    }
+    if (this.needUpdate) {
+      frameContext.needUpdate = true;
+      this.needUpdate = false;
+    }
+    return frameContext;
+  }
+
+  dispose(): void {
+    this.unregisterListeners();
+    this.domElement.removeChild(this.boundingBox);
+    this.domElement.removeChild(this.textElement);
+    this.domElement.removeChild(this.imageElement);
+    super.dispose();
+  }
+}
+
+export { DOMLabel2D };

package/src/owlly/element/element.ts

@@ -0,0 +1,117 @@
+import { NS_THREE } from '../stage/externals';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents, Events } from '../utils/events';
+
+/** @ignore */
+class ElementFrameContext {
+  element: Element;
+
+  needUpdate: boolean;
+
+  shouldPlaceElement: boolean;
+
+  constructor(
+    element: Element,
+    needsUpdate = false,
+  ) {
+    this.element = element;
+    this.needUpdate = needsUpdate;
+    this.shouldPlaceElement = false;
+  }
+}
+
+/** 元素类 */
+abstract class Element extends NS_THREE.Object3D {
+  /** @ignore */
+  public abstract update(): ElementFrameContext;
+
+  private universalId?: string;
+
+  private elementListeners: {
+    onElementSelected: Function;
+  };
+
+  protected eventMap: Map<string, Set<Function>>;
+
+  constructor() {
+    super();
+    this.elementListeners = {
+      onElementSelected: this.onElementSelected.bind(this),
+    };
+    this.eventMap = new Map<string, Set<Function>>();
+    EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.elementListeners.onElementSelected);
+  }
+
+  private onElementSelected(e: Element): void {
+    if (e === this) EventHub.emit(Events.ELEMENT_SELECTED, e);
+  }
+
+  /**
+   * 获取元素的uuid
+   */
+  public getUUID(): string | undefined {
+    return this.universalId;
+  }
+
+  /**
+   * 设置元素的uuid
+   * @param uuid 配置的uuid
+   */
+  public setUUID(uuid: string): void {
+    this.universalId = uuid;
+  }
+
+  public dispose(): void {
+    EventHub.off(OwllyEvents.ELEMENT_SELECTED, this.elementListeners.onElementSelected);
+  }
+
+  /**
+   * 注册事件监听
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  on(event: string, callback: Function): void {
+    if (!this.eventMap.has(event)) this.eventMap.set(event, new Set<Function>());
+    const callbacks = this.eventMap.get(event);
+    if (callbacks) {
+      callbacks.add(callback);
+      this.eventMap.set(
+        event,
+        callbacks,
+      );
+    }
+  }
+
+  protected emit(event: string, ...args: unknown[]): void {
+    const callbacks = this.eventMap.get(event);
+    if (callbacks) {
+      callbacks.forEach((callback) => { callback(...args); });
+    }
+    EventHub.emit(event, ...args);
+  }
+
+  /**
+   * 注销事件监听
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  off(event: string, callback: Function): void {
+    const callbacks = this.eventMap.get(event);
+    if (!callbacks) throw Error(`Target event '${event}' not found`);
+    callbacks.delete(callback);
+  }
+}
+
+interface Element {
+  /** 可碰撞成员元素 */
+  intersectables?: NS_THREE.Object3D[];
+  /**
+   * 加载数据
+   * @param args 加载数据所需要的参数
+   */
+  load?(...args: unknown[]): unknown;
+  resize?(width: number, height: number): void;
+  render?(): void;
+}
+
+export { Element, ElementFrameContext };