@aibee/owlly 1.0.25

package/src/owlly/utils/time-profiler.ts

@@ -0,0 +1,57 @@
+class TimeProfiler {
+  private frameTimeMillses: number[];
+
+  private timingIntervalMills: number;
+
+  private fps: number|undefined;
+
+  /**
+   * 初始化FPS统计
+   * @param timingIntervalMills 统计FPS的时间区间间隔长度，单位毫秒
+   */
+  constructor(timingIntervalMills = 1000) {
+    this.timingIntervalMills = timingIntervalMills;
+    this.frameTimeMillses = [];
+  }
+
+  public reset(): void {
+    this.frameTimeMillses = [];
+    this.fps = undefined;
+  }
+
+  /**
+   * Tick一帧
+   * @param frameTimeMills 时间戳，是当前帧的相对时间，不是两帧之间的间隔。单位毫秒
+   */
+  public tick(frameTimeMills: number): void {
+    if (this.timingIntervalMills <= 0) {
+      if (this.frameTimeMillses.length === 0) {
+        this.frameTimeMillses.push(frameTimeMills, 0);
+      } else {
+        this.frameTimeMillses[1] += 1;
+        this.fps = 1000 * this.frameTimeMillses[1] / (frameTimeMills - this.frameTimeMillses[0]);
+      }
+    } else {
+      this.frameTimeMillses.push(frameTimeMills);
+      const frames = this.frameTimeMillses.length - 1;
+      if (frames > 0) {
+        let time = this.frameTimeMillses[this.frameTimeMillses.length - 1] - this.frameTimeMillses[0];
+        this.fps = 1000 * frames / time;
+
+        while (time > this.timingIntervalMills) {
+          this.frameTimeMillses.shift();
+          time = this.frameTimeMillses[this.frameTimeMillses.length - 1] - this.frameTimeMillses[0];
+        }
+      }
+    }
+  }
+
+  /**
+   * 获得当前统计的FPS值
+   */
+  public getFPS(): number|undefined {
+    return this.fps;
+  }
+}
+
+export { TimeProfiler };

package/src/owlly/view/__test__/perspective-view.spec.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// import $ from 'jquery';
+
+// import { PerspectiveView } from '../perspective-view';
+// import { Stage } from '../../stage';
+
+// describe('Class PerspectiveView', () => {
+//   const stage = new Stage();
+//   document.body.innerHTML = '<div id="container"></div>';
+//   const container = $('#container').get(0);
+//   const view = new PerspectiveView(container);
+//   test('PerspectiveView可以初始化', () => {
+//     expect(view.render).not.toBeUndefined();
+//   });
+//   test('PerspectiveView可以绑定至Stage', () => {
+//     stage.bindView(view);
+//     expect((stage as any).views.has(view)).toBeTruthy();
+//   });
+//   test('PerspectiveView可以从Stage解绑', () => {
+//     stage.disposeView(view);
+//     expect((stage as any).views.has(view)).toBeFalsy();
+//   });
+// });

package/src/owlly/view/camera-view.ts

