@realsee/dnalogel 2.0.0-alpha.2 → 2.0.0-alpha.22

package/libs/PanoSpatialTagPlugin/Components/tag.js

@@ -0,0 +1,302 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	binding_callbacks,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_style,
+	space,
+	toggle_class
+} from "svelte/internal";
+
+import { onMount, onDestroy, afterUpdate } from 'svelte';
+import '../typings';
+import { currentTarget } from '../store';
+
+function add_css(target) {
+	append_styles(target, "svelte-1c0xhg0", ".PanoSpatialTagPlugin__tag-x.svelte-1c0xhg0.svelte-1c0xhg0{position:relative;display:block;white-space:nowrap;box-sizing:border-box;width:25rem;height:14rem;color:#FFF;transform:translate(0, -100%);transition:height .5s linear}.PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0.svelte-1c0xhg0{content:'';position:absolute;width:30rem;height:30rem;top:-15rem;left:-15rem;z-index:-1;opacity:0;transition:opacity .8s .6s;background:url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');background-size:30rem 30rem}.PanoSpatialTagPlugin__tag-line.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:1rem;height:calc(100% - 1.5rem);width:.15rem;background:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));box-shadow:0 .1rem .5rem rgba(0, 0, 0, .2);opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;transform-origin:center bottom}.PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:0.3rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:0.5rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0{animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0{animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0.svelte-1c0xhg0{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line.svelte-1c0xhg0{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-1c0xhg0.svelte-1c0xhg0{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-animate.svelte-1c0xhg0{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;display:inline-block;transform:translate(-100%, 0);transition:transform .9s cubic-bezier(0,.65,.16,1.08) .6s;padding-left:.5rem;font-size:1rem}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content .svelte-1c0xhg0{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0{opacity:0.5;transform:translate(-50%, 0) scaleY(0);animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 135%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 20%) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 125%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1-hide{0%{opacity:0.5;transform:translate(-50%, 10%) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 105%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2-hide{0%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 100%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}");
+}
+
+function create_fragment(ctx) {
+	let div4;
+	let div0;
+	let t0;
+	let div1;
+	let i0;
+	let t1;
+	let i1;
+	let t2;
+	let i2;
+	let t3;
+	let div3;
+	let div2;
+	let div4_id_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div4 = element("div");
+			div0 = element("div");
+			t0 = space();
+			div1 = element("div");
+			i0 = element("i");
+			t1 = space();
+			i1 = element("i");
+			t2 = space();
+			i2 = element("i");
+			t3 = space();
+			div3 = element("div");
+			div2 = element("div");
+			attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-1c0xhg0");
+			set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
+			attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-1c0xhg0");
+			set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
+			attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-1c0xhg0");
+			attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-1c0xhg0");
+			attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-1c0xhg0");
+			attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-1c0xhg0");
+			attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-1c0xhg0");
+			set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
+			attr(div4, "id", div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0]);
+			set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
+			attr(div4, "class", "svelte-1c0xhg0");
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-x", true);
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-hide", /*show*/ ctx[10] === false || /*destroying*/ ctx[6]);
+		},
+		m(target, anchor) {
+			insert(target, div4, anchor);
+			append(div4, div0);
+			append(div4, t0);
+			append(div4, div1);
+			append(div1, i0);
+			append(div1, t1);
+			append(div1, i1);
+			append(div1, t2);
+			append(div1, i2);
+			append(div4, t3);
+			append(div4, div3);
+			append(div3, div2);
+			div2.innerHTML = /*content*/ ctx[2];
+			/*div2_binding*/ ctx[16](div2);
+
+			if (!mounted) {
+				dispose = listen(div2, "click", /*handleClickContent*/ ctx[11]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*contentWidth, contentZoom, contentHeight, upsideDown*/ 394) {
+				set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
+			}
+
+			if (dirty & /*lineWidthZoom*/ 16) {
+				set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
+			}
+
+			if (dirty & /*content*/ 4) div2.innerHTML = /*content*/ ctx[2];;
+
+			if (dirty & /*contentZoom*/ 8) {
+				set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
+			}
+
+			if (dirty & /*id*/ 1 && div4_id_value !== (div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0])) {
+				attr(div4, "id", div4_id_value);
+			}
+
+			if (dirty & /*lineHeightZoom*/ 32) {
+				set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
+			}
+
+			if (dirty & /*upsideDown*/ 2) {
+				toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
+			}
+
+			if (dirty & /*show*/ 1024) {
+				toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
+			}
+
+			if (dirty & /*show, destroying*/ 1088) {
+				toggle_class(div4, "PanoSpatialTagPlugin__tag-hide", /*show*/ ctx[10] === false || /*destroying*/ ctx[6]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div4);
+			/*div2_binding*/ ctx[16](null);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { id } = $$props;
+	let { upsideDown } = $$props;
+	let { content } = $$props;
+	let { contentZoom } = $$props;
+	let { lineWidthZoom } = $$props;
+	let { lineHeightZoom } = $$props;
+	let { destroying = false } = $$props;
+	let { folded } = $$props;
+	let { dispose } = $$props;
+	let { events } = $$props;
+	let { hooks } = $$props;
+	let contentWidth = 0;
+	let contentHeight = 0;
+	let contentDom;
+	let show;
+
+	let timeoutId = setTimeout(
+		() => {
+			if (!folded) $$invalidate(10, show = true);
+			timeoutId = undefined;
+		},
+		100
+	);
+
+	const handleClickContent = event => {
+		const eventsName = Object.keys(events);
+		let node = event.target;
+
+		while (node) {
+			const classNames = node.getAttribute('class');
+
+			if (!classNames) {
+				node = node.parentNode;
+				continue;
+			}
+
+			if (classNames.includes('PanoSpatialTagPlugin__tag-content')) {
+				node = null;
+				break;
+			}
+
+			eventsName.forEach(key => {
+				if (classNames.includes(key)) events[key](id);
+			});
+
+			node = node.parentNode;
+		}
+	};
+
+	onMount(() => {
+		hooks.emit('initTag', { id });
+	});
+
+	const unsubscribe = currentTarget.subscribe(str => {
+		if (str === null) return;
+		const [currentId, date] = str.split('-PanoSpatialTagPlugin-');
+
+		if (id === currentId) {
+			hooks.emit('clickOrigin', { id, show });
+
+			if (!timeoutId) {
+				$$invalidate(10, show = folded);
+				$$invalidate(12, folded = !folded);
+
+				timeoutId = setTimeout(
+					() => {
+						timeoutId = undefined;
+					},
+					1500
+				);
+			}
+		}
+	});
+
+	afterUpdate(() => {
+		$$invalidate(7, contentWidth = contentDom.offsetWidth);
+		$$invalidate(8, contentHeight = contentDom.offsetHeight);
+		if (timeoutId) return;
+		$$invalidate(10, show = !folded);
+	});
+
+	onDestroy(() => {
+		hooks.emit('destroyTag', { id });
+		unsubscribe();
+		dispose();
+	});
+
+	function div2_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			contentDom = $$value;
+			$$invalidate(9, contentDom);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+		if ('upsideDown' in $$props) $$invalidate(1, upsideDown = $$props.upsideDown);
+		if ('content' in $$props) $$invalidate(2, content = $$props.content);
+		if ('contentZoom' in $$props) $$invalidate(3, contentZoom = $$props.contentZoom);
+		if ('lineWidthZoom' in $$props) $$invalidate(4, lineWidthZoom = $$props.lineWidthZoom);
+		if ('lineHeightZoom' in $$props) $$invalidate(5, lineHeightZoom = $$props.lineHeightZoom);
+		if ('destroying' in $$props) $$invalidate(6, destroying = $$props.destroying);
+		if ('folded' in $$props) $$invalidate(12, folded = $$props.folded);
+		if ('dispose' in $$props) $$invalidate(13, dispose = $$props.dispose);
+		if ('events' in $$props) $$invalidate(14, events = $$props.events);
+		if ('hooks' in $$props) $$invalidate(15, hooks = $$props.hooks);
+	};
+
+	return [
+		id,
+		upsideDown,
+		content,
+		contentZoom,
+		lineWidthZoom,
+		lineHeightZoom,
+		destroying,
+		contentWidth,
+		contentHeight,
+		contentDom,
+		show,
+		handleClickContent,
+		folded,
+		dispose,
+		events,
+		hooks,
+		div2_binding
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				id: 0,
+				upsideDown: 1,
+				content: 2,
+				contentZoom: 3,
+				lineWidthZoom: 4,
+				lineHeightZoom: 5,
+				destroying: 6,
+				folded: 12,
+				dispose: 13,
+				events: 14,
+				hooks: 15
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/PanoSpatialTagPlugin/index.d.ts

@@ -0,0 +1,33 @@
+import type { FivePlugin } from '@realsee/five';
+import type { PanoSpatialTagPluginId, PanoSpatialTagPluginDataElement, PanoSpatialTagPluginContentReplacement, PanoSpatialTagPluginContentEvent } from './typings';
+export interface PanoSpatialTagPluginData {
+    folded?: boolean;
+    enabled?: boolean;
+    points: Array<PanoSpatialTagPluginDataElement>;
+    template: string;
+    events?: PanoSpatialTagPluginContentEvent;
+    render?: (template: string, replacement: PanoSpatialTagPluginContentReplacement) => string;
+}
+export interface PanoSpatialTagPluginParameterType {
+    container?: Element;
+    wait?: number;
+    maxNumberOnScreen?: number;
+    minRad?: number;
+    nearTolerance?: number;
+    upsideHeight?: number;
+}
+export interface PanoSpatialTagPluginExportType {
+    load: (data: PanoSpatialTagPluginData) => void;
+    unfoldAll: () => void;
+    foldAll: () => void;
+    unfold: (id: PanoSpatialTagPluginId) => void;
+    fold: (id: PanoSpatialTagPluginId) => void;
+    enable: () => void;
+    disable: () => void;
+    dispose: () => void;
+}
+/**
+ * 空间游走标签插件
+ */
+export declare const PanoSpatialTagPlugin: FivePlugin<PanoSpatialTagPluginParameterType, PanoSpatialTagPluginExportType>;
+export default PanoSpatialTagPlugin;