@tmagic/editor 1.7.7 → 1.7.8-beta.2

package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,133 @@
+import { useServices } from "../../../hooks/use-services.js";
+import ContentMenu_default from "../../../components/ContentMenu.js";
+import SearchInput_default from "../../../components/SearchInput.js";
+import { useDataSourceEdit } from "../../../hooks/use-data-source-edit.js";
+import DataSourceAddButton_default from "./DataSourceAddButton.js";
+import DataSourceConfigPanel_default from "./DataSourceConfigPanel.js";
+import DataSourceList_default from "./DataSourceList.js";
+import { useContentMenu } from "./useContentMenu.js";
+import { TMagicScrollbar, tMagicMessageBox } from "@tmagic/design";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
+import { mergeWith } from "lodash-es";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "search-wrapper" };
+var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorDataSourceListPanel",
+	__name: "DataSourceListPanel",
+	props: {
+		indent: {},
+		nextLevelIndentIncrement: {},
+		customContentMenu: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const eventBus = inject("eventBus");
+		const { dataSourceService } = useServices();
+		const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
+		const editDialogCloseHandler = () => {
+			if (dataSourceListRef.value) for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) status.selected = false;
+		};
+		watch(dataSourceValues, (dataSourceValues) => {
+			if (dataSourceListRef.value && dataSourceValues.id) for (const [statusId, status] of dataSourceListRef.value.nodeStatusMap.entries()) status.selected = statusId === dataSourceValues.id;
+		});
+		const datasourceTypeList = computed(() => [{
+			text: "基础",
+			type: "base"
+		}, {
+			text: "HTTP",
+			type: "http"
+		}].concat(dataSourceService.get("datasourceTypeList")));
+		const addHandler = (type) => {
+			if (!editDialog.value) return;
+			const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
+			dataSourceValues.value = mergeWith({
+				type,
+				title: datasourceType?.text
+			}, dataSourceService.getFormValue(type), (objValue, srcValue) => {
+				if (Array.isArray(srcValue)) return srcValue;
+			});
+			dialogTitle.value = `新增${datasourceType?.text || ""}`;
+			editDialog.value.show();
+		};
+		const removeHandler = async (id) => {
+			await tMagicMessageBox.confirm("确定删除?", "提示", {
+				confirmButtonText: "确定",
+				cancelButtonText: "取消",
+				type: "warning"
+			});
+			dataSourceService.remove(id);
+		};
+		const dataSourceListRef = useTemplateRef("dataSourceList");
+		const filterTextChangeHandler = (val) => {
+			dataSourceListRef.value?.filter(val);
+		};
+		eventBus?.on("edit-data-source", (id) => {
+			editHandler(id);
+		});
+		eventBus?.on("remove-data-source", (id) => {
+			removeHandler(id);
+		});
+		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu();
+		const menuData = computed(() => props.customContentMenu(contentMenuData, "data-source"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
+					default: withCtx(() => [
+						createElementVNode("div", _hoisted_1, [
+							createVNode(SearchInput_default, { onSearch: filterTextChangeHandler }),
+							unref(editable) ? (openBlock(), createBlock(DataSourceAddButton_default, {
+								key: 0,
+								"add-button-text": "新增",
+								"add-button-config": {
+									type: "primary",
+									size: "small"
+								},
+								"datasource-type-list": datasourceTypeList.value,
+								onAdd: addHandler
+							}, null, 8, ["datasource-type-list"])) : createCommentVNode("v-if", true),
+							renderSlot(_ctx.$slots, "data-source-panel-search")
+						]),
+						createCommentVNode(" 数据源列表 "),
+						createVNode(DataSourceList_default, {
+							ref: "dataSourceList",
+							indent: __props.indent,
+							"next-level-indent-increment": __props.nextLevelIndentIncrement,
+							onEdit: unref(editHandler),
+							onRemove: removeHandler,
+							onNodeContextmenu: unref(nodeContentMenuHandler)
+						}, null, 8, [
+							"indent",
+							"next-level-indent-increment",
+							"onEdit",
+							"onNodeContextmenu"
+						])
+					]),
+					_: 3
+				}),
+				createVNode(DataSourceConfigPanel_default, {
+					ref_key: "editDialog",
+					ref: editDialog,
+					disabled: !unref(editable),
+					values: unref(dataSourceValues),
+					title: unref(dialogTitle),
+					onSubmit: unref(submitDataSourceHandler),
+					onClose: editDialogCloseHandler
+				}, null, 8, [
+					"disabled",
+					"values",
+					"title",
+					"onSubmit"
+				]),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [menuData.value.length ? (openBlock(), createBlock(ContentMenu_default, {
+					key: 0,
+					"menu-data": menuData.value,
+					ref: "menu",
+					style: { "overflow": "initial" },
+					onHide: unref(contentMenuHideHandler)
+				}, null, 8, ["menu-data", "onHide"])) : createCommentVNode("v-if", true)]))
+			], 64);
+		};
+	}
+});
+//#endregion
+export { DataSourceListPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/data-source/useContentMenu.js

@@ -0,0 +1,59 @@
+import { inject, markRaw, useTemplateRef } from "vue";
+import { cloneDeep } from "lodash-es";
+import { CopyDocument, Delete, Edit } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/data-source/useContentMenu.ts
+var useContentMenu = () => {
+	const eventBus = inject("eventBus");
+	const menuRef = useTemplateRef("menu");
+	let selectId = "";
+	const menuData = [
+		{
+			type: "button",
+			text: "编辑",
+			icon: Edit,
+			display: ({ dataSourceService }) => dataSourceService.get("editable"),
+			handler: () => {
+				if (!selectId) return;
+				eventBus?.emit("edit-data-source", selectId);
+			}
+		},
+		{
+			type: "button",
+			text: "复制并粘贴至当前",
+			icon: markRaw(CopyDocument),
+			handler: ({ dataSourceService }) => {
+				if (!selectId) return;
+				const ds = dataSourceService.getDataSourceById(selectId);
+				if (!ds) return;
+				dataSourceService.add(cloneDeep(ds));
+			}
+		},
+		{
+			type: "button",
+			text: "删除",
+			icon: Delete,
+			handler: () => {
+				if (!selectId) return;
+				eventBus?.emit("remove-data-source", selectId);
+			}
+		}
+	];
+	const nodeContentMenuHandler = (event, data) => {
+		event.preventDefault();
+		if (data.type === "ds") {
+			menuRef.value?.show(event);
+			if (data.id) selectId = `${data.id}`;
+			else selectId = "";
+		}
+	};
+	const contentMenuHideHandler = () => {
+		selectId = "";
+	};
+	return {
+		menuData,
+		nodeContentMenuHandler,
+		contentMenuHideHandler
+	};
+};
+//#endregion
+export { useContentMenu };

package/dist/es/layouts/sidebar/layer/LayerMenu.js

@@ -0,0 +1,5 @@
+import LayerMenu_vue_vue_type_script_setup_true_lang_default from "./LayerMenu.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
+var LayerMenu_default = LayerMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LayerMenu_default as default };