@@ -0,0 +1,114 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { View } from './view';
+import { Camera } from '../element/camera';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents } from '../utils/events';
+
+/** 相机元素视图, 渲染相机元素所看到的图像, 用于虚拟部署, 需要在新版本中更新 */
+class CameraView extends View {
+  container: HTMLElement;
+
+  renderer: NS_THREE.WebGL1Renderer;
+
+  private activeCamera: Camera | null;
+
+  private eventListeners: { onCameraSelected: Function };
+
+  /**
+   * @param container 目标容器
+   */
+  constructor(container: HTMLElement) {
+    super();
+    // init renderer
+    const { THREE } = Externals.getInstance();
+    this.container = container;
+    this.renderer = new THREE.WebGL1Renderer();
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setSize(container.clientWidth, container.clientHeight);
+    this.container.appendChild(this.renderer.domElement);
+    this.container.style.setProperty('display', 'flex');
+    this.container.style.setProperty('align-items', 'center');
+    this.container.style.setProperty('justify-content', 'center');
+    this.eventListeners = {
+      onCameraSelected: (camera: Element): void => {
+        if (!(camera instanceof Camera)) return;
+        this.bindCamera(camera);
+      },
+    };
+    EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+  }
+
+  /** @ignore */
+  resize(): void {
+    if (!this.activeCamera) return;
+    const { clientWidth, clientHeight } = this.container;
+    const containerAspect = clientWidth / clientHeight || 1;
+    const {
+      resolution: { height, width },
+    } = this.activeCamera.getIntrinsic();
+    const cameraRatio = width / height;
+    if (containerAspect > cameraRatio) {
+      const targetHeight = clientHeight;
+      const targetWidth = clientHeight * cameraRatio;
+      super.resize(targetWidth, targetHeight);
+      this.renderer.setSize(targetWidth, targetHeight);
+    } else {
+      const targetWidth = clientWidth;
+      const targetHeight = clientWidth / cameraRatio;
+      super.resize(targetWidth, targetHeight);
+      this.renderer.setSize(targetWidth, targetHeight);
+    }
+  }
+
+  /** @ignore */
+  render(scene: NS_THREE.Scene): void {
+    if (!this.enabled || !this.activeCamera) return;
+    this.activeCamera.setCameraHelperVisible(false);
+    this.renderer.render(scene, this.activeCamera.getThreeCamera());
+    this.activeCamera.setCameraHelperVisible(true);
+  }
+
+  public dispose(): void {
+    super.dispose();
+    this.unbindCamera();
+    EventHub.off(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onCameraSelected);
+    this.container.removeChild(this.renderer.domElement);
+    this.renderer.dispose();
+  }
+
+  /**
+   * 绑定相机元素, 绑定后视图将显示传入相机元素所看到的图像
+   * @param camera 绑定的相机元素
+   */
+  public bindCamera(camera: Camera): void {
+    if (this.activeCamera) this.activeCamera.setCameraHelperVisible(false, true);
+    this.activeCamera = camera;
+    this.activeCamera.updateLookAt();
+    this.activeCamera.setCameraHelperVisible(true, true);
+    this.resize();
+  }
+
+  /**
+   * 解绑相机元素
+   * 取消相机辅助线，并清空画布
+   * edited by kxiao
+   */
+  public unbindCamera(): void {
+    if (!this.activeCamera) {
+      return;
+    }
+    this.activeCamera.setCameraHelperVisible(false, false);
+    this.activeCamera.updateLookAt();
+    this.activeCamera = null;
+    this.renderer.clear();
+  }
+
+  /**
+   * 获取当前绑定的相机元素
+   */
+  public getActiveCamera(): Camera | undefined | null {
+    return this.activeCamera;
+  }
+}
+
+export { CameraView };

package/src/owlly/view/index.ts

@@ -0,0 +1,5 @@
+export * from './view';
+export * from './perspective-view';
+export * from './orthographic-view';
+// export * from './svg-map-view';
+// export * from './camera-view';

package/src/owlly/view/orthographic-view.ts

