@hprint/plugins 0.0.7 → 0.0.9-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/index.js +44 -44
  2. package/dist/index.mjs +6957 -6550
  3. package/dist/src/index.d.ts.map +1 -1
  4. package/dist/src/plugins/ActualContentLayoutPlugin.d.ts +29 -0
  5. package/dist/src/plugins/ActualContentLayoutPlugin.d.ts.map +1 -0
  6. package/dist/src/plugins/CopyPlugin.d.ts.map +1 -1
  7. package/dist/src/plugins/ImageTextListPlugin.d.ts +68 -0
  8. package/dist/src/plugins/ImageTextListPlugin.d.ts.map +1 -0
  9. package/package.json +3 -3
  10. package/src/assets/style/resizePlugin.css +27 -27
  11. package/src/index.ts +11 -5
  12. package/src/objects/Arrow.js +47 -47
  13. package/src/objects/ThinTailArrow.js +50 -50
  14. package/src/plugins/ActualContentLayoutPlugin.ts +276 -0
  15. package/src/plugins/ControlsPlugin.ts +413 -413
  16. package/src/plugins/ControlsRotatePlugin.ts +111 -111
  17. package/src/plugins/CopyPlugin.ts +260 -258
  18. package/src/plugins/DeleteHotKeyPlugin.ts +57 -57
  19. package/src/plugins/DrawLinePlugin.ts +162 -162
  20. package/src/plugins/DrawPolygonPlugin.ts +205 -205
  21. package/src/plugins/DringPlugin.ts +125 -125
  22. package/src/plugins/FlipPlugin.ts +59 -59
  23. package/src/plugins/FontPlugin.ts +165 -165
  24. package/src/plugins/FreeDrawPlugin.ts +49 -49
  25. package/src/plugins/GroupPlugin.ts +82 -82
  26. package/src/plugins/GroupTextEditorPlugin.ts +198 -198
  27. package/src/plugins/HistoryPlugin.ts +181 -181
  28. package/src/plugins/ImageStroke.ts +121 -121
  29. package/src/plugins/ImageTextListPlugin.ts +540 -0
  30. package/src/plugins/LayerPlugin.ts +108 -108
  31. package/src/plugins/MaskPlugin.ts +155 -155
  32. package/src/plugins/MaterialPlugin.ts +224 -224
  33. package/src/plugins/MiddleMousePlugin.ts +45 -45
  34. package/src/plugins/MoveHotKeyPlugin.ts +46 -46
  35. package/src/plugins/PathTextPlugin.ts +89 -89
  36. package/src/plugins/PolygonModifyPlugin.ts +224 -224
  37. package/src/plugins/PrintPlugin.ts +81 -81
  38. package/src/plugins/PsdPlugin.ts +52 -52
  39. package/src/plugins/SimpleClipImagePlugin.ts +244 -244
  40. package/src/types/eventType.ts +11 -11
  41. package/src/utils/psd.js +432 -432
  42. package/src/utils/ruler/guideline.ts +145 -145
  43. package/src/utils/ruler/index.ts +91 -91
  44. package/src/utils/ruler/utils.ts +162 -162
  45. package/tsconfig.json +10 -10
  46. package/vite.config.ts +29 -29
