@twick/canvas 0.0.1 → 0.14.2

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 (6) hide show
  1. package/README.md +129 -129
  2. package/dist/index.js +73 -62
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +73 -62
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +40 -36
package/README.md CHANGED
@@ -1,130 +1,130 @@
1
- # @twick/canvas
2
-
3
- A React-based canvas library built with Fabric.js for video and image manipulation.
4
-
5
- ## Requirements
6
-
7
- - Browser environment with Canvas and Video support
8
- - React 18 or higher
9
- - Fabric.js 6.6.2 or higher
10
-
11
- ## Installation
12
-
13
- ```bash
14
- pnpm install @twick/canvas
15
- ```
16
-
17
- ## Usage
18
-
19
- ### Basic Canvas Setup
20
-
21
- ```tsx
22
- import { useTwickCanvas } from '@twick/canvas';
23
- import { useRef, useEffect } from 'react';
24
-
25
- function CustomCanvas() {
26
- const canvasRef = useRef<HTMLCanvasElement>(null);
27
- const containerRef = useRef<HTMLDivElement>(null);
28
-
29
- const { twickCanvas, buildCanvas, addElementToCanvas } = useTwickCanvas({
30
- onCanvasReady: (canvas) => {
31
- console.log("Canvas ready", canvas);
32
- },
33
- onCanvasOperation: (operation, data) => {
34
- console.log("Canvas operation", operation, data);
35
- }
36
- });
37
-
38
- useEffect(() => {
39
- const container = containerRef.current;
40
- const canvasSize = {
41
- width: container?.clientWidth,
42
- height: container?.clientHeight,
43
- };
44
-
45
- buildCanvas({
46
- videoSize: {
47
- width: 720,
48
- height: 1280,
49
- },
50
- canvasSize,
51
- canvasRef: canvasRef.current,
52
- });
53
- }, []);
54
-
55
- return (
56
- <div ref={containerRef}>
57
- <canvas ref={canvasRef} />
58
- </div>
59
- );
60
- }
61
- ```
62
-
63
- ### Adding Elements
64
-
65
- ```tsx
66
- // Add an image
67
- const imageElement = {
68
- type: "image",
69
- id: "image-1",
70
- frame: {
71
- size: [400, 300],
72
- },
73
- props: {
74
- src: "https://example.com/image.jpg",
75
- }
76
- };
77
-
78
- addElementToCanvas({ element: imageElement, index: 0 });
79
-
80
- // Add text
81
- const textElement = {
82
- type: "text",
83
- id: "text-1",
84
- props: {
85
- x: 100,
86
- y: 100,
87
- text: "Hello World",
88
- fontSize: 64,
89
- fill: "#FFFFFF",
90
- }
91
- };
92
-
93
- addElementToCanvas({ element: textElement, index: 1 });
94
- ```
95
-
96
- ## API Reference
97
-
98
- ### Hooks
99
-
100
- - `useTwickCanvas`: Custom hook for canvas manipulation
101
-
102
- ### Helpers
103
-
104
- - `createCanvas`: Create a new Fabric.js canvas instance
105
- - `reorderElementsByZIndex`: Reorder canvas elements by z-index
106
- - `getCurrentFrameEffect`: Get current frame effect
107
- - `convertToCanvasPosition`: Convert video coordinates to canvas coordinates
108
- - `convertToVideoPosition`: Convert canvas coordinates to video coordinates
109
-
110
- ### Types
111
-
112
- - `CanvasProps`: Canvas configuration props
113
- - `CanvasMetadata`: Canvas metadata interface
114
- - `FrameEffect`: Frame effect interface
115
- - `CanvasElement`: Canvas element interface
116
- - `CanvasElementProps`: Canvas element props interface
117
- - `CaptionProps`: Caption configuration props
118
-
119
- ## Browser Support
120
-
121
- This library requires a browser environment with support for:
122
- - HTML5 Canvas
123
- - HTML5 Video
124
- - Modern JavaScript features (ES2020+)
125
-
126
- The library will throw appropriate errors if used in an unsupported environment.
127
-
128
- ## License
129
-
1
+ # @twick/canvas
2
+
3
+ A React-based canvas library built with Fabric.js for video and image manipulation.
4
+
5
+ ## Requirements
6
+
7
+ - Browser environment with Canvas and Video support
8
+ - React 18 or higher
9
+ - Fabric.js 6.6.2 or higher
10
+
11
+ ## Installation
12
+
13
+ ```bash
14
+ pnpm install @twick/canvas
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ ### Basic Canvas Setup
20
+
21
+ ```tsx
22
+ import { useTwickCanvas } from '@twick/canvas';
23
+ import { useRef, useEffect } from 'react';
24
+
25
+ function CustomCanvas() {
26
+ const canvasRef = useRef<HTMLCanvasElement>(null);
27
+ const containerRef = useRef<HTMLDivElement>(null);
28
+
29
+ const { twickCanvas, buildCanvas, addElementToCanvas } = useTwickCanvas({
30
+ onCanvasReady: (canvas) => {
31
+ console.log("Canvas ready", canvas);
32
+ },
33
+ onCanvasOperation: (operation, data) => {
34
+ console.log("Canvas operation", operation, data);
35
+ }
36
+ });
37
+
38
+ useEffect(() => {
39
+ const container = containerRef.current;
40
+ const canvasSize = {
41
+ width: container?.clientWidth,
42
+ height: container?.clientHeight,
43
+ };
44
+
45
+ buildCanvas({
46
+ videoSize: {
47
+ width: 720,
48
+ height: 1280,
49
+ },
50
+ canvasSize,
51
+ canvasRef: canvasRef.current,
52
+ });
53
+ }, []);
54
+
55
+ return (
56
+ <div ref={containerRef}>
57
+ <canvas ref={canvasRef} />
58
+ </div>
59
+ );
60
+ }
61
+ ```
62
+
63
+ ### Adding Elements
64
+
65
+ ```tsx
66
+ // Add an image
67
+ const imageElement = {
68
+ type: "image",
69
+ id: "image-1",
70
+ frame: {
71
+ size: [400, 300],
72
+ },
73
+ props: {
74
+ src: "https://example.com/image.jpg",
75
+ }
76
+ };
77
+
78
+ addElementToCanvas({ element: imageElement, index: 0 });
79
+
80
+ // Add text
81
+ const textElement = {
82
+ type: "text",
83
+ id: "text-1",
84
+ props: {
85
+ x: 100,
86
+ y: 100,
87
+ text: "Hello World",
88
+ fontSize: 64,
89
+ fill: "#FFFFFF",
90
+ }
91
+ };
92
+
93
+ addElementToCanvas({ element: textElement, index: 1 });
94
+ ```
95
+
96
+ ## API Reference
97
+
98
+ ### Hooks
99
+
100
+ - `useTwickCanvas`: Custom hook for canvas manipulation
101
+
102
+ ### Helpers
103
+
104
+ - `createCanvas`: Create a new Fabric.js canvas instance
105
+ - `reorderElementsByZIndex`: Reorder canvas elements by z-index
106
+ - `getCurrentFrameEffect`: Get current frame effect
107
+ - `convertToCanvasPosition`: Convert video coordinates to canvas coordinates
108
+ - `convertToVideoPosition`: Convert canvas coordinates to video coordinates
109
+
110
+ ### Types
111
+
112
+ - `CanvasProps`: Canvas configuration props
113
+ - `CanvasMetadata`: Canvas metadata interface
114
+ - `FrameEffect`: Frame effect interface
115
+ - `CanvasElement`: Canvas element interface
116
+ - `CanvasElementProps`: Canvas element props interface
117
+ - `CaptionProps`: Caption configuration props
118
+
119
+ ## Browser Support
120
+
121
+ This library requires a browser environment with support for:
122
+ - HTML5 Canvas
123
+ - HTML5 Video
124
+ - Modern JavaScript features (ES2020+)
125
+
126
+ The library will throw appropriate errors if used in an unsupported environment.
127
+
128
+ ## License
129
+
130
130
  Apache-2.0
package/dist/index.js CHANGED
@@ -2,6 +2,39 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const fabric = require("fabric");
4
4
  const react = require("react");
5
+ const DEFAULT_TEXT_PROPS = {
6
+ family: "Poppins",
7
+ size: 48,
8
+ fill: "#FFFFFF",
9
+ stroke: "#000000",
10
+ lineWidth: 0
11
+ };
12
+ const DEFAULT_CAPTION_PROPS = {
13
+ family: "Poppins",
14
+ size: 48,
15
+ fill: "#FFFFFF",
16
+ fontWeight: 600,
17
+ stroke: "#000000",
18
+ lineWidth: 0.2,
19
+ shadowColor: "#000000",
20
+ shadowBlur: 2,
21
+ shadowOffset: [0, 0]
22
+ };
23
+ const CANVAS_OPERATIONS = {
24
+ ITEM_SELECTED: "ITEM_SELECTED",
25
+ ITEM_UPDATED: "ITEM_UPDATED",
26
+ ITEM_DELETED: "ITEM_DELETED",
27
+ ITEM_ADDED: "ITEM_ADDED",
28
+ ITEM_GROUPED: "ITEM_GROUPED",
29
+ ITEM_UNGROUPED: "ITEM_UNGROUPED"
30
+ };
31
+ const ELEMENT_TYPES = {
32
+ TEXT: "text",
33
+ CAPTION: "caption",
34
+ IMAGE: "image",
35
+ VIDEO: "video",
36
+ RECT: "rect"
37
+ };
5
38
  const isBrowser = typeof window !== "undefined";
6
39
  const isCanvasSupported = isBrowser && !!window.HTMLCanvasElement;
7
40
  function assertBrowser() {
@@ -14,7 +47,7 @@ function assertCanvasSupport() {
14
47
  throw new Error("Canvas is not supported in this environment");
15
48
  }
16
49
  }
17
- function createCanvas({
50
+ const createCanvas = ({
18
51
  videoSize,
19
52
  canvasSize,
20
53
  canvasRef,
@@ -24,7 +57,7 @@ function createCanvas({
24
57
  uniScaleTransform = true,
25
58
  enableRetinaScaling = true,
26
59
  touchZoomThreshold = 10
27
- }) {
60
+ }) => {
28
61
  assertBrowser();
29
62
  assertCanvasSupport();
30
63
  const canvasMetadata = {
@@ -61,35 +94,36 @@ function createCanvas({
61
94
  canvas,
62
95
  canvasMetadata
63
96
  };
64
- }
65
- function reorderElementsByZIndex(canvas) {
97
+ };
98
+ const reorderElementsByZIndex = (canvas) => {
66
99
  if (!canvas) return;
67
- let backgroundColor = canvas.backgroundColor;
100
+ const backgroundColor = canvas.backgroundColor;
68
101
  const objects = canvas.getObjects();
102
+ console.log("objects", objects);
69
103
  objects.sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));
70
104
  canvas.clear();
71
105
  canvas.backgroundColor = backgroundColor;
72
106
  objects.forEach((obj) => canvas.add(obj));
73
107
  canvas.renderAll();
74
- }
75
- function clearCanvas(canvas) {
108
+ };
109
+ const clearCanvas = (canvas) => {
76
110
  if (!canvas) return;
77
111
  canvas.clear();
78
112
  canvas.renderAll();
79
- }
80
- function convertToCanvasPosition(x, y, canvasMetadata) {
113
+ };
114
+ const convertToCanvasPosition = (x, y, canvasMetadata) => {
81
115
  return {
82
116
  x: x * canvasMetadata.scaleX + canvasMetadata.width / 2,
83
117
  y: y * canvasMetadata.scaleY + canvasMetadata.height / 2
84
118
  };
85
- }
86
- function convertToVideoPosition(x, y, canvasMetadata, videoSize) {
119
+ };
120
+ const convertToVideoPosition = (x, y, canvasMetadata, videoSize) => {
87
121
  return {
88
122
  x: x / canvasMetadata.scaleX - videoSize.width / 2,
89
123
  y: y / canvasMetadata.scaleY - videoSize.height / 2
90
124
  };
91
- }
92
- function getCurrentFrameEffect(item, seekTime) {
125
+ };
126
+ const getCurrentFrameEffect = (item, seekTime) => {
93
127
  var _a;
94
128
  let currentFrameEffect;
95
129
  for (let i = 0; i < ((_a = item == null ? void 0 : item.frameEffects) == null ? void 0 : _a.length); i++) {
@@ -99,39 +133,6 @@ function getCurrentFrameEffect(item, seekTime) {
99
133
  }
100
134
  }
101
135
  return currentFrameEffect;
102
- }
103
- const DEFAULT_TEXT_PROPS = {
104
- family: "Poppins",
105
- size: 48,
106
- fill: "#FFFFFF",
107
- stroke: "#000000",
108
- lineWidth: 0
109
- };
110
- const DEFAULT_CAPTION_PROPS = {
111
- family: "Poppins",
112
- size: 48,
113
- fill: "#FFFFFF",
114
- fontWeight: 600,
115
- stroke: "#000000",
116
- lineWidth: 0.2,
117
- shadowColor: "#000000",
118
- shadowBlur: 2,
119
- shadowOffset: [0, 0]
120
- };
121
- const CANVAS_OPERATIONS = {
122
- ITEM_SELECTED: "ITEM_SELECTED",
123
- ITEM_UPDATED: "ITEM_UPDATED",
124
- ITEM_DELETED: "ITEM_DELETED",
125
- ITEM_ADDED: "ITEM_ADDED",
126
- ITEM_GROUPED: "ITEM_GROUPED",
127
- ITEM_UNGROUPED: "ITEM_UNGROUPED"
128
- };
129
- const ELEMENT_TYPES = {
130
- TEXT: "text",
131
- CAPTION: "caption",
132
- IMAGE: "image",
133
- VIDEO: "video",
134
- RECT: "rect"
135
136
  };
136
137
  const disabledControl = new fabric.Control({
137
138
  x: 0,
@@ -160,7 +161,7 @@ const rotateControl = new fabric.Control({
160
161
  actionName: "rotate",
161
162
  withConnection: true
162
163
  });
163
- async function getThumbnail(videoUrl, seekTime = 0.1, playbackRate = 1) {
164
+ const getThumbnail = async (videoUrl, seekTime = 0.1, playbackRate = 1) => {
164
165
  return new Promise((resolve, reject) => {
165
166
  const video = document.createElement("video");
166
167
  video.crossOrigin = "anonymous";
@@ -169,6 +170,14 @@ async function getThumbnail(videoUrl, seekTime = 0.1, playbackRate = 1) {
169
170
  video.autoplay = false;
170
171
  video.preload = "auto";
171
172
  video.playbackRate = playbackRate;
173
+ video.style.position = "absolute";
174
+ video.style.left = "-9999px";
175
+ video.style.top = "-9999px";
176
+ video.style.width = "1px";
177
+ video.style.height = "1px";
178
+ video.style.opacity = "0";
179
+ video.style.pointerEvents = "none";
180
+ video.style.zIndex = "-1";
172
181
  let timeoutId;
173
182
  const cleanup = () => {
174
183
  if (video.parentNode) video.remove();
@@ -236,8 +245,8 @@ async function getThumbnail(videoUrl, seekTime = 0.1, playbackRate = 1) {
236
245
  video.src = videoUrl;
237
246
  document.body.appendChild(video);
238
247
  });
239
- }
240
- function getObjectFitSize(objectFit, elementSize, containerSize) {
248
+ };
249
+ const getObjectFitSize = (objectFit, elementSize, containerSize) => {
241
250
  const elementAspectRatio = elementSize.width / elementSize.height;
242
251
  const containerAspectRatio = containerSize.width / containerSize.height;
243
252
  switch (objectFit) {
@@ -276,20 +285,20 @@ function getObjectFitSize(objectFit, elementSize, containerSize) {
276
285
  height: elementSize.height
277
286
  };
278
287
  }
279
- }
288
+ };
280
289
  const addTextElement = ({
281
290
  element,
282
291
  index,
283
292
  canvas,
284
293
  canvasMetadata
285
294
  }) => {
286
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
295
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
287
296
  const { x, y } = convertToCanvasPosition(
288
297
  ((_a = element.props) == null ? void 0 : _a.x) || 0,
289
298
  ((_b = element.props) == null ? void 0 : _b.y) || 0,
290
299
  canvasMetadata
291
300
  );
292
- const text = new fabric.FabricText(((_c = element.props) == null ? void 0 : _c.text) || "", {
301
+ const text = new fabric.FabricText(((_c = element.props) == null ? void 0 : _c.text) || element.t || "", {
293
302
  left: x,
294
303
  top: y,
295
304
  originX: "center",
@@ -302,13 +311,15 @@ const addTextElement = ({
302
311
  fontStyle: ((_g = element.props) == null ? void 0 : _g.fontStyle) || "normal",
303
312
  fontWeight: ((_h = element.props) == null ? void 0 : _h.fontWeight) || "normal",
304
313
  fill: ((_i = element.props) == null ? void 0 : _i.fill) || DEFAULT_TEXT_PROPS.fill,
305
- stroke: ((_j = element.props) == null ? void 0 : _j.stroke) || DEFAULT_TEXT_PROPS.stroke,
306
- strokeWidth: ((_k = element.props) == null ? void 0 : _k.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
307
- shadow: ((_l = element.props) == null ? void 0 : _l.shadowColor) ? new fabric.Shadow({
308
- offsetX: ((_n = (_m = element.props) == null ? void 0 : _m.shadowOffset) == null ? void 0 : _n.length) && ((_p = (_o = element.props) == null ? void 0 : _o.shadowOffset) == null ? void 0 : _p.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
309
- offsetY: ((_r = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r.length) && ((_s = element.props) == null ? void 0 : _s.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
310
- blur: (((_t = element.props) == null ? void 0 : _t.shadowBlur) || 2) / 2,
311
- color: (_u = element.props) == null ? void 0 : _u.shadowColor
314
+ skipWrapping: false,
315
+ textAlign: ((_j = element.props) == null ? void 0 : _j.textAlign) || "center",
316
+ stroke: ((_k = element.props) == null ? void 0 : _k.stroke) || DEFAULT_TEXT_PROPS.stroke,
317
+ strokeWidth: ((_l = element.props) == null ? void 0 : _l.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
318
+ shadow: ((_m = element.props) == null ? void 0 : _m.shadowColor) ? new fabric.Shadow({
319
+ offsetX: ((_o = (_n = element.props) == null ? void 0 : _n.shadowOffset) == null ? void 0 : _o.length) && ((_q = (_p = element.props) == null ? void 0 : _p.shadowOffset) == null ? void 0 : _q.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
320
+ offsetY: ((_s = (_r = element.props) == null ? void 0 : _r.shadowOffset) == null ? void 0 : _s.length) && ((_t = element.props) == null ? void 0 : _t.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
321
+ blur: (((_u = element.props) == null ? void 0 : _u.shadowBlur) || 2) / 2,
322
+ color: (_v = element.props) == null ? void 0 : _v.shadowColor
312
323
  }) : void 0
313
324
  });
314
325
  text.set("id", element.id);
@@ -363,7 +374,7 @@ const addCaptionElement = ({
363
374
  ((_e = (_d = element.props) == null ? void 0 : _d.pos) == null ? void 0 : _e.y) || ((_f = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _f.y) || 0,
364
375
  canvasMetadata
365
376
  );
366
- const caption = new fabric.FabricText(((_g = element.props) == null ? void 0 : _g.text) || "", {
377
+ const caption = new fabric.FabricText(((_g = element.props) == null ? void 0 : _g.text) || element.t || "", {
367
378
  left: x,
368
379
  top: y,
369
380
  originX: "center",
@@ -527,8 +538,8 @@ const addMediaGroup = ({
527
538
  lockUniScaling: true,
528
539
  originX: "center",
529
540
  originY: "center",
530
- width: newSize.width,
531
- height: newSize.height
541
+ scaleX: newSize.width / img.width,
542
+ scaleY: newSize.height / img.height
532
543
  });
533
544
  const { x, y } = convertToCanvasPosition(
534
545
  (framePosition == null ? void 0 : framePosition.x) || 0,