@realsee/dnalogel 2.0.0-alpha.37 → 2.0.0-alpha.38

package/libs/PanoRulerProPlugin/RulerItems.js

@@ -0,0 +1,377 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	check_outros,
+	create_component,
+	destroy_component,
+	destroy_each,
+	detach,
+	element,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { Five } from '@realsee/five';
+import { nextFrame } from '../shared-utils/animationFrame';
+import equal from '../shared-utils/equal';
+import { intersectionOfLine } from '../shared-utils/math/planimetry';
+import throttle from '../shared-utils/throttle';
+import { onDestroy, onMount } from 'svelte';
+import { Vector3 } from 'three';
+import RulerItem from './RulerItem';
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[16] = list[i];
+	return child_ctx;
+}
+
+// (206:2) {#each rulerItemProp as itemData}
+function create_each_block(ctx) {
+	let ruleritem;
+	let current;
+
+	ruleritem = new RulerItem({
+			props: { rulerItemProp: /*itemData*/ ctx[16] }
+		});
+
+	return {
+		c() {
+			create_component(ruleritem.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(ruleritem, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const ruleritem_changes = {};
+			if (dirty & /*rulerItemProp*/ 1) ruleritem_changes.rulerItemProp = /*itemData*/ ctx[16];
+			ruleritem.$set(ruleritem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(ruleritem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(ruleritem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(ruleritem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let current;
+	let each_value = /*rulerItemProp*/ ctx[0];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*rulerItemProp*/ 1) {
+				each_value = /*rulerItemProp*/ ctx[0];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(div, null);
+					}
+				}
+
+				group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			each_blocks = each_blocks.filter(Boolean);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	var _a, _b, _c, _d;
+	let { five } = $$props;
+	let { rulerDatas } = $$props;
+	let { options } = $$props;
+	let rulerItemProp = [];
+
+	const canvasWidth = ((_b = (_a = five.getElement()) === null || _a === void 0
+	? void 0
+	: _a.parentElement) === null || _b === void 0
+	? void 0
+	: _b.clientWidth) || 0;
+
+	const canvasHeight = ((_d = (_c = five.getElement()) === null || _c === void 0
+	? void 0
+	: _c.parentElement) === null || _d === void 0
+	? void 0
+	: _d.clientHeight) || 0;
+
+	const getRuleScreenIntr = (startPoint, endPoint) => {
+		const screenLines = [
+			[{ x: 0, y: 0 }, { x: canvasWidth, y: 0 }],
+			[{ x: 0, y: 0 }, { x: 0, y: canvasHeight }],
+			[{ x: canvasWidth, y: 0 }, { x: canvasWidth, y: canvasHeight }],
+			[{ x: 0, y: canvasHeight }, { x: canvasWidth, y: canvasHeight }]
+		];
+
+		const intr = [];
+
+		for (let i = 0; i < screenLines.length; i++) {
+			const result = intersectionOfLine([startPoint, endPoint], [screenLines[i][0], screenLines[i][1]], true);
+			if (result) intr.push(result);
+		}
+
+		if (intr.length === 0) return false; else {
+			return intr;
+		}
+	};
+
+	const getPosition = (start, end) => {
+		const startPoint = start.clone().project(five.camera);
+		const startLeft = (startPoint.x + 1) / 2 * canvasWidth;
+		const startTop = (-startPoint.y + 1) / 2 * canvasHeight;
+		const endPoint = end.clone().project(five.camera);
+		const endLeft = (endPoint.x + 1) / 2 * canvasWidth;
+		const endTop = (-endPoint.y + 1) / 2 * canvasHeight;
+		const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
+
+		return {
+			startLeft,
+			startTop,
+			endLeft,
+			endTop,
+			distance
+		};
+	};
+
+	const getPositionAndVisible = (start, end, visibleOrigin) => {
+		const cameraPosition = five.camera.position;
+		const cameraDirection = five.camera.getWorldDirection(new Vector3());
+		const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+		const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+		const ruleLength = start.distanceTo(end);
+		const midPoint = end.clone().sub(end.clone().sub(start).divide(new Vector3(2, 2, 2)));
+		const disFromCameraToMid = midPoint.distanceTo(cameraPosition);
+		const { startLeft, startTop, endLeft, endTop, distance } = getPosition(start, end);
+		const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
+		const deg = -(rad / Math.PI) * 180;
+		let visible = true;
+		if (!visibleOrigin) visible = false;
+
+		// 只显示拐点相连的线
+		if (!equal(start, visibleOrigin) && !equal(end, visibleOrigin)) {
+			visible = false;
+		}
+
+		// 线小于0.3m隐藏
+		if (ruleLength < 0.3) {
+			visible = false;
+		}
+
+		if (startAngle > Math.PI / 2) {
+			visible = false;
+		}
+
+		if (endAngle > Math.PI / 2) {
+			visible = false;
+		}
+
+		if (disFromCameraToMid / ruleLength > 8) {
+			visible = false;
+		}
+
+		let labelOffset = 50;
+		let visibleLength = distance;
+		const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, { x: ~~endLeft, y: ~~endTop });
+
+		if (intr && intr.length === 1) {
+			if (equal(start, visibleOrigin)) {
+				visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
+				labelOffset = visibleLength / distance * 50;
+			} else if (equal(end, visibleOrigin)) {
+				visibleLength = Math.sqrt(Math.pow(intr[0].x - endLeft, 2) + Math.pow(intr[0].y - endTop, 2));
+				labelOffset = 100 - visibleLength / distance * 50;
+			}
+		}
+
+		if (intr && intr.length === 2) {
+			const middlePoint = {
+				x: (intr[0].x + intr[1].x) / 2,
+				y: (intr[0].y + intr[1].y) / 2
+			};
+
+			const distanceFromStart = Math.sqrt(Math.pow(middlePoint.x - startLeft, 2) + Math.pow(middlePoint.y - startTop, 2));
+			labelOffset = distanceFromStart / distance * 100;
+		}
+
+		return {
+			startLeft,
+			startTop,
+			distance,
+			deg,
+			visible,
+			labelOffset,
+			ruleLength
+		};
+	};
+
+	const updatePanoRulerData = () => {
+		const panoIndex = five.panoIndex;
+		const rulerData = rulerDatas.find(data => data.panoIndex === panoIndex);
+		if (!rulerData) return $$invalidate(0, rulerItemProp = []);
+
+		// 非全景模式下隐藏所有标尺
+		if (five.currentMode !== Five.Mode.Panorama) return $$invalidate(0, rulerItemProp = []);
+
+		const cameraPosition = five.camera.position;
+		const cameraDirection = five.camera.getWorldDirection(new Vector3());
+		const startPoints = rulerData.lines.map(v => new Vector3(v.start[0], -v.start[1], -v.start[2]));
+		const endPoints = rulerData.lines.map(v => new Vector3(v.end[0], -v.end[1], -v.end[2]));
+
+		// 可以看到的角度最小的拐点
+		const [visibleOrigin] = startPoints.concat(endPoints).sort((pointA, pointB) => {
+			const angleA = pointA.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+			const angleB = pointB.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+			return angleA - angleB;
+		});
+
+		const data = rulerData.lines.map(line => {
+			var _a, _b;
+			const start = line.start;
+			const end = line.end;
+			const { startLeft, startTop, distance, deg, visible, labelOffset, ruleLength } = getPositionAndVisible(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]), visibleOrigin);
+			const children = [];
+
+			if (line.children && ((_a = line.children) === null || _a === void 0
+			? void 0
+			: _a.length) > 0) {
+				(_b = line.children) === null || _b === void 0
+				? void 0
+				: _b.forEach(l => {
+						const start = l.start;
+						const end = l.end;
+						const { distance } = getPosition(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]));
+						children.push({ width: distance, state: l.state });
+					});
+			}
+
+			return {
+				width: distance,
+				left: startLeft,
+				top: startTop,
+				rotateDeg: deg,
+				state: line.state,
+				children,
+				labelOffset,
+				visible,
+				labelElement: options.distanceText(ruleLength)
+			};
+		});
+
+		$$invalidate(0, rulerItemProp = data);
+	};
+
+	const nextFrameFreshRule = () => nextFrame(updatePanoRulerData);
+	const throttleFreshRule = throttle(updatePanoRulerData, 80);
+
+	onMount(() => {
+		updatePanoRulerData();
+		five.on('panoArrived', updatePanoRulerData);
+		five.on('modeChange', updatePanoRulerData);
+		five.on('cameraDirectionUpdate', nextFrameFreshRule);
+		five.on('movingToPano', nextFrameFreshRule);
+		five.on('mouseWheel', () => throttleFreshRule());
+		five.on('pinchGesture', () => throttleFreshRule());
+	});
+
+	onDestroy(() => {
+		five.off('panoArrived', updatePanoRulerData);
+		five.off('modeChange', updatePanoRulerData);
+		five.off('cameraDirectionUpdate', nextFrameFreshRule);
+		five.off('movingToPano', nextFrameFreshRule);
+		five.off('mouseWheel', () => throttleFreshRule());
+		five.off('pinchGesture', () => throttleFreshRule());
+	});
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(1, five = $$props.five);
+		if ('rulerDatas' in $$props) $$invalidate(2, rulerDatas = $$props.rulerDatas);
+		if ('options' in $$props) $$invalidate(3, options = $$props.options);
+	};
+
+	return [rulerItemProp, five, rulerDatas, options];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { five: 1, rulerDatas: 2, options: 3 });
+	}
+}
+
+export default Component;

