yui-image-editor 1.0.0

package/src/router/index.ts

@@ -0,0 +1,30 @@
+import HomeView from '@/views/HomeView.vue';
+import { createRouter, createWebHistory } from 'vue-router';
+// 👇 请确保这两个组件文件存在，或替换为你实际的组件路径
+import MapPluginView from '@/views/MapPluginView.vue'; // 专题图插件页面
+import TestView from '@/views/TestView.vue'; // 测试界面页面
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    // 👇 新增专题图插件路由（name必须是mapPlugin，和代码里一致）
+    {
+      path: '/map-plugin', // 访问路径
+      name: 'mapPlugin',   // 路由名称，必须和代码里的跳转名称匹配
+      component: MapPluginView,
+    },
+    // 👇 测试界面路由
+    {
+      path: '/test',
+      name: 'test',
+      component: TestView,
+    },
+  ],
+})
+
+export default router

package/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

package/src/types/index.ts

@@ -0,0 +1,196 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// utils/types.ts
+
+/**
+ * tui-image-editor 核心接口定义
+ * 根据实际使用的方法进行扩展
+ */
+export interface TuiImageEditor {
+  // 销毁编辑器
+  destroy(): void;
+
+  // 获取画布尺寸
+  getCanvasSize(): { width: number; height: number };
+
+  // 调整画布尺寸
+  resizeCanvasDimension(dimensions: { width: number; height: number }): Promise<void>;
+
+  // 设置画布背景色
+  setCanvasBackgroundColor(color: string): void;
+
+  // 添加文字
+  addText(text: string, options: TextOptions): Promise<ObjectProps>;
+
+  // 添加形状
+  addShape(type: string, options: ShapeOptions): Promise<ObjectProps>;
+
+  // 添加图片对象
+  addImageObject(url: string, options?: ImageObjectOptions): Promise<ObjectProps>;
+
+  // 以下方法可能需要根据实际使用的API进行添加
+  // 如果实际使用了以下方法，请取消注释并添加到接口中
+
+  // 加载图片
+  // loadImageFromURL?(url: string, imageName: string): Promise<void>;
+
+  // 清除画布
+  // clearObjects?(): void;
+
+  // 删除对象
+  // removeObject?(id: string): void;
+
+  // 获取对象属性
+  // getObjectProperties?(id: string, keys?: string[]): any;
+
+  // 设置对象属性
+  // setObjectProperties?(id: string, properties: any): Promise<void>;
+
+  // 开始绘图模式
+  // startDrawingMode?(mode: string, options?: any): void;
+
+  // 停止绘图模式
+  // stopDrawingMode?(): void;
+
+  // 缩放
+  // zoom?(options: { x: number; y: number; zoomLevel: number }): void;
+
+  // 重置缩放
+  // resetZoom?(): void;
+
+  // 获取当前缩放级别
+  // getZoomLevel?(): number;
+
+  // 应用滤镜
+  // applyFilter?(type: string, options?: any): Promise<void>;
+
+  // 移除滤镜
+  // removeFilter?(type: string): Promise<void>;
+
+  // 裁剪
+  // crop?(rect: { left: number; top: number; width: number; height: number }): Promise<void>;
+
+  // 旋转
+  // rotate?(angle: number): Promise<void>;
+
+  // 翻转
+  // flipX?(): Promise<void>;
+  // flipY?(): Promise<void>;
+
+  // 调整大小
+  // resize?(dimensions: { width: number; height: number }): Promise<void>;
+
+  // 导出图片
+  // toDataURL?(options?: { format?: string; quality?: number }): string;
+
+  // 事件监听
+  // on?(event: string, handler: Function): void;
+  // off?(event: string, handler?: Function): void;
+}
+
+/**
+ * 对象属性接口
+ */
+export interface ObjectProps {
+  id: string;
+  [key: string]: unknown;
+}
+
+/**
+ * 文字选项接口
+ */
+export interface TextOptions {
+  styles?: {
+    fill: string;
+    fontSize: number;
+    fontFamily: string;
+    fontWeight?: string;
+    textAlign?: string;
+  };
+  position: { x: number; y: number };
+  isSilent?: boolean;
+  left?: number;
+  top?: number;
+  fontSize?: number;
+  fontFamily?: string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  [key: string]: any; // 允许其他属性
+}
+
+/**
+ * 形状选项接口
+ */
+export interface ShapeOptions {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  strokeDashArray?: [number, number];
+  [key: string]: any; // 允许其他属性
+}
+
+/**
+ * 图片对象选项接口
+ */
+export interface ImageObjectOptions {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  [key: string]: any; // 允许其他属性
+}
+
+/**
+ * 编辑器配置接口
+ */
+export interface EditorConfig {
+  includeUI?: {
+    loadImage?: {
+      path: string;
+      name: string;
+    };
+    theme?: any;
+    initMenu?: string;
+    menuBarPosition?: 'top' | 'bottom' | 'left' | 'right';
+    menu?: string[];
+    locale?: any;
+  };
+  cssMaxWidth?: number;
+  cssMaxHeight?: number;
+  selectionStyle?: {
+    cornerSize?: number;
+    rotatingPointOffset?: number;
+  };
+  usageStatistics?: boolean;
+  [key: string]: any; // 允许其他配置属性
+}
+
+/**
+ * 坐标点接口
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * 尺寸接口
+ */
+export interface Size {
+  width: number;
+  height: number;
+}
+
+/**
+ * 矩形区域接口
+ */
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}