package/dist/es/layouts/sidebar/layer/LayerMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,90 @@
+import { useServices } from "../../../hooks/use-services.js";
+import ContentMenu_default from "../../../components/ContentMenu.js";
+import FolderMinusIcon_default from "../../../icons/FolderMinusIcon.js";
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from "../../../utils/content-menu.js";
+import { isPage, isPageFragment } from "@tmagic/utils";
+import { computed, createBlock, defineComponent, markRaw, openBlock, useTemplateRef } from "vue";
+import { Files, Plus } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/layer/LayerMenu.vue?vue&type=script&setup=true&lang.ts
+var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorLayerMenu",
+	__name: "LayerMenu",
+	props: {
+		layerContentMenu: {},
+		customContentMenu: { type: Function }
+	},
+	emits: ["collapse-all"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const services = useServices();
+		const { editorService, componentListService } = services;
+		const menuRef = useTemplateRef("menu");
+		const node = computed(() => editorService.get("node"));
+		const nodes = computed(() => editorService.get("nodes"));
+		const componentList = computed(() => componentListService.getList());
+		const createMenuItems = (group) => group.items.map((component) => ({
+			text: component.text,
+			type: "button",
+			icon: component.icon,
+			handler: () => {
+				editorService.add({
+					name: component.text,
+					type: component.type,
+					...component.data || {}
+				});
+			}
+		}));
+		const getSubMenuData = computed(() => {
+			if (node.value?.type === "tabs") return [{
+				text: "标签页",
+				type: "button",
+				icon: Files,
+				handler: () => {
+					editorService.add({ type: "tab-pane" });
+				}
+			}];
+			if (node.value?.items) return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [{
+				type: "divider",
+				direction: "horizontal"
+			}] : []), []) || [];
+			return [];
+		});
+		const menuData = computed(() => props.customContentMenu([
+			{
+				type: "button",
+				text: "全部折叠",
+				icon: FolderMinusIcon_default,
+				display: () => isPage(node.value) || isPageFragment(node.value),
+				handler: () => {
+					emit("collapse-all");
+				}
+			},
+			{
+				type: "button",
+				text: "新增",
+				icon: markRaw(Plus),
+				display: () => node.value?.items && nodes.value?.length === 1,
+				items: getSubMenuData.value
+			},
+			useCopyMenu(),
+			usePasteMenu(),
+			useDeleteMenu(),
+			useMoveToMenu(services),
+			...props.layerContentMenu
+		], "layer"));
+		const show = (e) => {
+			menuRef.value?.show(e);
+		};
+		__expose({ show });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ContentMenu_default, {
+				"menu-data": menuData.value,
+				ref: "menu",
+				style: { "overflow": "initial" }
+			}, null, 8, ["menu-data"]);
+		};
+	}
+});
+//#endregion
+export { LayerMenu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/layer/LayerNodeTool.js

@@ -0,0 +1,5 @@
+import LayerNodeTool_vue_vue_type_script_setup_true_lang_default from "./LayerNodeTool.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
+var LayerNodeTool_default = LayerNodeTool_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LayerNodeTool_default as default };