package/libs/PanoRulerProPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import type { FivePlugin } from '@realsee/five';
+import type { PanoRulerProPluginParameterType, PanoRulerProPluginExportType } from './typings';
+/**
+ * 全景标尺插件
+ */
+export declare const PanoRulerProPlugin: FivePlugin<PanoRulerProPluginParameterType, PanoRulerProPluginExportType>;
+export default PanoRulerProPlugin;
+export type { PanoRulerProPluginParameterType, PanoRulerProPluginExportType, PanoRulerProPluginOptions, PanoRulerProPluginState, } from './typings';

package/libs/PanoRulerProPlugin/index.js

@@ -0,0 +1,8 @@
+import Controller from './Controller';
+/**
+ * 全景标尺插件
+ */
+export const PanoRulerProPlugin = (five, params) => {
+    return new Controller(five, params);
+};
+export default PanoRulerProPlugin;

package/libs/PanoRulerProPlugin/typings.d.ts

@@ -0,0 +1,46 @@
+export declare type PanoRulerProPluginDatas = {
+    data: PanoRulerProPluginData[];
+    version: number;
+};
+export interface PanoRulerProPluginData {
+    panoIndex: number;
+    roomName: string;
+    lines: Line[];
+}
+interface Line {
+    start: number[];
+    end: number[];
+    state: boolean;
+    children?: Line[];
+}
+export interface PanoRulerProPluginOptions {
+    distanceText?: (distance: number) => string;
+    className?: string;
+}
+export interface PanoRulerProPluginState {
+    enabled: boolean;
+    loaded: boolean;
+    options: PanoRulerProPluginOptions;
+}
+export interface PanoRulerProPluginParameterType {
+    data?: PanoRulerProPluginDatas;
+    options?: PanoRulerProPluginOptions;
+}
+export interface PanoRulerProPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (serverData: PanoRulerProPluginDatas) => void;
+    state: PanoRulerProPluginState;
+}
+export interface RulerItemProp {
+    width: number;
+    left: number;
+    top: number;
+    rotateDeg: number;
+    state: boolean;
+    children: any[];
+    labelOffset: number;
+    labelElement: string;
+    visible: boolean;
+}
+export {};

