-
- 属性
- 文本
-
+
@@ -19,10 +15,11 @@
+../core
diff --git a/src/components/editor/config/context.ts b/src/components/editor/config/context.ts
deleted file mode 100644
index a8a0a67..0000000
--- a/src/components/editor/config/context.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { InjectionKey, Ref } from "vue";
-import { Block } from "./block";
-import { Container } from "./container";
-import { ReferenceLine } from "./ref-line";
-
-export interface Current {
- block: Block | null;
- rightPanelCollapsed: boolean;
-}
-
-export interface Context {
- /**
- * 运行时数据
- */
- currentBlock: Ref
;
- /**
- * 组件列表
- */
- blocks: Ref;
- /**
- * 画布配置
- */
- container: Ref;
- /**
- * 参考线
- */
- refLine: ReferenceLine;
- /**
- * 设置当前组件
- * @param block 组件
- * @returns
- */
- setCurrentBlock: (block: Block | null) => void;
- /**
- * 容器自适应
- */
- setContainerOrigin: () => void;
- /**
- * 保存数据
- */
- saveData: () => void;
- /**
- * 加载数据
- */
- loadData: () => void;
- /**
- * 预览
- */
- preview: () => void;
-}
-
-export const ContextKey = Symbol("ContextKey") as InjectionKey;
diff --git a/src/components/editor/config/scene.ts b/src/components/editor/config/scene.ts
deleted file mode 100644
index 85b97fb..0000000
--- a/src/components/editor/config/scene.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Ref } from "vue";
-import { Container } from ".";
-
-/**
- * 场景
- * @description 处理平移和缩放事件
- */
-export class Scene {
- private startX = 0;
- private startY = 0;
- private cacheX = 0;
- private cacheY = 0;
- public minZoom = 0.5;
- public maxZoom = 10;
- public zoomStep = 0.1;
-
- constructor(private container: Ref) {
- this.onMouseDown = this.onMouseDown.bind(this);
- this.onMouseMove = this.onMouseMove.bind(this);
- this.onMouseUp = this.onMouseUp.bind(this);
- this.onMouseWheel = this.onMouseWheel.bind(this);
- }
-
- onMouseDown(e: MouseEvent) {
- this.startX = e.x;
- this.startY = e.y;
- this.cacheX = this.container.value.x;
- this.cacheY = this.container.value.y;
- window.addEventListener("mousemove", this.onMouseMove);
- window.addEventListener("mouseup", this.onMouseUp);
- }
-
- onMouseMove(e: MouseEvent) {
- this.container.value.x = this.cacheX + (e.x - this.startX);
- this.container.value.y = this.cacheY + (e.y - this.startY);
- }
-
- onMouseUp() {
- window.removeEventListener("mousemove", this.onMouseMove);
- window.removeEventListener("mouseup", this.onMouseUp);
- }
-
- onMouseWheel(e: WheelEvent) {
- e.preventDefault();
-
- const el = e.currentTarget as HTMLElement;
- const rect = el.getBoundingClientRect();
- const x = (e.clientX - rect.x) / this.container.value.zoom;
- const y = (e.clientY - rect.y) / this.container.value.zoom;
- const delta = -e.deltaY > 0 ? this.zoomStep : -this.zoomStep;
-
- this.container.value.zoom += delta;
- if (this.container.value.zoom < this.minZoom) {
- this.container.value.zoom = this.minZoom;
- return;
- }
- if (this.container.value.zoom > this.maxZoom) {
- this.container.value.zoom = this.maxZoom;
- return;
- }
-
- this.container.value.x += -x * delta + el.offsetWidth * (delta / 2);
- this.container.value.y += -y * delta + el.offsetHeight * (delta / 2);
- }
-}
diff --git a/src/components/editor/config/block.ts b/src/components/editor/core/block.ts
similarity index 97%
rename from src/components/editor/config/block.ts
rename to src/components/editor/core/block.ts
index cb8767c..ff54355 100644
--- a/src/components/editor/config/block.ts
+++ b/src/components/editor/core/block.ts
@@ -1,3 +1,6 @@
+/**
+ * 组件参数
+ */
export interface Block {
/**
* 组件ID
diff --git a/src/components/editor/config/blocker.ts b/src/components/editor/core/blocker.ts
similarity index 97%
rename from src/components/editor/config/blocker.ts
rename to src/components/editor/core/blocker.ts
index 2230a01..fe7e006 100644
--- a/src/components/editor/config/blocker.ts
+++ b/src/components/editor/core/blocker.ts
@@ -1,6 +1,9 @@
import { Component } from "vue";
import { Block } from "./block";
+/**
+ * 组件配置
+ */
export interface Blocker {
/**
* 组件名称
diff --git a/src/components/editor/config/container.ts b/src/components/editor/core/container.ts
similarity index 93%
rename from src/components/editor/config/container.ts
rename to src/components/editor/core/container.ts
index 1156e60..710544c 100644
--- a/src/components/editor/config/container.ts
+++ b/src/components/editor/core/container.ts
@@ -1,3 +1,6 @@
+/**
+ * 画布配置
+ */
export interface Container {
/**
* 容器id
@@ -41,6 +44,9 @@ export interface Container {
bgColor: string;
}
+/**
+ * 画布默认配置
+ */
export const defaultContainer: Container = {
id: 11,
title: "国庆节喜庆版式设计",
diff --git a/src/components/editor/config/editor.ts b/src/components/editor/core/editor.ts
similarity index 93%
rename from src/components/editor/config/editor.ts
rename to src/components/editor/core/editor.ts
index 49e187d..d1c04b4 100644
--- a/src/components/editor/config/editor.ts
+++ b/src/components/editor/core/editor.ts
@@ -1,9 +1,10 @@
import { Container, defaultContainer } from "./container";
import { Block } from "./block";
-import { ReferenceLine } from "./ref-line";
+import { useReferenceLine } from "./ref-line";
import { BlockerMap } from "../blocks";
import { cloneDeep } from "lodash-es";
import { CSSProperties, InjectionKey } from "vue";
+import { useScene } from "./scene";
export const useEditor = () => {
/**
@@ -21,7 +22,11 @@ export const useEditor = () => {
/**
* 参考线
*/
- const refLine = new ReferenceLine(blocks, currentBlock as any);
+ const refLine = useReferenceLine(blocks, currentBlock);
+ /**
+ * 画布移动和缩放
+ */
+ const scene = useScene(container);
/**
* 添加组件
@@ -131,6 +136,7 @@ export const useEditor = () => {
blocks,
currentBlock,
refLine,
+ scene,
BlockerMap,
setCurrentBlock,
setContainerOrigin,
diff --git a/src/components/editor/config/index.ts b/src/components/editor/core/index.ts
similarity index 83%
rename from src/components/editor/config/index.ts
rename to src/components/editor/core/index.ts
index 8791e41..4bdcc85 100644
--- a/src/components/editor/config/index.ts
+++ b/src/components/editor/core/index.ts
@@ -1,6 +1,6 @@
export * from "./block";
export * from "./blocker";
export * from "./container";
-export * from "./context";
export * from "./ref-line";
export * from "./scene";
+export * from "./editor";
diff --git a/src/components/editor/config/ref-line.ts b/src/components/editor/core/ref-line.ts
similarity index 65%
rename from src/components/editor/config/ref-line.ts
rename to src/components/editor/core/ref-line.ts
index a54533a..3063d6c 100644
--- a/src/components/editor/config/ref-line.ts
+++ b/src/components/editor/core/ref-line.ts
@@ -1,71 +1,58 @@
import { Ref } from "vue";
import { Block } from "./block";
-import { Current } from "./context";
-import { getClosestValInSortedArr } from "./util";
-
-export interface DragRect {
- left: number;
- top: number;
- width: number;
- height: number;
-}
+import { getClosestValInSortedArr } from "../utils/closest";
/**
- * 参考线管理
+ * 组件参考线
+ * @param blocks 组件列表
+ * @param current 当前组件
+ * @returns
*/
-export class ReferenceLine {
- private xYsMap = new Map();
- private yXsMap = new Map();
- private sortedXs: number[] = [];
- private sortedYs: number[] = [];
- private xLines: { y: number; xs: number[] }[] = [];
- private yLines: { x: number; ys: number[] }[] = [];
- public active = ref(false);
- public xl = ref<{ x: number; y: number; w: number }[]>([]);
- public yl = ref<{ x: number; y: number; h: number }[]>([]);
-
- constructor(private blocks: Ref, private current: Ref) {
- this.updateRefLine = this.updateRefLine.bind(this);
- }
+export const useReferenceLine = (blocks: Ref, current: Ref) => {
+ let xYsMap = new Map();
+ let yXsMap = new Map();
+ let sortedXs: number[] = [];
+ let sortedYs: number[] = [];
+ const active = ref(false);
+ const xLines = ref<{ x: number; y: number; w: number }[]>([]);
+ const yLines = ref<{ x: number; y: number; h: number }[]>([]);
/**
* 记录所有组件坐标
*/
- recordBlocksXY() {
- this.clear();
- const { xYsMap, yXsMap, blocks, current } = this;
+ const recordBlocksXY = () => {
+ clear();
for (const block of blocks.value) {
- if (block === current.value.block) {
+ if (block === current.value) {
continue;
}
- const { minX, minY, midX, midY, maxX, maxY } = this.getBlockBox(block);
+ const { minX, minY, midX, midY, maxX, maxY } = getBlockBox(block);
+ addBoxToMap(xYsMap, minX, [minY, maxY]);
+ addBoxToMap(xYsMap, midX, [minY, maxY]);
+ addBoxToMap(xYsMap, maxX, [minY, maxY]);
- this.addBoxToMap(xYsMap, minX, [minY, maxY]);
- this.addBoxToMap(xYsMap, midX, [minY, maxY]);
- this.addBoxToMap(xYsMap, maxX, [minY, maxY]);
-
- this.addBoxToMap(yXsMap, minY, [minX, maxX]);
- this.addBoxToMap(yXsMap, midY, [minX, maxX]);
- this.addBoxToMap(yXsMap, maxY, [minX, maxX]);
+ addBoxToMap(yXsMap, minY, [minX, maxX]);
+ addBoxToMap(yXsMap, midY, [minX, maxX]);
+ addBoxToMap(yXsMap, maxY, [minX, maxX]);
}
- this.sortedXs = Array.from(xYsMap.keys()).sort((a, b) => a - b);
- this.sortedYs = Array.from(yXsMap.keys()).sort((a, b) => a - b);
- }
+ sortedXs = Array.from(xYsMap.keys()).sort((a, b) => a - b);
+ sortedYs = Array.from(yXsMap.keys()).sort((a, b) => a - b);
+ };
/**
* 添加组件坐标
*/
- addBoxToMap(map: Map, xOrY: number, xsOrYs: number[]) {
+ const addBoxToMap = (map: Map, xOrY: number, xsOrYs: number[]) => {
if (!map.get(xOrY)) {
map.set(xOrY, []);
}
map.get(xOrY)?.push(...xsOrYs);
- }
+ };
/**
* 获取组件左中右坐标
*/
- getBlockBox(block: Block) {
+ const getBlockBox = (block: Block) => {
const { x, y, w, h } = block ?? {};
return {
minX: x,
@@ -75,12 +62,12 @@ export class ReferenceLine {
maxX: x + w,
maxY: y + h,
};
- }
+ };
/**
* 获取组件左中右坐标
*/
- getRectBox(rect: DragRect) {
+ const getRectBox = (rect: DragRect) => {
const { left: x, top: y, width: w, height: h } = rect;
return {
minX: x,
@@ -90,18 +77,18 @@ export class ReferenceLine {
maxX: x + w,
maxY: y + h,
};
- }
+ };
/**
* 清理数据
*/
- clear() {
- this.xYsMap.clear();
- this.yXsMap.clear();
- this.sortedXs = [];
- this.sortedYs = [];
- this.xl.value = [];
- this.yl.value = [];
+ function clear() {
+ xYsMap.clear();
+ yXsMap.clear();
+ sortedXs = [];
+ sortedYs = [];
+ xLines.value = [];
+ yLines.value = [];
}
/**
@@ -112,18 +99,16 @@ export class ReferenceLine {
* 5. 更新组件坐标
* 6. 绘制参考线段
*/
- updateRefLine(rect: DragRect) {
- this.xLines = [];
- this.yLines = [];
- const box = this.getRectBox(rect);
- const { xYsMap, yXsMap, sortedXs, sortedYs } = this;
+ function updateRefLine(rect: DragRect) {
+ const allXLines = [];
+ const allYLines = [];
+ const box = getRectBox(rect);
+ let offsetX: number | undefined;
+ let offsetY: number | undefined;
if (!sortedXs.length && !sortedYs.length) {
return { x: 0, y: 0 };
}
- let offsetX: number | undefined = undefined;
- let offsetY: number | undefined = undefined;
-
// 离最近X的距离
const closetMinX = getClosestValInSortedArr(sortedXs, box.minX);
const closetMidX = getClosestValInSortedArr(sortedXs, box.midX);
@@ -185,19 +170,19 @@ export class ReferenceLine {
if (offsetX !== undefined) {
if (isEqualNum(0, closetMinX - targetBox.minX)) {
- this.yLines.push({
+ allYLines.push({
x: closetMinX,
ys: [targetBox.minY, targetBox.maxY, ...(xYsMap.get(closetMinX) ?? [])],
});
}
if (isEqualNum(0, closetMidX - targetBox.midX)) {
- this.yLines.push({
+ allYLines.push({
x: closetMidX,
ys: [targetBox.midX, ...(xYsMap.get(closetMidX) ?? [])],
});
}
if (isEqualNum(0, closetMaxX - targetBox.maxX)) {
- this.yLines.push({
+ allYLines.push({
x: closetMaxX,
ys: [targetBox.minY, targetBox.maxY, ...(xYsMap.get(closetMaxX) ?? [])],
});
@@ -206,45 +191,62 @@ export class ReferenceLine {
if (offsetY !== undefined) {
if (isEqualNum(0, closetMinY - targetBox.minY)) {
- this.xLines.push({
+ allXLines.push({
y: closetMinY,
xs: [targetBox.minX, targetBox.maxX, ...(yXsMap.get(closetMinY) ?? [])],
});
}
if (isEqualNum(0, closetMidY - targetBox.midY)) {
- this.xLines.push({
+ allXLines.push({
y: closetMidY,
xs: [targetBox.midX, ...(yXsMap.get(closetMidY) ?? [])],
});
}
if (isEqualNum(0, closetMaxY - targetBox.maxY)) {
- this.xLines.push({
+ allXLines.push({
y: closetMaxY,
xs: [targetBox.minX, targetBox.maxX, ...(yXsMap.get(closetMaxY) ?? [])],
});
}
}
- const yl: any[] = [];
- for (const line of this.yLines) {
+ const yls: any[] = [];
+ for (const line of allYLines) {
const y = Math.min(...line.ys);
const h = Math.max(...line.ys) - y;
- yl.push({ x: line.x, y, h });
+ yls.push({ x: line.x, y, h });
}
- const xl: any[] = [];
- for (const line of this.xLines) {
+ const xls: any[] = [];
+ for (const line of allXLines) {
const x = Math.min(...line.xs);
const w = Math.max(...line.xs) - x;
- xl.push({ y: line.y, x, w });
+ xls.push({ y: line.y, x, w });
}
- this.yl.value = yl;
- this.xl.value = xl;
+ yLines.value = yls;
+ xLines.value = xls;
return {
- x: offsetX,
- y: offsetY,
+ offsetX,
+ offsetY,
};
}
+
+ return {
+ active,
+ xLines,
+ yLines,
+ recordBlocksXY,
+ updateRefLine,
+ };
+};
+
+export interface DragRect {
+ left: number;
+ top: number;
+ width: number;
+ height: number;
}
+
+export type ReferenceLine = ReturnType;
diff --git a/src/components/editor/core/scene.ts b/src/components/editor/core/scene.ts
new file mode 100644
index 0000000..4d2f53b
--- /dev/null
+++ b/src/components/editor/core/scene.ts
@@ -0,0 +1,63 @@
+import { Ref } from "vue";
+import { Container } from ".";
+
+/**
+ * 画布场景
+ * @description 处理平移和缩放事件
+ */
+export const useScene = (container: Ref) => {
+ const minZoom = 0.5;
+ const maxZoom = 10;
+ const zoomStep = 0.1;
+ let startX = 0;
+ let startY = 0;
+ let cacheX = 0;
+ let cacheY = 0;
+
+ const onMouseDown = (e: MouseEvent) => {
+ startX = e.x;
+ startY = e.y;
+ cacheX = container.value.x;
+ cacheY = container.value.y;
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ };
+
+ const onMouseMove = (e: MouseEvent) => {
+ container.value.x = cacheX + (e.x - startX);
+ container.value.y = cacheY + (e.y - startY);
+ };
+
+ const onMouseUp = () => {
+ window.removeEventListener("mousemove", onMouseMove);
+ window.removeEventListener("mouseup", onMouseUp);
+ };
+
+ const onMouseWheel = (e: WheelEvent) => {
+ e.preventDefault();
+
+ const el = e.currentTarget as HTMLElement;
+ const rect = el.getBoundingClientRect();
+ const x = (e.clientX - rect.x) / container.value.zoom;
+ const y = (e.clientY - rect.y) / container.value.zoom;
+ const delta = -e.deltaY > 0 ? zoomStep : -zoomStep;
+
+ container.value.zoom += delta;
+ if (container.value.zoom < minZoom) {
+ container.value.zoom = minZoom;
+ return;
+ }
+ if (container.value.zoom > maxZoom) {
+ container.value.zoom = maxZoom;
+ return;
+ }
+
+ container.value.x += -x * delta + el.offsetWidth * (delta / 2);
+ container.value.y += -y * delta + el.offsetHeight * (delta / 2);
+ };
+
+ return {
+ onMouseDown,
+ onMouseWheel,
+ };
+};
diff --git a/src/components/editor/index.ts b/src/components/editor/index.ts
new file mode 100644
index 0000000..15167cc
--- /dev/null
+++ b/src/components/editor/index.ts
@@ -0,0 +1,3 @@
+import Editor from "./components/Editor.vue";
+
+export { Editor }
diff --git a/src/components/editor/config/util.ts b/src/components/editor/utils/closest.ts
similarity index 100%
rename from src/components/editor/config/util.ts
rename to src/components/editor/utils/closest.ts
diff --git a/src/components/editor/components/mock.ts b/src/components/editor/utils/mock.ts
similarity index 92%
rename from src/components/editor/components/mock.ts
rename to src/components/editor/utils/mock.ts
index 8f0dba3..a0e444f 100644
--- a/src/components/editor/components/mock.ts
+++ b/src/components/editor/utils/mock.ts
@@ -1,4 +1,4 @@
-const sleep = (time: number) => {
+export const sleep = (time: number) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
diff --git a/src/pages/system/logl/index.vue b/src/pages/system/logl/index.vue
index 7015af6..6470b53 100644
--- a/src/pages/system/logl/index.vue
+++ b/src/pages/system/logl/index.vue
@@ -12,7 +12,7 @@