package/dist/es/layouts/sidebar/layer/LayerNodeTool.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { useServices } from "../../../hooks/use-services.js";
+import { TMagicButton } from "@tmagic/design";
+import { createBlock, createCommentVNode, defineComponent, openBlock, unref, withModifiers } from "vue";
+import { Hide, View } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue?vue&type=script&setup=true&lang.ts
+var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "LayerNodeTool",
+	props: { data: {} },
+	setup(__props) {
+		const props = __props;
+		const { editorService } = useServices();
+		const setNodeVisible = (visible) => {
+			editorService.update({
+				id: props.data.id,
+				visible
+			});
+		};
+		return (_ctx, _cache) => {
+			return __props.data.type !== "page" ? (openBlock(), createBlock(unref(TMagicButton), {
+				key: 0,
+				link: "",
+				type: __props.data.visible === false ? "primary" : "default",
+				icon: __props.data.visible === false ? unref(Hide) : unref(View),
+				title: __props.data.visible === false ? "点击显示" : "点击隐藏",
+				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(__props.data.visible === false), ["stop"]))
+			}, null, 8, [
+				"type",
+				"icon",
+				"title"
+			])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { LayerNodeTool_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/layer/LayerPanel.js

@@ -0,0 +1,5 @@
+import LayerPanel_vue_vue_type_script_setup_true_lang_default from "./LayerPanel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+var LayerPanel_default = LayerPanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LayerPanel_default as default };

package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import { useServices } from "../../../hooks/use-services.js";
+import { useFilter } from "../../../hooks/use-filter.js";
+import SearchInput_default from "../../../components/SearchInput.js";
+import Tree_default from "../../../components/Tree.js";
+import LayerMenu_default from "./LayerMenu.js";
+import LayerNodeTool_default from "./LayerNodeTool.js";
+import { useClick } from "./use-click.js";
+import { useDrag } from "./use-drag.js";
+import { useKeybinding } from "./use-keybinding.js";
+import { useNodeStatus } from "./use-node-status.js";
+import { TMagicScrollbar } from "@tmagic/design";
+import { Teleport, computed, createBlock, createCommentVNode, createVNode, defineComponent, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
+//#region packages/editor/src/layouts/sidebar/layer/LayerPanel.vue?vue&type=script&setup=true&lang.ts
+var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorLayerPanel",
+	__name: "LayerPanel",
+	props: {
+		layerContentMenu: {},
+		indent: {},
+		nextLevelIndentIncrement: {},
+		customContentMenu: { type: Function }
+	},
+	setup(__props) {
+		const services = useServices();
+		const { editorService } = services;
+		const treeRef = useTemplateRef("tree");
+		const page = computed(() => editorService.get("page"));
+		const nodeData = computed(() => !page.value ? [] : [page.value]);
+		const { nodeStatusMap } = useNodeStatus(services);
+		const { isCtrlKeyDown } = useKeybinding(services, treeRef);
+		const filterNodeMethod = (v, data) => {
+			let name = "";
+			if (data.name) name = data.name;
+			else if (data.items) name = "container";
+			return `${data.id}${name}${data.type}`.includes(v);
+		};
+		const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
+		const collapseAllHandler = () => {
+			if (!page.value || !nodeStatusMap.value) return;
+			const items = nodeStatusMap.value.entries();
+			for (const [id, status] of items) {
+				if (id === page.value.id) continue;
+				status.expand = false;
+			}
+		};
+		const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
+		const { nodeClickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, useTemplateRef("menu"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "layer-panel-header"),
+					createVNode(SearchInput_default, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+					page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(Tree_default, {
+						key: 0,
+						tabindex: "-1",
+						ref: "tree",
+						data: nodeData.value,
+						"node-status-map": unref(nodeStatusMap),
+						indent: __props.indent,
+						"next-level-indent-increment": __props.nextLevelIndentIncrement,
+						onNodeDragover: unref(handleDragOver),
+						onNodeDragstart: unref(handleDragStart),
+						onNodeDragleave: unref(handleDragLeave),
+						onNodeDragend: unref(handleDragEnd),
+						onNodeContextmenu: unref(nodeContentMenuHandler),
+						onNodeMouseenter: unref(mouseenterHandler),
+						onNodeClick: unref(nodeClickHandler)
+					}, {
+						"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })]),
+						"tree-node-tool": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [createVNode(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
+						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData })]),
+						_: 3
+					}, 8, [
+						"data",
+						"node-status-map",
+						"indent",
+						"next-level-indent-increment",
+						"onNodeDragover",
+						"onNodeDragstart",
+						"onNodeDragleave",
+						"onNodeDragend",
+						"onNodeContextmenu",
+						"onNodeMouseenter",
+						"onNodeClick"
+					])) : createCommentVNode("v-if", true),
+					(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(LayerMenu_default, {
+						ref: "menu",
+						"layer-content-menu": __props.layerContentMenu,
+						"custom-content-menu": __props.customContentMenu,
+						onCollapseAll: collapseAllHandler
+					}, null, 8, ["layer-content-menu", "custom-content-menu"])]))
+				]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { LayerPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/layer/use-click.js

@@ -0,0 +1,68 @@
+import { UI_SELECT_MODE_EVENT_NAME } from "../../../utils/const.js";
+import { updateStatus } from "../../../utils/tree.js";
+import { isPage, isPageFragment } from "@tmagic/utils";
+import { computed, nextTick } from "vue";
+import { throttle } from "lodash-es";
+//#region packages/editor/src/layouts/sidebar/layer/use-click.ts
+var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown, nodeStatusMap, menuRef) => {
+	const isMultiSelect = computed(() => isCtrlKeyDown.value && !editorService.get("disabledMultiSelect"));
+	const select = async (data) => {
+		if (!data.id) throw new Error("没有id");
+		if (isMultiSelect.value) multiSelect(data);
+		else {
+			await editorService.select(data);
+			editorService.get("stage")?.select(data.id);
+			stageOverlayService.get("stage")?.select(data.id);
+		}
+	};
+	const multiSelect = async (data) => {
+		if (isPage(data) || isPageFragment(data)) return;
+		const nodes = editorService.get("nodes") || [];
+		const newNodes = [];
+		let isCancel = false;
+		nodes.forEach((node) => {
+			if (node.id === data.id) {
+				isCancel = true;
+				return;
+			}
+			if (isPage(node) || isPageFragment(node)) return;
+			newNodes.push(node.id);
+		});
+		if (!isCancel || newNodes.length === 0) newNodes.push(data.id);
+		await editorService.multiSelect(newNodes);
+		editorService.get("stage")?.multiSelect(newNodes);
+		stageOverlayService.get("stage")?.multiSelect(newNodes);
+	};
+	const highlightHandler = throttle((event, data) => {
+		highlight(data);
+	}, 300);
+	const highlight = (data) => {
+		editorService.highlight(data);
+		editorService.get("stage")?.highlight(data.id);
+		stageOverlayService.get("stage")?.highlight(data.id);
+	};
+	const nodeClickHandler = (event, data) => {
+		if (!nodeStatusMap?.value) return;
+		if (uiService.get("uiSelectMode")) {
+			document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
+			return;
+		}
+		if (data.items && data.items.length > 0 && !isMultiSelect.value) updateStatus(nodeStatusMap.value, data.id, { expand: true });
+		nextTick(() => {
+			select(data);
+		});
+	};
+	return {
+		menuRef,
+		nodeClickHandler,
+		nodeContentMenuHandler(event, data) {
+			event.preventDefault();
+			const nodes = editorService.get("nodes") || [];
+			if (nodes.length < 2 || !nodes.includes(data)) nodeClickHandler(event, data);
+			menuRef.value?.show(event);
+		},
+		highlightHandler
+	};
+};
+//#endregion
+export { useClick };