@@ -0,0 +1,124 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { View } from './view';
+import { Screen } from '../screen/screen';
+
+/** 透视投影视图 */
+class OrthographicView extends View {
+  camera: NS_THREE.OrthographicCamera;
+
+  renderer: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer;
+
+  createCamera(): void {
+    if (this.camera) return;
+    const { THREE } = Externals.getInstance();
+    const width = this.getViewWidth();
+    const height = this.getViewHeight();
+    this.camera = new THREE.OrthographicCamera(
+      -width / 2,
+      width / 2,
+      height / 2,
+      -height / 2,
+      0.1,
+      5000,
+    );
+    this.camera.up.set(0, 0, 1);
+    this.camera.position.set(0, 0, 100);
+    this.camera.lookAt(0, 0, 0);
+  }
+
+  /** @ignore */
+  resize(clientWidth: number, clientHeight: number): void {
+    // 相机和渲染区域的裁剪比例一致
+    super.resize(clientWidth, clientHeight);
+    const { z, w } = this.rendererOffset || this.rendererOffsetDefault;
+    this.updateCameraAspect();
+    this.renderer!.setSize(z, w);
+  }
+
+  bindScreen(screen: Screen): void {
+    super.bindScreen(screen);
+    this.createCamera();
+  }
+
+  unbindScreen(): void {
+    super.unbindScreen();
+  }
+
+  /** @ignore */
+  render(): void {
+    if (!this.enabled || !this.renderer) return;
+    this.renderer.render(this.stage.scene, this.camera);
+  }
+
+  public dispose(): void {
+    super.dispose();
+  }
+
+  /**
+  * 设置View的裁剪区域，外部调用
+  */
+  public setViewport(rendererOffset: NS_THREE.Vector4): void {
+    super.setViewport(rendererOffset);
+    this.updateCameraAspect();
+  }
+
+  /**
+  * 更新相机和渲染区域的裁剪比例一致
+  */
+  private updateCameraAspect(): void {
+    const width = this.getViewWidth();
+    const height = this.getViewHeight();
+    this.camera.left = -width / 2;
+    this.camera.right = width / 2;
+    this.camera.top = height / 2;
+    this.camera.bottom = -height / 2;
+    this.camera.updateProjectionMatrix();
+  }
+
+  /**
+   * 设置相机姿态
+   * @param worldMatrix 相机的姿态矩阵
+   */
+  public setCameraWorldMatrix(worldMatrix: number[]): void {
+    const { THREE } = Externals.getInstance();
+    this.camera.matrixAutoUpdate = false;
+    const position = new THREE.Vector3();
+    const scale = new THREE.Vector3();
+    const quaternion = new THREE.Quaternion();
+    new THREE.Matrix4().fromArray(worldMatrix).decompose(position, quaternion, scale);
+    this.camera.position.copy(position);
+    this.camera.quaternion.copy(quaternion);
+    this.camera.scale.copy(scale);
+    this.camera.updateMatrixWorld(true);
+    this.camera.matrixAutoUpdate = true;
+  }
+
+  /**
+   * 设置相机裁剪
+   * @param fullWidth 多视图的全宽设置
+   * @param fullHeight 多视图的全高设置
+   * @param x 副摄像机的水平偏移
+   * @param y 副摄像机的垂直偏移
+   * @param width 副摄像机的宽度
+   * @param height 副摄像机的高度
+   */
+  public setCameraViewPort(
+    fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number,
+  ): void {
+    if (!this.camera) {
+      console.warn('view.setCameraViewPort() is before bind screen'); // eslint-disable-line
+      return;
+    }
+    this.camera.setViewOffset(
+      fullWidth,
+      fullHeight,
+      x,
+      y,
+      width,
+      height,
+    );
+    this.updateCameraAspect();
+  }
+}
+
+export { OrthographicView };

package/src/owlly/view/perspective-view.ts

