@realsee/dnalogel 2.1.0-alpha.10 → 2.1.0-alpha.12

package/libs/CSS3DRenderPlugin/Plugin.js

@@ -1,182 +0,0 @@
-import * as THREE from 'three';
-import { Scene, Vector3 } from 'three';
-import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
-import evenNumber from '../shared-utils/math/evenNumber';
-import centerPoint from '../shared-utils/three/centerPoint';
-import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
-import createResizeObserver from './utils/createResizeObserver';
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-export const CSS3DRenderPlugin = (five) => {
-    const state = { disposeCallbacks: [] };
-    const create3DDomContainer = (...params) => {
-        var _a, _b, _c;
-        const points = params[0].map((point) => (point instanceof Vector3 ? point : transformPositionToVector3(point)));
-        const config = params[1];
-        if ((points === null || points === void 0 ? void 0 : points.length) < 4)
-            return console.error('points must be equal or greater than than 4');
-        if (!((_a = five === null || five === void 0 ? void 0 : five.model) === null || _a === void 0 ? void 0 : _a.loaded))
-            return console.error('five.model.loaded is: ', (_b = five === null || five === void 0 ? void 0 : five.model) === null || _b === void 0 ? void 0 : _b.loaded);
-        const fiveElement = five.getElement();
-        if (!fiveElement)
-            return console.error('five.getElement() is ' + fiveElement);
-        const disposers = [];
-        const ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
-        if (ratio <= 0.00215)
-            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
-        const dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
-        const mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
-        const autoRender = (_c = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _c !== void 0 ? _c : true;
-        const behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
-        const container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
-        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
-        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
-        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
-        // ======= INIT START =======
-        let resizeObserver;
-        const frontModeUnInited = mode === 'front' && !state.frontMode;
-        const behindModeUnInited = mode === 'behind' && !state.behindMode;
-        const inited = !(frontModeUnInited || behindModeUnInited);
-        if (behindModeUnInited) {
-            state.behindMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
-        }
-        if (frontModeUnInited) {
-            state.frontMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
-        }
-        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
-        const { scene, css3DRenderer } = stateMode;
-        const render = (() => {
-            if (!inited) {
-                const css3DRendererSetSize = () => {
-                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
-                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
-                    css3DRenderer.setSize(rendererWidth, rendererHeight);
-                };
-                css3DRendererSetSize();
-                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
-                css3DRenderer.domElement.style.position = 'absolute';
-                css3DRenderer.domElement.style.top = '0';
-                css3DRenderer.domElement.style.userSelect = 'none';
-                css3DRenderer.domElement.style.pointerEvents = 'none';
-                const renderEveryFrame = () => {
-                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
-                    css3DRenderer.render(scene, five.camera);
-                };
-                return () => {
-                    var _a;
-                    scene.add(css3DObject);
-                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                    renderEveryFrame();
-                    if (mode === 'behind' && mesh) {
-                        five.scene.add(mesh);
-                        disposers.push(() => mesh && five.scene.remove(mesh));
-                    }
-                };
-            }
-            else {
-                return () => {
-                    scene.add(css3DObject);
-                };
-            }
-        })();
-        if (frontModeUnInited) {
-            const wrapper = fiveElement.parentElement || document.body;
-            wrapper.appendChild(css3DRenderer.domElement);
-        }
-        if (behindModeUnInited) {
-            const wrapper = behindFiveContainer;
-            wrapper.appendChild(css3DRenderer.domElement);
-        }
-        // ======= INIT END =======
-        const dispose = () => {
-            var _a;
-            disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
-            scene.remove(css3DObject);
-            if (scene.children.length === 0) {
-                if (typeof stateMode.requestAnimationFrameId === 'number') {
-                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
-                }
-                css3DRenderer.domElement.remove();
-                if (mode === 'front')
-                    state.frontMode = undefined;
-                if (mode === 'behind')
-                    state.behindMode = undefined;
-                if (!state.behindMode && !state.frontMode) {
-                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                }
-            }
-            return true;
-        };
-        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
-        if (idx !== -1) {
-            state.disposeCallbacks.splice(idx, 1);
-        }
-        else {
-            state.disposeCallbacks.push(dispose);
-        }
-        if (autoRender)
-            render();
-        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
-    };
-    const createObject = (points, config) => {
-        const { ratio, dpr, container: element, mode } = config;
-        const planeWidth = points[0].distanceTo(points[1]);
-        const planeHeight = points[1].distanceTo(points[2]);
-        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
-        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
-        const css3DObject = new CSS3DObject(element);
-        css3DObject.scale.set(ratio, ratio, ratio);
-        element.style.width = domWidthPx + 'px';
-        element.style.height = domHeightPx + 'px';
-        element.style.pointerEvents = 'none';
-        const centerPosition = centerPoint(points[0], points[2]);
-        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
-        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
-        // 旋转
-        const rotateXAngle = new Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
-        const rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
-        const rotateZAngle = vector01.angleTo(new Vector3(vector01.x, 0, vector01.z));
-        /**
-         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
-         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
-         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
-         */
-        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
-        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
-        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
-        css3DObject.rotateOnWorldAxis(new Vector3(1, 0, 0), rotateX); // x
-        css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
-        css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
-        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-        let mesh;
-        if (mode === 'behind') {
-            const material = new THREE.MeshBasicMaterial({
-                opacity: 0,
-                transparent: false,
-                side: THREE.DoubleSide,
-            });
-            const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
-            mesh = new THREE.Mesh(geometry, material);
-            mesh.name = 'CSS3DRenderPlugin-mesh';
-            mesh.position.copy(css3DObject.position);
-            mesh.rotation.copy(css3DObject.rotation);
-            mesh.scale.copy(css3DObject.scale);
-        }
-        return { css3DObject, mesh };
-    };
-    return {
-        create3DDomContainer,
-        disposeAll: () => {
-            state.disposeCallbacks.forEach((d) => d === null || d === void 0 ? void 0 : d());
-            state.disposeCallbacks = [];
-        },
-    };
-};
-export default CSS3DRenderPlugin;

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.d.ts

@@ -1,7 +0,0 @@
-/**
- * @description: 究极简陋的 ResizeObserver polyfill
- */
-export default function createResizeObserver(func: () => any, element?: HTMLElement): {
-    observe: () => void;
-    unobserve: () => void;
-};

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.js

@@ -1,18 +0,0 @@
-/**
- * @description: 究极简陋的 ResizeObserver polyfill
- */
-export default function createResizeObserver(func, element) {
-    if (!element || typeof ResizeObserver === 'undefined') {
-        return {
-            observe: () => window.addEventListener('resize', func),
-            unobserve: () => window.removeEventListener('resize', func),
-        };
-    }
-    else {
-        const observer = new ResizeObserver(func);
-        return {
-            observe: () => observer.observe(element),
-            unobserve: () => observer.unobserve(element),
-        };
-    }
-}

package/libs/GuideLinePlugin/utils/getLineGeometry.d.ts

@@ -1,2 +0,0 @@
-import * as THREE from 'three';
-export default function getLineGeometry(positionList: THREE.Vector3[]): void | THREE.BufferGeometry;

package/libs/GuideLinePlugin/utils/getLineGeometry.js

@@ -1,64 +0,0 @@
-import * as THREE from 'three';
-import getNormals from 'polyline-normals';
-// 定义常量
-const TRIANGLE_NUMBER_OF_RECTANGLE = 2; // 每个矩形有两个三角形
-const VERTEX_NUMBER_OF_TRIANGLE = 3; // 每个三角形有三个顶点
-const AXIS_NUMBER_OF_VERTEX = 3; // 每个顶点有三个轴坐标
-const UV_NUMBER_OF_VERTEX = 2; // 每个顶点有两个 UV 轴坐标
-export default function getLineGeometry(positionList) {
-    if (positionList.length < 2)
-        return console.warn('positionList length must be greater than 1');
-    const lineWidth = 0.6;
-    const halfLineWidth = lineWidth / 2;
-    const aspect = 0.67; // 纵横比 width / height
-    // 点位向量数组
-    const keyPoints = positionList;
-    // 点位组成的平滑曲线
-    const curve = new THREE.CatmullRomCurve3(keyPoints, false, 'catmullrom', 0.5);
-    // 求顶点和 UV
-    const divisions = Math.ceil(curve.getLength()); // 曲线切片数
-    const curvePoints = curve.getPoints(divisions);
-    const curvePointsLength = curvePoints.length;
-    const normals = getNormals(curvePoints.map((p) => [p.x, p.z])); // curvePoints：每个点切线的向量「二维」
-    const rectangleNumber = curvePoints.length - 1; // 曲线上 N 个点，构成了 N - 1 个矩形
-    const indexNumber = rectangleNumber * TRIANGLE_NUMBER_OF_RECTANGLE * VERTEX_NUMBER_OF_TRIANGLE;
-    const verticesNumber = 2 * curvePointsLength; // 顶点数量（包含公用）：每个曲线点对应两个顶点，N 个 点有 2N 个顶点
-    const positionNumber = verticesNumber * AXIS_NUMBER_OF_VERTEX; // 坐标点数量
-    const uvNumber = verticesNumber * UV_NUMBER_OF_VERTEX; // uv 数量
-    const index = new Uint32Array(indexNumber);
-    const positions = new Float32Array(positionNumber);
-    const uv = new Float32Array(uvNumber);
-    let totalLength = 0;
-    for (let i = 0; i < curvePoints.length; i++) {
-        const [nx, nz] = normals[i][0];
-        const curvePoint = curvePoints[i];
-        const { x: curvePointX, y: curvePointY, z: curvePointZ } = curvePoint;
-        // vertices[2i]
-        positions[i * 6 + 0] = curvePointX + nx * halfLineWidth;
-        positions[i * 6 + 1] = curvePointY + 0.05;
-        positions[i * 6 + 2] = curvePointZ + nz * halfLineWidth;
-        // vertices[2i + 1]
-        positions[i * 6 + 3] = curvePointX - nx * halfLineWidth;
-        positions[i * 6 + 4] = curvePointY + 0.05;
-        positions[i * 6 + 5] = curvePointZ - nz * halfLineWidth;
-        totalLength += i > 0 ? curvePoints[i - 1].clone().sub(curvePoints[i]).length() : 0;
-        const end = totalLength / lineWidth / aspect;
-        uv[i * 4 + 0] = 0;
-        uv[i * 4 + 1] = end;
-        uv[i * 4 + 2] = 1;
-        uv[i * 4 + 3] = end;
-        if (i === curvePoints.length - 1)
-            continue;
-        index[i * 6 + 0] = i * 2 + 0;
-        index[i * 6 + 1] = i * 2 + 2;
-        index[i * 6 + 2] = i * 2 + 1;
-        index[i * 6 + 3] = i * 2 + 2;
-        index[i * 6 + 4] = i * 2 + 3;
-        index[i * 6 + 5] = i * 2 + 1;
-    }
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-    geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
-    geometry.setIndex(new THREE.BufferAttribute(index, 1));
-    return geometry;
-}

package/libs/PanoTagPlugin/Components/Tag/MediaPanel.js

@@ -1,159 +0,0 @@
-/* generated by Svelte v3.50.1 */
-import {
-	SvelteComponent,
-	append_styles,
-	attr,
-	check_outros,
-	create_component,
-	destroy_component,
-	detach,
-	element,
-	empty,
-	group_outros,
-	init,
-	insert,
-	mount_component,
-	safe_not_equal,
-	transition_in,
-	transition_out
-} from "svelte/internal";
-
-import Media from '../Common/Media';
-
-function add_css(target) {
-	append_styles(target, "svelte-10cw0el", ".media-wrapper-10cw0el{position:absolute;width:100%;height:100%}");
-}
-
-// (8:0) {#if tag.state && mediaData}
-function create_if_block(ctx) {
-	let div;
-	let media;
-	let current;
-
-	media = new Media({
-			props: {
-				unfolded: /*unfolded*/ ctx[2],
-				mediaData: /*mediaData*/ ctx[1],
-				inDelay: 500,
-				duration: 500
-			}
-		});
-
-	return {
-		c() {
-			div = element("div");
-			create_component(media.$$.fragment);
-			attr(div, "class", "media-wrapper svelte-10cw0el");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			mount_component(media, div, null);
-			current = true;
-		},
-		p(ctx, dirty) {
-			const media_changes = {};
-			if (dirty & /*unfolded*/ 4) media_changes.unfolded = /*unfolded*/ ctx[2];
-			if (dirty & /*mediaData*/ 2) media_changes.mediaData = /*mediaData*/ ctx[1];
-			media.$set(media_changes);
-		},
-		i(local) {
-			if (current) return;
-			transition_in(media.$$.fragment, local);
-			current = true;
-		},
-		o(local) {
-			transition_out(media.$$.fragment, local);
-			current = false;
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-			destroy_component(media);
-		}
-	};
-}
-
-function create_fragment(ctx) {
-	let if_block_anchor;
-	let current;
-	let if_block = /*tag*/ ctx[0].state && /*mediaData*/ ctx[1] && create_if_block(ctx);
-
-	return {
-		c() {
-			if (if_block) if_block.c();
-			if_block_anchor = empty();
-		},
-		m(target, anchor) {
-			if (if_block) if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
-			current = true;
-		},
-		p(ctx, [dirty]) {
-			if (/*tag*/ ctx[0].state && /*mediaData*/ ctx[1]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-
-					if (dirty & /*tag, mediaData*/ 3) {
-						transition_in(if_block, 1);
-					}
-				} else {
-					if_block = create_if_block(ctx);
-					if_block.c();
-					transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				}
-			} else if (if_block) {
-				group_outros();
-
-				transition_out(if_block, 1, 1, () => {
-					if_block = null;
-				});
-
-				check_outros();
-			}
-		},
-		i(local) {
-			if (current) return;
-			transition_in(if_block);
-			current = true;
-		},
-		o(local) {
-			transition_out(if_block);
-			current = false;
-		},
-		d(detaching) {
-			if (if_block) if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
-		}
-	};
-}
-
-function instance($$self, $$props, $$invalidate) {
-	let unfolded;
-	let mediaData;
-	let { tag } = $$props;
-
-	$$self.$$set = $$props => {
-		if ('tag' in $$props) $$invalidate(0, tag = $$props.tag);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*tag*/ 1) {
-			$: $$invalidate(2, unfolded = tag.state ? tag.state.unfolded : false);
-		}
-
-		if ($$self.$$.dirty & /*tag*/ 1) {
-			$: $$invalidate(1, mediaData = tag.data.mediaData);
-		}
-	};
-
-	return [tag, mediaData, unfolded];
-}
-
-class Component extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { tag: 0 }, add_css);
-	}
-}
-
-export default Component;