package/dist/es/layouts/sidebar/layer/use-drag.js

@@ -0,0 +1,118 @@
+import { DragType } from "../../../type.js";
+import { getNodeIndex } from "../../../utils/editor.js";
+import { addClassName, removeClassName } from "@tmagic/utils";
+//#region packages/editor/src/layouts/sidebar/layer/use-drag.ts
+var dragState = {
+	dragOverNodeId: "",
+	dropType: "",
+	container: null
+};
+var getNodeEl = (el) => {
+	if (el.dataset.nodeId) return el;
+	if (el.parentElement) return getNodeEl(el.parentElement);
+};
+var removeStatusClass = (el) => {
+	if (!el) return;
+	[
+		"drag-before",
+		"drag-after",
+		"drag-inner"
+	].forEach((className) => {
+		el.querySelectorAll(`.${className}`).forEach((el) => {
+			removeClassName(el, className);
+		});
+	});
+};
+/**
+* dragstart/dragleave/dragend 属于源节点
+* dragover 属于目标节点
+* 这些方法并不是同一个dom事件触发的
+*/
+var useDrag = ({ editorService }) => {
+	const handleDragStart = (event) => {
+		if (!event.dataTransfer || !event.target || !event.currentTarget) return;
+		const targetEl = getNodeEl(event.target);
+		if (!targetEl || targetEl !== event.currentTarget) return;
+		event.dataTransfer.effectAllowed = "move";
+		dragState.nodeId = targetEl.dataset.nodeId;
+		try {
+			event.dataTransfer.setData("text/json", JSON.stringify({ dragType: DragType.LAYER_TREE }));
+		} catch {}
+	};
+	const handleDragOver = (event) => {
+		if (!event.target) return;
+		const targetEl = getNodeEl(event.target);
+		if (!targetEl?.draggable) return;
+		const labelEl = targetEl.children[0];
+		if (!labelEl) return;
+		removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
+		const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
+		const distance = event.clientY - targetTop;
+		const isContainer = targetEl.dataset.isContainer === "true";
+		const targetNodeId = targetEl.dataset.nodeId;
+		const { nodeId } = dragState;
+		const parentsId = targetEl.dataset.parentsId?.split(",");
+		if (!targetNodeId) return;
+		if (parentsId) {
+			let targetIdIndex = -1;
+			for (let i = 0, l = parentsId.length; i < l; i++) {
+				if (nodeId === parentsId[i]) targetIdIndex = i;
+				if (parentsId.includes(`${nodeId}`) && i >= targetIdIndex) return;
+			}
+		}
+		if (distance < targetHeight / 3) {
+			dragState.dropType = "before";
+			addClassName(labelEl, globalThis.document, "drag-before");
+		} else if (distance > targetHeight * 2 / 3) {
+			dragState.dropType = "after";
+			addClassName(labelEl, globalThis.document, "drag-after");
+		} else if (isContainer) {
+			dragState.dropType = "inner";
+			addClassName(labelEl, globalThis.document, "drag-inner");
+		}
+		if (!dragState.dropType) return;
+		dragState.dragOverNodeId = targetNodeId;
+		dragState.container = event.currentTarget;
+		event.preventDefault();
+	};
+	const handleDragLeave = (event) => {
+		if (!event.target || !event.currentTarget) return;
+		const targetEl = getNodeEl(event.target);
+		if (!targetEl || targetEl !== event.currentTarget) return;
+		const labelEl = targetEl.children[0];
+		removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
+	};
+	const handleDragEnd = (event, node) => {
+		if (!event.target || !event.currentTarget) return;
+		const targetEl = getNodeEl(event.target);
+		if (!targetEl || targetEl !== event.currentTarget) return;
+		removeStatusClass(dragState.container);
+		if (node && dragState.dragOverNodeId && dragState.dropType) {
+			if (dragState.dragOverNodeId === node.id) return;
+			const targetInfo = editorService.getNodeInfo(dragState.dragOverNodeId, false);
+			const targetNode = targetInfo.node;
+			let targetParent = targetInfo.parent;
+			if (!targetParent || !targetNode) return;
+			let targetIndex = -1;
+			if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
+				targetIndex = targetNode.items.length;
+				targetParent = targetNode;
+			} else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
+			if (dragState.dropType === "after") targetIndex += 1;
+			const selectedNodes = editorService.get("nodes");
+			if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) editorService.dragTo(selectedNodes, targetParent, targetIndex);
+			else editorService.dragTo([node], targetParent, targetIndex);
+		}
+		dragState.dragOverNodeId = "";
+		dragState.dropType = "";
+		dragState.container = null;
+	};
+	return {
+		handleDragStart,
+		handleDragEnd,
+		handleDragLeave,
+		handleDragOver
+	};
+};
+//#endregion
+export { useDrag };

