diff --git a/package-lock.json b/package-lock.json index 24b64ea..e82e8f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5734,9 +5734,9 @@ "dev": true }, "node_modules/follow-redirects": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", "funding": [ { "type": "individual", @@ -9633,9 +9633,9 @@ "optional": true }, "node_modules/vite": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.7.tgz", - "integrity": "sha512-B4T4rJCDPihrQo2B+h1MbeGL/k/GMAHzhQ8S0LjQ142s6/+l3hHTT095ORvsshj4QCkoWu3Xtmob5mazvakaOw==", + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz", + "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==", "dev": true, "dependencies": { "esbuild": "^0.19.3", diff --git a/src/App.tsx b/src/App.tsx index ab7b8f3..a2bb895 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -426,10 +426,6 @@ function App() { const artboardPosition = getArtboardPosition(canvasRef.current, activeArtboardId); const artboardLeftAdjustment = artboardPosition.left; const artboardTopAdjustment = artboardPosition.top; - - if (artboardLeftAdjustment === undefined || artboardTopAdjustment === undefined) { - return; - } const artboardDimensions = getArtboardDimensions(canvasRef.current, activeArtboardId); // Now we need to create a new canvas and add the artboard to it const offscreenCanvas = new fabric.Canvas('print', { diff --git a/src/modules/animate/index.tsx b/src/modules/animate/index.tsx index 0590f26..f7c7757 100644 --- a/src/modules/animate/index.tsx +++ b/src/modules/animate/index.tsx @@ -211,12 +211,8 @@ const Animation: React.FC = ({ currentSelectedElements, saveArtb if (!artboard) { throw new Error('Artboard not found'); } - const artboardLeftAdjustment = artboard.left; - const artboardTopAdjustment = artboard.top; - - if (!artboardLeftAdjustment || !artboardTopAdjustment) { - return; - } + const artboardLeftAdjustment = artboard.left!; + const artboardTopAdjustment = artboard.top!; const width = artboard.width!; const height = artboard.height!; diff --git a/src/modules/artboard/helpers.ts b/src/modules/artboard/helpers.ts index 5aa57a0..17146f7 100644 --- a/src/modules/artboard/helpers.ts +++ b/src/modules/artboard/helpers.ts @@ -17,14 +17,8 @@ export const getArtboardDimensions = ( artboardId: string, ): { width: number; height: number } => { const artboard = getArtboardObject(canvas, artboardId); - - const width = artboard.width; - const height = artboard.height; - - if (width === undefined || height === undefined) { - throw new Error('Artboard dimensions not found'); - } - + const width = artboard.width!; + const height = artboard.height!; return { width, height, @@ -36,14 +30,8 @@ export const getArtboardPosition = ( artboardId: string, ): { left: number; top: number } => { const artboard = getArtboardObject(canvas, artboardId); - - const left = artboard.left; - const top = artboard.top; - - if (left === undefined || top === undefined || left === null || top === null) { - throw new Error('Artboard position not found'); - } - + const left = artboard.left!; + const top = artboard.top!; return { left, top, diff --git a/src/modules/image/helpers.ts b/src/modules/image/helpers.ts index 12a16e8..a0fe5ac 100644 --- a/src/modules/image/helpers.ts +++ b/src/modules/image/helpers.ts @@ -39,14 +39,10 @@ export const getScaledPosition = (artboard: fabric.Rect): { left: number; top: n throw new Error('Artboard not found'); } - const left = artboard.left; - const top = artboard.top; - const width = artboard.width; - const height = artboard.height; - - if (left === undefined || top === undefined || width === undefined || height === undefined) { - throw new Error('Artboard dimensions not found'); - } + const left = artboard.left!; + const top = artboard.top!; + const width = artboard.width!; + const height = artboard.height!; // calculate the center of the artboard const centerX = left + width / 2; diff --git a/src/modules/position/helpers.ts b/src/modules/position/helpers.ts index 25b8693..fcc29fa 100644 --- a/src/modules/position/helpers.ts +++ b/src/modules/position/helpers.ts @@ -23,71 +23,68 @@ export const alignElementToRect = ( canvas: fabric.Canvas, ) => { const targetRect = getArtboardObject(canvas, activeArtboardId); - + const targetLeft = targetRect.left!; + const targetTop = targetRect.top!; + const targetWidth = targetRect.width!; + const targetHeight = targetRect.height!; switch (position) { case 'left': currentSelectedElements.forEach(element => { - if (!targetRect.left || !element.left) throw new Error('Invalid target rect in left align'); + const elementLeft = element.left!; + const { left: elementExtremeLeft } = getExtremePoints(element); element.set({ - left: targetRect.left + (element.left - getExtremePoints(element).left), + left: targetLeft + (elementLeft - elementExtremeLeft), }); }); break; case 'center': currentSelectedElements.forEach(element => { - if (!targetRect.left || !element.left || !targetRect.width) - throw new Error('Invalid target rect in center align'); - const artboardCenter = targetRect.left + (targetRect.width + targetRect.left - targetRect.left) / 2; - const elementCenter = - getExtremePoints(element).left + - (getExtremePoints(element).right - getExtremePoints(element).left) / 2; + const elementLeft = element.left!; + const artboardCenter = targetLeft + (targetWidth + targetLeft - targetLeft) / 2; + const { left: elementExtremeLeft, right: elementExtremeRight } = getExtremePoints(element); + const elementCenter = elementExtremeLeft + (elementExtremeRight - elementExtremeLeft) / 2; element.set({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - //@ts-ignore - left: element.left + (artboardCenter - elementCenter), + left: elementLeft + (artboardCenter - elementCenter), }); }); break; case 'right': currentSelectedElements.forEach(element => { + const elementLeft = element.left!; + const { right: elementExtremeRight } = getExtremePoints(element); + element.set({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - //@ts-ignore - left: element.left + (targetRect.left + targetRect.width) - getExtremePoints(element).right, + left: elementLeft + (targetLeft + targetWidth) - elementExtremeRight, }); }); break; case 'top': currentSelectedElements.forEach(element => { - if (!targetRect.top || !element.top || !targetRect.width) - throw new Error('Invalid target rect in top align'); + const elementTop = element.top!; + const { top: elementExtremeTop } = getExtremePoints(element); element.set({ - top: targetRect.top + (element.top - getExtremePoints(element).top), + top: targetTop + (elementTop - elementExtremeTop), }); }); break; case 'middle': currentSelectedElements.forEach(element => { - if (!targetRect.top || !element.top || !targetRect.height) - throw new Error('Invalid target rect in middle align'); - const artboardCenter = targetRect.top + (targetRect.height + targetRect.top - targetRect.top) / 2; - const elementCenter = - getExtremePoints(element).top + - (getExtremePoints(element).bottom - getExtremePoints(element).top) / 2; + const elementTop = element.top!; + const artboardCenter = targetTop + (targetHeight + targetTop - targetTop) / 2; + const { top: elementExtremeTop, bottom: elementExtremeBottom } = getExtremePoints(element); + const elementCenter = elementExtremeTop + (elementExtremeBottom - elementExtremeTop) / 2; element.set({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - //@ts-ignore - top: element.top + (artboardCenter - elementCenter), + top: elementTop + (artboardCenter - elementCenter), }); }); break; case 'bottom': currentSelectedElements.forEach(element => { + const elementTop = element.top!; + const { bottom: elementExtremeBottom } = getExtremePoints(element); element.set({ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - //@ts-ignore - top: element.top + (targetRect.top + targetRect.height) - getExtremePoints(element).bottom, + top: elementTop + (targetTop + targetHeight) - elementExtremeBottom, }); }); break;