@@ -0,0 +1,125 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { View } from './view';
+import { Screen } from '../screen/screen';
+
+/** 透视投影视图 */
+class PerspectiveView extends View {
+  camera: NS_THREE.PerspectiveCamera;
+
+  renderer: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer | null;
+
+  // /**
+  //  * @param container 目标容器
+  //  */
+  // constructor(screen: Screen) {
+  //   super(screen);
+  // }
+
+  createCamera(): void {
+    if (this.camera) return;
+
+    const { THREE } = Externals.getInstance();
+    this.camera = new THREE.PerspectiveCamera(
+      60,
+      1,
+      0.01,
+      2000,
+    );
+    this.camera.up.set(0, 0, 1);
+    this.camera.position.set(0, 0, 100);
+    this.camera.lookAt(0, 0, 0);
+  }
+
+  /** @ignore */
+  resize(clientWidth: number, clientHeight: number): void {
+    // 相机和渲染区域的裁剪比例一致
+    super.resize(clientWidth, clientHeight);
+    const { z, w } = this.rendererOffset || this.rendererOffsetDefault;
+    this.updateCameraAspect();
+    this.renderer!.setSize(z, w);
+  }
+
+  bindScreen(screen: Screen): void {
+    super.bindScreen(screen);
+    this.createCamera();
+    this.resize(screen.width, screen.height);
+  }
+
+  unbindScreen(): void {
+    super.unbindScreen();
+  }
+
+  /** @ignore */
+  render(): void {
+    if (!this.enabled || !this.renderer) return;
+    this.renderer.render(this.stage.scene, this.camera);
+  }
+
+  public dispose(): void {
+    super.dispose();
+  }
+
+  /**
+  * 设置View的裁剪区域，外部调用
+  */
+  public setViewport(rendererOffset: NS_THREE.Vector4): void {
+    super.setViewport(rendererOffset);
+    this.updateCameraAspect();
+  }
+
+  /**
+  * 更新相机和渲染区域的裁剪比例一致
+  */
+  private updateCameraAspect(): void {
+    const { z, w } = this.rendererOffset || this.rendererOffsetDefault;
+    this.camera.aspect = z / w;
+    this.camera.updateProjectionMatrix();
+  }
+
+  /**
+   * 设置相机姿态
+   * @param worldMatrix 相机的姿态矩阵
+   */
+  public setCameraWorldMatrix(worldMatrix: number[]): void {
+    const { THREE } = Externals.getInstance();
+    this.camera.matrixAutoUpdate = false;
+    const position = new THREE.Vector3();
+    const scale = new THREE.Vector3();
+    const quaternion = new THREE.Quaternion();
+    new THREE.Matrix4().fromArray(worldMatrix).decompose(position, quaternion, scale);
+    this.camera.position.copy(position);
+    this.camera.quaternion.copy(quaternion);
+    this.camera.scale.copy(scale);
+    this.camera.updateMatrixWorld(true);
+    this.camera.matrixAutoUpdate = true;
+  }
+
+  /**
+   * 设置相机裁剪
+   * @param fullWidth 多视图的全宽设置
+   * @param fullHeight 多视图的全高设置
+   * @param x 副摄像机的水平偏移
+   * @param y 副摄像机的垂直偏移
+   * @param width 副摄像机的宽度
+   * @param height 副摄像机的高度
+   */
+  public setCameraViewPort(
+    fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number,
+  ): void {
+    if (!this.camera) {
+      console.warn('view.setCameraViewPort() is before bind screen'); // eslint-disable-line
+      return;
+    }
+    this.camera.setViewOffset(
+      fullWidth,
+      fullHeight,
+      x,
+      y,
+      width,
+      height,
+    );
+    this.updateCameraAspect();
+  }
+}
+
+export { PerspectiveView };

package/src/owlly/view/svg-map-view.ts