package/dist/es/layouts/sidebar/layer/use-keybinding.js

@@ -0,0 +1,36 @@
+import { KeyBindingContainerKey } from "../../../utils/keybinding-config.js";
+import { ref, watchEffect } from "vue";
+//#region packages/editor/src/layouts/sidebar/layer/use-keybinding.ts
+var useKeybinding = ({ keybindingService }, container) => {
+	const isCtrlKeyDown = ref(false);
+	const windowBlurHandler = () => {
+		isCtrlKeyDown.value = false;
+	};
+	keybindingService.registerCommand("layer-panel-global-keyup", () => {
+		isCtrlKeyDown.value = false;
+	});
+	keybindingService.registerCommand("layer-panel-global-keydown", () => {
+		isCtrlKeyDown.value = true;
+	});
+	keybindingService.register([{
+		command: "layer-panel-global-keydown",
+		keybinding: "ctrl",
+		when: [["global", "keydown"]]
+	}, {
+		command: "layer-panel-global-keyup",
+		keybinding: "ctrl",
+		when: [["global", "keyup"]]
+	}]);
+	watchEffect(() => {
+		if (container.value) {
+			globalThis.addEventListener("blur", windowBlurHandler);
+			keybindingService.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
+		} else {
+			globalThis.removeEventListener("blur", windowBlurHandler);
+			keybindingService.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
+		}
+	});
+	return { isCtrlKeyDown };
+};
+//#endregion
+export { useKeybinding };