package/src/types/tui.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// src/types/tui.d.ts
+declare module 'tui-code-snippet' {
+  const tui: any
+  export default tui
+}
+
+declare module 'tui-color-picker' {
+  const tuiColorPicker: any
+  export default tuiColorPicker
+}
+
+declare module 'tui-image-editor' {
+    interface ImageEditorOptions {
+    includeUI?: any
+    cssMaxWidth?: number
+    cssMaxHeight?: number
+    selectionStyle?: any
+  }
+  class ImageEditor {
+    constructor(container: HTMLElement, options: ImageEditorOptions)
+    on(event: string, callback: (...args: any[]) => void): void
+    destroy(): void
+    // 可以补充更多需要的 API 类型
+  }
+  export default ImageEditor
+}

package/src/utils/specialMapTool.ts

@@ -0,0 +1,358 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// utils/specialMapTool.ts
+import type { ImageObjectOptions, ObjectProps, ShapeOptions, TextOptions, TuiImageEditor } from '../types';
+
+export class SpecialMapTool {
+  private editor: TuiImageEditor;
+  private colors: {
+    yellow: string;
+    blue: string;
+    black: string;
+    white: string;
+  };
+  private fonts: {
+    title: string;
+    normal: string;
+  };
+
+  // 跟踪已添加的元素
+  private addedElements: Array<{
+    id: string;
+    type: string;
+    properties: any;
+  }> = [];
+
+  constructor(editorInstance: TuiImageEditor) {
+    this.editor = editorInstance;
+    this.colors = {
+      yellow: '#FFFF00',
+      blue: '#50C8FF',
+      black: '#000000',
+      white: '#FFFFFF'
+    };
+    this.fonts = {
+      title: '方正小标宋简体',
+      normal: '黑体'
+    };
+  }
+
+  // 1. 设置A4横版画布
+  async setA4Landscape(): Promise<{ width: number; height: number }> {
+    // A4尺寸：297mm × 210mm，96DPI下约为1123×794像素
+    const a4Width: number = 1123;
+    const a4Height: number = 794;
+
+    await this.editor.resizeCanvasDimension({
+      width: a4Width,
+      height: a4Height
+    });
+
+    // 清空元素记录
+    this.addedElements = [];
+
+    return { width: a4Width, height: a4Height };
+  }
+
+  // 2. 添加标题
+  async addTitle(text: string = '专题图标题'): Promise<ObjectProps> {
+    const canvasSize = this.editor.getCanvasSize();
+    const options: TextOptions = {
+      styles: {
+        fill: this.colors.black,
+        fontSize: 23,
+        fontFamily: this.fonts.title,
+        fontWeight: 'normal',
+        textAlign: 'center'
+      },
+      position: {
+        x: canvasSize.width / 2,
+        y: 80
+      }
+    };
+    const result = await this.editor.addText(text, options);
+
+    this.addedElements.push({
+      id: result.id,
+      type: 'title',
+      properties: { text, ...options }
+    });
+
+    return result;
+  }
+
+  // 3. 添加附图标签
+  async addFigureLabel(text: string = '附图'): Promise<ObjectProps> {
+    const options: TextOptions = {
+      styles: {
+        fill: this.colors.black,
+        fontSize: 20,
+        fontFamily: this.fonts.normal,
+        fontWeight: 'normal'
+      },
+      position: {
+        x: 50,
+        y: 40
+      }
+    };
+    const result = await this.editor.addText(text, options);
+
+    this.addedElements.push({
+      id: result.id,
+      type: 'figureLabel',
+      properties: { text, ...options }
+    });
+
+    return result;
+  }
+
+  // 4. 添加时间戳（自动生成当前时间）
+  async addTimestamp(): Promise<ObjectProps> {
+    const now = new Date();
+    const timeStr = now.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    const canvasSize = this.editor.getCanvasSize();
+    const options: TextOptions = {
+      styles: {
+        fill: this.colors.black,
+        fontSize: 11,
+        fontFamily: this.fonts.normal,
+        fontWeight: 'normal'
+      },
+      position: {
+        x: canvasSize.width - 150,
+        y: canvasSize.height - 40
+      }
+    };
+    const result = await this.editor.addText(`时间: ${timeStr}`, options);
+
+    this.addedElements.push({
+      id: result.id,
+      type: 'timestamp',
+      properties: { text: timeStr, ...options }
+    });
+
+    return result;
+  }
+
+  // 5. 添加黄色标注（带黑色描边效果）
+  async addYellowLabel(text: string, x: number, y: number): Promise<ObjectProps> {
+    // 先添加黑色文字作为描边（通过偏移实现描边效果）
+    const strokeOffset: number = 1.5;
+
+    // 描边文字（黑色，稍微偏移）
+    const strokeResult = await this.editor.addText(text, {
+      styles: {
+        fill: this.colors.black,
+        fontSize: 12,
+        fontFamily: this.fonts.normal,
+        fontWeight: 'normal'
+      },
+      position: {
+        x: x - strokeOffset,
+        y: y - strokeOffset
+      },
+      isSilent: true
+    });
+
+    // 主体文字（黄色）
+    const result = await this.editor.addText(text, {
+      styles: {
+        fill: this.colors.yellow,
+        fontSize: 12,
+        fontFamily: this.fonts.normal,
+        fontWeight: 'normal'
+      },
+      position: { x, y }
+    });
+
+    this.addedElements.push(
+      {
+        id: strokeResult.id,
+        type: 'yellowLabelStroke',
+        properties: { text, x: x - strokeOffset, y: y - strokeOffset }
+      },
+      {
+        id: result.id,
+        type: 'yellowLabel',
+        properties: { text, x, y }
+      }
+    );
+
+    return result;
+  }
+
+  // 6. 添加蓝色标注（用于重点强调）
+  async addBlueLabel(text: string, x: number, y: number): Promise<ObjectProps> {
+    const options: TextOptions = {
+      styles: {
+        fill: this.colors.blue,
+        fontSize: 12,
+        fontFamily: this.fonts.normal,
+        fontWeight: 'normal'
+      },
+      position: { x, y }
+    };
+    const result = await this.editor.addText(text, options);
+
+    this.addedElements.push({
+      id: result.id,
+      type: 'blueLabel',
+      properties: { text, x, y, ...options }
+    });
+
+    return result;
+  }
+
+  // 7. 添加对比拉框（黄色实线矩形）
+  async addComparisonBox(x: number, y: number, width: number, height: number, label: string = ''): Promise<ObjectProps> {
+    // 添加矩形框
+    const rectOptions: ShapeOptions = {
+      left: x,
+      top: y,
+      width,
+      height,
+      fill: 'transparent',
+      stroke: this.colors.yellow,
+      strokeWidth: 3
+    };
+    const rect = await this.editor.addShape('rect', rectOptions);
+
+    this.addedElements.push({
+      id: rect.id,
+      type: 'comparisonBox',
+      properties: { x, y,...rectOptions }
+    });
+
+    // 如果有关联标签，添加10号字
+    if (label) {
+      const labelResult = await this.editor.addText(label, {
+        styles: {
+          fill: this.colors.black,
+          fontSize: 10,
+          fontFamily: this.fonts.normal,
+          fontWeight: 'normal'
+        },
+        position: {
+          x: x + width / 2,
+          y: y + height + 15
+        },
+        isSilent: true
+      });
+
+      this.addedElements.push({
+        id: labelResult.id,
+        type: 'comparisonBoxLabel',
+        properties: { text: label, x: x + width / 2, y: y + height + 15 }
+      });
+    }
+
+    return rect;
+  }
+
+  // 8. 添加标定目标（黄色虚线矩形）
+  async addCalibrationTarget(x: number, y: number, width: number, height: number): Promise<ObjectProps> {
+    const options: ShapeOptions = {
+      left: x,
+      top: y,
+      width,
+      height,
+      fill: 'transparent',
+      stroke: this.colors.yellow,
+      strokeWidth: 3,
+      strokeDashArray: [10, 5] // 虚线样式
+    };
+    const result = await this.editor.addShape('rect', options);
+
+    this.addedElements.push({
+      id: result.id,
+      type: 'calibrationTarget',
+      properties: { x, y, ...options }
+    });
+
+    return result;
+  }
+
+  // 9. 添加指北针
+  async addCompass(x: number, y: number, size: number = 60): Promise<ObjectProps> {
+    // 创建指北针图标 - 简单的箭头形状
+    const compassSVG = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="${size}" height="${size}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- 圆形背景 -->
+  <circle cx="50" cy="50" r="40" fill="none" stroke="${this.colors.yellow}" stroke-width="3"/>
+
+  <!-- N方向箭头 -->
+  <polygon points="50,15 45,35 55,35" fill="${this.colors.yellow}"/>
+  <text x="50" y="35" text-anchor="middle" fill="${this.colors.yellow}" font-size="14" font-weight="bold">N</text>
+
+  <!-- 方向刻度线 -->
+  <line x1="50" y1="15" x2="50" y2="10" stroke="${this.colors.yellow}" stroke-width="2"/>
+  <line x1="85" y1="50" x2="90" y2="50" stroke="${this.colors.yellow}" stroke-width="2"/>
+  <line x1="50" y1="85" x2="50" y2="90" stroke="${this.colors.yellow}" stroke-width="2"/>
+  <line x1="15" y1="50" x2="10" y2="50" stroke="${this.colors.yellow}" stroke-width="2"/>
+
+  <!-- 次要方向 - 使用纯英文，避免编码问题 -->
+  <text x="73" y="27" fill="${this.colors.yellow}" font-size="10">NE</text>
+  <text x="73" y="73" fill="${this.colors.yellow}" font-size="10">SE</text>
+  <text x="27" y="73" fill="${this.colors.yellow}" font-size="10">SW</text>
+  <text x="27" y="27" fill="${this.colors.yellow}" font-size="10">NW</text>
+</svg>`;
+
+    // 正确编码SVG字符串
+    const svgData = `data:image/svg+xml;base64,${btoa(
+      unescape(encodeURIComponent(compassSVG))
+    )}`;
+
+    // 添加为图片对象
+    const options: ImageObjectOptions = {
+      left: x,
+      top: y,
+      width: size,
+      height: size
+    };
+    const result = await this.editor.addImageObject(svgData, options);
+
+    this.addedElements.push({
+      id: result.id,
+      type: 'compass',
+      properties: { x, y, size, ...options }
+    });
+
+    return result;
+  }
+
+  // 10. 一键创建完整专题图框架
+  async createFullSpecialMap(title: string = '专题图标题', figureLabel: string = '附图'): Promise<{
+    canvasSize: { width: number; height: number };
+    message: string;
+  }> {
+    // 设置A4画布
+    await this.setA4Landscape();
+
+    // 添加基本元素
+    await this.addFigureLabel(figureLabel);
+    await this.addTitle(title);
+    await this.addTimestamp();
+
+    return {
+      canvasSize: this.editor.getCanvasSize(),
+      message: '专题图框架已创建完成，请添加具体内容和标注'
+    };
+  }
+
+  // 11. 获取已添加的所有元素
+  getAllElements(): Array<{ id: string; type: string; properties: any }> {
+    return [...this.addedElements];
+  }
+
+  // 12. 清空所有添加的元素
+  async clearAllElements(): Promise<void> {
+    console.log('清空所有添加的元素');
+    this.addedElements = [];
+  }
+}

package/src/views/HomeView.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>首页</div>
+</template>
+
+<script setup lang="ts">
+
+
+</script>
+
+<style scoped>
+
+</style>

package/src/views/MapPluginView.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <ImageEditor></ImageEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import ImageEditor from '@/components/ImageEditor/index.vue';
+
+
+</script>
+
+<style scoped>
+
+</style>

package/src/views/TestView.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>测试</div>
+</template>
+
+<script setup lang="ts">
+
+
+</script>
+
+<style scoped>
+
+</style>

package/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    // Extra safety for array and object lookups, but may have false positives.
+    "noUncheckedIndexedAccess": true,
+
+    // Path mapping for cleaner imports.
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}