gd-web-core 0.0.13 → 0.0.15

package/package.json

@@ -1,131 +1,132 @@
-{
-  "name": "gd-web-core",
-  "version": "0.0.13",
-  "description": "Vue 3 基座能力封装库 - 组件与工具函数",
-  "type": "module",
-  "files": [
-    "src/assets",
-    "src/components",
-    "src/utils",
-    "src/index.ts",
-    "docs/components",
-    "docs/utils",
-    "docs/INDEX.md"
-  ],
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./dist/index.umd.cjs"
-    },
-    "./components": {
-      "types": "./src/components/index.ts",
-      "import": "./src/components/index.ts"
-    },
-    "./utils": {
-      "types": "./src/utils/index.ts",
-      "import": "./src/utils/index.ts"
-    },
-    "./style.css": "./dist/index.css",
-    "./package.json": "./package.json"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:check": "vue-tsc --noEmit && vite build",
-    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
-    "preview": "vite preview",
-    "lint": "eslint . --fix",
-    "format": "prettier --write .",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "release:patch": "npm version patch && npm publish",
-    "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish",
-    "publish:dry": "npm publish --dry-run",
-    "check:package": "npm pack --dry-run"
-  },
-  "peerDependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.0.0"
-  },
-  "peerDependenciesMeta": {
-    "vue-router": {
-      "optional": true
-    }
-  },
-  "optionalDependencies": {
-    "ant-design-vue": "^4.0.0",
-    "echarts": "^5.0.0"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "components",
-    "utils",
-    "library"
-  ],
-  "author": "Your Name <your.email@example.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/your-org/gd-web-core.git"
-  },
-  "homepage": "https://github.com/your-org/gd-web-core#readme",
-  "bugs": {
-    "url": "https://github.com/your-org/gd-web-core/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@surely-vue/table": "4.1.9",
-    "axios": "^1.13.6",
-    "dayjs": "^1.11.19",
-    "echarts": "^6.0.0",
-    "nprogress": "^0.2.0",
-    "pinia": "^3.0.4",
-    "prismjs": "^1.30.0"
-  },
-  "devDependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^22.10.6",
-    "@types/nprogress": "^0.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.53.0",
-    "@typescript-eslint/parser": "^8.53.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/ui": "^4.0.18",
-    "ant-design-vue": "^4.2.6",
-    "echarts": "^5.5.0",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.6.2",
-    "gd-vite-core": "^1.0.8",
-    "globals": "^17.0.0",
-    "happy-dom": "^20.5.0",
-    "highlight.js": "^11.11.1",
-    "less": "^4.5.1",
-    "marked": "^17.0.1",
-    "prettier": "^3.7.4",
-    "typescript": "~5.6.0",
-    "unplugin-auto-import": "^21.0.0",
-    "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.2.4",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.2.0",
-    "vite-plugin-require-transform": "^1.0.21",
-    "vitest": "^4.0.18",
-    "vue": "^3.5.24",
-    "vue-eslint-parser": "^10.2.0",
-    "vue-router": "^4.6.4",
-    "vue-tsc": "^2.2.4"
-  }
-}
+{
+  "name": "gd-web-core",
+  "version": "0.0.15",
+  "description": "Vue 3 基座能力封装库 - 组件与工具函数",
+  "type": "module",
+  "files": [
+    "src/assets",
+    "src/components",
+    "src/utils",
+    "src/index.ts",
+    "docs/components",
+    "docs/utils",
+    "docs/INDEX.md"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "import": "./src/components/index.ts"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "import": "./src/utils/index.ts"
+    },
+    "./style.css": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "eslint . --max-warnings=0 && vue-tsc --noEmit && vite build",
+    "build:check": "vue-tsc --noEmit && vite build",
+    "build:slider-captcha": "vite build --config src/components/SliderCaptcha/vite.config.ts && node -e \"require('fs').copyFileSync('src/components/SliderCaptcha/demo.html','dist/slider-captcha/demo.html')\"",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish",
+    "publish:dry": "npm publish --dry-run",
+    "check:package": "npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0",
+    "vue-router": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "ant-design-vue": "^4.0.0",
+    "echarts": "^5.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "utils",
+    "library"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/gd-web-core.git"
+  },
+  "homepage": "https://github.com/your-org/gd-web-core#readme",
+  "bugs": {
+    "url": "https://github.com/your-org/gd-web-core/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@surely-vue/table": "4.1.9",
+    "axios": "^1.13.6",
+    "dayjs": "^1.11.19",
+    "echarts": "^6.0.0",
+    "nprogress": "^0.2.0",
+    "pinia": "^3.0.4",
+    "prismjs": "^1.30.0"
+  },
+  "devDependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^22.10.6",
+    "@types/nprogress": "^0.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/ui": "^4.0.18",
+    "ant-design-vue": "^4.2.6",
+    "echarts": "^5.5.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "^10.6.2",
+    "gd-vite-core": "^1.0.8",
+    "globals": "^17.0.0",
+    "happy-dom": "^20.5.0",
+    "highlight.js": "^11.11.1",
+    "less": "^4.5.1",
+    "marked": "^17.0.1",
+    "prettier": "^3.7.4",
+    "typescript": "~5.6.0",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^30.0.0",
+    "vite": "^7.2.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.2.0",
+    "vite-plugin-require-transform": "^1.0.21",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.24",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-router": "^4.6.4",
+    "vue-tsc": "^2.2.4"
+  }
+}

