添加页面大纲功能

2025-02-18 22:31:06 +08:00
parent 8d513d1191
commit 95a374fb03
14 changed files with 663 additions and 5 deletions
@@ -0,0 +1,102 @@
+// Copyright (c) 2024-present AI-Labs
+
+/**
+ * 调整对象大小
+ * @param container 
+ * @param root 
+ * @param updateAttrs 
+ */
+export const resize = (container: HTMLDivElement, root: HTMLElement, updateAttrs: (data: any) => void) => {
+
+    const objResize = container.querySelector(".resize-obj") as HTMLElement,
+        minWidth = 10;
+
+    let startX: number, startY: number, objWidth: number, startPosition: string;
+
+    const onMousedown = (e: any) => {
+        e.preventDefault();
+
+        root.addEventListener('mousemove', onMousemove);
+        root.addEventListener('mouseup', onMouseup);
+        root.addEventListener('mouseleave', onMouseup);
+
+        // 获取鼠标初始位置
+        startX = e.clientX;
+        startY = e.clientY;
+
+        objWidth = Number(objResize.getAttribute("data-with")) || objResize.clientWidth;
+        startPosition = e.target.getAttribute("data-position");
+    };
+
+    const onMousemove = (event: MouseEvent) => {
+        // 获取鼠标最新位置的变化
+        const distanceX = event.clientX - startX;
+        const distanceY = event.clientY - startY;
+        if (distanceX == 0 && distanceY == 0) {
+            return;
+        }
+
+        // 判断是做缩小还是做放大
+        var zoomIn = false;
+        var zoomSize = 0;
+        if (startPosition === "1") {
+            zoomIn = distanceX > 0 && distanceY > 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        if (startPosition === "2") {
+            zoomIn = distanceY > 0 ? false : true;
+            zoomSize = Math.abs(distanceY);
+        }
+        if (startPosition === "3") {
+            zoomIn = distanceX < 0 && distanceY > 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        if (startPosition === "4") {
+            zoomIn = distanceX > 0 ? false : true;
+            zoomSize = Math.abs(distanceX);
+        }
+        if (startPosition === "5") {
+            zoomIn = distanceX < 0 ? false : true;
+            zoomSize = Math.abs(distanceX);
+        }
+        if (startPosition === "6") {
+            zoomIn = distanceX > 0 && distanceY < 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        if (startPosition === "7") {
+            zoomIn = distanceY < 0 ? false : true;
+            zoomSize = Math.abs(distanceY);
+        }
+        if (startPosition === "8") {
+            zoomIn = distanceX < 0 && distanceY < 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        let newWidth = objWidth + zoomSize * (zoomIn ? 1 : -1);
+
+        if (newWidth >= root.clientWidth) {
+            newWidth = root.clientWidth;
+        }
+        if (newWidth < minWidth) {
+            newWidth = minWidth;
+        }
+
+        //及时修改节点宽度，拖动结束后再通知渲染视图
+        objResize.style.width = `${newWidth}px`;
+        objResize.setAttribute("data-width", newWidth.toString());
+
+        objResize.parentElement!.removeAttribute("style");
+    }
+
+    const onMouseup = () => {
+        root.removeEventListener('mousemove', onMousemove);
+        root.removeEventListener('mouseup', onMouseup);
+        root.removeEventListener('mouseleave', onMouseup);
+
+        const attrs = { width: `${objResize.getAttribute("data-width")}px` };
+        updateAttrs(attrs)
+    };
+
+    for (let child of container.querySelector(".uai-resize")!.children) {
+        child.addEventListener("mousedown", onMousedown)
+    }
+}