@hprint/plugins 0.0.1-alpha.0

package/src/utils/ruler/utils.ts

@@ -0,0 +1,162 @@
+import type { Rect } from './ruler';
+import { fabric } from '@hprint/core';
+
+/**
+ * 计算尺子间距
+ * @param zoom 缩放比例
+ * @returns 返回计算出的尺子间距
+ */
+const getGap = (zoom: number) => {
+    const zooms = [0.02, 0.03, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 18];
+    const gaps = [5000, 2500, 1000, 500, 250, 100, 50, 25, 10, 5, 2];
+
+    let i = 0;
+    while (i < zooms.length && zooms[i] < zoom) {
+        i++;
+    }
+
+    return gaps[i - 1] || 5000;
+};
+
+/**
+ * 线段合并
+ * @param rect Rect数组
+ * @param isHorizontal
+ * @returns 合并后的Rect数组
+ */
+const mergeLines = (rect: Rect[], isHorizontal: boolean) => {
+    const axis = isHorizontal ? 'left' : 'top';
+    const length = isHorizontal ? 'width' : 'height';
+    // 先按照 axis 的大小排序
+    rect.sort((a, b) => a[axis] - b[axis]);
+    const mergedLines = [];
+    let currentLine = Object.assign({}, rect[0]);
+    for (const item of rect) {
+        const line = Object.assign({}, item);
+        if (currentLine[axis] + currentLine[length] >= line[axis]) {
+            // 当前线段和下一个线段相交，合并宽度
+            currentLine[length] =
+                Math.max(
+                    currentLine[axis] + currentLine[length],
+                    line[axis] + line[length]
+                ) - currentLine[axis];
+        } else {
+            // 当前线段和下一个线段不相交，将当前线段加入结果数组中，并更新当前线段为下一个线段
+            mergedLines.push(currentLine);
+            currentLine = Object.assign({}, line);
+        }
+    }
+    // 加入数组
+    mergedLines.push(currentLine);
+    return mergedLines;
+};
+
+const darwLine = (
+    ctx: CanvasRenderingContext2D,
+    options: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        stroke?: string | CanvasGradient | CanvasPattern;
+        lineWidth?: number;
+    }
+) => {
+    ctx.save();
+    const { left, top, width, height, stroke, lineWidth } = options;
+    ctx.beginPath();
+    stroke && (ctx.strokeStyle = stroke);
+    ctx.lineWidth = lineWidth ?? 1;
+    ctx.moveTo(left, top);
+    ctx.lineTo(left + width, top + height);
+    ctx.stroke();
+    ctx.restore();
+};
+
+const darwText = (
+    ctx: CanvasRenderingContext2D,
+    options: {
+        left: number;
+        top: number;
+        text: string;
+        fill?: string | CanvasGradient | CanvasPattern;
+        align?: CanvasTextAlign;
+        angle?: number;
+        fontSize?: number;
+    }
+) => {
+    ctx.save();
+    const { left, top, text, fill, align, angle, fontSize } = options;
+    fill && (ctx.fillStyle = fill);
+    ctx.textAlign = align ?? 'left';
+    ctx.textBaseline = 'top';
+    ctx.font = `${fontSize ?? 10}px sans-serif`;
+    if (angle) {
+        ctx.translate(left, top);
+        ctx.rotate((Math.PI / 180) * angle);
+        ctx.translate(-left, -top);
+    }
+    ctx.fillText(text, left, top);
+    ctx.restore();
+};
+
+const darwRect = (
+    ctx: CanvasRenderingContext2D,
+    options: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fill?: string | CanvasGradient | CanvasPattern;
+        stroke?: string;
+        strokeWidth?: number;
+    }
+) => {
+    ctx.save();
+    const { left, top, width, height, fill, stroke, strokeWidth } = options;
+    ctx.beginPath();
+    fill && (ctx.fillStyle = fill);
+    ctx.rect(left, top, width, height);
+    ctx.fill();
+    if (stroke) {
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = strokeWidth ?? 1;
+        ctx.stroke();
+    }
+    ctx.restore();
+};
+
+const drawMask = (
+    ctx: CanvasRenderingContext2D,
+    options: {
+        isHorizontal: boolean;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        backgroundColor: string;
+    }
+) => {
+    ctx.save();
+    const { isHorizontal, left, top, width, height, backgroundColor } = options;
+    // 创建一个线性渐变对象
+    const gradient = isHorizontal
+        ? ctx.createLinearGradient(left, height / 2, left + width, height / 2)
+        : ctx.createLinearGradient(width / 2, top, width / 2, height + top);
+    const transparentColor = new fabric.Color(backgroundColor);
+    transparentColor.setAlpha(0);
+    gradient.addColorStop(0, transparentColor.toRgba());
+    gradient.addColorStop(0.33, backgroundColor);
+    gradient.addColorStop(0.67, backgroundColor);
+    gradient.addColorStop(1, transparentColor.toRgba());
+    darwRect(ctx, {
+        left,
+        top,
+        width,
+        height,
+        fill: gradient,
+    });
+    ctx.restore();
+};
+
+export { getGap, mergeLines, darwRect, darwText, darwLine, drawMask };

package/src/utils/units.ts

