@aibee/owlly 1.0.25

package/src/web/main.sample.ts

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, no-console, @typescript-eslint/camelcase */
+import * as THREE from 'three';
+import Konva from 'konva';
+// import VConsole from 'vconsole';
+import {
+  Stage,
+  SetExternal,
+  PerspectiveView,
+  BasicController,
+  Shape,
+  Block,
+  Screen,
+} from '../owlly';
+
+// new VConsole(); // eslint-disable-line
+
+SetExternal(THREE, { konva: Konva });
+
+async function start(): Promise<void> {
+  // 新建 Stage
+  const stage = new Stage();
+  // 新建 View
+  const container = document.getElementById('container');
+
+  const screen = new Screen(container!);
+  const view = new PerspectiveView(screen);
+
+  view.bindStage(stage);
+
+  // 新建Controller
+  const controller = new BasicController(view);
+  controller.setRotateMode('orbit');
+  controller.setCameraPosition(new THREE.Vector3(0, 0, 100), false);
+  controller.setCameraLookAt(new THREE.Vector3(0, 0, 0), false);
+  stage.bindController(controller);
+  // 新建Element
+  const shape = new Shape({
+    path: 'm-10,-10l10,-10l10,10l-10,10',
+    fill: '#ff7777',
+    stroke: '#ff0000',
+    strokeOpacity: 1,
+    zIndex: -10,
+    height: 20,
+  });
+  const block = new Block(shape);
+  stage.bindElement(block);
+
+  // controller.dispose();
+
+  // screen.dispose();
+}
+
+function main(): void {
+  start();
+}
+
+(window as any).main = main;
+
+main();

package/src/web/quattree.hyma.ts