@@ -1,162 +1,162 @@
1
- import type { Rect } from './ruler';
2
- import { fabric } from '@hprint/core';
3
-
4
- /**
5
- * 计算尺子间距
6
- * @param zoom 缩放比例
7
- * @returns 返回计算出的尺子间距
8
- */
9
- const getGap = (zoom: number) => {
10
- const zooms = [0.02, 0.03, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 18];
11
- const gaps = [5000, 2500, 1000, 500, 250, 100, 50, 25, 10, 5, 2];
12
-
13
- let i = 0;
14
- while (i < zooms.length && zooms[i] < zoom) {
15
- i++;
16
- }
17
-
18
- return gaps[i - 1] || 5000;
19
- };
20
-
21
- /**
22
- * 线段合并
23
- * @param rect Rect数组
24
- * @param isHorizontal
25
- * @returns 合并后的Rect数组
26
- */
27
- const mergeLines = (rect: Rect[], isHorizontal: boolean) => {
28
- const axis = isHorizontal ? 'left' : 'top';
29
- const length = isHorizontal ? 'width' : 'height';
30
- // 先按照 axis 的大小排序
31
- rect.sort((a, b) => a[axis] - b[axis]);
32
- const mergedLines = [];
33
- let currentLine = Object.assign({}, rect[0]);
34
- for (const item of rect) {
35
- const line = Object.assign({}, item);
36
- if (currentLine[axis] + currentLine[length] >= line[axis]) {
37
- // 当前线段和下一个线段相交,合并宽度
38
- currentLine[length] =
39
- Math.max(
40
- currentLine[axis] + currentLine[length],
41
- line[axis] + line[length]
42
- ) - currentLine[axis];
43
- } else {
44
- // 当前线段和下一个线段不相交,将当前线段加入结果数组中,并更新当前线段为下一个线段
45
- mergedLines.push(currentLine);
46
- currentLine = Object.assign({}, line);
47
- }
48
- }
49
- // 加入数组
50
- mergedLines.push(currentLine);
51
- return mergedLines;
52
- };
53
-
54
- const darwLine = (
55
- ctx: CanvasRenderingContext2D,
56
- options: {
57
- left: number;
58
- top: number;
59
- width: number;
60
- height: number;
61
- stroke?: string | CanvasGradient | CanvasPattern;
62
- lineWidth?: number;
63
- }
64
- ) => {
65
- ctx.save();
66
- const { left, top, width, height, stroke, lineWidth } = options;
67
- ctx.beginPath();
68
- stroke && (ctx.strokeStyle = stroke);
69
- ctx.lineWidth = lineWidth ?? 1;
70
- ctx.moveTo(left, top);
71
- ctx.lineTo(left + width, top + height);
72
- ctx.stroke();
73
- ctx.restore();
74
- };
75
-
76
- const darwText = (
77
- ctx: CanvasRenderingContext2D,
78
- options: {
79
- left: number;
80
- top: number;
81
- text: string;
82
- fill?: string | CanvasGradient | CanvasPattern;
83
- align?: CanvasTextAlign;
84
- angle?: number;
85
- fontSize?: number;
86
- }
87
- ) => {
88
- ctx.save();
89
- const { left, top, text, fill, align, angle, fontSize } = options;
90
- fill && (ctx.fillStyle = fill);
91
- ctx.textAlign = align ?? 'left';
92
- ctx.textBaseline = 'top';
93
- ctx.font = `${fontSize ?? 10}px sans-serif`;
94
- if (angle) {
95
- ctx.translate(left, top);
96
- ctx.rotate((Math.PI / 180) * angle);
97
- ctx.translate(-left, -top);
98
- }
99
- ctx.fillText(text, left, top);
100
- ctx.restore();
101
- };
102
-
103
- const darwRect = (
104
- ctx: CanvasRenderingContext2D,
105
- options: {
106
- left: number;
107
- top: number;
108
- width: number;
109
- height: number;
110
- fill?: string | CanvasGradient | CanvasPattern;
111
- stroke?: string;
112
- strokeWidth?: number;
113
- }
114
- ) => {
115
- ctx.save();
116
- const { left, top, width, height, fill, stroke, strokeWidth } = options;
117
- ctx.beginPath();
118
- fill && (ctx.fillStyle = fill);
119
- ctx.rect(left, top, width, height);
120
- ctx.fill();
121
- if (stroke) {
122
- ctx.strokeStyle = stroke;
123
- ctx.lineWidth = strokeWidth ?? 1;
124
- ctx.stroke();
125
- }
126
- ctx.restore();
127
- };
128
-
129
- const drawMask = (
130
- ctx: CanvasRenderingContext2D,
131
- options: {
132
- isHorizontal: boolean;
133
- left: number;
134
- top: number;
135
- width: number;
136
- height: number;
137
- backgroundColor: string;
138
- }
139
- ) => {
140
- ctx.save();
141
- const { isHorizontal, left, top, width, height, backgroundColor } = options;
142
- // 创建一个线性渐变对象
143
- const gradient = isHorizontal
144
- ? ctx.createLinearGradient(left, height / 2, left + width, height / 2)
145
- : ctx.createLinearGradient(width / 2, top, width / 2, height + top);
146
- const transparentColor = new fabric.Color(backgroundColor);
147
- transparentColor.setAlpha(0);
148
- gradient.addColorStop(0, transparentColor.toRgba());
149
- gradient.addColorStop(0.33, backgroundColor);
150
- gradient.addColorStop(0.67, backgroundColor);
151
- gradient.addColorStop(1, transparentColor.toRgba());
152
- darwRect(ctx, {
153
- left,
154
- top,
155
- width,
156
- height,
157
- fill: gradient,
158
- });
159
- ctx.restore();
160
- };
161
-
162
- export { getGap, mergeLines, darwRect, darwText, darwLine, drawMask };
1
+ import type { Rect } from './ruler';
2
+ import { fabric } from '@hprint/core';
3
+
4
+ /**
5
+ * 计算尺子间距
6
+ * @param zoom 缩放比例
7
+ * @returns 返回计算出的尺子间距
8
+ */
9
+ const getGap = (zoom: number) => {
10
+ const zooms = [0.02, 0.03, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 18];
11
+ const gaps = [5000, 2500, 1000, 500, 250, 100, 50, 25, 10, 5, 2];
12
+
13
+ let i = 0;
14
+ while (i < zooms.length && zooms[i] < zoom) {
15
+ i++;
16
+ }
17
+
18
+ return gaps[i - 1] || 5000;
19
+ };
20
+
21
+ /**
22
+ * 线段合并
23
+ * @param rect Rect数组
24
+ * @param isHorizontal
25
+ * @returns 合并后的Rect数组
26
+ */
27
+ const mergeLines = (rect: Rect[], isHorizontal: boolean) => {
28
+ const axis = isHorizontal ? 'left' : 'top';
29
+ const length = isHorizontal ? 'width' : 'height';
30
+ // 先按照 axis 的大小排序
31
+ rect.sort((a, b) => a[axis] - b[axis]);
32
+ const mergedLines = [];
33
+ let currentLine = Object.assign({}, rect[0]);
34
+ for (const item of rect) {
35
+ const line = Object.assign({}, item);
36
+ if (currentLine[axis] + currentLine[length] >= line[axis]) {
37
+ // 当前线段和下一个线段相交,合并宽度
38
+ currentLine[length] =
39
+ Math.max(
40
+ currentLine[axis] + currentLine[length],
41
+ line[axis] + line[length]
42
+ ) - currentLine[axis];
43
+ } else {
44
+ // 当前线段和下一个线段不相交,将当前线段加入结果数组中,并更新当前线段为下一个线段
45
+ mergedLines.push(currentLine);
46
+ currentLine = Object.assign({}, line);
47
+ }
48
+ }
49
+ // 加入数组
50
+ mergedLines.push(currentLine);
51
+ return mergedLines;
52
+ };
53
+
54
+ const darwLine = (
55
+ ctx: CanvasRenderingContext2D,
56
+ options: {
57
+ left: number;
58
+ top: number;
59
+ width: number;
60
+ height: number;
61
+ stroke?: string | CanvasGradient | CanvasPattern;
62
+ lineWidth?: number;
63
+ }
64
+ ) => {
65
+ ctx.save();
66
+ const { left, top, width, height, stroke, lineWidth } = options;
67
+ ctx.beginPath();
68
+ stroke && (ctx.strokeStyle = stroke);
69
+ ctx.lineWidth = lineWidth ?? 1;
70
+ ctx.moveTo(left, top);
71
+ ctx.lineTo(left + width, top + height);
72
+ ctx.stroke();
73
+ ctx.restore();
74
+ };
75
+
76
+ const darwText = (
77
+ ctx: CanvasRenderingContext2D,
78
+ options: {
79
+ left: number;
80
+ top: number;
81
+ text: string;
82
+ fill?: string | CanvasGradient | CanvasPattern;
83
+ align?: CanvasTextAlign;
84
+ angle?: number;
85
+ fontSize?: number;
86
+ }
87
+ ) => {
88
+ ctx.save();
89
+ const { left, top, text, fill, align, angle, fontSize } = options;
90
+ fill && (ctx.fillStyle = fill);
91
+ ctx.textAlign = align ?? 'left';
92
+ ctx.textBaseline = 'top';
93
+ ctx.font = `${fontSize ?? 10}px sans-serif`;
94
+ if (angle) {
95
+ ctx.translate(left, top);
96
+ ctx.rotate((Math.PI / 180) * angle);
97
+ ctx.translate(-left, -top);
98
+ }
99
+ ctx.fillText(text, left, top);
100
+ ctx.restore();
101
+ };
102
+
103
+ const darwRect = (
104
+ ctx: CanvasRenderingContext2D,
105
+ options: {
106
+ left: number;
107
+ top: number;
108
+ width: number;
109
+ height: number;
110
+ fill?: string | CanvasGradient | CanvasPattern;
111
+ stroke?: string;
112
+ strokeWidth?: number;
113
+ }
114
+ ) => {
115
+ ctx.save();
116
+ const { left, top, width, height, fill, stroke, strokeWidth } = options;
117
+ ctx.beginPath();
118
+ fill && (ctx.fillStyle = fill);
119
+ ctx.rect(left, top, width, height);
120
+ ctx.fill();
121
+ if (stroke) {
122
+ ctx.strokeStyle = stroke;
123
+ ctx.lineWidth = strokeWidth ?? 1;
124
+ ctx.stroke();
125
+ }
126
+ ctx.restore();
127
+ };
128
+
129
+ const drawMask = (
130
+ ctx: CanvasRenderingContext2D,
131
+ options: {
132
+ isHorizontal: boolean;
133
+ left: number;
134
+ top: number;
135
+ width: number;
136
+ height: number;
137
+ backgroundColor: string;
138
+ }
139
+ ) => {
140
+ ctx.save();
141
+ const { isHorizontal, left, top, width, height, backgroundColor } = options;
142
+ // 创建一个线性渐变对象
143
+ const gradient = isHorizontal
144
+ ? ctx.createLinearGradient(left, height / 2, left + width, height / 2)
145
+ : ctx.createLinearGradient(width / 2, top, width / 2, height + top);
146
+ const transparentColor = new fabric.Color(backgroundColor);
147
+ transparentColor.setAlpha(0);
148
+ gradient.addColorStop(0, transparentColor.toRgba());
149
+ gradient.addColorStop(0.33, backgroundColor);
150
+ gradient.addColorStop(0.67, backgroundColor);
151
+ gradient.addColorStop(1, transparentColor.toRgba());
152
+ darwRect(ctx, {
153
+ left,
154
+ top,
155
+ width,
156
+ height,
157
+ fill: gradient,
158
+ });
159
+ ctx.restore();
160
+ };
161
+
162
+ export { getGap, mergeLines, darwRect, darwText, darwLine, drawMask };
package/tsconfig.json CHANGED
@@ -1,10 +1,10 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "compilerOptions": {
4
- "outDir": "./dist",
5
- "rootDir": "./",
6
- "composite": true
7
- },
8
- "include": ["**/*.ts"],
9
- "exclude": ["node_modules", "dist"]
10
- }
1
+ {
2
+ "extends": "../../tsconfig.json",
3
+ "compilerOptions": {
4
+ "outDir": "./dist",
5
+ "rootDir": "./",
6
+ "composite": true
7
+ },
8
+ "include": ["**/*.ts"],
9
+ "exclude": ["node_modules", "dist"]
10
+ }
package/vite.config.ts CHANGED
@@ -1,29 +1,29 @@
1
- import { defineConfig } from 'vite';
2
- import { resolve } from 'path';
3
- import { fileURLToPath } from 'url';
4
- import dts from 'vite-plugin-dts';
5
-
6
- const __dirname = fileURLToPath(new URL('.', import.meta.url));
7
-
8
- export default defineConfig({
9
- plugins: [
10
- dts({
11
- outDir: 'dist',
12
- include: ['src/**/*'],
13
- }),
14
- ],
15
- build: {
16
- lib: {
17
- entry: resolve(__dirname, 'src/index.ts'),
18
- name: '@hprint/plugins',
19
- fileName: 'index',
20
- formats: ['es', 'cjs'],
21
- },
22
- rollupOptions: {
23
- external: ['@hprint/core'],
24
- output: {
25
- globals: {},
26
- },
27
- },
28
- },
29
- });
1
+ import { defineConfig } from 'vite';
2
+ import { resolve } from 'path';
3
+ import { fileURLToPath } from 'url';
4
+ import dts from 'vite-plugin-dts';
5
+
6
+ const __dirname = fileURLToPath(new URL('.', import.meta.url));
7
+
8
+ export default defineConfig({
9
+ plugins: [
10
+ dts({
11
+ outDir: 'dist',
12
+ include: ['src/**/*'],
13
+ }),
14
+ ],
15
+ build: {
16
+ lib: {
17
+ entry: resolve(__dirname, 'src/index.ts'),
18
+ name: '@hprint/plugins',
19
+ fileName: 'index',
20
+ formats: ['es', 'cjs'],
21
+ },
22
+ rollupOptions: {
23
+ external: ['@hprint/core'],
24
+ output: {
25
+ globals: {},
26
+ },
27
+ },
28
+ },
29
+ });