@@ -0,0 +1,133 @@
+import { fabric, IEditor } from '@hprint/core';
+import { LengthConvert } from '@hprint/shared';
+
+export type MmOptions = {
+  left?: number;
+  top?: number;
+  width?: number;
+  height?: number;
+  strokeWidth?: number;
+  fontSize?: number;
+};
+
+export function applyMmToObject(
+  obj: fabric.Object,
+  mm: MmOptions,
+  dpi?: number
+) {
+  const toPx = (v: number | undefined) =>
+    v === undefined ? undefined : LengthConvert.mmToPx(v, dpi, { direct: true });
+  const leftPx = toPx(mm.left);
+  const topPx = toPx(mm.top);
+  const widthPx = toPx(mm.width);
+  const heightPx = toPx(mm.height);
+  const strokeWidthPx = toPx(mm.strokeWidth);
+  const fontSizePx = toPx(mm.fontSize);
+
+  if (leftPx !== undefined) obj.set('left', leftPx);
+  if (topPx !== undefined) obj.set('top', topPx);
+  if (widthPx !== undefined) obj.set('width', widthPx);
+  if (heightPx !== undefined) obj.set('height', heightPx);
+  if (strokeWidthPx !== undefined) obj.set('strokeWidth', strokeWidthPx);
+  if (fontSizePx !== undefined) (obj as any).fontSize = fontSizePx;
+
+  (obj as any)._originSize = {
+    ...(obj as any)._originSize,
+    mm: {
+      left: mm.left,
+      top: mm.top,
+      width: mm.width,
+      height: mm.height,
+      strokeWidth: mm.strokeWidth,
+      fontSize: mm.fontSize,
+    },
+  };
+}
+
+export function syncMmFromObject(obj: fabric.Object, dpi?: number, precision?: number) {
+  const toMm = (v: number | undefined) =>
+    v === undefined ? undefined : applyPrecision(LengthConvert.pxToMm(v, dpi), precision);
+  const left = obj.left as number | undefined;
+  const top = obj.top as number | undefined;
+  const width = obj.width as number | undefined;
+  const height = obj.height as number | undefined;
+  const strokeWidth = obj.strokeWidth as number | undefined;
+  const fontSize = (obj as any).fontSize as number | undefined;
+
+  (obj as any)._originSize = {
+    ...(obj as any)._originSize,
+    mm: {
+      left: toMm(left),
+      top: toMm(top),
+      width: toMm(width),
+      height: toMm(height),
+      strokeWidth: toMm(strokeWidth),
+      fontSize: toMm(fontSize),
+    },
+  };
+}
+
+export type UnitType = 'px' | 'mm' | 'inch';
+
+export function getUnit(editor: IEditor): UnitType {
+  return (editor as any).getUnit?.() ?? 'px';
+}
+
+export function convertSingle(
+  value: number | string,
+  unit: UnitType,
+  dpi?: number
+): number {
+  if (unit === 'px') return typeof value === 'string' ? Number(value) : value;
+  if (unit === 'mm') return LengthConvert.mmToPx(value as any, dpi, { direct: true });
+  const num = typeof value === 'string' ? Number(value) : (value as number);
+  return LengthConvert.mmToPx(num * LengthConvert.CONSTANTS.INCH_TO_MM, dpi, { direct: true });
+}
+
+export function processOptions(
+  opts: Record<string, any> = {},
+  unit: UnitType,
+  dpi?: number,
+  fields: string[] = ['left', 'top', 'width', 'height', 'fontSize', 'boxWidth']
+): { processed: Record<string, number>; originByUnit: Record<string, Record<string, any>> } {
+  const fieldSet = new Set(fields);
+  const processed: Record<string, number> = {};
+  const originUnit: Record<string, any> = {};
+  for (const key of Object.keys(opts)) {
+    if (!fieldSet.has(key)) continue;
+    const val = opts[key];
+    if (val === undefined) continue;
+    originUnit[key] = val;
+    processed[key] = convertSingle(val, unit, dpi);
+  }
+  return { processed, originByUnit: { [unit]: originUnit } };
+}
+
+export function applyPrecision(value: number, precision?: number) {
+  if (precision === undefined) return value;
+  const factor = Math.pow(10, precision);
+  return Math.round(value * factor) / factor;
+}
+
+function applyPrecisionDeep(value: any, precision?: number): any {
+  if (typeof value === 'number') return applyPrecision(value, precision);
+  if (Array.isArray(value)) return value.map((item) => applyPrecisionDeep(item, precision));
+  if (value && typeof value === 'object') {
+    const result: Record<string, any> = {};
+    Object.keys(value).forEach((key) => {
+      result[key] = applyPrecisionDeep(value[key], precision);
+    });
+    return result;
+  }
+  return value;
+}
+
+export function formatOriginValues(origin: Record<string, any>, precision?: number): Record<string, any> {
+  return applyPrecisionDeep(origin, precision);
+}
+
+export function formatFixedString(num: number, precision = 2): string {
+  const s = Number(num).toFixed(precision);
+  return s.includes('.') ? s.replace(/\.?0+$/, '') : s;
+}
+

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "./",
+        "composite": true
+    },
+    "include": ["**/*.ts"],
+    "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import dts from 'vite-plugin-dts';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+    plugins: [
+        dts({
+            outDir: 'dist',
+            include: ['src/**/*'],
+        }),
+    ],
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'src/index.ts'),
+            name: '@hprint/plugins',
+            fileName: 'index',
+            formats: ['es', 'cjs'],
+        },
+        rollupOptions: {
+            external: ['@hprint/core'],
+            output: {
+                globals: {},
+            },
+        },
+    },
+});