@realsee/dnalogel 2.0.1 → 2.2.0-alpha.1

package/libs/PanoTagPlugin/Components/Common/Shadow.js

@@ -0,0 +1,261 @@
+/* generated by Svelte v3.50.1 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	append_styles,
+	attr,
+	check_outros,
+	create_in_transition,
+	create_out_transition,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	safe_not_equal,
+	set_style,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { fade } from 'svelte/transition';
+
+function add_css(target) {
+	append_styles(target, "svelte-faoauy", ".shadow.svelte-faoauy{position:absolute}");
+}
+
+// (21:0) {#if visible}
+function create_if_block(ctx) {
+	let div;
+	let div_style_value;
+	let div_intro;
+	let div_outro;
+	let current;
+
+	return {
+		c() {
+			div = element("div");
+			attr(div, "class", "shadow svelte-faoauy");
+
+			attr(div, "style", div_style_value = `
+      left:${px2rem(/*left*/ ctx[5])};
+      bottom:${px2rem(/*bottom*/ ctx[6])};
+      box-shadow: 0 0 ${px2rem(/*blurRadius*/ ctx[10])} ${px2rem(/*spreadRadius*/ ctx[11])} rgba(0, 0, 0, ${/*opacity*/ ctx[12]});
+      ${/*horizontalCenter*/ ctx[8]
+			? 'transform: translateX(-50%); left: 50%'
+			: ''}
+      ${/*verticalCenter*/ ctx[9]
+			? 'transform: translateX(-50%); top: 50%'
+			: ''}
+      ${/*center*/ ctx[7]
+			? 'transform: translate(-50%, -50%); left: 50%; top: 50%;'
+			: ''}
+    `);
+
+			set_style(div, "width", px2rem(/*width*/ ctx[3]), false);
+			set_style(div, "height", px2rem(/*height*/ ctx[4]), false);
+			set_style(div, "z-index", /*zIndex*/ ctx[13], false);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (!current || dirty & /*left, bottom, blurRadius, spreadRadius, opacity, horizontalCenter, verticalCenter, center*/ 8160 && div_style_value !== (div_style_value = `
+      left:${px2rem(/*left*/ ctx[5])};
+      bottom:${px2rem(/*bottom*/ ctx[6])};
+      box-shadow: 0 0 ${px2rem(/*blurRadius*/ ctx[10])} ${px2rem(/*spreadRadius*/ ctx[11])} rgba(0, 0, 0, ${/*opacity*/ ctx[12]});
+      ${/*horizontalCenter*/ ctx[8]
+			? 'transform: translateX(-50%); left: 50%'
+			: ''}
+      ${/*verticalCenter*/ ctx[9]
+			? 'transform: translateX(-50%); top: 50%'
+			: ''}
+      ${/*center*/ ctx[7]
+			? 'transform: translate(-50%, -50%); left: 50%; top: 50%;'
+			: ''}
+    `)) {
+				attr(div, "style", div_style_value);
+			}
+
+			if (dirty & /*width*/ 8) {
+				set_style(div, "width", px2rem(/*width*/ ctx[3]), false);
+			}
+
+			if (dirty & /*height*/ 16) {
+				set_style(div, "height", px2rem(/*height*/ ctx[4]), false);
+			}
+
+			if (dirty & /*zIndex*/ 8192) {
+				set_style(div, "z-index", /*zIndex*/ ctx[13], false);
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			if (local) {
+				add_render_callback(() => {
+					if (div_outro) div_outro.end(1);
+					div_intro = create_in_transition(div, fade, { duration: /*inDelay*/ ctx[0] });
+					div_intro.start();
+				});
+			}
+
+			current = true;
+		},
+		o(local) {
+			if (div_intro) div_intro.invalidate();
+
+			if (local) {
+				div_outro = create_out_transition(div, fade, { duration: /*outDelay*/ ctx[1] });
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (detaching && div_outro) div_outro.end();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let if_block = /*visible*/ ctx[2] && 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);
+		},
+		p(ctx, [dirty]) {
+			if (/*visible*/ ctx[2]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*visible*/ 4) {
+						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) {
+			transition_in(if_block);
+		},
+		o(local) {
+			transition_out(if_block);
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function px2rem(value) {
+	return typeof value === 'number' ? value / 16 + 'rem' : value;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { inDelay = 1000 } = $$props;
+	let { outDelay = 1000 } = $$props;
+	let { visible = true } = $$props;
+	let { width = 0 } = $$props;
+	let { height = 0 } = $$props;
+	let { left = 0 } = $$props;
+	let { bottom = 0 } = $$props;
+	let { center = false } = $$props;
+	let { horizontalCenter = false } = $$props;
+	let { verticalCenter = false } = $$props;
+	let { blurRadius } = $$props;
+	let { spreadRadius } = $$props;
+	let { opacity = 0.15 } = $$props;
+	let { zIndex = -1 } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('inDelay' in $$props) $$invalidate(0, inDelay = $$props.inDelay);
+		if ('outDelay' in $$props) $$invalidate(1, outDelay = $$props.outDelay);
+		if ('visible' in $$props) $$invalidate(2, visible = $$props.visible);
+		if ('width' in $$props) $$invalidate(3, width = $$props.width);
+		if ('height' in $$props) $$invalidate(4, height = $$props.height);
+		if ('left' in $$props) $$invalidate(5, left = $$props.left);
+		if ('bottom' in $$props) $$invalidate(6, bottom = $$props.bottom);
+		if ('center' in $$props) $$invalidate(7, center = $$props.center);
+		if ('horizontalCenter' in $$props) $$invalidate(8, horizontalCenter = $$props.horizontalCenter);
+		if ('verticalCenter' in $$props) $$invalidate(9, verticalCenter = $$props.verticalCenter);
+		if ('blurRadius' in $$props) $$invalidate(10, blurRadius = $$props.blurRadius);
+		if ('spreadRadius' in $$props) $$invalidate(11, spreadRadius = $$props.spreadRadius);
+		if ('opacity' in $$props) $$invalidate(12, opacity = $$props.opacity);
+		if ('zIndex' in $$props) $$invalidate(13, zIndex = $$props.zIndex);
+	};
+
+	return [
+		inDelay,
+		outDelay,
+		visible,
+		width,
+		height,
+		left,
+		bottom,
+		center,
+		horizontalCenter,
+		verticalCenter,
+		blurRadius,
+		spreadRadius,
+		opacity,
+		zIndex
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				inDelay: 0,
+				outDelay: 1,
+				visible: 2,
+				width: 3,
+				height: 4,
+				left: 5,
+				bottom: 6,
+				center: 7,
+				horizontalCenter: 8,
+				verticalCenter: 9,
+				blurRadius: 10,
+				spreadRadius: 11,
+				opacity: 12,
+				zIndex: 13
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/PanoTagPlugin/Components/Common/Text.js

@@ -0,0 +1,239 @@
+/* generated by Svelte v3.50.1 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	binding_callbacks,
+	destroy_each,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+import anime from 'animejs';
+import { onMount } from 'svelte';
+import { notNil } from '../../../shared-utils/isNil';
+import { searchFirstValueSmallThanLastValue } from '../../utils';
+
+function add_css(target) {
+	append_styles(target, "svelte-nwherl", ".text-char.svelte-nwherl{display:inline-block;text-shadow:2px 0px 0.41667rem rgba(0, 0, 0, 0.15)}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[10] = list[i];
+	child_ctx[11] = list;
+	child_ctx[12] = i;
+	return child_ctx;
+}
+
+// (60:0) {#each contentList as item, index}
+function create_each_block(ctx) {
+	let span;
+	let t_value = /*item*/ ctx[10] + "";
+	let t;
+	let index = /*index*/ ctx[12];
+	const assign_span = () => /*span_binding*/ ctx[6](span, index);
+	const unassign_span = () => /*span_binding*/ ctx[6](null, index);
+
+	return {
+		c() {
+			span = element("span");
+			t = text(t_value);
+			attr(span, "class", "text-char svelte-nwherl");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+			assign_span();
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*contentList*/ 2 && t_value !== (t_value = /*item*/ ctx[10] + "")) set_data(t, t_value);
+
+			if (index !== /*index*/ ctx[12]) {
+				unassign_span();
+				index = /*index*/ ctx[12];
+				assign_span();
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+			unassign_span();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_1_anchor;
+	let each_value = /*contentList*/ ctx[1];
+	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));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*spanEleList, contentList*/ 3) {
+				each_value = /*contentList*/ ctx[1];
+				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);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let contentList;
+	let { inDelay = 0 } = $$props;
+	let { outDelay = 0 } = $$props;
+	let { content } = $$props;
+	let { unfolded } = $$props;
+	let timeoutID;
+	let spanEleList = [];
+	let openAnimeIns;
+
+	function onUnfoldedUpdate(unfolded) {
+		clearTimeout(timeoutID);
+
+		timeoutID = setTimeout(
+			function () {
+				if (!openAnimeIns) return;
+
+				if (unfolded && openAnimeIns.reversed || !unfolded && !openAnimeIns.reversed) {
+					openAnimeIns.reverse();
+					openAnimeIns.play();
+				}
+			},
+			unfolded ? inDelay : outDelay
+		);
+	}
+
+	onMount(function () {
+		/** 计算第一行的最后一个字的index */
+		const firstLineLastIndex = (() => {
+			const resultIndex = searchFirstValueSmallThanLastValue(index => spanEleList[index].getBoundingClientRect().x, [Math.min(spanEleList.length - 1, 10), Math.min(spanEleList.length - 1, 30)]);
+			if (resultIndex > 0) return resultIndex;
+		})();
+
+		/** 文字依次从底部旋转出现
+ * @member duration 单个文字的动画时间是 400ms
+ * @member scale    大小缩放 [0.7 - 1]
+ * @member rotate   旋转 [20 - 0]deg
+ * @member opacity  透明度 [0 - 1]
+ * @member translateX  水平方向位移 [4 - 0]px
+ * @member translateY  水平方向位移 [10 - 0]px
+ * @member delay  动画开始的延时是当前元素的索引 index * 50ms
+ */
+		openAnimeIns = anime({
+			targets: spanEleList.filter(notNil).slice(0, firstLineLastIndex),
+			autoplay: false,
+			duration: 400,
+			scale: [0.7, 1],
+			rotate: [20, 0],
+			opacity: [0, 1],
+			translateX: [4, 0],
+			translateY: [10, 0],
+			delay: anime.stagger(50),
+			easing: 'easeInOutCubic'
+		});
+
+		if (unfolded) openAnimeIns.seek(openAnimeIns.duration);
+	});
+
+	function span_binding($$value, index) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			spanEleList[index] = $$value;
+			$$invalidate(0, spanEleList);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('inDelay' in $$props) $$invalidate(2, inDelay = $$props.inDelay);
+		if ('outDelay' in $$props) $$invalidate(3, outDelay = $$props.outDelay);
+		if ('content' in $$props) $$invalidate(4, content = $$props.content);
+		if ('unfolded' in $$props) $$invalidate(5, unfolded = $$props.unfolded);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*content*/ 16) {
+			$: $$invalidate(1, contentList = content.slice().split(''));
+		}
+
+		if ($$self.$$.dirty & /*unfolded*/ 32) {
+			$: {
+				onUnfoldedUpdate(unfolded);
+			}
+		}
+	};
+
+	return [spanEleList, contentList, inDelay, outDelay, content, unfolded, span_binding];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				inDelay: 2,
+				outDelay: 3,
+				content: 4,
+				unfolded: 5
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/PanoTagPlugin/Components/Common/TextItem.js

@@ -0,0 +1,196 @@
+/* generated by Svelte v3.50.1 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	append,
+	append_styles,
+	attr,
+	check_outros,
+	create_in_transition,
+	create_out_transition,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	safe_not_equal,
+	set_data,
+	text,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { cubicInOut } from 'svelte/easing';
+
+function add_css(target) {
+	append_styles(target, "svelte-1sfwqvc", ".text-char.svelte-1sfwqvc{opacity:1;display:inline-block;transform:translate(0, 0) scale(1) rotate(0)}");
+}
+
+// (32:0) {#if visible}
+function create_if_block(ctx) {
+	let span;
+	let t;
+	let span_intro;
+	let span_outro;
+	let current;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*content*/ ctx[1]);
+			attr(span, "class", "text-char svelte-1sfwqvc");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (!current || dirty & /*content*/ 2) set_data(t, /*content*/ ctx[1]);
+		},
+		i(local) {
+			if (current) return;
+
+			if (local) {
+				add_render_callback(() => {
+					if (span_outro) span_outro.end(1);
+					span_intro = create_in_transition(span, /*fly*/ ctx[2], { duration: 400 });
+					span_intro.start();
+				});
+			}
+
+			current = true;
+		},
+		o(local) {
+			if (span_intro) span_intro.invalidate();
+
+			if (local) {
+				span_outro = create_out_transition(span, /*flyOut*/ ctx[3], { duration: 400 });
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+			if (detaching && span_outro) span_outro.end();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let if_block = /*visible*/ ctx[0] && 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);
+		},
+		p(ctx, [dirty]) {
+			if (/*visible*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*visible*/ 1) {
+						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) {
+			transition_in(if_block);
+		},
+		o(local) {
+			transition_out(if_block);
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { index } = $$props;
+	let { rightIndex } = $$props;
+	let { visible } = $$props;
+	let { content } = $$props;
+
+	function fly(node, { duration }) {
+		return {
+			duration,
+			delay: index * 40,
+			css: t => {
+				const eased = cubicInOut(t);
+
+				return `
+          transform: translate(${4 * (1 - eased)}px, ${10 * (1 - eased)}px) scale(${0.7 + eased * 0.3}) rotate(${20 * (1 - eased)}deg);
+          opacity: ${eased};`;
+			}
+		};
+	}
+
+	function flyOut(node, { duration }) {
+		return {
+			duration,
+			delay: rightIndex * 40,
+			css: t => {
+				const eased = cubicInOut(t);
+
+				return `
+          transform: translate(${4 * (1 - eased)}px, ${10 * (1 - eased)}px) scale(${0.7 + eased * 0.3}) rotate(${20 * (1 - eased)}deg);
+          opacity: ${eased};`;
+			}
+		};
+	}
+
+	$$self.$$set = $$props => {
+		if ('index' in $$props) $$invalidate(4, index = $$props.index);
+		if ('rightIndex' in $$props) $$invalidate(5, rightIndex = $$props.rightIndex);
+		if ('visible' in $$props) $$invalidate(0, visible = $$props.visible);
+		if ('content' in $$props) $$invalidate(1, content = $$props.content);
+	};
+
+	return [visible, content, fly, flyOut, index, rightIndex];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				index: 4,
+				rightIndex: 5,
+				visible: 0,
+				content: 1
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;