@yltrcc/vditor 0.1.1 → 0.3.0

package/src/ts/util/imageResize.ts

@@ -0,0 +1,166 @@
+import {hasClosestByMatchTag} from "./hasClosest";
+import {getMarkdown} from "../markdown/getMarkdown";
+
+export const initImageResize = (vditor: IVditor) => {
+    const editorElement = vditor.wysiwyg.element;
+    let currentResizeState: {
+        isResizing: boolean;
+        imgElement: HTMLImageElement;
+        startX: number;
+        startY: number;
+        startWidth: number;
+        startHeight: number;
+        corner: string;
+    } | null = null;
+
+    // 检测鼠标是否在图片的四个角附近
+    const getResizeCorner = (imgElement: HTMLImageElement, mouseX: number, mouseY: number): string | null => {
+        const rect = imgElement.getBoundingClientRect();
+        const cornerSize = 20; // 角落检测区域大小
+        
+        // 左上角
+        if (mouseX >= rect.left && mouseX <= rect.left + cornerSize &&
+            mouseY >= rect.top && mouseY <= rect.top + cornerSize) {
+            return 'nw';
+        }
+        // 右上角
+        if (mouseX >= rect.right - cornerSize && mouseX <= rect.right &&
+            mouseY >= rect.top && mouseY <= rect.top + cornerSize) {
+            return 'ne';
+        }
+        // 左下角
+        if (mouseX >= rect.left && mouseX <= rect.left + cornerSize &&
+            mouseY >= rect.bottom - cornerSize && mouseY <= rect.bottom) {
+            return 'sw';
+        }
+        // 右下角
+        if (mouseX >= rect.right - cornerSize && mouseX <= rect.right &&
+            mouseY >= rect.bottom - cornerSize && mouseY <= rect.bottom) {
+            return 'se';
+        }
+        
+        return null;
+    };
+
+    // 根据角落设置鼠标样式
+    const getCursorStyle = (corner: string | null): string => {
+        switch (corner) {
+            case 'nw':
+            case 'se':
+                return 'nwse-resize';
+            case 'ne':
+            case 'sw':
+                return 'nesw-resize';
+            default:
+                return 'default';
+        }
+    };
+
+    // 鼠标移动处理
+    const handleMouseMove = (e: MouseEvent) => {
+        if (currentResizeState && currentResizeState.isResizing) {
+            // 正在调整大小
+            const { imgElement, startX, startY, startWidth, startHeight, corner } = currentResizeState;
+            
+            const deltaX = e.clientX - startX;
+            const deltaY = e.clientY - startY;
+            
+            let newWidth = startWidth;
+            let newHeight = startHeight;
+
+            switch (corner) {
+                case "se": // 右下角
+                    newWidth = Math.max(50, startWidth + deltaX);
+                    newHeight = Math.max(50, startHeight + deltaY);
+                    break;
+                case "sw": // 左下角
+                    newWidth = Math.max(50, startWidth - deltaX);
+                    newHeight = Math.max(50, startHeight + deltaY);
+                    break;
+                case "ne": // 右上角
+                    newWidth = Math.max(50, startWidth + deltaX);
+                    newHeight = Math.max(50, startHeight - deltaY);
+                    break;
+                case "nw": // 左上角
+                    newWidth = Math.max(50, startWidth - deltaX);
+                    newHeight = Math.max(50, startHeight - deltaY);
+                    break;
+            }
+
+            imgElement.style.width = newWidth + "px";
+            imgElement.style.height = newHeight + "px";
+            
+            e.preventDefault();
+            e.stopPropagation();
+        } else {
+            // 检测鼠标是否在角落，改变鼠标样式
+            const target = e.target as HTMLElement;
+            const imgElement = hasClosestByMatchTag(target, "IMG") as HTMLImageElement;
+            
+            if (imgElement && imgElement.getAttribute("data-resizable")) {
+                const corner = getResizeCorner(imgElement, e.clientX, e.clientY);
+                imgElement.style.cursor = getCursorStyle(corner);
+            }
+        }
+    };
+
+    // 鼠标按下处理
+    const handleMouseDown = (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+        const imgElement = hasClosestByMatchTag(target, "IMG") as HTMLImageElement;
+        
+        if (imgElement && imgElement.getAttribute("data-resizable")) {
+            const corner = getResizeCorner(imgElement, e.clientX, e.clientY);
+            
+            if (corner) {
+                console.log('Start resizing from corner:', corner);
+                
+                e.preventDefault();
+                e.stopPropagation();
+                
+                currentResizeState = {
+                    isResizing: true,
+                    imgElement,
+                    startX: e.clientX,
+                    startY: e.clientY,
+                    startWidth: imgElement.offsetWidth,
+                    startHeight: imgElement.offsetHeight,
+                    corner
+                };
+                
+                imgElement.classList.add("resizing");
+            }
+        }
+    };
+
+    // 鼠标释放处理
+    const handleMouseUp = () => {
+        if (currentResizeState && currentResizeState.isResizing) {
+            console.log('Stop resizing');
+            
+            const { imgElement } = currentResizeState;
+            
+            currentResizeState.isResizing = false;
+            imgElement.classList.remove("resizing");
+
+            const finalWidth = parseInt(imgElement.style.width) || imgElement.offsetWidth;
+            const finalHeight = parseInt(imgElement.style.height) || imgElement.offsetHeight;
+
+            imgElement.setAttribute("width", finalWidth.toString());
+            imgElement.setAttribute("height", finalHeight.toString());
+
+            if (typeof vditor.options.input === "function") {
+                setTimeout(() => {
+                    vditor.options.input(getMarkdown(vditor));
+                }, 0);
+            }
+            
+            currentResizeState = null;
+        }
+    };
+
+    // 添加事件监听器
+    editorElement.addEventListener("mousemove", handleMouseMove);
+    editorElement.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+};