scorer-ui-kit 3.0.0-beta.7 → 3.0.0

package/dist/LineUIVideoBase-09sEI3pc.mjs

@@ -0,0 +1,1240 @@
+import styled, { css, keyframes } from "styled-components";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconSVGs } from "@future-standard/icons";
+import update from "immutability-helper";
+//#region src/theme/common.tsx
+var fontFamily = {
+	ui: "Monorale, Hiragino Sans, \"ヒラギノ角ゴシック\", Hiragino Kaku Gothic ProN, \"ヒラギノ角ゴ ProN W3\", Roboto, YuGothic, \"游ゴシック\", Meiryo, \"メイリオ\", sans-serif;",
+	data: "Lato, Hiragino Sans, \"ヒラギノ角ゴシック\", Hiragino Kaku Gothic ProN, \"ヒラギノ角ゴ ProN W3\", Roboto, YuGothic, \"游ゴシック\", Meiryo, \"メイリオ\", sans-serif;"
+};
+var dimensions = {
+	icons: { weights: {
+		light: 1,
+		regular: 1.5,
+		heavy: 3,
+		strong: 5
+	} },
+	form: {
+		button: {
+			xsmall: {
+				height: "20px",
+				padding: "0 10px",
+				iconSize: 12
+			},
+			small: {
+				height: "30px",
+				padding: "0 20px",
+				iconSize: 14
+			},
+			normal: {
+				height: "40px",
+				padding: "0 20px",
+				iconSize: 16
+			},
+			large: {
+				height: "60px",
+				padding: "0 20px",
+				iconSize: 20
+			}
+		},
+		input: { height: "40px" },
+		switch: {
+			outer: {
+				width: "38px",
+				height: "22px",
+				borderRadius: "11px"
+			},
+			inner: {
+				width: "16px",
+				height: "16px",
+				borderRadius: "8px"
+			},
+			positions: {
+				top: "2px",
+				off: "2px",
+				neutral: "10px",
+				locked: "2px",
+				on: "18px"
+			}
+		}
+	},
+	global: { mainMenu: { width: {
+		open: "280px",
+		closed: "80px"
+	} } }
+};
+var animation$1 = {
+	easing: { primary: {
+		inOut: "cubic-bezier(0.87, 0, 0.13, 1)",
+		out: "cubic-bezier(0.16, 1, 0.3, 1)",
+		in: "cubic-bezier(0.7, 0, 0.84, 0)"
+	} },
+	speed: {
+		faster: "0.085s",
+		fast: "0.175s",
+		normal: "0.35s",
+		slow: "0.7s",
+		slower: "1.4s",
+		slowest: "2.8s"
+	}
+};
+var deviceSize = {
+	small: 0,
+	medium: 768,
+	large: 1024,
+	xlarge: 1280,
+	xxlarge: 1536
+};
+var deviceMediaQuery = {
+	small: `(min-width: ${deviceSize.small}px)`,
+	medium: `(min-width: ${deviceSize.medium}px)`,
+	large: `(min-width: ${deviceSize.large}px)`,
+	xlarge: `(min-width: ${deviceSize.xlarge}px)`,
+	xxlarge: `(min-width: ${deviceSize.xxlarge}px)`
+};
+//#endregion
+//#region src/Icons/Icon.tsx
+var wrapperCss = css`
+
+  line-height: 0;
+
+  svg {
+    overflow: visible;
+    vector-effect: non-scaling-stroke;
+
+    line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {
+      vector-effect: non-scaling-stroke;
+      transition: stroke var(--speed-normal) var(--easing-primary-out);
+    }
+  }
+`;
+var IconWrapper = styled.div`
+  ${wrapperCss};
+`;
+var IconWrapperForSVG = styled.g`
+  ${wrapperCss};
+`;
+var Icon = ({ icon, size = 24, weight = "regular", color = "grey-12", forSvgUsage = false }) => {
+	const iconWeight = dimensions.icons.weights[weight];
+	const IconSVG = IconSVGs[icon];
+	return IconSVG != null ? forSvgUsage ? /* @__PURE__ */ jsx(IconWrapperForSVG, { children: IconSVG({
+		size,
+		weight: iconWeight,
+		color: `var(--${color}, var(--grey-12))`
+	}) }) : /* @__PURE__ */ jsx(IconWrapper, { children: IconSVG({
+		size,
+		weight: iconWeight,
+		color: `var(--${color}, var(--grey-12))`
+	}) }) : null;
+};
+//#endregion
+//#region src/Indicators/Spinner.tsx
+var circumference = (radius) => {
+	return 2 * Math.PI * radius;
+};
+var animation = (radius) => {
+	const c = circumference(radius);
+	return keyframes`
+    0% {
+      stroke-dashoffset: -${c * .85};
+    }
+    50% {
+      stroke-dashoffset: -${c * .5};
+    }
+    100% {
+      stroke-dashoffset: -${c * .85};
+    }
+  `;
+};
+var rotate = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+var BaseCircle = styled.circle`
+  stroke: ${({ $styling, $customColor }) => $customColor ? $customColor : `var(--spinner-${$styling}-base, var(--grey-a8))`};
+  fill: none;
+`;
+var RotatingCircle = styled.circle`
+  stroke: ${({ $styling, $customColor }) => $customColor ? $customColor : `var(--spinner-${$styling}-top, var(--white-1))`};
+  fill: none;
+  stroke-dasharray: ${({ r }) => circumference(r)};
+  stroke-dashoffset: ${({ r }) => 2 * Math.PI * r / 2};
+  animation:
+    ${({ r }) => animation(r)} 4s linear infinite,
+    ${rotate} 1s linear infinite;
+  stroke-linecap: round;
+`;
+var getButtonDesign = (value) => {
+	if (value === "primary" || value === "secondary" || value === "warning") return value;
+	else if (value === "danger") {
+		console.warn("Button.tsx - Warning, the design prop value `danger` is being deprecated. Use `warning` instead.");
+		return "danger";
+	}
+	return "simple";
+};
+var sizeGuide = {
+	xsmall: 12,
+	small: 16,
+	medium: 24,
+	large: 36,
+	xlarge: 48
+};
+var Spinner = ({ size = "medium", styling = "primary", custom = {} }) => {
+	const { baseColor, topColor } = custom;
+	const sizeVal = custom?.size ? custom.size : sizeGuide[size];
+	const strokeWidth = sizeVal / 5.333;
+	const circleRadius = sizeVal / 2 - strokeWidth / 2;
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `-${sizeVal / 2} -${sizeVal / 2} ${sizeVal} ${sizeVal}`,
+		width: sizeVal,
+		height: sizeVal,
+		xmlns: "http://www.w3.org/2000/svg",
+		role: "img",
+		"aria-label": "Loading",
+		children: [/* @__PURE__ */ jsx(BaseCircle, {
+			cx: "0",
+			cy: "0",
+			r: circleRadius,
+			strokeWidth,
+			$styling: getButtonDesign(styling),
+			$customColor: baseColor
+		}), /* @__PURE__ */ jsx(RotatingCircle, {
+			cx: "0",
+			cy: "0",
+			r: circleRadius,
+			strokeWidth,
+			$styling: getButtonDesign(styling),
+			$customColor: topColor
+		})]
+	});
+};
+//#endregion
+//#region src/LineUI/Contexts.tsx
+var LineSetContext = createContext({});
+//#endregion
+//#region src/LineUI/HandleUnit.tsx
+var HandleTouchReactionKeyframes = keyframes`
+ 0% {
+    transform: scale(1);
+ }
+
+ 75% {
+    transform: scale(3);
+ }
+
+ 100% {
+   transform: scale(1.75);
+ }
+`;
+var HandleMouseReactionKeyframes = keyframes`
+ 0% {
+    transform: scale(1);
+ }
+
+ 75% {
+    transform: scale(0);
+ }
+
+ 100% {
+   transform: scale(0.5);
+ }
+`;
+var HandleBase = styled.svg`
+  touch-action: none;
+  user-select: none;
+  overflow: visible;
+  cursor: pointer;
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].handleBase.fill};
+  appearance: none;
+`;
+var HandleRingLayer = styled.circle`
+  fill: none;
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].handleRingLayer.stroke};
+  mask: url(#${(props) => props.$maskID});
+`;
+var HandleReactiveGroup = styled.g`
+  opacity: 0.65;
+  cursor: pointer;
+  transform: scale(1);
+
+  ${(props) => props.$touchDragging && css`
+    animation: ${HandleTouchReactionKeyframes} 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
+  `}
+
+  ${(props) => props.$mouseDragging && css`
+    animation: ${HandleMouseReactionKeyframes} 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
+  `}
+
+`;
+var HandleReactiveFill = styled.circle`
+  mix-blend-mode: multiply;
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].handleReactiveFill.fill};
+  stroke: none;
+`;
+var HandleReactiveRing = styled.circle`
+  fill: none;
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].handleReactiveRing.stroke};
+`;
+var HandleContrastLayer = styled.circle`
+  overflow: visible;
+  mix-blend-mode: multiply;
+  fill: none;
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].handleContrastLayer.stroke};
+`;
+var HandleShadowLayer = styled.circle`
+    mix-blend-mode: multiply;
+    fill: url(#${(props) => props.$fillID});
+`;
+var GrabHandleIndexGroup$1 = styled.g`
+  opacity: 0;
+  pointer-events: none;
+  ${(props) => props.$showIndex && css`
+    opacity: 1;
+  `};
+
+`;
+var StopStart = styled.stop`
+  stop-color: ${({ theme, $styling }) => theme.custom.lines[$styling].stopStart.stopColor};
+`;
+var StopEnd = styled.stop`
+  stop-color: ${({ theme, $styling }) => theme.custom.lines[$styling].stopEnd.stopColor};
+`;
+var GrabHandleIndexText$1 = styled.text`
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].grabHandleText.stroke};
+  text-align: center;
+
+  font-weight: bold;
+  transition: opacity 250ms ease;
+  pointer-events: none;
+
+
+`;
+var IconGroup = styled.g`
+
+`;
+var HandleUnit = (props) => {
+	const { index, useAngles, angle, unit, size, lineSetId, x, y, moveCallback, moveEndCB = () => {}, Icon, rotate = 0, options, readOnlyHandle = false, styling = "primary" } = props;
+	const handleInstance = useRef(null);
+	const [touchDragging, setTouchDragging] = useState(false);
+	const [mouseDragging, setMouseDragging] = useState(false);
+	const [touchIndex, setTouchIndex] = useState(null);
+	/** --- Toucher Events Section --- */
+	const handleTouchStart = useCallback((e) => {
+		e.preventDefault();
+		if (readOnlyHandle) return;
+		for (let i = 0; i < e.touches.length; i++) {
+			const touchTarget = e.touches[i].target;
+			if (touchTarget.parentNode?.parentElement === handleInstance.current || touchTarget.parentNode?.parentElement?.parentElement) {
+				setTouchDragging(true);
+				setTouchIndex(i);
+			}
+		}
+	}, [readOnlyHandle]);
+	const handleTouchEnd = useCallback(() => {
+		if (readOnlyHandle) return;
+		setTouchDragging(false);
+		setTouchIndex(null);
+		moveEndCB();
+	}, [moveEndCB, readOnlyHandle]);
+	const handleTouchMove = useCallback((e) => {
+		if (readOnlyHandle) return;
+		for (let i = 0; i < e.touches.length; i++) if (i === touchIndex) moveCallback({
+			x: e.touches[i].pageX,
+			y: e.touches[i].pageY
+		}, index);
+	}, [
+		index,
+		moveCallback,
+		readOnlyHandle,
+		touchIndex
+	]);
+	/** --- Mouse Events Section --- */
+	const handleMouseMoveRef = useRef(null);
+	const handleMouseUpRef = useRef(null);
+	const cleanupMouseListeners = useCallback(() => {
+		if (handleMouseMoveRef.current) {
+			window.removeEventListener("mousemove", handleMouseMoveRef.current);
+			handleMouseMoveRef.current = null;
+		}
+		if (handleMouseUpRef.current) {
+			window.removeEventListener("mouseup", handleMouseUpRef.current);
+			handleMouseUpRef.current = null;
+		}
+	}, []);
+	const handleMouseMove = useCallback((e) => {
+		e.preventDefault();
+		if (readOnlyHandle) return;
+		moveCallback({
+			x: e.pageX,
+			y: e.pageY
+		}, index);
+	}, [
+		index,
+		moveCallback,
+		readOnlyHandle
+	]);
+	const handleMouseUp = useCallback((e) => {
+		e.preventDefault();
+		if (readOnlyHandle) return;
+		setMouseDragging(false);
+		cleanupMouseListeners();
+		moveCallback({
+			x: e.pageX,
+			y: e.pageY
+		}, index);
+		setTimeout(moveEndCB);
+	}, [
+		cleanupMouseListeners,
+		index,
+		moveCallback,
+		moveEndCB,
+		readOnlyHandle
+	]);
+	const handleMouseDown = useCallback((e) => {
+		e.preventDefault();
+		if (readOnlyHandle) return;
+		cleanupMouseListeners();
+		setMouseDragging(true);
+		handleMouseMoveRef.current = handleMouseMove;
+		handleMouseUpRef.current = handleMouseUp;
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+	}, [
+		cleanupMouseListeners,
+		handleMouseMove,
+		handleMouseUp,
+		readOnlyHandle
+	]);
+	useEffect(() => {
+		return cleanupMouseListeners;
+	}, [cleanupMouseListeners]);
+	const maskID = useAngles ? `mask-${lineSetId}-${index}` : "";
+	const shadowGradientID = `shadowGradient-${lineSetId}-${index}`;
+	const { showPointHandle = true, showPointLabel = false, pointIndexOffset } = options;
+	return /* @__PURE__ */ jsxs(HandleBase, {
+		ref: handleInstance,
+		$styling: styling,
+		x,
+		y,
+		$mouseDragging: mouseDragging,
+		onTouchStart: handleTouchStart,
+		onTouchEnd: handleTouchEnd,
+		onTouchMove: handleTouchMove,
+		onMouseDown: handleMouseDown,
+		children: [/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("mask", {
+			id: maskID,
+			children: [/* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				x: "-50%",
+				y: "-50%",
+				fill: "white"
+			}), /* @__PURE__ */ jsx("rect", {
+				width: size / 3,
+				height: size / .9,
+				x: -(size / 3 / 2),
+				y: -(size / .9 + 5),
+				fill: "black",
+				transform: `rotate(${angle || 0} 0 0)`
+			})]
+		}), /* @__PURE__ */ jsxs("radialGradient", {
+			id: shadowGradientID,
+			children: [/* @__PURE__ */ jsx(StopStart, {
+				$styling: styling,
+				offset: "0%"
+			}), /* @__PURE__ */ jsx(StopEnd, {
+				$styling: styling,
+				offset: "80%"
+			})]
+		})] }), Icon ? /* @__PURE__ */ jsx(IconGroup, {
+			transform: `scale(${unit * 1.5}) translate(-21 -21) rotate(${rotate}, 21, 21 )`,
+			children: /* @__PURE__ */ jsx(Icon, {
+				height: "42",
+				width: "42"
+			})
+		}) : showPointHandle && /* @__PURE__ */ jsxs("g", {
+			transform: `scale(${unit})`,
+			children: [
+				/* @__PURE__ */ jsx(HandleShadowLayer, {
+					r: size * 1,
+					$fillID: shadowGradientID
+				}),
+				/* @__PURE__ */ jsx(HandleContrastLayer, {
+					$styling: styling,
+					r: size / 2.4,
+					strokeWidth: size / 3
+				}),
+				/* @__PURE__ */ jsxs(HandleReactiveGroup, {
+					$touchDragging: touchDragging,
+					$mouseDragging: mouseDragging,
+					children: [/* @__PURE__ */ jsx(HandleReactiveFill, {
+						$styling: styling,
+						r: size / 1.8
+					}), /* @__PURE__ */ jsx(HandleReactiveRing, {
+						$styling: styling,
+						r: size / 2.25,
+						strokeWidth: size / 3
+					})]
+				}),
+				/* @__PURE__ */ jsx(HandleRingLayer, {
+					$styling: styling,
+					r: size / 2,
+					strokeWidth: size / 6,
+					$maskID: maskID
+				}),
+				showPointLabel && /* @__PURE__ */ jsx(GrabHandleIndexGroup$1, {
+					$showIndex: true,
+					children: /* @__PURE__ */ jsx(GrabHandleIndexText$1, {
+						$styling: styling,
+						transform: "translate(-5,6)",
+						fontSize: "20px",
+						$showIndex: true,
+						children: index + pointIndexOffset
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/LineUI/LineUnit.tsx
+var ContrastLine = styled.line`
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].contrastLine.stroke};
+  mix-blend-mode: multiply;
+  stroke-width: ${({ $lineClickSensing }) => $lineClickSensing}px;
+  stroke-opacity: ${({ $showLineBorder }) => $showLineBorder ? "0.35" : "0"};
+  cursor: pointer;
+`;
+var HighlightLine = styled.line`
+  pointer-events: none;
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].highlightLineBorder.stroke};
+`;
+var GrabHandle = styled.circle`
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].grabHandle.fill};
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].grabHandle.stroke};
+  opacity: 1;
+  transition: opacity 250ms ease;
+  cursor: grab;
+
+  ${(props) => props.$hide && css`
+    pointer-events: none;
+    opacity: 0;
+  `};
+`;
+var GrabHandleIndexGroup = styled.g`
+  opacity: 0;
+  pointer-events: none;
+  ${(props) => props.$showIndex && css`
+    opacity: 1;
+  `};
+
+`;
+var GrabHandleIndexText = styled.text`
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-align: center;
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].grabHandleText.stroke};
+  font-weight: bold;
+  transition: opacity 250ms ease;
+  pointer-events: none;
+`;
+var LabelText = styled.text`
+  text-align: center;
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].label.fill};
+  font-weight: bold;
+  transition: opacity 250ms ease;
+  cursor: pointer;
+  ${({ $showLabelShadow }) => $showLabelShadow && css`
+    text-shadow:
+      -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;
+  `}
+`;
+var GrabHandleContrast = styled(GrabHandle)`
+  fill: none;
+  stroke: ${({ theme, $styling }) => theme.custom.lines[$styling].grabHandleContrast.stroke};
+`;
+var GrabHandleGroup = styled.g`
+
+  ${GrabHandle}, ${GrabHandleContrast} {
+    transition: r 250ms ease;
+  }
+
+  ${(props) => props.$showIndex && css`
+    ${GrabHandle}, ${GrabHandleContrast} {
+      pointer-events: none;
+      r: ${props.$originalRadius * 1.75};
+    }
+  `};
+`;
+var DMCircle = styled.circle`
+  fill: hsla(203, 100%, 35%, 0.49);
+  cursor: pointer;
+`;
+var IconFormat = styled(Icon)`
+  cursor: pointer;
+`;
+var LineUnit = (props) => {
+	const { x1, y1, x2, y2, unit, lineMoveCallback, lineMoveStartCallback, options, lineSetId, label, styling = "primary", moveEndCB = () => {}, lineClickCallback = () => {}, showSmallDirectionMark = false, overrideShowMoveHandle = true } = props;
+	const { handleFinderActive, revealSetIndex, showMoveHandle, setIndexOffset, showDirectionMark, showLabelShadow = false } = options;
+	const [showLineBorder, setShowLineBorder] = useState();
+	const hideGrabHandle = !showMoveHandle || !overrideShowMoveHandle;
+	const lineClickSensing = parseInt(props.lineClickSensingBorder, 10);
+	/** --- Toucher Events Section --- */
+	const grabTouchMove = (e) => {
+		for (let i = 0; i < e.touches.length; i++) lineMoveCallback({
+			x: e.touches[i].pageX,
+			y: e.touches[i].pageY
+		});
+		moveEndCB();
+	};
+	const grabTouchStart = (e) => {
+		for (let i = 0; i < e.touches.length; i++) lineMoveStartCallback({
+			x: e.touches[i].pageX,
+			y: e.touches[i].pageY
+		});
+	};
+	/** --- Mouse Events Section --- */
+	const mouseMoveRef = useRef(null);
+	const mouseUpRef = useRef(null);
+	const cleanupMouseListeners = useCallback(() => {
+		if (mouseMoveRef.current) {
+			window.removeEventListener("mousemove", mouseMoveRef.current);
+			mouseMoveRef.current = null;
+		}
+		if (mouseUpRef.current) {
+			window.removeEventListener("mouseup", mouseUpRef.current);
+			mouseUpRef.current = null;
+		}
+	}, []);
+	const handleMouseMove = useCallback((e) => {
+		lineMoveCallback({
+			x: e.pageX,
+			y: e.pageY
+		});
+		e.preventDefault();
+	}, [lineMoveCallback]);
+	const handleMouseUp = useCallback((e) => {
+		cleanupMouseListeners();
+		lineMoveCallback({
+			x: e.pageX,
+			y: e.pageY
+		});
+		moveEndCB();
+		e.preventDefault();
+	}, [
+		cleanupMouseListeners,
+		lineMoveCallback,
+		moveEndCB
+	]);
+	const handleMouseDown = useCallback((e) => {
+		cleanupMouseListeners();
+		lineMoveStartCallback({
+			x: e.pageX,
+			y: e.pageY
+		});
+		mouseMoveRef.current = handleMouseMove;
+		mouseUpRef.current = handleMouseUp;
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		e.preventDefault();
+	}, [
+		cleanupMouseListeners,
+		lineMoveStartCallback,
+		handleMouseMove,
+		handleMouseUp
+	]);
+	useEffect(() => {
+		return cleanupMouseListeners;
+	}, [cleanupMouseListeners]);
+	const midpoint = {
+		x: (x2 + x1) / 2,
+		y: (y2 + y1) / 2
+	};
+	const directionMarkCoordinate = () => {
+		const angle = Math.atan2(y2 - y1, x2 - x1);
+		const angleMode = Math.PI / 2 - angle;
+		const x = midpoint.x + Math.sin(angleMode) - 5;
+		const y = midpoint.y + Math.cos(angleMode);
+		const rotate = 180 / Math.PI * Math.atan2(y2 - y1, x2 - x1);
+		return {
+			x,
+			y,
+			rotate,
+			labelRotate: -rotate
+		};
+	};
+	const getDirectionMarkLine = () => {
+		const dmCoordinate = directionMarkCoordinate();
+		return /* @__PURE__ */ jsxs("g", {
+			transform: `translate(${dmCoordinate.x},${dmCoordinate.y}) rotate(${dmCoordinate.rotate}) scale(${unit * 1})`,
+			style: { cursor: "pointer" },
+			children: [
+				/* @__PURE__ */ jsxs("g", {
+					onClick: () => lineClickCallback(lineSetId),
+					transform: "translate(-3,-30) scale(0.8)",
+					children: [/* @__PURE__ */ jsx(DMCircle, {
+						r: 12,
+						cx: 6,
+						cy: 7
+					}), /* @__PURE__ */ jsx(IconFormat, {
+						color: "inverse",
+						icon: "Up",
+						size: 12,
+						weight: "heavy",
+						forSvgUsage: true
+					})]
+				}),
+				showSmallDirectionMark && /* @__PURE__ */ jsxs("g", {
+					onClick: () => lineClickCallback(lineSetId),
+					transform: "translate(5,25) rotate(-180) scale(0.8)",
+					children: [/* @__PURE__ */ jsx(DMCircle, {
+						r: 8,
+						cx: 3.5,
+						cy: 4.5
+					}), /* @__PURE__ */ jsx(IconFormat, {
+						color: "inverse",
+						icon: "Up",
+						size: 7,
+						weight: "heavy",
+						forSvgUsage: true
+					})]
+				}),
+				label && /* @__PURE__ */ jsx("g", {
+					transform: `translate(0,${showSmallDirectionMark ? 45 : 30}) rotate(${dmCoordinate.labelRotate})`,
+					children: /* @__PURE__ */ jsx(LabelText, {
+						onClick: () => lineClickCallback(lineSetId),
+						textAnchor: showSmallDirectionMark ? dmCoordinate.labelRotate < 0 ? "end" : "start" : "middle",
+						dominantBaseline: "middle",
+						$styling: styling,
+						fontSize: `14px`,
+						x: 0,
+						y: 0,
+						$showIndex: revealSetIndex || handleFinderActive,
+						$showLabelShadow: showLabelShadow,
+						children: label
+					})
+				})
+			]
+		});
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(ContrastLine, {
+			onMouseOver: useCallback(() => {
+				if (props.hasClickSensingBorder) setShowLineBorder(true);
+			}, [props.hasClickSensingBorder]),
+			onMouseOut: useCallback(() => {
+				if (props.hasClickSensingBorder) setShowLineBorder(false);
+			}, [props.hasClickSensingBorder]),
+			$lineClickSensing: lineClickSensing,
+			$showLineBorder: showLineBorder,
+			onClick: () => lineClickCallback(lineSetId),
+			$styling: styling,
+			strokeLinecap: "round",
+			x1,
+			y1,
+			x2,
+			y2,
+			strokeWidth: 4 * unit
+		}),
+		/* @__PURE__ */ jsx(HighlightLine, {
+			$styling: styling,
+			x1,
+			y1,
+			x2,
+			y2,
+			strokeWidth: 2 * unit
+		}),
+		/* @__PURE__ */ jsxs(GrabHandleGroup, {
+			$styling: styling,
+			$showIndex: handleFinderActive && revealSetIndex,
+			$originalRadius: 8 * unit,
+			children: [/* @__PURE__ */ jsx(GrabHandleContrast, {
+				$styling: styling,
+				r: 8 * unit,
+				strokeWidth: 4 * unit,
+				cx: midpoint.x,
+				cy: midpoint.y,
+				$hide: hideGrabHandle
+			}), /* @__PURE__ */ jsx(GrabHandle, {
+				$styling: styling,
+				textAnchor: "middle",
+				r: 8 * unit,
+				strokeWidth: 1 * unit,
+				cx: midpoint.x,
+				cy: midpoint.y,
+				$hide: hideGrabHandle,
+				onTouchMove: grabTouchMove,
+				onTouchStart: grabTouchStart,
+				onMouseDown: handleMouseDown
+			})]
+		}),
+		/* @__PURE__ */ jsx(GrabHandleIndexGroup, {
+			$showIndex: !hideGrabHandle && (handleFinderActive || revealSetIndex),
+			children: /* @__PURE__ */ jsx(GrabHandleIndexText, {
+				$styling: styling,
+				fontSize: `${unit * 10}px`,
+				x: midpoint.x - 3 * unit,
+				y: midpoint.y + 4 * unit,
+				$showIndex: revealSetIndex || handleFinderActive,
+				children: lineSetId + setIndexOffset
+			})
+		}),
+		showDirectionMark ? getDirectionMarkLine() : label && /* @__PURE__ */ jsx(LabelText, {
+			$styling: styling,
+			fontSize: `${unit * 14}px`,
+			x: midpoint.x - 16 * unit,
+			y: midpoint.y - 15 * unit,
+			$showIndex: revealSetIndex || handleFinderActive,
+			$showLabelShadow: showLabelShadow,
+			children: label
+		})
+	] });
+};
+//#endregion
+//#region src/LineUI/LineSet.tsx
+var FilledPolygon = styled.polygon`
+  fill: ${({ $color }) => $color};
+  opacity: ${({ $opacity }) => $opacity};
+`;
+var Point = styled.circle`
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].point.fill};
+`;
+var AreaLabelText = styled.text`
+  text-align: center;
+  fill: ${({ theme, $styling }) => theme.custom.lines[$styling].label.fill};
+  font-weight: bold;
+  transition: opacity 250ms ease;
+  pointer-events: none;
+  ${({ $showAreaLabelShadow }) => $showAreaLabelShadow && css`
+    text-shadow:
+      -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;
+  `}
+`;
+var AreaLabel = ({ lineSetData, unit, showAreaLabelShadow }) => {
+	const pointsLength = lineSetData.points.length;
+	if (pointsLength < 3) return null;
+	let midpoint = {
+		x: 0,
+		y: 0
+	};
+	lineSetData.points.map(({ x, y }) => {
+		midpoint.x += x;
+		midpoint.y += y;
+		return null;
+	});
+	midpoint = {
+		x: midpoint.x / pointsLength,
+		y: midpoint.y / pointsLength
+	};
+	const Textlen = lineSetData.areaName?.length || 1;
+	return /* @__PURE__ */ jsx(AreaLabelText, {
+		fontSize: `${unit * 14}px`,
+		$styling: lineSetData.styling || "primary",
+		x: midpoint.x - 4 * Textlen * unit,
+		y: midpoint.y + 6 * unit,
+		$showAreaLabelShadow: showAreaLabelShadow,
+		children: lineSetData.areaName
+	});
+};
+var LineSet = ({ getCTM, boundaries, unit, size, lineSetId, options, onLineMoveEnd, onLineClick, lineClickSensingBorder, hasClickSensingBorder }) => {
+	const { state, dispatch } = useContext(LineSetContext);
+	const lineSetData = state[lineSetId];
+	const { showLabelShadow = false } = options;
+	const [handleAngles, setHandleAngles] = useState([]);
+	const handleRelation = useRef([]);
+	const handleRadius = size / 2;
+	const handleUsesAngles = lineSetData.points.length === 2;
+	/**
+	* Ensure provided position vector is within the boundaries (of the container)
+	* @param {IVector2} position Vector to be enforced.
+	* @returns {IVector2} The position updated clamped to range.
+	*/
+	const enforceBoundaries = useCallback((position) => {
+		if (position.x < boundaries.x.min) position.x = boundaries.x.min;
+		else if (position.x > boundaries.x.max) position.x = boundaries.x.max;
+		if (position.y < boundaries.y.min) position.y = boundaries.y.min;
+		else if (position.y > boundaries.y.max) position.y = boundaries.y.max;
+		return position;
+	}, [boundaries]);
+	const handleMoveCallback = useCallback((pointerPosition, index) => {
+		const screenCTM = getCTM();
+		if (!screenCTM) return;
+		const pointer = enforceBoundaries({
+			x: (pointerPosition.x - window.scrollX - screenCTM.e) / screenCTM.a,
+			y: (pointerPosition.y - window.scrollY - screenCTM.f) / screenCTM.d
+		});
+		const point = {
+			x: Math.round(pointer.x),
+			y: Math.round(pointer.y)
+		};
+		dispatch({
+			type: "UPDATE",
+			index: lineSetId,
+			data: update(lineSetData, { points: { [index]: { $merge: point } } })
+		});
+	}, [
+		getCTM,
+		enforceBoundaries,
+		lineSetData,
+		dispatch,
+		lineSetId
+	]);
+	const lineDragStart = useCallback((pointerPosition) => {
+		const screenCTM = getCTM();
+		if (!screenCTM) return;
+		const pointer = {
+			x: (pointerPosition.x - window.scrollX - screenCTM.e) / screenCTM.a - handleRadius,
+			y: (pointerPosition.y - window.scrollY - screenCTM.f) / screenCTM.d - handleRadius
+		};
+		handleRelation.current = lineSetData.points.map((handle) => {
+			return {
+				offsetX: pointer.x - handle.x,
+				offsetY: pointer.y - handle.y
+			};
+		});
+	}, [
+		handleRadius,
+		lineSetData.points,
+		getCTM
+	]);
+	const lineDragUpdate = useCallback((pointerPosition) => {
+		const screenCTM = getCTM();
+		if (!screenCTM) return;
+		const { points } = lineSetData;
+		const pointer = {
+			x: (pointerPosition.x - window.scrollX - screenCTM.e) / screenCTM.a - handleRadius,
+			y: (pointerPosition.y - window.scrollY - screenCTM.f) / screenCTM.d - handleRadius
+		};
+		const newPoints = points.map((_handle, index) => {
+			const { offsetX = 0, offsetY = 0 } = handleRelation.current[index] || {};
+			return enforceBoundaries({
+				x: Math.round(pointer.x - offsetX),
+				y: Math.round(pointer.y - offsetY)
+			});
+		});
+		dispatch({
+			type: "UPDATE",
+			index: lineSetId,
+			data: {
+				...lineSetData,
+				points: [...newPoints]
+			}
+		});
+	}, [
+		getCTM,
+		lineSetData,
+		handleRadius,
+		dispatch,
+		lineSetId,
+		enforceBoundaries
+	]);
+	const calcAngle = useCallback((originX, originY, towardsX, towardsY) => {
+		return Math.atan2(towardsY - originY, towardsX - originX) * 180 / Math.PI + 90;
+	}, []);
+	const updateHandleAngles = useCallback((inputHandleData) => {
+		const { points } = inputHandleData;
+		const outputData = [];
+		inputHandleData.points.forEach((handle, index) => {
+			const nextHandle = points[index + 2 > points.length ? 0 : index + 1];
+			const angle = calcAngle(handle.x, handle.y, nextHandle.x, nextHandle.y);
+			outputData.push(angle);
+		});
+		setHandleAngles(outputData);
+	}, [calcAngle]);
+	useEffect(() => {
+		if (handleUsesAngles) updateHandleAngles(lineSetData);
+	}, [
+		lineSetData,
+		updateHandleAngles,
+		handleUsesAngles
+	]);
+	const initialClampDone = useRef(false);
+	useEffect(() => {
+		if (boundaries.x.max === 0 && boundaries.y.max === 0) return;
+		if (initialClampDone.current) return;
+		initialClampDone.current = true;
+		if (lineSetData.points.some(({ x, y }) => x < boundaries.x.min || x > boundaries.x.max || y < boundaries.y.min || y > boundaries.y.max)) {
+			const clampedPoints = lineSetData.points.map((point) => enforceBoundaries({ ...point }));
+			dispatch({
+				type: "UPDATE",
+				index: lineSetId,
+				data: {
+					...lineSetData,
+					points: clampedPoints
+				}
+			});
+		}
+	}, [
+		boundaries,
+		lineSetData.points.some,
+		dispatch,
+		lineSetData.points.map,
+		lineSetId,
+		lineSetData,
+		enforceBoundaries
+	]);
+	const handles = (lineSetData?.showPointHandle === void 0 || lineSetData?.showPointHandle) && lineSetData.points.map(({ x, y }, index) => /* @__PURE__ */ jsx(HandleUnit, {
+		lineSetId,
+		rotate: lineSetData.rotate,
+		Icon: lineSetData.icon,
+		index,
+		unit,
+		size,
+		useAngles: handleUsesAngles,
+		angle: handleAngles[index],
+		x,
+		y,
+		moveEndCB: onLineMoveEnd,
+		moveCallback: handleMoveCallback,
+		options,
+		styling: lineSetData.styling,
+		readOnlyHandle: lineSetData.readOnly
+	}, index + lineSetId));
+	const points = options.showPoint && lineSetData.points.map(({ x, y }, index) => /* @__PURE__ */ jsx(Point, {
+		$styling: lineSetData.styling || "primary",
+		r: unit,
+		cx: x,
+		cy: y
+	}, index));
+	const lines = lineSetData.points.map(({ x: x1, y: y1 }, index) => {
+		const { points, name, styling = "primary" } = lineSetData;
+		const nextIndex = index + 1 >= points.length ? 0 : index + 1;
+		if (index === 1 && nextIndex === 0) return null;
+		const { x: x2, y: y2 } = points[nextIndex];
+		return /* @__PURE__ */ jsx(LineUnit, {
+			moveEndCB: onLineMoveEnd,
+			lineSetId,
+			options,
+			x1,
+			y1,
+			x2,
+			y2,
+			unit,
+			label: name,
+			styling,
+			lineClickCallback: onLineClick,
+			lineMoveCallback: lineDragUpdate,
+			lineMoveStartCallback: lineDragStart,
+			showSmallDirectionMark: lineSetData.showSmallDirectionMark,
+			overrideShowMoveHandle: lineSetData.showMoveHandle,
+			lineClickSensingBorder,
+			hasClickSensingBorder
+		}, index);
+	});
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(FilledPolygon, {
+			points: lineSetData.points.map((point) => `${point.x},${point.y}`).join(" "),
+			$color: lineSetData.areaFillColor ? lineSetData.areaFillColor : "transparent",
+			$opacity: lineSetData.areaTransparencyLevel ? lineSetData.areaTransparencyLevel / 100 : 0
+		}),
+		lines,
+		handles,
+		points,
+		/* @__PURE__ */ jsx(AreaLabel, {
+			lineSetData,
+			unit,
+			showAreaLabelShadow: showLabelShadow
+		})
+	] });
+};
+//#endregion
+//#region src/LineUI/LineUIVideoBase.tsx
+var Container = styled.div`
+  position: relative;
+  line-height: 0;
+  user-select: none;
+  touch-action: none;
+  width: auto;
+`;
+var Video = styled.video`
+  width:  100%;
+  height: 100%;
+  border-radius: 3px;
+  background-color: hsla(0deg, 0%, 0%, 35%);
+`;
+var LoadingOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+var Frame = styled.svg`
+  touch-action: none;
+  user-select: none;
+  margin: 0;
+
+  overflow: visible;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  transition: background 250ms ease;
+  background: hsla(0deg, 0%, 0%, 0%);
+
+  ${(props) => props.$transcalent && css`
+      background: hsla(0deg, 0%, 0%, 35%);
+    `}
+`;
+var LineUIVideoBase = ({ videoRef, onSizeChange = () => {}, onLineMoveEnd = () => {}, onLineClick = () => {}, onLoaded = () => {}, lineClickSensingBorder = "65", hasClickSensingBorder = true, videoOptions: { loop = false, autoPlay = false, controls = false, muted = true, ...videoOptions }, options: { showHandleFinder, showSetIndex, showPointLabel = false, showPointHandle, showLabelShadow, showMoveHandle, showGrabHandle, setIndexOffset = 0, pointIndexOffset = 0, showPoint = false, boundaryOffset = 0, showDirectionMark = false } = {} }) => {
+	const frame = useRef(null);
+	const [boundaries, setBoundaries] = useState({
+		x: {
+			min: 0,
+			max: 0
+		},
+		y: {
+			min: 0,
+			max: 0
+		}
+	});
+	const { state } = useContext(LineSetContext);
+	const [handleFinder, setHandleFinder] = useState(false);
+	const [videoSize, setVideoSize] = useState({
+		h: 768,
+		w: 1024
+	});
+	const [unit, setUnit] = useState(1);
+	const [loaded, setLoaded] = useState(false);
+	const initScaleAndBounds = useCallback(() => {
+		if (!videoRef.current) return;
+		const { videoHeight, videoWidth, clientHeight } = videoRef.current;
+		if (videoHeight !== videoSize.h || videoWidth !== videoSize.w) {
+			setVideoSize({
+				h: videoHeight,
+				w: videoWidth
+			});
+			onSizeChange({
+				h: videoHeight,
+				w: videoWidth
+			});
+		}
+		if (videoHeight / clientHeight !== unit) setUnit(videoHeight / clientHeight);
+	}, [
+		videoSize.h,
+		videoSize.w,
+		unit,
+		onSizeChange,
+		videoRef
+	]);
+	const handlePositionTipShow = (e) => {
+		if (e.target === frame.current) setHandleFinder(!handleFinder === false && true);
+	};
+	const handlePositionTipHide = () => {
+		setHandleFinder(showHandleFinder || false);
+	};
+	const calculateCTM = useCallback(() => {
+		if (!frame.current) return null;
+		return frame.current.getScreenCTM();
+	}, []);
+	useEffect(() => {
+		if (!frame.current || !loaded) return;
+		const { viewBox } = frame.current;
+		setBoundaries({
+			x: {
+				min: viewBox.baseVal.x + boundaryOffset,
+				max: viewBox.baseVal.x + viewBox.baseVal.width - boundaryOffset
+			},
+			y: {
+				min: viewBox.baseVal.y + boundaryOffset,
+				max: viewBox.baseVal.y + viewBox.baseVal.height - boundaryOffset
+			}
+		});
+	}, [
+		videoSize,
+		loaded,
+		boundaryOffset
+	]);
+	const onLoadedMetadata = useCallback(({ target }) => {
+		if (target) {
+			setLoaded(true);
+			initScaleAndBounds();
+			const { videoHeight = 1, videoWidth = 1 } = target;
+			onLoaded({
+				height: videoHeight,
+				width: videoWidth
+			});
+		}
+	}, [initScaleAndBounds, onLoaded]);
+	useEffect(() => {
+		window.addEventListener("resize", initScaleAndBounds);
+		return () => {
+			window.removeEventListener("resize", initScaleAndBounds);
+		};
+	}, [initScaleAndBounds]);
+	const options = {
+		handleFinderActive: handleFinder,
+		revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
+		showPointLabel,
+		showLabelShadow,
+		showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
+		showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
+		setIndexOffset,
+		pointIndexOffset,
+		showPoint,
+		showDirectionMark
+	};
+	return /* @__PURE__ */ jsxs(Container, { children: [
+		/* @__PURE__ */ jsx(Video, {
+			ref: videoRef,
+			controls,
+			muted,
+			autoPlay,
+			loop,
+			...videoOptions,
+			onLoadedMetadata,
+			id: "1",
+			children: " "
+		}),
+		!loaded && /* @__PURE__ */ jsx(LoadingOverlay, { children: /* @__PURE__ */ jsx(Spinner, {
+			size: "large",
+			styling: "primary"
+		}) }),
+		loaded && /* @__PURE__ */ jsx(Frame, {
+			ref: frame,
+			viewBox: `0 0 ${videoSize.w} ${videoSize.h} `,
+			version: "1.1",
+			xmlns: "http://www.w3.org/2000/svg",
+			onPointerDown: handlePositionTipShow,
+			onPointerUp: handlePositionTipHide,
+			onPointerLeave: handlePositionTipHide,
+			$transcalent: handleFinder,
+			children: state.map((lineSet, index) => /* @__PURE__ */ jsx(LineSet, {
+				hasClickSensingBorder,
+				lineClickSensingBorder,
+				onLineMoveEnd,
+				onLineClick,
+				lineSetId: index,
+				lineData: lineSet,
+				getCTM: calculateCTM,
+				boundaries,
+				unit,
+				size: 30,
+				options
+			}, index))
+		})
+	] });
+};
+//#endregion
+export { Icon as a, animation$1 as c, dimensions as d, fontFamily as f, Spinner as i, deviceMediaQuery as l, LineSet as n, IconSVGs as o, LineSetContext as r, IconWrapper as s, LineUIVideoBase as t, deviceSize as u };
+
+//# sourceMappingURL=LineUIVideoBase-09sEI3pc.mjs.map