@pooder/kit 0.0.2 → 2.0.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 (17) hide show
  1. package/CHANGELOG.md +26 -9
  2. package/dist/index.d.mts +29 -6
  3. package/dist/index.d.ts +29 -6
  4. package/dist/index.js +405 -62
  5. package/dist/index.mjs +435 -68
  6. package/package.json +2 -2
  7. package/src/background.ts +183 -173
  8. package/src/dieline.ts +580 -424
  9. package/src/film.ts +163 -155
  10. package/src/geometry.ts +251 -244
  11. package/src/hole.ts +493 -413
  12. package/src/image.ts +304 -146
  13. package/src/index.ts +8 -7
  14. package/src/mirror.ts +91 -0
  15. package/src/ruler.ts +255 -238
  16. package/src/white-ink.ts +329 -302
  17. package/tsconfig.json +13 -13
package/src/film.ts CHANGED
@@ -1,155 +1,163 @@
1
- import {Command, Editor, EditorState, Extension, Image, OptionSchema, PooderLayer} from '@pooder/core';
2
-
3
- interface FilmToolOptions {
4
- url: string;
5
- opacity: number;
6
- }
7
-
8
- export class FilmTool implements Extension<FilmToolOptions> {
9
- public name = 'FilmTool';
10
- public options: FilmToolOptions = {
11
- url: '',
12
- opacity: 0.5
13
- };
14
-
15
- public schema: Record<keyof FilmToolOptions, OptionSchema> = {
16
- url: {
17
- type: 'string',
18
- label: 'Film Image URL'
19
- },
20
- opacity: {
21
- type: 'number',
22
- min: 0,
23
- max: 1,
24
- step: 0.1,
25
- label: 'Opacity'
26
- }
27
- };
28
-
29
- onMount(editor: Editor) {
30
- this.initLayer(editor);
31
- this.updateFilm(editor, this.options);
32
- }
33
-
34
- onUnmount(editor: Editor) {
35
- const layer = editor.getLayer('overlay');
36
- if (layer) {
37
- const img = editor.getObject('film-image', 'overlay');
38
- if (img) {
39
- layer.remove(img);
40
- editor.canvas.requestRenderAll();
41
- }
42
- }
43
- }
44
-
45
- onUpdate(editor: Editor, state: EditorState) {
46
- }
47
-
48
- private initLayer(editor: Editor) {
49
- let overlayLayer = editor.getLayer('overlay');
50
- if (!overlayLayer) {
51
- const width = editor.state.width;
52
- const height = editor.state.height;
53
-
54
- const layer = new PooderLayer([], {
55
- width,
56
- height,
57
- left: 0,
58
- top: 0,
59
- originX: 'left',
60
- originY: 'top',
61
- selectable: false,
62
- evented: false,
63
- subTargetCheck: false,
64
- interactive: false,
65
- data: {
66
- id: 'overlay'
67
- }
68
- });
69
-
70
- editor.canvas.add(layer);
71
- editor.canvas.bringObjectToFront(layer);
72
- }
73
- }
74
-
75
-
76
- private async updateFilm(editor: Editor, options: FilmToolOptions) {
77
- const layer = editor.getLayer('overlay');
78
- if (!layer){
79
- console.warn('[FilmTool] Overlay layer not found');
80
- return;
81
- }
82
-
83
- const { url, opacity } = options;
84
-
85
- if (!url) {
86
- const img = editor.getObject('film-image', 'overlay');
87
- if (img) {
88
- layer.remove(img);
89
- editor.canvas.requestRenderAll();
90
- }
91
- return;
92
- }
93
-
94
- const width = editor.state.width;
95
- const height = editor.state.height;
96
-
97
- let img = editor.getObject('film-image', 'overlay') as Image;
98
- try {
99
- if (img) {
100
- if (img.getSrc() !== url) {
101
- await img.setSrc(url);
102
- }
103
- img.set({ opacity });
104
- } else {
105
- img = await Image.fromURL(url, { crossOrigin: 'anonymous' });
106
- img.scaleToWidth(width);
107
- if (img.getScaledHeight() < height)
108
- img.scaleToHeight(height);
109
- img.set({
110
- originX: 'left',
111
- originY: 'top',
112
- left: 0,
113
- top: 0,
114
- opacity,
115
- selectable: false,
116
- evented: false,
117
- data: { id: 'film-image' }
118
- });
119
- layer.add(img);
120
- }
121
- editor.canvas.requestRenderAll();
122
- } catch (error) {
123
- console.error('[FilmTool] Failed to load film image', url, error);
124
- }
125
- }
126
-
127
- commands: Record<string, Command> = {
128
- setFilmImage: {
129
- execute: (editor: Editor, url: string, opacity: number) => {
130
- if (this.options.url === url && this.options.opacity === opacity) return true;
131
-
132
- this.options.url = url;
133
- this.options.opacity = opacity;
134
-
135
- this.updateFilm(editor, this.options);
136
-
137
- return true;
138
- },
139
- schema: {
140
- url: {
141
- type: 'string',
142
- label: 'Image URL',
143
- required: true
144
- },
145
- opacity: {
146
- type: 'number',
147
- label: 'Opacity',
148
- min: 0,
149
- max: 1,
150
- required: true
151
- }
152
- }
153
- }
154
- };
155
- }
1
+ import {
2
+ Command,
3
+ Editor,
4
+ EditorState,
5
+ Extension,
6
+ Image,
7
+ OptionSchema,
8
+ PooderLayer,
9
+ } from "@pooder/core";
10
+
11
+ interface FilmToolOptions {
12
+ url: string;
13
+ opacity: number;
14
+ }
15
+
16
+ export class FilmTool implements Extension<FilmToolOptions> {
17
+ public name = "FilmTool";
18
+ public options: FilmToolOptions = {
19
+ url: "",
20
+ opacity: 0.5,
21
+ };
22
+
23
+ public schema: Record<keyof FilmToolOptions, OptionSchema> = {
24
+ url: {
25
+ type: "string",
26
+ label: "Film Image URL",
27
+ },
28
+ opacity: {
29
+ type: "number",
30
+ min: 0,
31
+ max: 1,
32
+ step: 0.1,
33
+ label: "Opacity",
34
+ },
35
+ };
36
+
37
+ onMount(editor: Editor) {
38
+ this.initLayer(editor);
39
+ this.updateFilm(editor, this.options);
40
+ }
41
+
42
+ onUnmount(editor: Editor) {
43
+ const layer = editor.getLayer("overlay");
44
+ if (layer) {
45
+ const img = editor.getObject("film-image", "overlay");
46
+ if (img) {
47
+ layer.remove(img);
48
+ editor.canvas.requestRenderAll();
49
+ }
50
+ }
51
+ }
52
+
53
+ onUpdate(editor: Editor, state: EditorState) {
54
+ this.updateFilm(editor, this.options);
55
+ }
56
+
57
+ private initLayer(editor: Editor) {
58
+ let overlayLayer = editor.getLayer("overlay");
59
+ if (!overlayLayer) {
60
+ const width = editor.state.width;
61
+ const height = editor.state.height;
62
+
63
+ const layer = new PooderLayer([], {
64
+ width,
65
+ height,
66
+ left: 0,
67
+ top: 0,
68
+ originX: "left",
69
+ originY: "top",
70
+ selectable: false,
71
+ evented: false,
72
+ subTargetCheck: false,
73
+ interactive: false,
74
+ data: {
75
+ id: "overlay",
76
+ },
77
+ });
78
+
79
+ editor.canvas.add(layer);
80
+ editor.canvas.bringObjectToFront(layer);
81
+ }
82
+ }
83
+
84
+ private async updateFilm(editor: Editor, options: FilmToolOptions) {
85
+ const layer = editor.getLayer("overlay");
86
+ if (!layer) {
87
+ console.warn("[FilmTool] Overlay layer not found");
88
+ return;
89
+ }
90
+
91
+ const { url, opacity } = options;
92
+
93
+ if (!url) {
94
+ const img = editor.getObject("film-image", "overlay");
95
+ if (img) {
96
+ layer.remove(img);
97
+ editor.canvas.requestRenderAll();
98
+ }
99
+ return;
100
+ }
101
+
102
+ const width = editor.state.width;
103
+ const height = editor.state.height;
104
+
105
+ let img = editor.getObject("film-image", "overlay") as Image;
106
+ try {
107
+ if (img) {
108
+ if (img.getSrc() !== url) {
109
+ await img.setSrc(url);
110
+ }
111
+ img.set({ opacity });
112
+ } else {
113
+ img = await Image.fromURL(url, { crossOrigin: "anonymous" });
114
+ img.scaleToWidth(width);
115
+ if (img.getScaledHeight() < height) img.scaleToHeight(height);
116
+ img.set({
117
+ originX: "left",
118
+ originY: "top",
119
+ left: 0,
120
+ top: 0,
121
+ opacity,
122
+ selectable: false,
123
+ evented: false,
124
+ data: { id: "film-image" },
125
+ });
126
+ layer.add(img);
127
+ }
128
+ editor.canvas.requestRenderAll();
129
+ } catch (error) {
130
+ console.error("[FilmTool] Failed to load film image", url, error);
131
+ }
132
+ }
133
+
134
+ commands: Record<string, Command> = {
135
+ setFilmImage: {
136
+ execute: (editor: Editor, url: string, opacity: number) => {
137
+ if (this.options.url === url && this.options.opacity === opacity)
138
+ return true;
139
+
140
+ this.options.url = url;
141
+ this.options.opacity = opacity;
142
+
143
+ this.updateFilm(editor, this.options);
144
+
145
+ return true;
146
+ },
147
+ schema: {
148
+ url: {
149
+ type: "string",
150
+ label: "Image URL",
151
+ required: true,
152
+ },
153
+ opacity: {
154
+ type: "number",
155
+ label: "Opacity",
156
+ min: 0,
157
+ max: 1,
158
+ required: true,
159
+ },
160
+ },
161
+ },
162
+ };
163
+ }