From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts | 143 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 143 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts b/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts
new file mode 100644
index 0000000..a7bd762
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts
@@ -0,0 +1,143 @@
+import { HotZoneItemProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
+import { StyleValue } from 'vue'
+
+// 鐑尯鐨勬渶灏忓楂�
+export const HOT_ZONE_MIN_SIZE = 100
+
+// 鎺у埗鐨勭被鍨�
+export enum CONTROL_TYPE_ENUM {
+ LEFT,
+ TOP,
+ WIDTH,
+ HEIGHT
+}
+
+// 瀹氫箟鐑尯鐨勬帶鍒剁偣
+export interface ControlDot {
+ position: string
+ types: CONTROL_TYPE_ENUM[]
+ style: StyleValue
+}
+
+// 鐑尯鐨�8涓帶鍒剁偣
+export const CONTROL_DOT_LIST = [
+ {
+ position: '宸︿笂瑙�',
+ types: [
+ CONTROL_TYPE_ENUM.LEFT,
+ CONTROL_TYPE_ENUM.TOP,
+ CONTROL_TYPE_ENUM.WIDTH,
+ CONTROL_TYPE_ENUM.HEIGHT
+ ],
+ style: { left: '-5px', top: '-5px', cursor: 'nwse-resize' }
+ },
+ {
+ position: '涓婃柟涓棿',
+ types: [CONTROL_TYPE_ENUM.TOP, CONTROL_TYPE_ENUM.HEIGHT],
+ style: { left: '50%', top: '-5px', cursor: 'n-resize', transform: 'translateX(-50%)' }
+ },
+ {
+ position: '鍙充笂瑙�',
+ types: [CONTROL_TYPE_ENUM.TOP, CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+ style: { right: '-5px', top: '-5px', cursor: 'nesw-resize' }
+ },
+ {
+ position: '鍙充晶涓棿',
+ types: [CONTROL_TYPE_ENUM.WIDTH],
+ style: { right: '-5px', top: '50%', cursor: 'e-resize', transform: 'translateX(-50%)' }
+ },
+ {
+ position: '鍙充笅瑙�',
+ types: [CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+ style: { right: '-5px', bottom: '-5px', cursor: 'nwse-resize' }
+ },
+ {
+ position: '涓嬫柟涓棿',
+ types: [CONTROL_TYPE_ENUM.HEIGHT],
+ style: { left: '50%', bottom: '-5px', cursor: 's-resize', transform: 'translateX(-50%)' }
+ },
+ {
+ position: '宸︿笅瑙�',
+ types: [CONTROL_TYPE_ENUM.LEFT, CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+ style: { left: '-5px', bottom: '-5px', cursor: 'nesw-resize' }
+ },
+ {
+ position: '宸︿晶涓棿',
+ types: [CONTROL_TYPE_ENUM.LEFT, CONTROL_TYPE_ENUM.WIDTH],
+ style: { left: '-5px', top: '50%', cursor: 'w-resize', transform: 'translateX(-50%)' }
+ }
+] as ControlDot[]
+
+//region 鐑尯鐨勭缉鏀�
+// 鐑尯鐨勭缉鏀炬瘮渚�
+export const HOT_ZONE_SCALE_RATE = 2
+// 缂╁皬锛氱缉鍥為�傚悎鎵嬫満灞忓箷鐨勫ぇ灏�
+export const zoomOut = (list?: HotZoneItemProperty[]) => {
+ return (
+ list?.map((hotZone) => ({
+ ...hotZone,
+ left: (hotZone.left /= HOT_ZONE_SCALE_RATE),
+ top: (hotZone.top /= HOT_ZONE_SCALE_RATE),
+ width: (hotZone.width /= HOT_ZONE_SCALE_RATE),
+ height: (hotZone.height /= HOT_ZONE_SCALE_RATE)
+ })) || []
+ )
+}
+// 鏀惧ぇ锛氫綔鐢ㄦ槸涓轰簡鏂逛究鍦ㄧ數鑴戝睆骞曚笂缂栬緫
+export const zoomIn = (list?: HotZoneItemProperty[]) => {
+ return (
+ list?.map((hotZone) => ({
+ ...hotZone,
+ left: (hotZone.left *= HOT_ZONE_SCALE_RATE),
+ top: (hotZone.top *= HOT_ZONE_SCALE_RATE),
+ width: (hotZone.width *= HOT_ZONE_SCALE_RATE),
+ height: (hotZone.height *= HOT_ZONE_SCALE_RATE)
+ })) || []
+ )
+}
+//endregion
+
+/**
+ * 灏佽鐑尯鎷栨嫿
+ *
+ * 娉細涓轰粈涔堜笉浣跨敤vueuse鐨剈seDraggable銆傚湪鏈満鏅笅锛屽叾浣跨敤鏂瑰紡姣旇緝澶嶆潅
+ * @param hotZone 鐑尯
+ * @param downEvent 榧犳爣鎸変笅浜嬩欢
+ * @param callback 鍥炶皟鍑芥暟
+ */
+export const useDraggable = (
+ hotZone: HotZoneItemProperty,
+ downEvent: MouseEvent,
+ callback: (
+ left: number,
+ top: number,
+ width: number,
+ height: number,
+ moveWidth: number,
+ moveHeight: number
+ ) => void
+) => {
+ // 闃绘浜嬩欢鍐掓场
+ downEvent.stopPropagation()
+
+ // 绉诲姩鍓嶇殑榧犳爣鍧愭爣
+ const { clientX: startX, clientY: startY } = downEvent
+ // 绉诲姩鍓嶇殑鐑尯鍧愭爣銆佸ぇ灏�
+ const { left, top, width, height } = hotZone
+
+ // 鐩戝惉榧犳爣绉诲姩
+ document.onmousemove = (e) => {
+ // 绉诲姩瀹藉害
+ const moveWidth = e.clientX - startX
+ // 绉诲姩楂樺害
+ const moveHeight = e.clientY - startY
+ // 绉诲姩鍥炶皟
+ callback(left, top, width, height, moveWidth, moveHeight)
+ }
+
+ // 鏉惧紑榧犳爣鍚庯紝缁撴潫鎷栨嫿
+ document.onmouseup = () => {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+}
--
Gitblit v1.8.0