@@ -0,0 +1,187 @@
+import { Externals, NS_THREE } from '../stage/externals';
+// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+// import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass';
+import { View } from './view';
+import { PathOverlay } from '../overlay/path-overlay';
+import { LabelOverlay } from '../overlay/label-overlay';
+import { ModelSvgMapping } from '../utils/svgutils';
+
+/**
+ * 该 View 为早期为 BI 制作的专属 View, 可以不再进行维护. 其组成为两个定制开发的 Overlay. 这些 Overlay 也可以不再维护.
+ */
+class SvgMapView extends View {
+  camera: NS_THREE.PerspectiveCamera;
+
+  container: HTMLElement;
+
+  renderer: NS_THREE.WebGL1Renderer;
+
+  // private composer: EffectComposer;
+
+  // private ssaaRenderPass: SSAARenderPass;
+
+  private pathOverlay: PathOverlay;
+
+  private labelOverlay: LabelOverlay;
+
+  constructor(container: HTMLElement, shadowEnabled = false) {
+    super();
+    const { THREE } = Externals.getInstance();
+    // init renderer
+    this.container = container;
+    this.renderer = new THREE.WebGL1Renderer({ antialias: true });
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.autoClear = false;
+    this.renderer.setSize(container.clientWidth, container.clientHeight);
+    this.renderer.shadowMap.enabled = shadowEnabled;
+    // this.renderer.shadowMap.type = PCFSoftShadowMap;
+    this.container.appendChild(this.renderer.domElement);
+    // init camera
+    this.camera = new THREE.PerspectiveCamera(
+      60, this.container.clientWidth / this.container.clientHeight, 0.01, 2000,
+    );
+    this.camera.up.set(0, 0, 1);
+    this.camera.updateProjectionMatrix();
+    // overlay
+    this.pathOverlay = new PathOverlay();
+    this.labelOverlay = new LabelOverlay();
+    this.addOverlay(this.pathOverlay);
+    this.addOverlay(this.labelOverlay);
+  }
+
+  // private initPostProcessors(scene: Scene): void {
+  //   // post processing
+  //   this.composer = new EffectComposer(this.renderer);
+  //   this.ssaaRenderPass = new SSAARenderPass(scene, this.camera, 'black', 1.0);
+  //   this.ssaaRenderPass.unbiased = true;
+  //   this.ssaaRenderPass.sampleLevel = 2;
+  //   this.composer.addPass(this.ssaaRenderPass);
+  // }
+
+  update(): boolean {
+    const parentUpdate = super.update();
+    return parentUpdate;
+  }
+
+  setCameraPosition(x: number, y: number, z: number): void {
+    this.camera.position.set(x, y, z);
+  }
+
+  setCameraLookAt(x: number, y: number, z: number): void {
+    this.camera.lookAt(x, y, z);
+  }
+
+  resize(): void {
+    const { clientWidth, clientHeight } = this.container;
+    super.resize(clientWidth, clientHeight);
+    const containerAspect = clientWidth / clientHeight;
+    this.camera.aspect = containerAspect;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(clientWidth, clientHeight);
+    // if (this.composer) this.composer.setSize(clientWidth, clientHeight);
+  }
+
+  render(scene: NS_THREE.Scene): void {
+    if (!this.enabled) return;
+    this.renderer.clear();
+    // if (!this.composer) this.initPostProcessors(scene);
+    // this.composer.render();
+    this.renderer.render(scene, this.camera);
+  }
+
+  public dispose(): void {
+    super.dispose();
+    this.container.removeChild(this.renderer.domElement);
+    this.renderer.dispose();
+  }
+
+  public setPath(
+    path: NS_THREE.Vector3[],
+    startPointType: string | null,
+    endPointType: string | null,
+    message: string | null,
+    fontSize: number,
+    imageStyle: { left: number; top: number; width: number; height: number },
+    messageStyle: { left: number; top: number; width: number; height: number },
+    iconStyle: { width: number; height: number },
+  ): void {
+    const { THREE } = Externals.getInstance();
+    this.pathOverlay.setPath3D(path);
+    const iconPoints = [];
+    if (path.length) {
+      if (startPointType && startPointType.length) {
+        iconPoints.push({
+          position: path[0].clone(),
+          src: `imgs/${startPointType}.png`,
+          width: iconStyle.width,
+          height: iconStyle.height,
+          offsetX: 0,
+          offsetY: 0,
+        });
+      }
+      if (endPointType && endPointType.length) {
+        iconPoints.push({
+          position: path[path.length - 1].clone(),
+          src: `imgs/${endPointType}.png`,
+          width: iconStyle.width,
+          height: iconStyle.height,
+          offsetX: 0,
+          offsetY: 0,
+        });
+        this.labelOverlay.setBubble({
+          position: path[path.length - 1].clone(),
+          message,
+          fontSize,
+          imageStyle,
+          messageStyle,
+        });
+      } else {
+        this.labelOverlay.setBubble({
+          position: new THREE.Vector3(),
+          message: null,
+          fontSize,
+          imageStyle,
+          messageStyle,
+        });
+      }
+    } else {
+      // TODO(jyfang): need refactoring
+      this.labelOverlay.setBubble({
+        position: new THREE.Vector3(),
+        message: null,
+        fontSize,
+        imageStyle,
+        messageStyle,
+      });
+    }
+    this.labelOverlay.setIconPoints(
+      iconPoints,
+    );
+  }
+
+  public setStores(
+    stores: { position: NS_THREE.Vector3; name: string; nodeId: string; fontSize?: number }[],
+  ): void {
+    this.labelOverlay.setLabelPoints(stores);
+  }
+
+  public setPriorNodes(ids: string[]): void {
+    this.labelOverlay.setPriorLabelPoints(ids);
+  }
+
+  public getCameraInfo(target: NS_THREE.Object3D): {
+    position: NS_THREE.Vector3;
+    lookAt: NS_THREE.Vector3 | null;
+  } {
+    const { THREE } = Externals.getInstance();
+    const lookAtVec = new THREE.Vector3(0, 0, -1);
+    lookAtVec.applyQuaternion(this.camera.quaternion);
+    const raycaster = new THREE.Raycaster();
+    raycaster.set(this.camera.position.clone(), lookAtVec);
+    const hits = raycaster.intersectObject(target, true);
+    const lookAt = hits.length ? hits[0].point : null;
+    return { position: this.camera.position.clone(), lookAt };
+  }
+}
+
+export { SvgMapView, ModelSvgMapping };