@realsee/dnalogel 2.0.2 → 2.1.0-alpha.10

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

@@ -0,0 +1,330 @@
+/* generated by Svelte v3.50.1 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	append,
+	append_styles,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	listen,
+	mount_component,
+	safe_not_equal,
+	set_style,
+	space,
+	toggle_class,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import uuid from '../../../shared-utils/uuid';
+import '../Common/Text';
+import '../Common/Arrow';
+import Audio from '../Common/Audio';
+import Line from '../Common/Line/Straight';
+import Shadow from '../Common/Shadow';
+import MultiLineText from '../Common/MultiLineText';
+
+function add_css(target) {
+	append_styles(target, "svelte-z2d21h", ".audio-tag.svelte-z2d21h.svelte-z2d21h{position:absolute;left:0;top:0;width:0;height:0;overflow:visible}.line.svelte-z2d21h.svelte-z2d21h{display:flex;position:absolute;top:0;left:0;width:10.125rem;height:0.0625rem;transform:translate3d(0, -50%, 0.625rem)}.content.svelte-z2d21h.svelte-z2d21h{width:-webkit-max-content;width:-moz-max-content;width:max-content;height:3.375rem;padding:2.25rem 0.25rem 0 1rem;position:absolute;left:0;bottom:0.125rem;overflow:hidden;box-sizing:border-box;font-size:0;white-space:nowrap;font-weight:600}.wrapper.svelte-z2d21h.svelte-z2d21h{position:relative;width:100%;height:100%}.audio-icon.svelte-z2d21h.svelte-z2d21h{vertical-align:top;display:inline-block;width:1rem;height:1rem;margin-right:0.25rem;margin-top:0.0625rem}.unfolded.svelte-z2d21h .audio-icon.svelte-z2d21h{pointer-events:auto}");
+}
+
+// (28:0) {#if tag.state}
+function create_if_block(ctx) {
+	let div5;
+	let shadow;
+	let t0;
+	let div0;
+	let line;
+	let t1;
+	let div4;
+	let div3;
+	let div1;
+	let audio;
+	let t2;
+	let div2;
+	let multilinetext;
+	let div4_resize_listener;
+	let current;
+	let mounted;
+	let dispose;
+
+	shadow = new Shadow({
+			props: {
+				visible: /*unfolded*/ ctx[6],
+				left: /*contentWidth*/ ctx[3] / 2 + 'px',
+				bottom: 12,
+				width: 2,
+				blurRadius: 120,
+				spreadRadius: 60
+			}
+		});
+
+	line = new Line({
+			props: {
+				unfolded: /*unfolded*/ ctx[6],
+				duration: 1000,
+				outDelay: /*foldTextDelay*/ ctx[5] + 20 * Math.min(/*textItems*/ ctx[4][0]?.content.length ?? 10, 15)
+			}
+		});
+
+	audio = new Audio({
+			props: {
+				unfolded: /*unfolded*/ ctx[6],
+				mediaStore: /*mediaStore*/ ctx[0],
+				url: /*tag*/ ctx[1].data.audioUrl,
+				duration: 1000,
+				outDelay: 20 * Math.min(/*textItems*/ ctx[4][0]?.content.length ?? 10, 15),
+				hooksInfo: { tag: /*tag*/ ctx[1] }
+			}
+		});
+
+	multilinetext = new MultiLineText({
+			props: {
+				visible: /*unfolded*/ ctx[6],
+				textUnfolded: /*textUnfolded*/ ctx[2],
+				textItems: /*textItems*/ ctx[4]
+			}
+		});
+
+	return {
+		c() {
+			div5 = element("div");
+			create_component(shadow.$$.fragment);
+			t0 = space();
+			div0 = element("div");
+			create_component(line.$$.fragment);
+			t1 = space();
+			div4 = element("div");
+			div3 = element("div");
+			div1 = element("div");
+			create_component(audio.$$.fragment);
+			t2 = space();
+			div2 = element("div");
+			create_component(multilinetext.$$.fragment);
+			attr(div0, "class", "line svelte-z2d21h");
+			set_style(div0, "width", /*contentWidth*/ ctx[3] + 'px', false);
+			attr(div1, "class", "audio-icon svelte-z2d21h");
+			set_style(div2, "display", `inline-block`, false);
+			attr(div3, "class", "wrapper svelte-z2d21h");
+			attr(div4, "class", "content svelte-z2d21h");
+			add_render_callback(() => /*div4_elementresize_handler*/ ctx[10].call(div4));
+			attr(div5, "class", "audio-tag svelte-z2d21h");
+			toggle_class(div5, "unfolded", /*unfolded*/ ctx[6]);
+		},
+		m(target, anchor) {
+			insert(target, div5, anchor);
+			mount_component(shadow, div5, null);
+			append(div5, t0);
+			append(div5, div0);
+			mount_component(line, div0, null);
+			append(div5, t1);
+			append(div5, div4);
+			append(div4, div3);
+			append(div3, div1);
+			mount_component(audio, div1, null);
+			append(div3, t2);
+			append(div3, div2);
+			mount_component(multilinetext, div2, null);
+			div4_resize_listener = add_resize_listener(div4, /*div4_elementresize_handler*/ ctx[10].bind(div4));
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(div2, "click", /*clickContent*/ ctx[7]);
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			const shadow_changes = {};
+			if (dirty & /*unfolded*/ 64) shadow_changes.visible = /*unfolded*/ ctx[6];
+			if (dirty & /*contentWidth*/ 8) shadow_changes.left = /*contentWidth*/ ctx[3] / 2 + 'px';
+			shadow.$set(shadow_changes);
+			const line_changes = {};
+			if (dirty & /*unfolded*/ 64) line_changes.unfolded = /*unfolded*/ ctx[6];
+			if (dirty & /*foldTextDelay, textItems*/ 48) line_changes.outDelay = /*foldTextDelay*/ ctx[5] + 20 * Math.min(/*textItems*/ ctx[4][0]?.content.length ?? 10, 15);
+			line.$set(line_changes);
+
+			if (dirty & /*contentWidth*/ 8) {
+				set_style(div0, "width", /*contentWidth*/ ctx[3] + 'px', false);
+			}
+
+			const audio_changes = {};
+			if (dirty & /*unfolded*/ 64) audio_changes.unfolded = /*unfolded*/ ctx[6];
+			if (dirty & /*mediaStore*/ 1) audio_changes.mediaStore = /*mediaStore*/ ctx[0];
+			if (dirty & /*tag*/ 2) audio_changes.url = /*tag*/ ctx[1].data.audioUrl;
+			if (dirty & /*textItems*/ 16) audio_changes.outDelay = 20 * Math.min(/*textItems*/ ctx[4][0]?.content.length ?? 10, 15);
+			if (dirty & /*tag*/ 2) audio_changes.hooksInfo = { tag: /*tag*/ ctx[1] };
+			audio.$set(audio_changes);
+			const multilinetext_changes = {};
+			if (dirty & /*unfolded*/ 64) multilinetext_changes.visible = /*unfolded*/ ctx[6];
+			if (dirty & /*textUnfolded*/ 4) multilinetext_changes.textUnfolded = /*textUnfolded*/ ctx[2];
+			if (dirty & /*textItems*/ 16) multilinetext_changes.textItems = /*textItems*/ ctx[4];
+			multilinetext.$set(multilinetext_changes);
+
+			if (!current || dirty & /*unfolded*/ 64) {
+				toggle_class(div5, "unfolded", /*unfolded*/ ctx[6]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(shadow.$$.fragment, local);
+			transition_in(line.$$.fragment, local);
+			transition_in(audio.$$.fragment, local);
+			transition_in(multilinetext.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(shadow.$$.fragment, local);
+			transition_out(line.$$.fragment, local);
+			transition_out(audio.$$.fragment, local);
+			transition_out(multilinetext.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div5);
+			destroy_component(shadow);
+			destroy_component(line);
+			destroy_component(audio);
+			destroy_component(multilinetext);
+			div4_resize_listener();
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let current;
+	let if_block = /*tag*/ ctx[1].state && 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[1].state) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*tag*/ 2) {
+						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 text;
+	let foldTextDelay;
+	var _a;
+	let { mediaStore } = $$props;
+	let { tag } = $$props;
+	let textUnfolded = false;
+	let contentWidth;
+	let textItems = [];
+
+	function clickContent() {
+		$$invalidate(2, textUnfolded = !textUnfolded);
+	}
+
+	function div4_elementresize_handler() {
+		contentWidth = this.clientWidth;
+		$$invalidate(3, contentWidth);
+	}
+
+	$$self.$$set = $$props => {
+		if ('mediaStore' in $$props) $$invalidate(0, mediaStore = $$props.mediaStore);
+		if ('tag' in $$props) $$invalidate(1, tag = $$props.tag);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*tag, _a*/ 258) {
+			$: $$invalidate(6, unfolded = !!($$invalidate(8, _a = tag.state) === null || _a === void 0
+			? void 0
+			: _a.unfolded));
+		}
+
+		if ($$self.$$.dirty & /*tag*/ 2) {
+			$: $$invalidate(9, text = tag.data.text);
+		}
+
+		if ($$self.$$.dirty & /*text*/ 512) {
+			$: {
+				// 当 text 变了后，强制更新 Text
+				$$invalidate(4, textItems = [{ id: uuid(), content: text }]);
+			}
+		}
+
+		if ($$self.$$.dirty & /*textUnfolded*/ 4) {
+			// 收起的时候，如果文字展开了，要先下下去，再收起
+			$: $$invalidate(5, foldTextDelay = textUnfolded ? 450 : 0);
+		}
+	};
+
+	return [
+		mediaStore,
+		tag,
+		textUnfolded,
+		contentWidth,
+		textItems,
+		foldTextDelay,
+		unfolded,
+		clickContent,
+		_a,
+		text,
+		div4_elementresize_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { mediaStore: 0, tag: 1 }, add_css);
+	}
+}
+
+export default Component;

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

@@ -0,0 +1,136 @@
+/* generated by Svelte v3.50.1 */
+import {
+	HtmlTag,
+	SvelteComponent,
+	append_styles,
+	attr,
+	binding_callbacks,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+import { onDestroy, onMount } from 'svelte';
+
+function add_css(target) {
+	append_styles(target, "svelte-kzl2aj", ".customElement__container.svelte-kzl2aj{position:relative}");
+}
+
+// (24:2) {#if typeof tag.element === 'string'}
+function create_if_block(ctx) {
+	let html_tag;
+	let raw_value = /*tag*/ ctx[0].element + "";
+	let html_anchor;
+
+	return {
+		c() {
+			html_tag = new HtmlTag(false);
+			html_anchor = empty();
+			html_tag.a = html_anchor;
+		},
+		m(target, anchor) {
+			html_tag.m(raw_value, target, anchor);
+			insert(target, html_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*tag*/ 1 && raw_value !== (raw_value = /*tag*/ ctx[0].element + "")) html_tag.p(raw_value);
+		},
+		d(detaching) {
+			if (detaching) detach(html_anchor);
+			if (detaching) html_tag.d();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let if_block = typeof /*tag*/ ctx[0].element === 'string' && create_if_block(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "customElement__container svelte-kzl2aj");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+			/*div_binding*/ ctx[2](div);
+		},
+		p(ctx, [dirty]) {
+			if (typeof /*tag*/ ctx[0].element === 'string') {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
+			/*div_binding*/ ctx[2](null);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { tag } = $$props;
+	let content;
+	let destroyTemplate;
+
+	onMount(() => {
+		if (content) {
+			if (tag.element instanceof Element) {
+				const element = tag.element;
+				content.appendChild(element);
+
+				destroyTemplate = () => content === null || content === void 0
+				? void 0
+				: content.removeChild(element);
+			} else if (typeof tag.element === 'function') {
+				const renderer = tag.element;
+				destroyTemplate = renderer(content);
+			}
+		}
+	});
+
+	onDestroy(() => {
+		destroyTemplate === null || destroyTemplate === void 0
+		? void 0
+		: destroyTemplate();
+	});
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			content = $$value;
+			$$invalidate(1, content);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('tag' in $$props) $$invalidate(0, tag = $$props.tag);
+	};
+
+	return [tag, content, div_binding];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { tag: 0 }, add_css);
+	}
+}
+
+export default Component;