package/libs/PanoRulerProPlugin/typings.js

@@ -0,0 +1 @@
+export {};

package/libs/index.d.ts

@@ -7,6 +7,7 @@ export * from './ModelChassisCompassPlugin';
 export * from './ModelEntryDoorGuidePlugin';
 export * from './CameraMovementPlugin';
 export * from './PanoRulerPlugin';
+export * from './PanoRulerProPlugin';
 export * from './PanoCompassPlugin';
 export * from './PanoMeasurePlugin';
 export * from './PanoSpatialTagPlugin';

package/libs/index.js

@@ -12,6 +12,8 @@ export * from './ModelEntryDoorGuidePlugin';
 export * from './CameraMovementPlugin';
 // 全景标尺
 export * from './PanoRulerPlugin';
+// 全景标尺Pro版
+export * from './PanoRulerProPlugin';
 // 全景指南针
 export * from './PanoCompassPlugin';
 // pc 全景测量工具

package/libs/shared-utils/logger.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 输出格式化日志
+ */
+export declare enum LOG_LEVEL {
+    info = "INFO",
+    log = "LOG",
+    error = "ERROR",
+    warn = "WARN"
+}
+export declare const logger: {
+    log: (...args: any[]) => void;
+    info: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+};
+export default logger;

package/libs/shared-utils/logger.js

@@ -0,0 +1,47 @@
+/**
+ * 输出格式化日志
+ */
+// 获取当前时间
+const getTime = () => {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); //月份是从0开始的
+    const day = date.getDate().toString().padStart(2, '0');
+    const hour = date.getHours().toString().padStart(2, '0');
+    const min = date.getMinutes().toString().padStart(2, '0');
+    const sec = date.getSeconds().toString().padStart(2, '0');
+    const ms = date.getMilliseconds();
+    return `[${year}-${month}-${day} ${hour}:${min}:${sec}.${ms}]`;
+};
+export var LOG_LEVEL;
+(function (LOG_LEVEL) {
+    LOG_LEVEL["info"] = "INFO";
+    LOG_LEVEL["log"] = "LOG";
+    LOG_LEVEL["error"] = "ERROR";
+    LOG_LEVEL["warn"] = "WARN";
+})(LOG_LEVEL || (LOG_LEVEL = {}));
+// 输出日志
+const echo = (logLevel, args = []) => {
+    args.unshift(`@realsee/dnalogel ${getTime()} <${logLevel}> `);
+    switch (logLevel) {
+        case LOG_LEVEL.info:
+            return console.info(...args);
+        case LOG_LEVEL.error:
+            return console.error(...args);
+        case LOG_LEVEL.warn:
+            return console.warn(...args);
+        default:
+            return console.log(...args);
+    }
+};
+const log = (...args) => echo(LOG_LEVEL.log, args);
+const info = (...args) => echo(LOG_LEVEL.info, args);
+const error = (...args) => echo(LOG_LEVEL.error, args);
+const warn = (...args) => echo(LOG_LEVEL.warn, args);
+export const logger = {
+    log,
+    info,
+    error,
+    warn,
+};
+export default logger;

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.37",
+  "version": "2.0.0-alpha.38",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",