package/src/components/DrawBlocks/DrawBlocks.vue

@@ -0,0 +1,413 @@
+<template>
+  <div ref="containerRef" class="draw-blocks-container" :style="containerStyle">
+    <!-- Canvas 将由 DrawBlocks 实例动态创建 -->
+    <!-- 8 个控制点 -->
+    <template v-if="activeBlock && camera">
+      <div
+        v-for="point in controlPoints"
+        :key="point.type"
+        class="control-point"
+        :class="point.type"
+        :style="getControlPointStyle(point)"
+        @pointerdown.stop="handleControlPointDown($event, point.type)"
+      ></div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { DrawBlocks, type DrawBlocksOptions, type Block, type Image, type CameraState } from './core'
+
+/** 控制点类型 */
+type ControlPointType = 'nw' | 'ne' | 'sw' | 'se' | 'tc' | 'bc' | 'lc' | 'rc'
+
+/** 控制点信息 */
+interface ControlPoint {
+  type: ControlPointType
+  x: number
+  y: number
+}
+
+/** Props */
+interface Props {
+  defaultScale?: number
+  minScale?: number
+  maxScale?: number
+  bounceFactor?: number
+  boundPadding?: number
+  renderOnChange?: boolean
+  height?: string
+  initialData?: {
+    images?: Image[]
+    blocks?: Block[]
+    camera?: Partial<CameraState>
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultScale: 1,
+  minScale: 0.1,
+  maxScale: 5,
+  bounceFactor: 0.2,
+  boundPadding: 50,
+  renderOnChange: true,
+  height: '100%'
+})
+
+const emit = defineEmits<{
+  mounted: [instance: DrawBlocks]
+  ready: []
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+let drawBlocksInstance: DrawBlocks | null = null
+
+/** 当前选中块 */
+const activeBlock = ref<Block | null>(null)
+
+/** 相机状态 */
+const camera = ref<CameraState | null>(null)
+
+/** 容器尺寸 */
+const containerSize = reactive({ width: 0, height: 0, dpr: 1 })
+
+/** 容器样式 */
+const containerStyle = computed(() => ({
+  height: props.height
+}))
+
+/** 控制点列表 */
+const controlPoints = computed<ControlPoint[]>(() => {
+  if (!activeBlock.value) return []
+
+  const block = activeBlock.value
+  const x1 = Math.min(block.x1, block.x2)
+  const x2 = Math.max(block.x1, block.x2)
+  const y1 = Math.min(block.y1, block.y2)
+  const y2 = Math.max(block.y1, block.y2)
+  const centerX = (x1 + x2) / 2
+  const centerY = (y1 + y2) / 2
+
+  return [
+    { type: 'nw', x: x1, y: y1 },
+    { type: 'ne', x: x2, y: y1 },
+    { type: 'sw', x: x1, y: y2 },
+    { type: 'se', x: x2, y: y2 },
+    { type: 'tc', x: centerX, y: y1 },
+    { type: 'bc', x: centerX, y: y2 },
+    { type: 'lc', x: x1, y: centerY },
+    { type: 'rc', x: x2, y: centerY }
+  ]
+})
+
+/** 获取控制点的屏幕样式 */
+function getControlPointStyle(point: ControlPoint): Record<string, string> {
+  // 默认隐藏
+  const hidden = { left: '-100px', top: '-100px', width: '8px', height: '8px' }
+  if (!camera.value) return hidden
+
+  // 世界坐标转 canvas CSS 像素坐标
+  // 公式: (world + camera) * scale
+  const scale = camera.value.scale
+  const camX = camera.value.x
+  const camY = camera.value.y
+  const screenX = (point.x + camX) * scale
+  const screenY = (point.y + camY) * scale
+
+  const size = 20 // 移动端触摸友好的尺寸
+  return {
+    left: `${screenX}px`,
+    top: `${screenY}px`,
+    width: `${size}px`,
+    height: `${size}px`,
+    transform: 'translate(-50%, -50%)'
+  }
+}
+
+/** 处理控制点按下 */
+function handleControlPointDown(e: PointerEvent, type: ControlPointType) {
+  // 阻止冒泡，让 canvas 不处理这个事件
+  e.preventDefault()
+  e.stopPropagation()
+
+  if (!activeBlock.value || !drawBlocksInstance) return
+
+  // 获取相机状态
+  const cam = drawBlocksInstance.getCamera()
+  const block = activeBlock.value
+
+  // 计算点击位置的世界坐标
+  const rect = containerRef.value!.getBoundingClientRect()
+  const screenX = e.clientX - rect.left
+  const screenY = e.clientY - rect.top
+
+  // 屏幕坐标转世界坐标：screenX / scale - cameraX
+  const worldX = screenX / cam.scale - cam.x
+  const worldY = screenY / cam.scale - cam.y
+
+  // 通知 DrawBlocks 进入 resize 模式
+  // 这里需要通过事件或其他方式通知
+  // 由于是 HTML overlay，我们需要手动处理 resize 逻辑
+  handleResizeStart(e, type, worldX, worldY, block)
+}
+
+/** resize 起始状态 */
+let resizeStartState: {
+  type: ControlPointType
+  startWorldX: number
+  startWorldY: number
+  blockX1: number
+  blockY1: number
+  blockX2: number
+  blockY2: number
+} | null = null
+
+/** 处理 resize 开始 */
+function handleResizeStart(e: PointerEvent, type: ControlPointType, worldX: number, worldY: number, block: Block) {
+  resizeStartState = {
+    type,
+    startWorldX: worldX,
+    startWorldY: worldY,
+    blockX1: block.x1,
+    blockY1: block.y1,
+    blockX2: block.x2,
+    blockY2: block.y2
+  }
+
+  // 监听 pointermove 和 pointerup
+  document.addEventListener('pointermove', handleResizeMove)
+  document.addEventListener('pointerup', handleResizeEnd)
+}
+
+/** 处理 resize 移动 */
+function handleResizeMove(e: PointerEvent) {
+  if (!resizeStartState || !activeBlock.value || !drawBlocksInstance) return
+
+  const rect = containerRef.value!.getBoundingClientRect()
+  const screenX = e.clientX - rect.left
+  const screenY = e.clientY - rect.top
+  const cam = drawBlocksInstance.getCamera()
+
+  // 屏幕坐标转世界坐标：screenX / scale - cameraX
+  const worldX = screenX / cam.scale - cam.x
+  const worldY = screenY / cam.scale - cam.y
+
+  const deltaX = worldX - resizeStartState.startWorldX
+  const deltaY = worldY - resizeStartState.startWorldY
+
+  const { type, blockX1, blockY1, blockX2, blockY2 } = resizeStartState
+  let updates: Partial<Block> = {}
+
+  switch (type) {
+    case 'nw':
+      updates = { x1: blockX1 + deltaX, y1: blockY1 + deltaY }
+      break
+    case 'ne':
+      updates = { x2: blockX2 + deltaX, y1: blockY1 + deltaY }
+      break
+    case 'sw':
+      updates = { x1: blockX1 + deltaX, y2: blockY2 + deltaY }
+      break
+    case 'se':
+      updates = { x2: blockX2 + deltaX, y2: blockY2 + deltaY }
+      break
+    case 'tc':
+      updates = { y1: blockY1 + deltaY }
+      break
+    case 'bc':
+      updates = { y2: blockY2 + deltaY }
+      break
+    case 'lc':
+      updates = { x1: blockX1 + deltaX }
+      break
+    case 'rc':
+      updates = { x2: blockX2 + deltaX }
+      break
+  }
+
+  // 限制最小尺寸
+  const newX1 = updates.x1 ?? blockX1
+  const newX2 = updates.x2 ?? blockX2
+  const newY1 = updates.y1 ?? blockY1
+  const newY2 = updates.y2 ?? blockY2
+  if (Math.abs(newX2 - newX1) < 10 || Math.abs(newY2 - newY1) < 10) return
+
+  drawBlocksInstance.updateBlock(activeBlock.value.id, updates)
+}
+
+/** 处理 resize 结束 */
+function handleResizeEnd() {
+  resizeStartState = null
+  document.removeEventListener('pointermove', handleResizeMove)
+  document.removeEventListener('pointerup', handleResizeEnd)
+}
+
+/** 更新控制点和相机状态 */
+function updateState() {
+  if (!drawBlocksInstance) return
+
+  // 更新相机状态
+  const cam = drawBlocksInstance.getCamera()
+  camera.value = cam.getState()
+
+  // 更新选中块
+  const blockManager = drawBlocksInstance.getBlockManager()
+  const allBlocks = blockManager.getAllBlocks()
+  const active = allBlocks.find(b => b.active)
+  activeBlock.value = active || null
+
+  // 更新容器尺寸
+  if (containerRef.value) {
+    const rect = containerRef.value.getBoundingClientRect()
+    containerSize.width = rect.width
+    containerSize.height = rect.height
+  }
+}
+
+let animationFrameId: number | null = null
+function startUpdateLoop() {
+  const loop = () => {
+    updateState()
+    animationFrameId = requestAnimationFrame(loop)
+  }
+  loop()
+}
+
+function stopUpdateLoop() {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
+  }
+}
+
+onMounted(() => {
+  if (!containerRef.value) return
+
+  const options: DrawBlocksOptions = {
+    defaultScale: props.defaultScale,
+    minScale: props.minScale,
+    maxScale: props.maxScale,
+    bounceFactor: props.bounceFactor,
+    boundPadding: props.boundPadding,
+    renderOnChange: props.renderOnChange,
+    initialData: props.initialData
+  }
+
+  drawBlocksInstance = new DrawBlocks(containerRef.value, options)
+
+  emit('mounted', drawBlocksInstance)
+  emit('ready')
+
+  // 监听 DrawBlocks 内部事件
+  drawBlocksInstance.on('blockUpdate', () => updateState())
+  drawBlocksInstance.on('blockDelete', () => updateState())
+  drawBlocksInstance.on('blockClick', () => updateState())
+
+  // 监听窗口尺寸变化
+  window.addEventListener('resize', updateState)
+
+  // 启动更新循环
+  startUpdateLoop()
+})
+
+onUnmounted(() => {
+  stopUpdateLoop()
+  handleResizeEnd()
+  window.removeEventListener('resize', updateState)
+  drawBlocksInstance?.destroy()
+  drawBlocksInstance = null
+})
+
+/** 暴露方法给父组件 */
+defineExpose({
+  /** 获取 DrawBlocks 实例 */
+  getInstance: () => drawBlocksInstance,
+  /** 获取数据 */
+  getData: () => drawBlocksInstance?.getData(),
+  /** 设置相机 */
+  setCamera: (x: number, y: number, scale: number) => drawBlocksInstance?.setCamera(x, y, scale),
+  /** 渲染 */
+  render: () => drawBlocksInstance?.render(),
+  /** 强制渲染 */
+  forceRender: () => drawBlocksInstance?.forceRender(),
+  /** 添加图片 */
+  addImage: (image: Image) => drawBlocksInstance?.addImage(image),
+  /** 删除图片 */
+  removeImage: (imageId: string) => drawBlocksInstance?.removeImage(imageId),
+  /** 添加画块 */
+  addBlock: (block: Block) => drawBlocksInstance?.addBlock(block),
+  /** 删除画块 */
+  removeBlock: (blockId: string) => drawBlocksInstance?.removeBlock(blockId),
+  /** 更新画块 */
+  updateBlock: (blockId: string, updates: Partial<Block>) => drawBlocksInstance?.updateBlock(blockId, updates),
+  /** 获取画块 */
+  getBlock: (blockId: string) => drawBlocksInstance?.getBlock(blockId),
+  /** 获取所有画块 */
+  getAllBlocks: () => drawBlocksInstance?.getAllBlocks(),
+  /** 设置模式 */
+  setMode: (mode: 'pan' | 'draw' | 'block') => drawBlocksInstance?.setMode(mode),
+  /** 设置数据 */
+  setData: (data: { images?: Image[]; blocks?: Block[] }) => drawBlocksInstance?.setData(data),
+  /** 事件绑定 */
+  on: (event: string, handler: (...args: any[]) => void) => drawBlocksInstance?.on(event, handler),
+  /** 事件解绑 */
+  off: (event: string, handler: (...args: any[]) => void) => drawBlocksInstance?.off(event, handler),
+  /** 获取相机实例 */
+  getCamera: () => drawBlocksInstance?.getCamera(),
+  /** 获取渲染器实例 */
+  getRenderer: () => drawBlocksInstance?.getRenderer(),
+  /** 获取图片管理器实例 */
+  getImageManager: () => drawBlocksInstance?.getImageManager(),
+  /** 获取画块管理器实例 */
+  getBlockManager: () => drawBlocksInstance?.getBlockManager()
+})
+</script>
+
+<style scoped>
+.draw-blocks-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.draw-blocks-container :deep(canvas) {
+  display: block;
+  touch-action: none;
+}
+
+.control-point {
+  position: absolute;
+  background: #fff;
+  border: 1px solid #333;
+  box-sizing: border-box;
+  pointer-events: auto;
+  z-index: 10;
+}
+
+.control-point.nw,
+.control-point.se {
+  cursor: nwse-resize;
+}
+
+.control-point.ne,
+.control-point.sw {
+  cursor: nesw-resize;
+}
+
+.control-point.tc,
+.control-point.bc {
+  cursor: ns-resize;
+}
+
+.control-point.lc,
+.control-point.rc {
+  cursor: ew-resize;
+}
+
+.control-point:hover {
+  background: #4ecdc4;
+  border-color: #333;
+}
+</style>