@@ -0,0 +1,163 @@
+// /* eslint-disable */
+// import * as THREE from 'three';
+// import konva from 'konva';
+// import Quadtree from '@timohausmann/quadtree-js';
+// import {
+//   Stage,
+//   AlignmentUtils,
+//   OrthographicView,
+//   SvgUtils,
+//   OrbitControl,
+//   // BasicController,
+//   BlockSet,
+//   PoiOverlay,
+//   SetExternal,
+// } from '../owlly';
+
+// SetExternal(THREE, { konva });
+// const stage = new Stage();
+// const container = document.getElementById('container');
+
+// // stage.setStatsEnabled(true);
+// // stage.setAxesEnabled(true);
+
+// if (container) {
+//   const view = new OrthographicView(container);
+//   view.setClearColor(0x000000, 0.5);
+
+//   stage.bindView(view);
+
+//   // console.log()
+
+//   const orbitController = new OrbitControl(view);
+//   orbitController.setDampingEnabled(false);
+//   orbitController.setZoomEnabled(true);
+//   orbitController.setZoomRange(0.01, 10);
+//   orbitController.setPanEnabled(true);
+//   // orbitController.setRotateMode('orbit');
+//   orbitController.setMouseControls({
+//     LEFT: THREE.MOUSE.PAN,
+//     MIDDLE: THREE.MOUSE.DOLLY,
+//     RIGHT: THREE.MOUSE.ROTATE,
+//   });
+//   // 设置后地图上下反转
+//   // 设置横向转动范围 地图转动 依然是 2D
+//   // orbitController.setAzimuthAngle(0);
+//   // 设置横向转动范围 转动 地图变得有厚度， 2.5D
+//   // orbitController.setPolarAngle(Math.PI / 5); // 设置纵向转动范围
+//   orbitController.setZoom(0.1);
+//   // orbitController.setDampingEnabled(false);
+//   // orbitController.setRotateEnabled(false);
+//   // orbitController.setRotateMode('orbit');
+//   stage.bindController(orbitController);
+
+//   const poiOverlay = new PoiOverlay();
+//   view.addOverlay(poiOverlay);
+
+//   const drawEle = (node: any) => {
+//     console.log('drawEle', node, node.bounds);
+//     // const paths = node.bounds.
+//     const x = node.bounds.x;
+//     const y = node.bounds.y;
+//     const width = node.bounds.width;
+//     const height = node.bounds.height;
+//     const box = document.createElement('div');
+//     box.style.position = 'absolute';
+//     box.style.zIndex = '1000';
+//     box.style.left = `${x}px`;
+//     box.style.top = `${y}px`;
+//     box.style.width = `${width}px`;
+//     box.style.height = `${height}px`;
+//     box.style.border = '1px solid blue';
+//     container.appendChild(box);
+//   };
+//   const traverse = (tree: Quadtree) => {
+//     // 先序遍历
+//     console.log('traverse', tree.name, tree.nodes, tree);
+//     drawEle(tree);
+//     tree.nodes.forEach((node: Quadtree) => {
+//       traverse(node);
+//     });
+//   };
+
+//   (window as any).init = async (): Promise<void> => {
+//     // const shapes = await SvgUtils.parseSVG(
+//     //   'imgs/K11-L1.svg', // 设置模型svg源
+//     //   [0.02, 0, 0, 0, 0, -0.02, 0, 0, 0, 0, 0, 0, -40, 40, 0, 1],
+//     // );
+
+//     // const blocks = new BlockSet(shapes);
+//     // stage.bindElement(blocks);
+//     const myTree = new Quadtree({
+//       x: 0,
+//       y: 0,
+//       width: 500,
+//       height: 500,
+//       data: 'root',
+//     }, 1, 4, 0, 'root');
+
+//     for (let i = 1; i < 3; i += 1) {
+//       const x2D = ((i * 20) / 500) * 2 - 1;
+//       const y2D = -((i * 20) / 500) * 2 + 1;
+//       console.log('x2D y2D', i * 20);
+//       view.camera.updateMatrixWorld();
+//       const nPos = new THREE.Vector3(x2D, y2D, 0).unproject(view.camera);
+//       // console.log('nPos', nPos);
+//       const x = nPos.x;
+//       const y = nPos.y;
+//       // const x = (Math.random() - 0.5) * 30;
+//       // const y = (Math.random() - 0.5) * 30;
+//       const pos = new THREE.Vector3(x, y, nPos.z);
+//       const poi = poiOverlay.createPoi(pos);
+//       const text = `这是第${i}个icon`;
+//       poi.setIconSize(20, 20);
+//       poi.setIconImage('./testPixel.png');
+//       // poi.setFontSize(12);
+//       const rect = {
+//         x: i * 20 - 10,
+//         y: i * 20 - 10,
+//         width: 20,
+//         height: 20,
+//         data: text,
+//       };
+//       // poi.setLabelText(text);
+//       myTree.insert(rect);
+//       // poi.setIconImage('/pointer.png'); // 设置标签图标
+//       // poi.setLabelAnchor('top');
+//       // poi.setLabelText(`这是第${i}个icon`);
+//     }
+//     // 怎么算???
+//     console.log('elements', myTree);
+//     traverse(myTree);
+//     // const indexs = myTree.getIndex({
+//     //   x: 0, y: 0, width: 37.5, height: 100,
+//     // });
+//     // 属于哪个块？
+//     const elements = myTree.retrieve({
+//       x: 100, y: 100, width: 10, height: 10,
+//     }); // 检索所在的块 并 输出所在块 完全包含 / 部分包含的 objs
+//     console.log('elements', elements);
+//     // 怎么peng
+//     // 怎么画正方形?
+//     // 得到2D -> 3D 的映射关系
+//     // [0, 0] => [-1, 1]
+//     // [500, 500] => [1, -1]
+//     // screenX / containerX * 2 - 1
+//     // - (screenY / containerY) * 2 + 1
+//     //
+
+//     // myTree 可视化怎么做
+
+//     // for (let i = 10; i < 20; i += 1) {
+//     //   const poi = poiOverlay.createPoi(new THREE.Vector3((Math.random() - 0.5) * 30, (Math.random() - 0.5) * 30, 0));
+//     //   poi.setLabelText(`${i}`);
+//     //   poi.setCollision(true);
+//     //   // poi.setLabelOffset(0, 7);
+//     // }
+//   };
+
+//   (window as any).view = view;
+//   (window as any).AlignmentUtils = AlignmentUtils;
+// }
+// (window as any).stage = stage;
+// (window as any).init();

package/src/web/sensor-vr-plugin.ts

