+
+
+
+
diff --git a/src/components/custom-components/kv-vue/index.vue b/src/components/custom-components/kv-vue/index.vue
new file mode 100644
index 0000000..66fa425
--- /dev/null
+++ b/src/components/custom-components/kv-vue/index.vue
@@ -0,0 +1,71 @@
+
+ | {{ props.label }} | +{{ props.value }} | +
+
+
+
diff --git a/src/components/custom-components/sys-button-vue/index.vue b/src/components/custom-components/sys-button-vue/index.vue
new file mode 100644
index 0000000..4279025
--- /dev/null
+++ b/src/components/custom-components/sys-button-vue/index.vue
@@ -0,0 +1,48 @@
+
+
+
+
+ {{ date }}
+
+
+ {{ week }}
+
+
+ {{ time }}
+
+
+
+
+
+
diff --git a/src/components/custom-components/text-vue/index.vue b/src/components/custom-components/text-vue/index.vue
new file mode 100644
index 0000000..937cd39
--- /dev/null
+++ b/src/components/custom-components/text-vue/index.vue
@@ -0,0 +1,39 @@
+
+ + {{ props.text }} +
+ + + diff --git a/src/components/mt-dzr/__tests__/mt-dzr.spec.ts b/src/components/mt-dzr/__tests__/mt-dzr.spec.ts new file mode 100644 index 0000000..d772c64 --- /dev/null +++ b/src/components/mt-dzr/__tests__/mt-dzr.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest'; + +import { mount } from '@vue/test-utils'; +import HelloWorld from '../index.vue'; + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }); + expect(wrapper.text()).toContain('Hello Vitest'); + }); +}); diff --git a/src/components/mt-dzr/components/render-item.vue b/src/components/mt-dzr/components/render-item.vue new file mode 100644 index 0000000..aab7e74 --- /dev/null +++ b/src/components/mt-dzr/components/render-item.vue @@ -0,0 +1,5 @@ + +
+
+
diff --git a/src/components/mt-dzr/components/resize-handle.vue b/src/components/mt-dzr/components/resize-handle.vue
new file mode 100644
index 0000000..cdecea1
--- /dev/null
+++ b/src/components/mt-dzr/components/resize-handle.vue
@@ -0,0 +1,196 @@
+
+
+
+
+
+
+
diff --git a/src/components/mt-dzr/components/rotate-handle.vue b/src/components/mt-dzr/components/rotate-handle.vue
new file mode 100644
index 0000000..3532fbb
--- /dev/null
+++ b/src/components/mt-dzr/components/rotate-handle.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
diff --git a/src/components/mt-dzr/composables/mouse.ts b/src/components/mt-dzr/composables/mouse.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/mt-dzr/index.ts b/src/components/mt-dzr/index.ts
new file mode 100644
index 0000000..6957053
--- /dev/null
+++ b/src/components/mt-dzr/index.ts
@@ -0,0 +1,3 @@
+import MtDzr from './index.vue';
+
+export default MtDzr;
diff --git a/src/components/mt-dzr/index.vue b/src/components/mt-dzr/index.vue
new file mode 100644
index 0000000..98044c3
--- /dev/null
+++ b/src/components/mt-dzr/index.vue
@@ -0,0 +1,284 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-dzr/store/index.ts b/src/components/mt-dzr/store/index.ts
new file mode 100644
index 0000000..d1eee2c
--- /dev/null
+++ b/src/components/mt-dzr/store/index.ts
@@ -0,0 +1,34 @@
+import { reactive } from 'vue';
+import type { IDzrCopyInfo, IDzrStore } from './types';
+import type { IDzrPropsModelValue } from '../types';
+
+export const dzrStore: IDzrStore = reactive({
+ dzr_copy_info: {
+ gen_id: '',
+ show: false,
+ value: {
+ left: 0,
+ top: 0,
+ width: 0,
+ height: 0,
+ angle: 0
+ }
+ },
+ setDzrCopyInfo: (value: IDzrCopyInfo) => {
+ dzrStore.dzr_copy_info = value;
+ },
+ showDzrCopy: (value: IDzrPropsModelValue, gen_id: string) => {
+ dzrStore.setDzrCopyInfo({
+ ...dzrStore.dzr_copy_info,
+ show: true,
+ value,
+ gen_id
+ });
+ },
+ hideDzrCopy: () => {
+ dzrStore.setDzrCopyInfo({
+ ...dzrStore.dzr_copy_info,
+ show: false
+ });
+ }
+});
diff --git a/src/components/mt-dzr/store/types.ts b/src/components/mt-dzr/store/types.ts
new file mode 100644
index 0000000..f3af2a3
--- /dev/null
+++ b/src/components/mt-dzr/store/types.ts
@@ -0,0 +1,13 @@
+import type { IDzrPropsModelValue } from '../types';
+
+export interface IDzrStore {
+ dzr_copy_info: IDzrCopyInfo;
+ setDzrCopyInfo: (value: IDzrCopyInfo) => void;
+ showDzrCopy: (value: IDzrPropsModelValue, gen_id: string) => void;
+ hideDzrCopy: () => void;
+}
+export interface IDzrCopyInfo {
+ gen_id: string;
+ show: boolean;
+ value: IDzrPropsModelValue;
+}
diff --git a/src/components/mt-dzr/types.ts b/src/components/mt-dzr/types.ts
new file mode 100644
index 0000000..6fc0672
--- /dev/null
+++ b/src/components/mt-dzr/types.ts
@@ -0,0 +1,31 @@
+export interface IDzrProps {
+ id: string;
+ modelValue: IDzrPropsModelValue; //位置和大小
+ scaleRatio?: number; //画布缩放倍数
+ hide: boolean; //隐藏
+ grid?: IDzrPropsGrid; //网格配置
+ resize?: boolean; //开启缩放
+ rotate?: boolean; //开启旋转
+ lock?: boolean; //锁定
+ active?: boolean; //激活
+ useProportionalScaling?: boolean; //开启等比例缩放
+ showGhostDom?: boolean; //是否显示幽灵dom
+ class?: string; //
+ disabled: boolean; //是否禁用
+ adsorp_diff?: {
+ x: number;
+ y: number;
+ };
+}
+export interface IDzrPropsModelValue {
+ left: number;
+ top: number;
+ width: number;
+ height: number;
+ angle: number;
+}
+export interface IDzrPropsGrid {
+ enabled: boolean; //开启网格
+ align: boolean; //对齐到网格
+ size: number; //网格大小
+}
diff --git a/src/components/mt-dzr/utils/index.ts b/src/components/mt-dzr/utils/index.ts
new file mode 100644
index 0000000..bca1697
--- /dev/null
+++ b/src/components/mt-dzr/utils/index.ts
@@ -0,0 +1,358 @@
+import type { IDzrPropsModelValue } from '../types';
+import type { MouseTouchEvent } from './types';
+
+/**
+ * 会自动销毁的鼠标移动事件
+ * @param onMousemove
+ */
+export const autoDestroyMouseMove = (
+ onMousemove: (e: MouseTouchEvent) => void,
+ mouseUpCallBack?: () => void
+) => {
+ const onMouseup = () => {
+ document.removeEventListener('mousemove', onMousemove);
+ document.removeEventListener('touchmove', onMousemove);
+ document.removeEventListener('mouseup', onMouseup);
+ document.removeEventListener('touchend', onMouseup);
+ document.removeEventListener('mouseleave', onMouseup);
+ if (mouseUpCallBack) {
+ mouseUpCallBack();
+ }
+ };
+ document.addEventListener('mousemove', onMousemove);
+ document.addEventListener('touchmove', onMousemove);
+ document.addEventListener('mouseup', onMouseup);
+ document.addEventListener('touchend', onMouseup);
+ document.addEventListener('mouseleave', onMouseup);
+};
+/**
+ * 根据坐标对齐到网格
+ * @param position 当前坐标
+ * @param grid 网格大小
+ * @returns 对应网格的坐标
+ */
+export const alignToGrid = (position: number, grid = 1) => {
+ const integerPart = Math.floor(position / grid);
+ const fractionalPart = position % grid;
+
+ if (fractionalPart >= grid / 2) {
+ return (integerPart + 1) * grid;
+ } else {
+ return integerPart * grid;
+ }
+};
+/** 根据移动的距离对齐到网格
+ * @param diff 移动的距离
+ * @param grid 网格大小
+ */
+export const calcGrid = (diff: number, grid = 1) => {
+ // 得到每次缩放的余数
+ const r = Math.abs(diff) % grid;
+
+ // 正负grid
+ const mulGrid = diff > 0 ? grid : -grid;
+ let result = 0;
+ // 余数大于grid的1/2
+ if (r > grid / 2) {
+ result = mulGrid * Math.ceil(Math.abs(diff) / grid);
+ } else {
+ result = mulGrid * Math.floor(Math.abs(diff) / grid);
+ }
+
+ return result;
+};
+/**
+ * 获取当前点击坐标 根据pc端和移动端获取
+ * @param e
+ * @returns
+ */
+export function getXY(e: MouseTouchEvent) {
+ let clientX = 0,
+ clientY = 0;
+ if (isTouchEvent(e)) {
+ const touch = e.targetTouches[0];
+ clientX = touch.pageX;
+ clientY = touch.pageY;
+ } else {
+ clientX = e.clientX;
+ clientY = e.clientY;
+ }
+
+ return { clientX, clientY };
+}
+
+function isTouchEvent(val: unknown): val is TouchEvent {
+ const typeStr = Object.prototype.toString.call(val);
+ return typeStr.substring(8, typeStr.length - 1) === 'TouchEvent';
+}
+
+export const getLength = (x: number, y: number) => Math.sqrt(x * x + y * y);
+
+export const degToRadian = (deg: number) => (deg * Math.PI) / 180;
+const cos = (deg: number) => Math.cos(degToRadian(deg));
+const sin = (deg: number) => Math.sin(degToRadian(deg));
+/**
+ * 计算并返回给定类型变换的新样式。
+ *
+ * @param {string} type - 变换的类型。
+ * @param {any} rect - 矩形对象。
+ * @param {number} deltaW - 宽度变化。
+ * @param {number} deltaH - 高度变化。
+ * @param {number | undefined} ratio - 比例。
+ * @param {number} minWidth - 最小宽度。
+ * @param {number} minHeight - 最小高度。
+ * @returns {Object} 矩形的新位置和大小。
+ */
+export const getNewStyle = (
+ type: string,
+ rect: any,
+ deltaW: number,
+ deltaH: number,
+ ratio: number | undefined,
+ minWidth: number,
+ minHeight: number
+) => {
+ // eslint-disable-next-line prefer-const
+ let { width, height, centerX, centerY, rotateAngle } = rect;
+ const widthFlag = width < 0 ? -1 : 1;
+ const heightFlag = height < 0 ? -1 : 1;
+ width = Math.abs(width);
+ height = Math.abs(height);
+ switch (type) {
+ case 'r': {
+ const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth);
+ width = widthAndDeltaW.width;
+ deltaW = widthAndDeltaW.deltaW;
+ if (ratio) {
+ deltaH = deltaW / ratio;
+ height = width / ratio;
+ // 左上角固定
+ centerX += (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle);
+ centerY += (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle);
+ } else {
+ // 左边固定
+ centerX += (deltaW / 2) * cos(rotateAngle);
+ centerY += (deltaW / 2) * sin(rotateAngle);
+ }
+ break;
+ }
+ case 'tr': {
+ deltaH = -deltaH;
+ const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth);
+ width = widthAndDeltaW.width;
+ deltaW = widthAndDeltaW.deltaW;
+ const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight);
+ height = heightAndDeltaH.height;
+ deltaH = heightAndDeltaH.deltaH;
+ if (ratio) {
+ deltaW = deltaH * ratio;
+ width = height * ratio;
+ }
+ centerX += (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle);
+ centerY += (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle);
+ break;
+ }
+ case 'br': {
+ const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth);
+ width = widthAndDeltaW.width;
+ deltaW = widthAndDeltaW.deltaW;
+ const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight);
+ height = heightAndDeltaH.height;
+ deltaH = heightAndDeltaH.deltaH;
+ if (ratio) {
+ deltaW = deltaH * ratio;
+ width = height * ratio;
+ }
+ centerX += (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle);
+ centerY += (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle);
+ break;
+ }
+ case 'bc': {
+ const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight);
+ height = heightAndDeltaH.height;
+ deltaH = heightAndDeltaH.deltaH;
+ if (ratio) {
+ deltaW = deltaH * ratio;
+ width = height * ratio;
+ // 左上角固定
+ centerX += (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle);
+ centerY += (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle);
+ } else {
+ // 上边固定
+ centerX -= (deltaH / 2) * sin(rotateAngle);
+ centerY += (deltaH / 2) * cos(rotateAngle);
+ }
+ break;
+ }
+ case 'bl': {
+ deltaW = -deltaW;
+ const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth);
+ width = widthAndDeltaW.width;
+ deltaW = widthAndDeltaW.deltaW;
+ const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight);
+ height = heightAndDeltaH.height;
+ deltaH = heightAndDeltaH.deltaH;
+ if (ratio) {
+ height = width / ratio;
+ deltaH = deltaW / ratio;
+ }
+ centerX -= (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle);
+ centerY -= (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle);
+ break;
+ }
+ case 'l': {
+ deltaW = -deltaW;
+ const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth);
+ width = widthAndDeltaW.width;
+ deltaW = widthAndDeltaW.deltaW;
+ if (ratio) {
+ height = width / ratio;
+ deltaH = deltaW / ratio;
+ // 右上角固定
+ centerX -= (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle);
+ centerY -= (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle);
+ } else {
+ // 右边固定
+ centerX -= (deltaW / 2) * cos(rotateAngle);
+ centerY -= (deltaW / 2) * sin(rotateAngle);
+ }
+ break;
+ }
+ case 'tl': {
+ deltaW = -deltaW;
+ deltaH = -deltaH;
+ const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth);
+ width = widthAndDeltaW.width;
+ deltaW = widthAndDeltaW.deltaW;
+ const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight);
+ height = heightAndDeltaH.height;
+ deltaH = heightAndDeltaH.deltaH;
+ if (ratio) {
+ width = height * ratio;
+ deltaW = deltaH * ratio;
+ }
+ centerX -= (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle);
+ centerY -= (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle);
+ break;
+ }
+ case 'tc': {
+ deltaH = -deltaH;
+ const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight);
+ height = heightAndDeltaH.height;
+ deltaH = heightAndDeltaH.deltaH;
+ if (ratio) {
+ width = height * ratio;
+ deltaW = deltaH * ratio;
+ // 左下角固定
+ centerX += (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle);
+ centerY += (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle);
+ } else {
+ centerX += (deltaH / 2) * sin(rotateAngle);
+ centerY -= (deltaH / 2) * cos(rotateAngle);
+ }
+ break;
+ }
+ }
+
+ return {
+ position: {
+ centerX,
+ centerY
+ },
+ size: {
+ width: width * widthFlag,
+ height: height * heightFlag
+ }
+ };
+};
+/**
+ * 根据给定的参数设置高度和 deltaH 值。
+ *
+ * @param {number} height - 当前的高度值。
+ * @param {number} deltaH - 高度变化值。
+ * @param {number} minHeight - 最小高度值。
+ * @return {object} - 包含更新后的高度和 deltaH 值的对象。
+ */
+const setHeightAndDeltaH = (height: number, deltaH: number, minHeight: number) => {
+ const expectedHeight = height + deltaH;
+ if (expectedHeight > minHeight) {
+ height = expectedHeight;
+ } else {
+ deltaH = minHeight - height;
+ height = minHeight;
+ }
+ return { height, deltaH };
+};
+/**
+ * 设置元素的宽度和deltaW值。
+ *
+ * @param {number} width - 元素的当前宽度。
+ * @param {number} deltaW - 元素宽度的变化量。
+ * @param {number} minWidth - 元素的最小宽度。
+ * @return {Object} - 包含更新后的宽度和deltaW值的对象。
+ */
+const setWidthAndDeltaW = (width: number, deltaW: number, minWidth: number) => {
+ const expectedWidth = width + deltaW;
+ if (expectedWidth > minWidth) {
+ width = expectedWidth;
+ } else {
+ deltaW = minWidth - width;
+ width = minWidth;
+ }
+ return { width, deltaW };
+};
+/**
+ * 根据矩形的中心坐标、尺寸和角度计算左上角的位置。
+ *
+ * @param {object} params - 计算的参数。
+ * @param {number} params.centerX - 矩形的中心点的 x 坐标。
+ * @param {number} params.centerY - 矩形的中心点的 y 坐标。
+ * @param {number} params.width - 矩形的宽度。
+ * @param {number} params.height - 矩形的高度。
+ * @param {number} params.angle - 矩形的旋转角度。
+ * @return {object} - 矩形的左上角位置。
+ */
+export const centerToTL = ({
+ centerX,
+ centerY,
+ width,
+ height,
+ angle
+}: any): IDzrPropsModelValue => ({
+ top: centerY - height / 2,
+ left: centerX - width / 2,
+ width,
+ height,
+ angle
+});
+/**
+ * 格式化数据并返回一个包含更新后尺寸和位置的对象。
+ *
+ * @param {IDzrPropsModelValue} data - 包含宽度和高度的数据。
+ * @param {number} centerX - 中心点的x坐标。
+ * @param {number} centerY - 中心点的y坐标。
+ * @return {object} - 一个包含更新后尺寸和位置的对象。
+ */
+export const formatData = (data: IDzrPropsModelValue, centerX: number, centerY: number) => {
+ const { width, height } = data;
+ return {
+ width: Math.abs(width),
+ height: Math.abs(height),
+ left: centerX - Math.abs(width) / 2,
+ top: centerY - Math.abs(height) / 2
+ };
+};
+/**
+ * 生成随机字符串
+ * @param len 生成个数
+ */
+export const randomString = (len?: number) => {
+ len = len || 10;
+ const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ const maxPos = str.length;
+ let random_str = '';
+ for (let i = 0; i < len; i++) {
+ random_str += str.charAt(Math.floor(Math.random() * maxPos));
+ }
+ return random_str;
+};
diff --git a/src/components/mt-dzr/utils/types.ts b/src/components/mt-dzr/utils/types.ts
new file mode 100644
index 0000000..c5e344a
--- /dev/null
+++ b/src/components/mt-dzr/utils/types.ts
@@ -0,0 +1 @@
+export type MouseTouchEvent = MouseEvent | TouchEvent;
diff --git a/src/components/mt-edit/ace-edit.ts b/src/components/mt-edit/ace-edit.ts
new file mode 100644
index 0000000..27213d8
--- /dev/null
+++ b/src/components/mt-edit/ace-edit.ts
@@ -0,0 +1,78 @@
+import ace from 'ace-builds';
+
+import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url';
+ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl);
+
+import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url';
+ace.config.setModuleUrl('ace/mode/base', workerBaseUrl);
+
+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
+import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
+ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
+import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url';
+ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl);
+
+import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url';
+ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl);
+import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
+ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
+import snippetsJavascriptUrl from 'ace-builds/src-noconflict/snippets/javascript?url';
+ace.config.setModuleUrl('ace/snippets/javascript', snippetsJavascriptUrl);
+
+import 'ace-builds/src-noconflict/ext-language_tools';
+// ace.require('ace/ext/language_tools');
+const langTools = ace.require('ace/ext/language_tools');
+langTools.addCompleter({
+ getCompletions: function (
+ _editor: any,
+ _session: any,
+ _pos: any,
+ prefix: string | any[],
+ callback: (
+ arg0: null,
+ arg1: {
+ name: string; //显示的名称
+ value: string; //插入的值，
+ score: number; //分数
+ meta: string; //描述
+ }[]
+ ) => void
+ ) {
+ if (prefix.length === 0) {
+ callback(null, []);
+ return;
+ }
+ callback(null, [
+ {
+ name: '$mtEventCallBack',
+ value: '$mtEventCallBack(type,$item_info.id)',
+ score: 1000,
+ meta: '执行订阅回调函数'
+ },
+ {
+ name: '$mtElMessage',
+ value: '$mtElMessage.success("成功")',
+ score: 1000,
+ meta: '消息提示'
+ },
+ {
+ name: '$mtElMessageBox',
+ value: `$mtElMessageBox.alert('This is a message', 'Title', {
+ confirmButtonText: 'OK',
+ callback: (action) => {
+ console.log(action)
+ },
+ })`,
+ score: 1000,
+ meta: '消息弹出框'
+ },
+ {
+ name: '$item_info',
+ value: '$item_info',
+ score: 1000,
+ meta: '回调函数中获取当前触发事件图形的信息'
+ }
+ ]);
+ }
+});
diff --git a/src/components/mt-edit/assets/css/custom_ani.css b/src/components/mt-edit/assets/css/custom_ani.css
new file mode 100644
index 0000000..97017d8
--- /dev/null
+++ b/src/components/mt-edit/assets/css/custom_ani.css
@@ -0,0 +1,37 @@
+@-webkit-keyframes rotate360 {
+ 0% {
+ -webkit-transform: rotate3d(0, 0, 1, 0deg);
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+ 50% {
+ -webkit-transform: rotate3d(0, 0, 1, 180deg);
+ transform: rotate3d(0, 0, 1, 180deg);
+ }
+ to {
+ -webkit-transform: rotate3d(0, 0, 1, 360deg);
+ transform: rotate3d(0, 0, 1, 360deg);
+ }
+}
+
+@keyframes rotate360 {
+ 0% {
+ -webkit-transform: rotate3d(0, 0, 1, 0deg);
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+ 50% {
+ -webkit-transform: rotate3d(0, 0, 1, 180deg);
+ transform: rotate3d(0, 0, 1, 180deg);
+ }
+ to {
+ -webkit-transform: rotate3d(0, 0, 1, 360deg);
+ transform: rotate3d(0, 0, 1, 360deg);
+ }
+}
+
+.animate__rotate360 {
+ -webkit-animation-name: rotate360;
+ animation-name: rotate360;
+ animation-timing-function: linear;
+ -webkit-transform-origin: center;
+ transform-origin: center;
+}
diff --git a/src/components/mt-edit/components/context-menu/index.vue b/src/components/mt-edit/components/context-menu/index.vue
new file mode 100644
index 0000000..1b28ef4
--- /dev/null
+++ b/src/components/mt-edit/components/context-menu/index.vue
@@ -0,0 +1,86 @@
+
+
+
+ -
+
-
+
+ {{ item.title }} + {{ item.hot_key }} +
+
+
+
+
+
+
+
+
+ {{ node.label }}
+
+
+
+
diff --git a/src/components/mt-edit/components/group-render/index.vue b/src/components/mt-edit/components/group-render/index.vue
new file mode 100644
index 0000000..e9458ea
--- /dev/null
+++ b/src/components/mt-edit/components/group-render/index.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/import-json/index.vue b/src/components/mt-edit/components/import-json/index.vue
new file mode 100644
index 0000000..3f52548
--- /dev/null
+++ b/src/components/mt-edit/components/import-json/index.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/footer-panel/index.vue b/src/components/mt-edit/components/layout/footer-panel/index.vue
new file mode 100644
index 0000000..a0ae5f0
--- /dev/null
+++ b/src/components/mt-edit/components/layout/footer-panel/index.vue
@@ -0,0 +1,10 @@
+
+
+ Copyright (c) 2023
+
+ 咬轮猫
+
+
+
diff --git a/src/components/mt-edit/components/layout/header-panel/index.vue b/src/components/mt-edit/components/layout/header-panel/index.vue
new file mode 100644
index 0000000..f9cbf55
--- /dev/null
+++ b/src/components/mt-edit/components/layout/header-panel/index.vue
@@ -0,0 +1,366 @@
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/left-aside/index.vue b/src/components/mt-edit/components/layout/left-aside/index.vue
new file mode 100644
index 0000000..3f740d3
--- /dev/null
+++ b/src/components/mt-edit/components/layout/left-aside/index.vue
@@ -0,0 +1,313 @@
+
+
+
+
+
+
+
+
+ Mt-Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{
+ headerPanelProps.realTimeData.text
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/main-panel/index.vue b/src/components/mt-edit/components/layout/main-panel/index.vue
new file mode 100644
index 0000000..9805189
--- /dev/null
+++ b/src/components/mt-edit/components/layout/main-panel/index.vue
@@ -0,0 +1,1282 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+ 管理
+
+
+
+
+
+
+
+
+
+
+ 本地上传
+
+
+
+ 全选
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+ 删除
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/right-aside/index.vue b/src/components/mt-edit/components/layout/right-aside/index.vue
new file mode 100644
index 0000000..d7730ba
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/index.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/right-aside/json-edit.vue b/src/components/mt-edit/components/layout/right-aside/json-edit.vue
new file mode 100644
index 0000000..cb0b555
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/json-edit.vue
@@ -0,0 +1,43 @@
+
+
+ 点击编辑
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/right-aside/page-setting.vue b/src/components/mt-edit/components/layout/right-aside/page-setting.vue
new file mode 100644
index 0000000..23c9d74
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/page-setting.vue
@@ -0,0 +1,360 @@
+
+
+ *
+
+
+ 自定义:
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+ {{
+ common_animate_list
+ .map((m) => m.children)
+ .reduce((pre, curr) => {
+ return pre.concat(curr);
+ })
+ .find((f) => f.value == select_val)?.label
+ }}
+
+ 新增
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/index.vue b/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/index.vue
new file mode 100644
index 0000000..de06f45
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/index.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+ {{ animate.label }}
+
+
+ 添加事件
+
+
+
+
+
+
+
+
+ 新增一组
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/input-target-value.vue b/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/input-target-value.vue
new file mode 100644
index 0000000..95af298
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/input-target-value.vue
@@ -0,0 +1,31 @@
+
+
+
+ 事件{{ event_list_index + 1 }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 点击配置
+
+
+ 点击编写
+
+
+ (不填直接触发)
+
+
+
+ 当
+
+
+ 图形
+
+
+ 属性
+
+
+ 时
+
+
+ 触发该事件
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-setting.vue b/src/components/mt-edit/components/layout/right-aside/select-item-setting.vue
new file mode 100644
index 0000000..9a363f9
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-setting.vue
@@ -0,0 +1,297 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/render-core/index.vue b/src/components/mt-edit/components/render-core/index.vue
new file mode 100644
index 0000000..6563071
--- /dev/null
+++ b/src/components/mt-edit/components/render-core/index.vue
@@ -0,0 +1,284 @@
+
+
+
+
+ {{ prop_item.title }}:{{ prop_item.val }}
+
+ ![]()
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/selected-area/index.vue b/src/components/mt-edit/components/selected-area/index.vue
new file mode 100644
index 0000000..42e38cc
--- /dev/null
+++ b/src/components/mt-edit/components/selected-area/index.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
diff --git a/src/components/mt-edit/components/selected-area/types.ts b/src/components/mt-edit/components/selected-area/types.ts
new file mode 100644
index 0000000..51c5166
--- /dev/null
+++ b/src/components/mt-edit/components/selected-area/types.ts
@@ -0,0 +1,6 @@
+export interface IAreaBinfo {
+ width: number;
+ height: number;
+ top: number;
+ left: number;
+}
diff --git a/src/components/mt-edit/components/svg-analysis/index.vue b/src/components/mt-edit/components/svg-analysis/index.vue
new file mode 100644
index 0000000..e07032e
--- /dev/null
+++ b/src/components/mt-edit/components/svg-analysis/index.vue
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/src/components/mt-edit/components/svg-render/index.vue b/src/components/mt-edit/components/svg-render/index.vue
new file mode 100644
index 0000000..dfbdf8f
--- /dev/null
+++ b/src/components/mt-edit/components/svg-render/index.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 确定
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/mt-edit/store/cache.ts b/src/components/mt-edit/store/cache.ts
new file mode 100644
index 0000000..ffae428
--- /dev/null
+++ b/src/components/mt-edit/store/cache.ts
@@ -0,0 +1,33 @@
+import { nextTick, reactive } from 'vue';
+import type { CacheBoundingBox, ICache, IDoneJson } from './types';
+import { objectDeepClone } from '../utils';
+
+export const cacheStore: ICache = reactive({
+ boundingBox: [],
+ setBoundingBox: (val: CacheBoundingBox[]) => {
+ cacheStore.boundingBox = val;
+ },
+ adsorbPoint: [],
+ setAdsorbPoint(val) {
+ cacheStore.adsorbPoint = val;
+ },
+ copy: [],
+ setCopy(val) {
+ cacheStore.copy = val;
+ },
+ history: [[]],
+ historyIndex: 0,
+ addHistory(val: IDoneJson[]) {
+ nextTick(() => {
+ if (cacheStore.historyIndex + 1 < cacheStore.history.length) {
+ cacheStore.history.splice(cacheStore.historyIndex + 1);
+ }
+ cacheStore.history.push(objectDeepClone(val));
+ cacheStore.historyIndex = cacheStore.history.length - 1;
+ if (cacheStore.history.length > 20) {
+ cacheStore.history.shift();
+ cacheStore.historyIndex = cacheStore.history.length - 1;
+ }
+ });
+ }
+});
diff --git a/src/components/mt-edit/store/config.ts b/src/components/mt-edit/store/config.ts
new file mode 100644
index 0000000..4d89488
--- /dev/null
+++ b/src/components/mt-edit/store/config.ts
@@ -0,0 +1,415 @@
+import { reactive } from 'vue';
+import type { IConfig, ILeftAsideConfigItem } from './types';
+const sysComponentItems: ILeftAsideConfigItem[] = [
+ {
+ id: 'sys-line',
+ title: '自由连线',
+ type: 'sys-line',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
+ props: {
+ stroke: {
+ title: '线条颜色',
+ type: 'color',
+ val: '#ff0000'
+ },
+ 'stroke-width': {
+ title: '线条宽度',
+ type: 'number',
+ val: 2
+ },
+ 'marker-start': {
+ title: '起点箭头',
+ type: 'switch',
+ val: false
+ },
+ 'marker-end': {
+ title: '终点箭头',
+ type: 'switch',
+ val: true
+ },
+ point_position: {
+ title: '点坐标',
+ type: 'jsonEdit',
+ val: [
+ {
+ x: 0,
+ y: 0
+ },
+ {
+ x: 100,
+ y: 0
+ }
+ ],
+ disabled: true
+ },
+ ani_type: {
+ title: '动画类型',
+ type: 'select',
+ val: 'none',
+ options: [
+ {
+ label: '无',
+ value: 'none'
+ },
+ {
+ label: '电流',
+ value: 'electricity'
+ },
+ {
+ label: '轨迹',
+ value: 'track'
+ },
+ {
+ label: '水珠',
+ value: 'waterdrop'
+ }
+ ]
+ },
+ ani_dur: { title: '持续时间', type: 'number', val: 20 },
+ ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
+ ani_reverse: { title: '动画反转', type: 'switch', val: false },
+ ani_play: { title: '动画播放', type: 'switch', val: true },
+ bind_anchors: {
+ title: '锚点绑定',
+ type: 'jsonEdit',
+ val: {
+ start: null,
+ end: null
+ },
+ disabled: true
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ },
+ {
+ id: 'sys-line-vertical',
+ title: '自由连线-竖线',
+ type: 'sys-line',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
+ props: {
+ stroke: {
+ title: '线条颜色',
+ type: 'color',
+ val: '#ff0000'
+ },
+ 'stroke-width': {
+ title: '线条宽度',
+ type: 'number',
+ val: 2
+ },
+ 'marker-start': {
+ title: '起点箭头',
+ type: 'switch',
+ val: false
+ },
+ 'marker-end': {
+ title: '终点箭头',
+ type: 'switch',
+ val: true
+ },
+ point_position: {
+ title: '点坐标',
+ type: 'jsonEdit',
+ val: [
+ {
+ x: 0,
+ y: 0
+ },
+ {
+ x: 0,
+ y: 100
+ }
+ ],
+ disabled: true
+ },
+ ani_type: {
+ title: '动画类型',
+ type: 'select',
+ val: 'none',
+ options: [
+ {
+ label: '无',
+ value: 'none'
+ },
+ {
+ label: '电流',
+ value: 'electricity'
+ },
+ {
+ label: '轨迹',
+ value: 'track'
+ },
+ {
+ label: '水珠',
+ value: 'waterdrop'
+ }
+ ]
+ },
+ ani_dur: { title: '持续时间', type: 'number', val: 20 },
+ ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
+ ani_reverse: { title: '动画反转', type: 'switch', val: false },
+ ani_play: { title: '动画播放', type: 'switch', val: true },
+ bind_anchors: {
+ title: '锚点绑定',
+ type: 'jsonEdit',
+ val: {
+ start: null,
+ end: null
+ },
+ disabled: true
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ },
+ {
+ id: 'text-vue',
+ title: '文字',
+ type: 'vue',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0ibTMyIDQxNS41bDEyMC0zMjBsMTIwIDMyMG0tNDItMTEySDc0bTI1Mi02NGMxMi4xOS0yOC42OSA0MS00OCA3NC00OGgwYzQ2IDAgODAgMzIgODAgODB2MTQ0Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTMyMCAzNTguNWMwIDM2IDI2Ljg2IDU4IDYwIDU4YzU0IDAgMTAwLTI3IDEwMC0xMDZ2LTE1Yy0yMCAwLTU4IDEtOTIgNWMtMzIuNzcgMy44Ni02OCAxOS02OCA1OCIvPjwvc3ZnPg==`,
+ props: {
+ text: {
+ title: '文字内容',
+ type: 'input',
+ val: '文字'
+ },
+ fontFamily: {
+ title: '字体',
+ type: 'select',
+ val: '黑体',
+ options: [
+ {
+ value: '黑体',
+ label: '黑体'
+ },
+ {
+ value: '宋体',
+ label: '宋体'
+ }
+ ]
+ },
+ fontSize: {
+ title: '文字大小',
+ type: 'number',
+ val: 18
+ },
+ fill: {
+ title: '文字颜色',
+ type: 'color',
+ val: '#FFF700'
+ },
+ vertical: {
+ title: '竖排展示',
+ type: 'switch',
+ val: false
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ },
+ {
+ id: 'card-vue',
+ title: '卡片',
+ type: 'vue',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBhdGggZD0iTTE0LjUgM2EuNS41IDAgMCAxIC41LjV2OWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjV2LTlhLjUuNSAwIDAgMSAuNS0uNXptLTEzLTFBMS41IDEuNSAwIDAgMCAwIDMuNXY5QTEuNSAxLjUgMCAwIDAgMS41IDE0aDEzYTEuNSAxLjUgMCAwIDAgMS41LTEuNXYtOUExLjUgMS41IDAgMCAwIDE0LjUgMnoiLz48cGF0aCBkPSJNMyA1LjVhLjUuNSAwIDAgMSAuNS0uNWg5YS41LjUgMCAwIDEgMCAxaC05YS41LjUgMCAwIDEtLjUtLjVNMyA4YS41LjUgMCAwIDEgLjUtLjVoOWEuNS41IDAgMCAxIDAgMWgtOUEuNS41IDAgMCAxIDMgOG0wIDIuNWEuNS41IDAgMCAxIC41LS41aDZhLjUuNSAwIDAgMSAwIDFoLTZhLjUuNSAwIDAgMS0uNS0uNSIvPjwvZz48L3N2Zz4=`,
+ props: {
+ shadow: {
+ title: '阴影显示时机',
+ type: 'select',
+ val: 'always',
+ options: [
+ { label: '总是显示', value: 'always' },
+ { label: '鼠标悬浮', value: 'hover' },
+ { label: '不显示', value: 'never' }
+ ]
+ },
+ backGroundColor: {
+ title: '背景颜色',
+ type: 'color',
+ val: '#ffffff'
+ },
+ boxShadow: {
+ title: '阴影颜色',
+ type: 'color',
+ val: '#ffffff'
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ },
+ {
+ id: 'now-time-vue',
+ title: '当前时间',
+ type: 'vue',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTI1NiA2NEMxNTAgNjQgNjQgMTUwIDY0IDI1NnM4NiAxOTIgMTkyIDE5MnMxOTItODYgMTkyLTE5MlMzNjIgNjQgMjU2IDY0WiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiIGQ9Ik0yNTYgMTI4djE0NGg5NiIvPjwvc3ZnPg==`,
+ props: {
+ fontColor: {
+ title: '文字颜色',
+ type: 'color',
+ val: '#000000'
+ },
+ dateSize: {
+ title: '日期文字大小',
+ type: 'number',
+ val: 12
+ },
+ weekSize: {
+ title: '星期文字大小',
+ type: 'number',
+ val: 12
+ },
+ timeSize: {
+ title: '时间文字大小',
+ type: 'number',
+ val: 24
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ },
+ {
+ id: 'kv-vue',
+ title: '键值对',
+ type: 'vue',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTMgNmEzIDMgMCAwIDEgMy0zaDhhMyAzIDAgMCAxIDMgM3Y4YTMgMyAwIDAgMS0zIDNINmEzIDMgMCAwIDEtMy0zem0zLTJhMiAyIDAgMCAwLTIgMnYzLjVoNS41VjR6bTMuNSA2LjVINFYxNGEyIDIgMCAwIDAgMiAyaDMuNXptMSAwVjE2SDE0YTIgMiAwIDAgMCAyLTJ2LTMuNXptNS41LTFWNmEyIDIgMCAwIDAtMi0yaC0zLjV2NS41eiIvPjwvc3ZnPg==`,
+ props: {
+ border: {
+ title: '边框',
+ type: 'switch',
+ val: true
+ },
+ fontFamily: {
+ title: '字体',
+ type: 'select',
+ val: '黑体',
+ options: [
+ {
+ value: '黑体',
+ label: '黑体'
+ },
+ {
+ value: '宋体',
+ label: '宋体'
+ }
+ ]
+ },
+ fontSize: {
+ title: '文字大小',
+ type: 'number',
+ val: 18
+ },
+ label: {
+ title: '键名',
+ type: 'input',
+ val: '键名'
+ },
+ labelWidth: {
+ title: '键名宽度',
+ type: 'number',
+ val: 50
+ },
+ value: {
+ title: '键值',
+ type: 'input',
+ val: '键值'
+ },
+ valueWidth: {
+ title: '键值宽度',
+ type: 'number',
+ val: 50
+ },
+ color: {
+ title: '文字颜色',
+ type: 'color',
+ val: '#FFF700'
+ },
+ borderColor: {
+ title: '边框颜色',
+ type: 'color',
+ val: '#000000'
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ },
+ {
+ id: 'sys-button-vue',
+ title: '按钮',
+ type: 'vue',
+ thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yIDhhMyAzIDAgMCAxIDMtM2gxMGEzIDMgMCAwIDEgMyAzdjNhMyAzIDAgMCAxLTMgM0g1YTMgMyAwIDAgMS0zLTNWOFptNyAxLjVhLjUuNSAwIDAgMCAuNS41SDE0YS41LjUgMCAwIDAgMC0xSDkuNWEuNS41IDAgMCAwLS41LjVabS0xIDBhMS41IDEuNSAwIDEgMC0zIDBhMS41IDEuNSAwIDAgMCAzIDBaIi8+PC9zdmc+`,
+ props: {
+ text: {
+ title: '按钮文本',
+ type: 'input',
+ val: '按钮文本'
+ },
+ type: {
+ title: '按钮类型',
+ type: 'select',
+ val: '',
+ options: [
+ {
+ value: '',
+ label: '默认'
+ },
+ {
+ value: 'primary',
+ label: '主要'
+ },
+ {
+ value: 'success',
+ label: '成功'
+ },
+ {
+ value: 'warning',
+ label: '警告'
+ },
+ {
+ value: 'danger',
+ label: '危险'
+ }
+ ]
+ },
+ round: {
+ title: '圆角',
+ type: 'switch',
+ val: false
+ }
+ },
+ common_animations: {
+ val: '',
+ delay: 'delay-0s',
+ speed: 'slow',
+ repeat: 'infinite'
+ }
+ }
+];
+export const configStore: IConfig = reactive({
+ sysComponent: sysComponentItems,
+ lineRenderOffset: 10
+});
diff --git a/src/components/mt-edit/store/context-menu.ts b/src/components/mt-edit/store/context-menu.ts
new file mode 100644
index 0000000..9139ed3
--- /dev/null
+++ b/src/components/mt-edit/store/context-menu.ts
@@ -0,0 +1,73 @@
+import { reactive } from 'vue';
+import type { ContextMenuInfoType, IContextMenu } from './types';
+
+export const contextMenuStore: IContextMenu = reactive({
+ menuInfo: {
+ display: false,
+ left: 0,
+ top: 0,
+ info: {
+ selectAll: {
+ title: '全选',
+ hot_key: 'Ctrl + A',
+ enable: false
+ },
+ copy: {
+ title: '复制',
+ hot_key: 'Ctrl + C',
+ enable: false
+ },
+ paste: {
+ title: '粘贴',
+ hot_key: 'Ctrl + V',
+ enable: false
+ },
+ delete: {
+ title: '删除',
+ hot_key: 'Delete',
+ enable: false
+ },
+ group: {
+ title: '组合',
+ hot_key: 'Ctrl + G',
+ enable: false
+ },
+ ungroup: {
+ title: '取消组合',
+ hot_key: 'Ctrl + U',
+ enable: false
+ },
+ moveTop: {
+ title: '置顶',
+ hot_key: 'Ctrl + Right',
+ enable: false
+ },
+ moveUp: {
+ title: '上移',
+ hot_key: 'Ctrl + Up',
+ enable: false
+ },
+ moveDown: {
+ title: '下移',
+ hot_key: 'Ctrl + Down',
+ enable: false
+ },
+ moveBottom: {
+ title: '置底',
+ hot_key: 'Ctrl + Left',
+ enable: false
+ }
+ }
+ },
+ setMenuInfo: (val: IContextMenu['menuInfo']) => {
+ contextMenuStore.menuInfo = val;
+ },
+ setDisplayItem: (val: ContextMenuInfoType[]) => {
+ for (const key in contextMenuStore.menuInfo.info) {
+ contextMenuStore.menuInfo.info[key as ContextMenuInfoType].enable = false;
+ }
+ val.forEach((f) => {
+ contextMenuStore.menuInfo.info[f].enable = true;
+ });
+ }
+});
diff --git a/src/components/mt-edit/store/global.ts b/src/components/mt-edit/store/global.ts
new file mode 100644
index 0000000..b6208e4
--- /dev/null
+++ b/src/components/mt-edit/store/global.ts
@@ -0,0 +1,112 @@
+import { reactive } from 'vue';
+import type {
+ GlobalStoreIntention,
+ IDoneJson,
+ IGlobalStore,
+ IGlobalStoreCreateItemInfo,
+ IRealTimeData
+} from './types';
+export const globalStore: IGlobalStore = reactive({
+ intention: 'none',
+ create_item_info: null,
+ selected_items_id: [],
+ done_json: [],
+ canvasCfg: {
+ width: 1920,
+ height: 1080,
+ scale: 1,
+ color: '',
+ img: '',
+ guide: true,
+ adsorp: true,
+ adsorp_diff: 5,
+ transform_origin: {
+ x: 0,
+ y: 0
+ },
+ drag_offset: {
+ x: 0,
+ y: 0
+ }
+ },
+ gridCfg: {
+ enabled: true,
+ align: true,
+ size: 10
+ },
+ guideCfg: {
+ x: {
+ display: false,
+ top: 0
+ },
+ y: {
+ display: false,
+ left: 0
+ }
+ },
+ lock: false,
+ real_time_data: {
+ show: false,
+ text: ''
+ },
+ adsorp_diff: {
+ x: 0,
+ y: 0
+ },
+ setIntention: (val: GlobalStoreIntention) => {
+ globalStore.intention = val;
+ },
+ setCreateItemInfo: (val: IGlobalStoreCreateItemInfo | null) => {
+ globalStore.create_item_info = val;
+ },
+ setGlobalStoreDoneJson: (val: IDoneJson[]) => {
+ globalStore.done_json = val;
+ },
+ //取消所有组件选中
+ cancelAllSelect: () => {
+ const done_json_temp = [...globalStore.done_json].map((m) => {
+ if (m.active) {
+ m.active = false;
+ }
+ return m;
+ });
+ globalStore.setGlobalStoreDoneJson(done_json_temp);
+ globalStore.selected_items_id = [];
+ },
+ //刷新选中的id
+ refreshSelectedItemsId: () => {
+ globalStore.selected_items_id = globalStore.done_json.filter((m) => m.active).map((m) => m.id);
+ },
+ //删除选中的组件
+ deleteSelectedItems: () => {
+ const done_json_temp = [...globalStore.done_json].filter(
+ (m) => !globalStore.selected_items_id.includes(m.id)
+ );
+ globalStore.setGlobalStoreDoneJson(done_json_temp);
+ globalStore.selected_items_id = [];
+ },
+ // 设置单个选中
+ setSingleSelect: (id: string) => {
+ globalStore.done_json.forEach((m) => {
+ if (m.id === id) {
+ m.active = true;
+ } else {
+ m.active = false;
+ }
+ });
+ globalStore.selected_items_id = [id];
+ },
+ setSelectItems: (ids: string[]) => {
+ globalStore.done_json.forEach((m) => {
+ if (ids.includes(m.id)) {
+ m.active = true;
+ } else {
+ m.active = false;
+ }
+ });
+ globalStore.selected_items_id = ids;
+ },
+ setRealTimeData: (val: IRealTimeData) => {
+ globalStore.real_time_data = val;
+ }
+});
diff --git a/src/components/mt-edit/store/left-aside.ts b/src/components/mt-edit/store/left-aside.ts
new file mode 100644
index 0000000..db35943
--- /dev/null
+++ b/src/components/mt-edit/store/left-aside.ts
@@ -0,0 +1,52 @@
+import { getCurrentInstance, reactive } from 'vue';
+import type { ILeftAside, ILeftAsideConfigItemPublic, ILeftAsideConfigItem } from './types';
+import { ElMessage } from 'element-plus';
+import { svgToSymbol } from '../utils';
+import { configStore } from './config';
+
+export const leftAsideStore: ILeftAside = reactive({
+ config: new Map
+
+
+
+
+
+
diff --git a/src/components/test/custom-demo/index.vue b/src/components/test/custom-demo/index.vue
new file mode 100644
index 0000000..cebf00b
--- /dev/null
+++ b/src/components/test/custom-demo/index.vue
@@ -0,0 +1,43 @@
+
+
+
+
diff --git a/src/components/test/my-button/index.vue b/src/components/test/my-button/index.vue
new file mode 100644
index 0000000..09d8358
--- /dev/null
+++ b/src/components/test/my-button/index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/test/my-input/index.vue b/src/components/test/my-input/index.vue
new file mode 100644
index 0000000..13f8f76
--- /dev/null
+++ b/src/components/test/my-input/index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/src/components/test/pie-charts/index.vue b/src/components/test/pie-charts/index.vue
new file mode 100644
index 0000000..bdd988d
--- /dev/null
+++ b/src/components/test/pie-charts/index.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
diff --git a/src/views/demo/edit-load.vue b/src/views/demo/edit-load.vue
new file mode 100644
index 0000000..113ca5b
--- /dev/null
+++ b/src/views/demo/edit-load.vue
@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
diff --git a/src/views/demo/event-callback.vue b/src/views/demo/event-callback.vue
new file mode 100644
index 0000000..270a1b3
--- /dev/null
+++ b/src/views/demo/event-callback.vue
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
new file mode 100644
index 0000000..e377033
--- /dev/null
+++ b/src/views/demo/index.vue
@@ -0,0 +1,74 @@
+
+
+ 插件能力展示
+
+
+
+
diff --git a/src/views/demo/set-node-attr.vue b/src/views/demo/set-node-attr.vue
new file mode 100644
index 0000000..4701a84
--- /dev/null
+++ b/src/views/demo/set-node-attr.vue
@@ -0,0 +1,83 @@
+
+
+
+
+ ![]()
+
+
+ {{ item.title }}
+
+ 改成红色
+ 改成绿色
+
+
+
diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
new file mode 100644
index 0000000..70e6ddd
--- /dev/null
+++ b/src/views/edit/index.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
new file mode 100644
index 0000000..e2f3986
--- /dev/null
+++ b/src/views/preview/index.vue
@@ -0,0 +1,19 @@
+
+