@gct-paas/core-web 0.1.5-test.1 → 0.1.6-dev.0

package/es/components/label-design/components/mr-vue/MrContainer.vue_vue_type_script_setup_true_name_mr-container_lang.mjs

@@ -0,0 +1,689 @@
+import { PRINT_ELE_TYPE } from "../../constants/CommonPrintElems.mjs";
+import { snapElems } from "../../helper/snapTracking.mjs";
+import { useDesigner } from "../../hooks/useDesigner.mjs";
+import { useProp } from "../../hooks/useProp.mjs";
+import { computed, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, vShow, watch, withDirectives, withKeys, withModifiers } from "vue";
+//#region src/components/label-design/components/mr-vue/MrContainer.vue?vue&type=script&setup=true&name=mr-container&lang.ts
+var MrContainer_vue_vue_type_script_setup_true_name_mr_container_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MrContainer",
+	props: {
+		activeElements: {
+			type: Array,
+			default: () => []
+		},
+		snapTracking: {
+			type: Boolean,
+			default: false
+		},
+		zoom: {
+			type: Number,
+			default: 1
+		},
+		isDesign: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"clearselection",
+		"delete",
+		"copy",
+		"cut",
+		"paste",
+		"undo",
+		"redo",
+		"arrows",
+		"drop",
+		"resizestop",
+		"movestop",
+		"rotatestop",
+		"selectstop",
+		"moving",
+		"movingItem",
+		"rotating"
+	],
+	setup(__props, { emit: __emit }) {
+		const { selectedElements, updateEgglement } = useDesigner();
+		const elementRef = ref();
+		const { selectedItem } = useProp({ emit: (_event) => {} });
+		const selectionArea = ref();
+		const sublineT = ref();
+		const sublineB = ref();
+		const sublineY = ref();
+		const sublineL = ref();
+		const sublineR = ref();
+		const sublineX = ref();
+		const refObj = {
+			sublineT,
+			sublineB,
+			sublineY,
+			sublineL,
+			sublineR,
+			sublineX
+		};
+		const props = __props;
+		const emit = __emit;
+		const mrElements = ref([]);
+		const sublineOn = computed(() => {
+			return props.snapTracking && mrElements.value.length === 1;
+		});
+		watch(() => selectedElements.value, (val) => {
+			nextTick(() => {
+				mrElements.value = val.map((el) => {
+					const htmlEle = document.getElementById(el.id);
+					return htmlEle ? htmlEle.parentElement : null;
+				});
+			});
+		});
+		const initialAbsPos = ref({
+			x: 0,
+			y: 0
+		});
+		const initialRelPos = ref({
+			x: 0,
+			y: 0
+		});
+		const initialAngle = ref(0);
+		const currentAbsPos = ref({
+			x: 0,
+			y: 0
+		});
+		const currentRelPos = ref({
+			x: 0,
+			y: 0
+		});
+		const currentAngle = ref(0);
+		const selecting = ref(false);
+		const resizing = ref(false);
+		const handle = ref();
+		const rotating = ref(false);
+		const moving = ref(false);
+		const isAttachedH = ref(false);
+		const isAttachedV = ref(false);
+		const attachedPoint = ref();
+		const mouseDownHandler = (e) => {
+			const target = e.target;
+			if (!target) return;
+			let isMrs = false;
+			initialAbsPos.value = currentAbsPos.value = getMouseAbsPoint(e);
+			initialRelPos.value = currentRelPos.value = getMouseRelPoint(e);
+			initialAngle.value = currentAngle.value = getMouseRelAngle(e) ?? 0;
+			if (target.dataset.mrContainer) {
+				if (selectedItem.value.type === PRINT_ELE_TYPE.TEXT && selectedItem.value.isEdit) updateEgglement({
+					egglement: selectedItem.value,
+					isEdit: false
+				});
+				emit("clearselection");
+				renderSelectionArea({
+					x: -1,
+					y: -1
+				}, {
+					x: -1,
+					y: -1
+				});
+				isMrs = selecting.value = true;
+			} else if (target.dataset.mrHandle) {
+				isMrs = resizing.value = true;
+				handle.value = target.classList[1];
+			} else if (target.dataset.mrRotate) isMrs = rotating.value = true;
+			else if (getParentMr(target)) {
+				if (!props.activeElements.some((ele) => ele.internal)) isMrs = moving.value = true;
+			}
+			if (isMrs) {
+				document.documentElement.addEventListener("mousemove", mouseMoveHandler, true);
+				document.documentElement.addEventListener("mouseup", mouseUpHandler, true);
+			}
+		};
+		const getMouseAbsPoint = (e) => {
+			return {
+				x: e.clientX,
+				y: e.clientY
+			};
+		};
+		const getMouseRelPoint = (e) => {
+			const mainContainer = document.querySelector(".designer-canvas");
+			const maineggRect = document.querySelector(".mr-container-design").getBoundingClientRect();
+			return {
+				x: e.clientX + mainContainer.scrollLeft - maineggRect.left,
+				y: e.clientY + mainContainer.scrollTop - maineggRect.top
+			};
+		};
+		/**
+		* 鼠标位置和选中的元素的中心位置间的夹角
+		*/
+		const getMouseRelAngle = (e) => {
+			if (mrElements.value.length !== 1) return;
+			let { left, top, width, height } = window.getComputedStyle(mrElements.value[0]);
+			const centerX = parseInt(left) + parseInt(width) / 2;
+			const centerY = parseInt(top) + parseInt(height) / 2;
+			const { x, y } = getMouseRelPoint(e);
+			return 180 / Math.PI * Math.atan2(y - centerY, x - centerX);
+		};
+		const renderSelectionArea = (initPoint, endPoint) => {
+			const minX = Math.min(initPoint.x, endPoint.x);
+			const maxX = Math.max(initPoint.x, endPoint.x);
+			const minY = Math.min(initPoint.y, endPoint.y);
+			const maxY = Math.max(initPoint.y, endPoint.y);
+			selectionArea.value.style.left = Math.round(minX / props.zoom) + "px";
+			selectionArea.value.style.top = Math.round(minY / props.zoom) + "px";
+			selectionArea.value.style.width = Math.round((maxX - minX) / props.zoom) + "px";
+			selectionArea.value.style.height = Math.round((maxY - minY) / props.zoom) + "px";
+		};
+		const getParentMr = (element) => {
+			let parentMr = null;
+			let currentMr = element;
+			while (parentMr === null) {
+				if (currentMr === null || currentMr.parentElement === null) break;
+				else if (currentMr.dataset.mrContainer) parentMr = currentMr;
+				else if (currentMr.parentElement.dataset.mrEl) parentMr = currentMr.parentElement;
+				currentMr = currentMr.parentElement;
+			}
+			return parentMr;
+		};
+		const mouseMoveHandler = (e) => {
+			const lastAbsX = currentAbsPos.value.x;
+			const lastAbsY = currentAbsPos.value.y;
+			currentAbsPos.value = getMouseAbsPoint(e);
+			currentRelPos.value = getMouseRelPoint(e);
+			currentAngle.value = getMouseRelAngle(e) ?? currentAngle.value;
+			let offX = currentAbsPos.value.x - lastAbsX;
+			let offY = currentAbsPos.value.y - lastAbsY;
+			let offAngle = currentAngle.value - initialAngle.value;
+			if (resizing.value) {
+				if (e.shiftKey) if (Math.abs(offX) >= Math.abs(offY)) offY = offY >= 0 ? Math.abs(offX) : -Math.abs(offX);
+				else offX = offX >= 0 ? Math.abs(offY) : -Math.abs(offY);
+				if (sublineOn.value) {
+					resizeToSubline(mrElements.value[0], currentRelPos.value);
+					mrElements.value.map((mrEl) => {
+						resizeElementBy(mrEl, isAttachedH.value ? 0 : offX, isAttachedV.value ? 0 : offY);
+					});
+				} else mrElements.value.map((mrEl) => {
+					resizeElementBy(mrEl, offX, offY);
+				});
+				emit("resizestop", resizeStopData());
+			} else if (moving.value) {
+				if (sublineOn.value) {
+					const el = mrElements.value[0];
+					moveElementBy(el, offX, offY);
+				} else mrElements.value.map((mrEl) => moveElementBy(mrEl, offX, offY));
+				emit("moving", currentAbsPos.value.x, currentAbsPos.value.y);
+			} else if (rotating.value) {
+				mrElements.value.map((mrEl) => rotateElementBy(mrEl, offAngle));
+				emit("rotating", currentAngle.value);
+			} else renderSelectionArea(initialRelPos.value, currentRelPos.value);
+		};
+		const mouseUpHandler = () => {
+			const mainContainer = document.querySelector(".designer-canvas");
+			let currentScroll = mainContainer.scrollTop;
+			document.querySelector(".mr-container-design")?.focus();
+			mainContainer.scrollTop = currentScroll;
+			if (initialAbsPos.value !== currentAbsPos.value) {
+				if (resizing.value) emit("resizestop", resizeStopData());
+				else if (moving.value) emit("movestop", moveStopData());
+				else if (rotating.value) emit("rotatestop", rotateStopData());
+				else if (selecting.value) emit("selectstop", selectStopData());
+			}
+			moving.value = false;
+			resizing.value = false;
+			rotating.value = false;
+			selecting.value = false;
+			handle.value = null;
+			document.documentElement.removeEventListener("mousemove", mouseMoveHandler, true);
+			document.documentElement.removeEventListener("mouseup", mouseUpHandler, true);
+			resetSubline();
+			isAttachedH.value = false;
+			isAttachedV.value = false;
+		};
+		const resizeStopData = () => {
+			return mrElements.value.map((el) => {
+				if (!el) return null;
+				return {
+					elId: el.children[0].id,
+					top: el.style.top.indexOf("%") !== -1 || el.style.top === "auto" ? el.style.top : getTopByEl(el, parseInt(el.style.top)),
+					left: el.style.left.indexOf("%") !== -1 || el.style.left === "auto" ? el.style.left : getLeftByEl(el, parseInt(el.style.left)),
+					bottom: el.style.bottom.indexOf("%") !== -1 || el.style.bottom === "auto" ? el.style.bottom : parseInt(el.style.bottom),
+					right: el.style.right.indexOf("%") !== -1 || el.style.right === "auto" ? el.style.right : parseInt(el.style.right),
+					height: el.style.height.indexOf("%") !== -1 || el.style.height === "auto" ? el.style.height : parseInt(el.style.height),
+					width: el.style.width.indexOf("%") !== -1 || el.style.width === "auto" ? el.style.width : parseInt(el.style.width)
+				};
+			});
+		};
+		const moveStopData = () => {
+			return {
+				moveElData: mrElements.value.map((el) => {
+					if (!el) return null;
+					return {
+						elId: el.children[0].id,
+						top: el.style.top.indexOf("%") !== -1 || el.style.top === "auto" ? el.style.top : getTopByEl(el, parseInt(el.style.top)),
+						left: el.style.left.indexOf("%") !== -1 || el.style.left === "auto" ? el.style.left : getLeftByEl(el, parseInt(el.style.left)),
+						bottom: el.style.bottom.indexOf("%") !== -1 || el.style.bottom === "auto" ? el.style.bottom : parseInt(el.style.bottom),
+						right: el.style.right.indexOf("%") !== -1 || el.style.right === "auto" ? el.style.right : parseInt(el.style.right)
+					};
+				}),
+				relMouseX: Math.round(currentRelPos.value.x / props.zoom),
+				relMouseY: Math.round(currentRelPos.value.y / props.zoom),
+				absMouseX: currentAbsPos.value.x,
+				absMouseY: currentAbsPos.value.y
+			};
+		};
+		function getTopByEl(el, top) {
+			let result = top;
+			if (el.getAttribute("type") === PRINT_ELE_TYPE.HORIZONTAL_LINE) {
+				const height = parseFloat(el.style.height) / 2 - 1;
+				result += height;
+			}
+			return result;
+		}
+		function getLeftByEl(el, left) {
+			let result = left;
+			if (el.getAttribute("type") === PRINT_ELE_TYPE.VERTICAL_LINE) {
+				const width = parseFloat(el.style.width) / 2 - 1;
+				result += width;
+			}
+			return result;
+		}
+		const rotateStopData = () => {
+			return mrElements.value.map((el) => {
+				if (!el) return null;
+				const tempArr = el.style.webkitTransform.match(/\((\S*)deg/);
+				return {
+					elId: el.children[0].id,
+					rotate: Array.isArray(tempArr) ? parseFloat(parseFloat(tempArr[1]).toFixed()) : 0
+				};
+			});
+		};
+		const selectStopData = () => {
+			return {
+				top: parseInt(selectionArea.value.style.top),
+				bottom: parseInt(selectionArea.value.style.height) + parseInt(selectionArea.value.style.top),
+				left: parseInt(selectionArea.value.style.left),
+				right: parseInt(selectionArea.value.style.width) + parseInt(selectionArea.value.style.left)
+			};
+		};
+		/**
+		* 复位所有的辅助线
+		*/
+		const resetSubline = () => {
+			for (let subline of [
+				"L",
+				"R",
+				"X",
+				"T",
+				"B",
+				"Y"
+			]) showHideSubline(0, subline, false);
+		};
+		/**
+		* 显示或隐藏辅助线
+		* @param coor 位置
+		* @param pos L R T B X Y
+		* @param visible 显示还是隐藏
+		*/
+		const showHideSubline = (coor, pos, visible) => {
+			const subline = refObj["subline" + pos].value;
+			if (subline) if (visible) if ([
+				"L",
+				"R",
+				"X"
+			].indexOf(pos) > -1) {
+				subline.style.left = coor + "px";
+				subline.style.display = "block";
+			} else if ([
+				"T",
+				"B",
+				"Y"
+			].indexOf(pos) > -1) {
+				subline.style.top = coor + "px";
+				subline.style.display = "block";
+			} else return;
+			else subline.style.display = "none";
+		};
+		const resizeToSubline = (el, currentPoint) => {
+			if (!el) return;
+			const elCompStyle = window.getComputedStyle(el);
+			const width = parseInt(elCompStyle.width);
+			const height = parseInt(elCompStyle.height);
+			const top = parseInt(elCompStyle.top);
+			const left = parseInt(elCompStyle.left);
+			const right = left + width;
+			const bottom = top + height;
+			if (handle.value.indexOf("l") !== -1) {
+				if (!isAttachedH.value) for (const { l, r } of snapElems) {
+					if (Math.abs(l - left) < 5) {
+						showHideSubline(l, "L", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, l - left, 0));
+						isAttachedH.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+					if (Math.abs(r - left) < 5) {
+						showHideSubline(r, "L", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, r - left, 0));
+						isAttachedH.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+				}
+				else if (Math.abs(currentPoint.x - attachedPoint.value.x) > 5) {
+					mrElements.value.map((mrEl) => resizeElementBy(mrEl, currentPoint.x - attachedPoint.value.x, 0));
+					isAttachedH.value = false;
+					resetSubline();
+				}
+			}
+			if (handle.value.indexOf("r") !== -1) {
+				if (!isAttachedH.value) for (const { l, r } of snapElems) {
+					if (Math.abs(l - right) < 5) {
+						showHideSubline(l, "R", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, l - right, 0));
+						isAttachedH.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+					if (Math.abs(r - right) < 5) {
+						showHideSubline(r, "R", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, r - right, 0));
+						isAttachedH.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+				}
+				else if (Math.abs(currentPoint.x - attachedPoint.value.x) > 5) {
+					mrElements.value.map((mrEl) => resizeElementBy(mrEl, currentPoint.x - attachedPoint.value.x, 0));
+					isAttachedH.value = false;
+					resetSubline();
+				}
+			}
+			if (handle.value.indexOf("t") !== -1) {
+				if (!isAttachedV.value) for (const { t, b } of snapElems) {
+					if (Math.abs(t - top) < 5) {
+						showHideSubline(t, "T", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, 0, t - top));
+						isAttachedV.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+					if (Math.abs(b - top) < 5) {
+						showHideSubline(b, "T", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, 0, b - top));
+						isAttachedV.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+				}
+				else if (Math.abs(currentPoint.y - attachedPoint.value.y) > 5) {
+					mrElements.value.map((mrEl) => resizeElementBy(mrEl, 0, currentPoint.y - attachedPoint.value.y));
+					isAttachedV.value = false;
+					resetSubline();
+				}
+			}
+			if (handle.value.indexOf("b") !== -1) {
+				if (!isAttachedV.value) for (const { t, b } of snapElems) {
+					if (Math.abs(t - bottom) < 5) {
+						showHideSubline(t, "B", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, 0, t - bottom));
+						isAttachedV.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+					if (Math.abs(b - bottom) < 5) {
+						showHideSubline(b, "B", true);
+						mrElements.value.map((mrEl) => resizeElementBy(mrEl, 0, b - bottom));
+						isAttachedV.value = true;
+						attachedPoint.value = currentPoint;
+						break;
+					}
+				}
+				else if (Math.abs(currentPoint.y - attachedPoint.value.y) > 5) {
+					mrElements.value.map((mrEl) => resizeElementBy(mrEl, 0, currentPoint.y - attachedPoint.value.y));
+					isAttachedV.value = false;
+					resetSubline();
+				}
+			}
+		};
+		const resizeElementBy = (el, offX, offY) => {
+			if (!el) return;
+			const parentMr = getParentMr(el);
+			if (!parentMr) return;
+			const parentCompStyle = window.getComputedStyle(parentMr);
+			const elCompStyle = window.getComputedStyle(el);
+			const parentH = parseInt(parentCompStyle.height);
+			const parentW = parseInt(parentCompStyle.width);
+			const elMinH = parseInt(elCompStyle.minHeight);
+			const elMinW = parseInt(elCompStyle.minWidth);
+			let newTop = parseInt(elCompStyle.top);
+			let newLeft = parseInt(elCompStyle.left);
+			let newRight = parseInt(elCompStyle.right);
+			let newBottom = parseInt(elCompStyle.bottom);
+			let newHeight = parseInt(elCompStyle.height);
+			let newWidth = parseInt(elCompStyle.width);
+			let diffX = offX;
+			let diffY = offY;
+			if (handle.value.indexOf("t") !== -1) {
+				if (newHeight - offY < elMinH) diffY = newHeight - elMinH;
+				else if (newTop + offY < 0) diffY = 0 - newTop;
+				newTop += Math.round(diffY / props.zoom);
+				newHeight -= Math.round(diffY / props.zoom);
+			}
+			if (handle.value.indexOf("l") !== -1) {
+				if (newWidth - offX < elMinW) diffX = newWidth - elMinW;
+				else if (newLeft + offX < 0) diffX = 0 - newLeft;
+				newLeft += Math.round(diffX / props.zoom);
+				newWidth -= Math.round(diffX / props.zoom);
+			}
+			if (handle.value.indexOf("b") !== -1) {
+				if (newHeight + offY < elMinH) diffY = elMinH - newHeight;
+				else if (newTop + newHeight + offY > parentH) diffY = parentH - newTop - newHeight;
+				newHeight += Math.round(diffY / props.zoom);
+				newBottom -= Math.round(diffY / props.zoom);
+			}
+			if (handle.value.indexOf("r") !== -1) {
+				if (newWidth + offX < elMinW) diffX = elMinW - newWidth;
+				else if (newLeft + newWidth + offX > parentW) diffX = parentW - newLeft - newWidth;
+				newWidth += Math.round(diffX / props.zoom);
+				newRight -= Math.round(diffX / props.zoom);
+			}
+			el.style.height = el.style.height !== "auto" ? el.style.height.indexOf("%") > -1 ? newHeight / parentH * 100 + "%" : newHeight + "px" : "auto";
+			el.style.width = el.style.width !== "auto" ? el.style.width.indexOf("%") > -1 ? newWidth / parentW * 100 + "%" : newWidth + "px" : "auto";
+			el.style.top = el.style.top !== "auto" ? el.style.top.indexOf("%") > -1 ? newTop / parentH * 100 + "%" : newTop + "px" : "auto";
+			el.style.left = el.style.left !== "auto" ? el.style.left.indexOf("%") > -1 ? newLeft / parentW * 100 + "%" : newLeft + "px" : "auto";
+			el.style.bottom = el.style.bottom !== "auto" ? el.style.bottom.indexOf("%") > -1 ? newBottom / parentH * 100 + "%" : newBottom + "px" : "auto";
+			el.style.right = el.style.right !== "auto" ? el.style.right.indexOf("%") > -1 ? newRight / parentW * 100 + "%" : newRight + "px" : "auto";
+		};
+		const moveElementBy = (el, offX, offY) => {
+			if (!el) return;
+			const parentMr = getParentMr(el);
+			if (!parentMr) return;
+			const elCompStyle = window.getComputedStyle(el);
+			const parentCompStyle = window.getComputedStyle(parentMr);
+			const parentH = parseInt(parentCompStyle.height);
+			const parentW = parseInt(parentCompStyle.width);
+			const newTop = fixPosition(el, parseInt(elCompStyle.top) + Math.round(offY / props.zoom), "top");
+			const newLeft = fixPosition(el, parseInt(elCompStyle.left) + Math.round(offX / props.zoom), "left");
+			const newBottom = fixPosition(el, parseInt(elCompStyle.bottom) - Math.round(offY / props.zoom), "bottom");
+			const newRight = fixPosition(el, parseInt(elCompStyle.right) - Math.round(offX / props.zoom), "right");
+			emit("movingItem", newLeft, newTop, el.clientWidth, el.clientHeight);
+			el.style.top = el.style.top !== "auto" ? el.style.top.indexOf("%") > -1 ? newTop / parentH * 100 + "%" : newTop + "px" : "auto";
+			el.style.left = el.style.left !== "auto" ? el.style.left.indexOf("%") > -1 ? newLeft / parentW * 100 + "%" : newLeft + "px" : "auto";
+			el.style.bottom = el.style.bottom !== "auto" ? el.style.bottom.indexOf("%") > -1 ? newBottom / parentH * 100 + "%" : newBottom + "px" : "auto";
+			el.style.right = el.style.right !== "auto" ? el.style.right.indexOf("%") > -1 ? newRight / parentW * 100 + "%" : newRight + "px" : "auto";
+		};
+		const fixPosition = (el, val, prop) => {
+			if (val < 0) return 0;
+			const parentMr = getParentMr(el);
+			if (!parentMr) return val;
+			const parentCompStyle = window.getComputedStyle(parentMr);
+			const elCompStyle = window.getComputedStyle(el);
+			if ((prop === "top" || prop === "bottom") && val + parseInt(elCompStyle.height) > parseInt(parentCompStyle.height)) return parseInt(parentCompStyle.height) - parseInt(elCompStyle.height);
+			if ((prop === "left" || prop === "right") && val + parseInt(elCompStyle.width) > parseInt(parentCompStyle.width)) return parseInt(parentCompStyle.width) - parseInt(elCompStyle.width);
+			return val;
+		};
+		const rotateElementBy = (el, offAngle) => {
+			if (!el) return;
+			const mrEl = props.activeElements[0];
+			const elRotate = parseInt(mrEl.rotate);
+			el.style.webkitTransform = "rotate(" + (elRotate + offAngle) + "deg)";
+		};
+		/** 处理mouseDown是否冒泡事件 */
+		function updateListener() {
+			if (!elementRef.value) return;
+			elementRef.value.removeEventListener("mousedown", mouseDownHandler, { capture: selectedItem.value.isEdit });
+			elementRef.value.addEventListener("mousedown", mouseDownHandler, { capture: !selectedItem.value.isEdit });
+		}
+		onMounted(updateListener);
+		onUnmounted(() => {
+			if (elementRef.value) elementRef.value.removeEventListener("mousedown", mouseDownHandler, { capture: !selectedItem.value.isEdit });
+		});
+		watch(() => selectedItem.value.isEdit, updateListener);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "elementRef",
+				ref: elementRef,
+				"data-mr-container": "true",
+				class: normalizeClass(["mr-container", { "mr-container-design": __props.isDesign }]),
+				tabindex: "0",
+				onKeydown: [
+					_cache[0] || (_cache[0] = withKeys(withModifiers(($event) => emit("clearselection"), [
+						"exact",
+						"stop",
+						"prevent"
+					]), ["esc"])),
+					_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => emit("delete"), ["exact", "stop"]), ["delete"])),
+					_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => emit("copy"), [
+						"ctrl",
+						"exact",
+						"stop"
+					]), ["c"])),
+					_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => emit("copy"), [
+						"meta",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["c"])),
+					_cache[4] || (_cache[4] = withKeys(withModifiers(($event) => emit("cut"), [
+						"ctrl",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["x"])),
+					_cache[5] || (_cache[5] = withKeys(withModifiers(($event) => emit("cut"), [
+						"meta",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["x"])),
+					_cache[6] || (_cache[6] = withKeys(withModifiers(($event) => emit("paste"), [
+						"ctrl",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["v"])),
+					_cache[7] || (_cache[7] = withKeys(withModifiers(($event) => emit("paste"), [
+						"meta",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["v"])),
+					_cache[8] || (_cache[8] = withKeys(withModifiers(($event) => emit("undo"), [
+						"ctrl",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["z"])),
+					_cache[9] || (_cache[9] = withKeys(withModifiers(($event) => emit("undo"), [
+						"meta",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["z"])),
+					_cache[10] || (_cache[10] = withKeys(withModifiers(($event) => emit("redo"), [
+						"ctrl",
+						"shift",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["z"])),
+					_cache[11] || (_cache[11] = withKeys(withModifiers(($event) => emit("redo"), [
+						"meta",
+						"shift",
+						"exact",
+						"stop",
+						"prevent"
+					]), ["z"])),
+					_cache[12] || (_cache[12] = withKeys(withModifiers((e) => emit("arrows", {
+						direction: "up",
+						shiftKey: e.shiftKey
+					}), [
+						"exact",
+						"stop",
+						"prevent"
+					]), ["up"])),
+					_cache[13] || (_cache[13] = withKeys(withModifiers((e) => emit("arrows", {
+						direction: "down",
+						shiftKey: e.shiftKey
+					}), [
+						"exact",
+						"stop",
+						"prevent"
+					]), ["down"])),
+					_cache[14] || (_cache[14] = withKeys(withModifiers((e) => emit("arrows", {
+						direction: "left",
+						shiftKey: e.shiftKey
+					}), [
+						"exact",
+						"stop",
+						"prevent"
+					]), ["left"])),
+					_cache[15] || (_cache[15] = withKeys(withModifiers((e) => emit("arrows", {
+						direction: "right",
+						shiftKey: e.shiftKey
+					}), [
+						"exact",
+						"stop",
+						"prevent"
+					]), ["right"]))
+				],
+				onDrop: _cache[16] || (_cache[16] = withModifiers((e) => emit("drop", e), ["prevent"])),
+				onDragover: _cache[17] || (_cache[17] = withModifiers(() => {}, ["prevent"]))
+			}, [
+				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				withDirectives(createElementVNode("div", {
+					ref_key: "selectionArea",
+					ref: selectionArea,
+					class: "selection-area"
+				}, null, 512), [[vShow, selecting.value]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "sublineT",
+					ref: sublineT,
+					class: "subline subline--h"
+				}, null, 512), [[vShow, sublineOn.value]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "sublineB",
+					ref: sublineB,
+					class: "subline subline--h"
+				}, null, 512), [[vShow, sublineOn.value]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "sublineY",
+					ref: sublineY,
+					class: "subline subline--h subline--center"
+				}, null, 512), [[vShow, sublineOn.value]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "sublineL",
+					ref: sublineL,
+					class: "subline subline--v"
+				}, null, 512), [[vShow, sublineOn.value]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "sublineR",
+					ref: sublineR,
+					class: "subline subline--v"
+				}, null, 512), [[vShow, sublineOn.value]]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "sublineX",
+					ref: sublineX,
+					class: "subline subline--v subline--center"
+				}, null, 512), [[vShow, sublineOn.value]])
+			], 34);
+		};
+	}
+});
+//#endregion
+export { MrContainer_vue_vue_type_script_setup_true_name_mr_container_lang_default as default };