@@ -0,0 +1,201 @@
+// /* eslint-disable */
+
+// import { EventHub, Events, Placeable2D, DOMLabel2D, Poi } from "../owlly";
+
+// class SensorVRPlugin {
+//   sensors: any;
+
+//   product: string;
+
+//   eventHub: typeof EventHub;
+
+//   listeners: { [key: string]: Function };
+
+//   vrId: string;
+
+//   pendingVrId: string | null;
+
+//   // session: string;
+
+//   queue: any[];
+
+//   env: string;
+
+//   inPathMovement: boolean;
+
+//   currentPanoramaId: number;
+
+//   moveType: string;
+
+//   timer: Date;
+
+//   constructor(sensors: any, product: string, eventHub: typeof EventHub, vrId: string, env = 'development') {
+//     this.sensors = sensors;
+//     this.product = product;
+//     this.eventHub = eventHub;
+//     this.vrId = vrId;
+//     // this.pendingVrId = vrId;
+//     // TODO: change this to uuid generator
+//     // this.session = [...Array(20)].map(i=>(~~(Math.random()*36)).toString(36)).join('');
+//     this.env = env;
+//     this.moveType = 'click';
+
+//     this.queue = [];
+
+//     this.listeners = {
+//       onClickPanorama: () => { this.onClickPanorama(); },
+//       // onWillLoadPanorama: () => { this.onWillLoadPanorama(); },
+//       // onDidLoadPanorama: () => { this.onDidLoadPanorama(); },
+//       // onWillMoveToPanorama: () => { this.onWillMoveToPanorama(); },
+//       onMoveToPanorama: (pid: number, pano: any, modelChanged: boolean) => {
+//         this.onMoveToPanorama(pid, modelChanged);
+//       },
+//       onElementSelected: (element: Element) => { this.onElementSelected(element); },
+//       onPoiUp: (element: Poi) => { this.onPoiUp(element); },
+//       onPathMovementStart: () => { this.onPathMovementStart(); },
+//       onPathMovementCompleted: () => { this.onPathMovementCompleted(); },
+//       // onElementLoaded: () => { this.onElementLoaded(); },
+//     };
+
+//     this.registerEvents();
+//   }
+
+//   registerEvents() {
+//     EventHub.on(Events.CLICK_PANORAMA, this.listeners.onClickPanorama);
+//     // EventHub.on(Events.WILL_LOAD_PANORAMA, this.listeners.onWillLoadPanorama);
+//     // EventHub.on(Events.DID_LOAD_PANORAMA, this.listeners.onDidLoadPanorama);
+//     // EventHub.on(Events.WILL_MOVE_TO_PANORAMA, this.listeners.onWillMoveToPanorama);
+//     EventHub.on(Events.MOVE_TO_PANORAMA, this.listeners.onMoveToPanorama);
+//     EventHub.on(Events.ELEMENT_SELECTED, this.listeners.onElementSelected);
+//     EventHub.on(Events.POI_CLICKED, this.listeners.onPoiUp);
+//     EventHub.on(Events.PATH_MOVEMENT_START, this.listeners.onPathMovementStart);
+//     EventHub.on(Events.PATH_MOVEMENT_COMPLETED, this.listeners.onPathMovementCompleted);
+//     // EventHub.on('o/element-loaded', this.listeners.onElementLoaded);
+//   }
+
+//   unregisterEvents() {
+//     EventHub.off(Events.CLICK_PANORAMA, this.listeners.onClickPanorama);
+//     // EventHub.off(Events.WILL_LOAD_PANORAMA, this.listeners.onWillLoadPanorama);
+//     // EventHub.off(Events.DID_LOAD_PANORAMA, this.listeners.onDidLoadPanorama);
+//     // EventHub.off(Events.WILL_MOVE_TO_PANORAMA, this.listeners.onWillMoveToPanorama);
+//     EventHub.off(Events.MOVE_TO_PANORAMA, this.listeners.onMoveToPanorama);
+//     EventHub.off(Events.ELEMENT_SELECTED, this.listeners.onElementSelected);
+//     EventHub.off(Events.POI_UP, this.listeners.onPoiUp);
+//     EventHub.off(Events.PATH_MOVEMENT_START, this.listeners.onPathMovementStart);
+//     EventHub.off(Events.PATH_MOVEMENT_COMPLETED, this.listeners.onPathMovementCompleted);
+//     // EventHub.off('o/element-loaded', this.listeners.onElementLoaded);
+//   }
+
+//   destroy() {
+//     this.unregisterEvents();
+//   }
+
+//   setPendingVRId(vrId: string) {
+//     this.pendingVrId = vrId;
+//   }
+
+//   /* event listeners */
+
+//   onClickPanorama() {
+//     // console.log('on click panorama');
+//     this.moveType = 'click';
+//   }
+
+//   // onWillLoadPanorama() {
+//   //   // console.log('on will load panorama');
+//   // }
+
+//   // onDidLoadPanorama() {
+//   //   // console.log('on did load panorama');
+//   // }
+
+//   // onWillMoveToPanorama() {
+//   //   // console.log('on will move to panorama');
+//   // }
+
+//   onMoveToPanorama(pid: number, modelChanged: boolean) {
+//     if (this.currentPanoramaId && !this.inPathMovement) {
+//       const currentTime = new Date();
+//       const timeDiff = currentTime.getTime() - this.timer.getTime();
+//       this.logEvent('VR_SDK__Panorama_Stay', { VR_SDK__pid: this.currentPanoramaId, VR_SDK__stay_time: timeDiff });
+//       this.timer = currentTime;
+//     }
+//     if (modelChanged) {
+//       if (this.pendingVrId) this.vrId = this.pendingVrId;
+//       this.logEvent('VR_SDK__Enter_Vr');
+//       this.pendingVrId = null;
+//     }
+//     this.currentPanoramaId = pid;
+//     this.logEvent(
+//       'VR_SDK__Panorama_Changed',
+//       { VR_SDK__pid: this.currentPanoramaId, VR_SDK__move_type: this.moveType },
+//     );
+//     if (!this.timer) this.timer = new Date();
+//   }
+
+//   onElementSelected(element: Element) {
+//     // console.log('on element selected', element);
+//     if (!element || !(element instanceof Placeable2D || element instanceof DOMLabel2D)) return;
+//     let labelType = 'unknown';
+//     if (element instanceof Placeable2D) labelType = 'placeable2d';
+//     if (element instanceof DOMLabel2D) labelType = 'domLabel2d';
+//     this.logEvent(
+//       'VR_SDK__Label_Click',
+//       {
+//         VR_SDK__pid: this.currentPanoramaId,
+//         VR_SDK__label_id: element.labelID,
+//         VR_SDK__label_type: labelType,
+//       },
+//     );
+//   }
+
+//   onPoiUp(element: Poi) {
+//     // console.log('on poi up');
+//     if (!element || !(element instanceof Poi)) return;
+//     this.logEvent(
+//       'VR_SDK__Label_Click',
+//       {
+//         VR_SDK__pid: this.currentPanoramaId,
+//         VR_SDK__label_id: element.poiId,
+//         VR_SDK__label_type: 'poi',
+//       },
+//     );
+//   }
+
+//   onPathMovementStart() {
+//     // console.log('on path movement start');
+//     const currentTime = new Date();
+//     const timeDiff = currentTime.getTime() - this.timer.getTime();
+//     this.logEvent('VR_SDK__Panorama_Stay', { VR_SDK__pid: this.currentPanoramaId, VR_SDK__stay_time: timeDiff });
+//     this.inPathMovement = true;
+//     this.moveType = 'path';
+//   }
+
+//   onPathMovementCompleted() {
+//     // console.log('on path movement completed');
+//     this.timer = new Date();
+//     this.inPathMovement = false;
+//     this.moveType = 'click';
+//   }
+
+//   // onElementLoaded() {
+//   //   // console.log('on element loaded');
+//   // }
+
+//   /* Sensor */
+
+//   logEvent(eventName: string, params?: any) {
+//     if (!this.vrId) return;
+//     this.sensors.track(
+//       eventName,
+//       {
+//         product: this.product,
+//         env: this.env,
+//         VR_SDK_vr_id: this.vrId,
+//         ...(params || {}),
+//       },
+//     );
+//   }
+// }
+
+// export default SensorVRPlugin;