Skip to content

Commit 5e47d7d

Browse files
author
Dany Boza
committed
add types for fabric objects
1 parent e34c59b commit 5e47d7d

File tree

12 files changed

+68
-66
lines changed

12 files changed

+68
-66
lines changed

‎craco.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
'@': resloveSrc(),
99
'@assets': resloveSrc('assets'),
1010
'@components': resloveSrc('components'),
11+
'@common': resloveSrc('common'),
1112
'@contexts': resloveSrc('contexts'),
1213
'@hooks': resloveSrc('hooks'),
1314
'@scenes': resloveSrc('scenes'),

‎src/common/interfaces.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { fabric } from 'fabric'
2+
3+
interface BaseObject {
4+
id: string
5+
name: string
6+
description?: string
7+
}
8+
export type FabricRect = fabric.Rect & BaseObject
9+
export type FabricCircle = fabric.Circle & BaseObject
10+
export type FabricTriangle = fabric.Triangle & BaseObject
11+
export type FabricObject = fabric.Object & BaseObject
12+
export type FabricObjects = FabricObject | FabricRect | FabricCircle | FabricTriangle
13+
14+
export type FabricRectOptions = fabric.IRectOptions & BaseObject
15+
export type FabricCircleOptions = fabric.ICircleOptions & BaseObject
16+
export type FabricTriangleOptions = fabric.ITriangleOptions & BaseObject
17+
export type FabricObjectOptions = fabric.IObjectOptions & BaseObject
18+
19+
export type FabricObjectsOptions = FabricObjectOptions | FabricRect | FabricCircle | FabricTriangle
20+
21+
// CONTEXT TYPES
22+
23+
export type CanvasType = 'editor' | 'previews'
24+
export type ToolboxType = 'textbox' | 'image' | 'previews' | 'default'
25+
export type ContextMenuType = 'canvas' | 'object'
26+
export interface ContextMenu {
27+
type: ContextMenuType
28+
visible: boolean
29+
top: number
30+
left: number
31+
}

‎src/components/AppBox/AppBox.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
1-
import { useEffect, useRef, FC } from 'react'
1+
import { useEffect, useRef } from 'react'
22
import { Flex } from 'theme-ui'
33
import ResizeObserver from 'resize-observer-polyfill'
44
import { useAppContext } from '@contexts/app/AppContext'
55

66
function AppBox({ children }) {
77
const containerRef = useRef<HTMLDivElement>()
88
const { isMobile, setIsMobile } = useAppContext()
9+
10+
const updateMediaQuery = (value: number) => {
11+
if (!isMobile && value >= 800) {
12+
setIsMobile(false)
13+
} else if (!isMobile && value < 800) {
14+
setIsMobile(true)
15+
} else {
16+
setIsMobile(false)
17+
}
18+
}
919
useEffect(() => {
10-
const containerWidth = containerRef.current.clientWidth
20+
const containerElement = containerRef.current
21+
const containerWidth = containerElement.clientWidth
1122
updateMediaQuery(containerWidth)
1223
const resizeObserver = new ResizeObserver(entries => {
1324
const { width = containerWidth } = (entries[0] && entries[0].contentRect) || {}
1425
updateMediaQuery(width)
1526
})
16-
resizeObserver.observe(containerRef.current)
27+
resizeObserver.observe(containerElement)
1728
return () => {
18-
if (containerRef.current) {
19-
resizeObserver.unobserve(containerRef.current)
29+
if (containerElement) {
30+
resizeObserver.unobserve(containerElement)
2031
}
2132
}
2233
}, [])
23-
const updateMediaQuery = (value: number) => {
24-
if (!isMobile && value >= 800) {
25-
setIsMobile(false)
26-
} else if (!isMobile && value < 800) {
27-
setIsMobile(true)
28-
} else {
29-
setIsMobile(false)
30-
}
31-
}
3234

3335
return (
3436
<Flex

‎src/components/Canvas/Canvas.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect } from 'react'
22
import { fabric } from 'fabric'
33
import { useCanvasContext } from '@/hooks'
4-
import { Flex, Box } from 'theme-ui'
4+
import { Flex } from 'theme-ui'
55
import ContextMenu from '@components/ContextMenu'
66

77
import {

‎src/components/ContextMenu/ContextMenuIcons.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,10 @@ function DeleteIcon() {
4545
)
4646
}
4747

48-
export default {
48+
const icons = {
4949
copy: <CopyIcon />,
5050
delete: <DeleteIcon />,
5151
paste: <PasteIcon />,
5252
}
53+
54+
export default icons

‎src/components/Panels/PanelItem/ObjectsPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function ObjectsPanel() {
6363
}}
6464
onClick={() => downloadImage(obj.uuid)}
6565
>
66-
<img width="80%" src={obj.urls.thumb} />
66+
<img width="80%" src={obj.urls.thumb} alt="svg object" />
6767
</Flex>
6868
))}
6969
</Grid>

‎src/components/Panels/PanelItem/ProjectPanel.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ReactNode, useEffect, useState } from 'react'
2-
import { Input, Box, Flex } from 'theme-ui'
1+
import { ReactNode, useState } from 'react'
2+
import { Box, Flex } from 'theme-ui'
33
import Scrollbars from 'react-custom-scrollbars'
44
import { useCoreHandler } from '@/handlers'
55
interface Format {
@@ -49,19 +49,6 @@ function Option({ format, onClick }: OptionProp) {
4949
)
5050
}
5151

52-
interface Item {
53-
size: string
54-
label: string
55-
id: string
56-
}
57-
// options value placeholder onchange
58-
interface SelectProps {
59-
children: ReactNode
60-
value: Item
61-
placeholder: any
62-
onChange: () => void
63-
}
64-
6552
function Select({ onChange, value }: any) {
6653
const [open, setOpen] = useState(false)
6754
return (

‎src/contexts/canvas/CanvasContext.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, createContext, useState } from 'react'
22
import { fabric } from 'fabric'
3-
3+
import { ContextMenu, CanvasType } from '@common/interfaces'
44
interface CanvasContext {
55
zoomRatio: number
66
setZoomRatio: (value: number) => void
@@ -14,15 +14,6 @@ interface CanvasContext {
1414
setCanvasType: (option: CanvasType) => void
1515
}
1616

17-
export type CanvasType = 'editor' | 'previews'
18-
export type ToolboxType = 'textbox' | 'image' | 'previews' | 'default'
19-
export type ContextMenuType = 'canvas' | 'object'
20-
export interface ContextMenu {
21-
type: ContextMenuType
22-
visible: boolean
23-
top: number
24-
left: number
25-
}
2617
export const Context = createContext<CanvasContext>({
2718
zoomRatio: 1,
2819
setZoomRatio: () => {},

‎src/handlers/useCoreHandler.ts‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useCanvasContext } from '@/hooks'
22
import { useCallback } from 'react'
33
import { CanvasObjects } from '@utils/canvas'
44
import { propertiesToInclude } from '../constants/contants'
5+
import { FabricObject } from '@common/interfaces'
56

67
function useCoreHandler() {
78
const { canvas, activeObject } = useCanvasContext()
@@ -13,13 +14,11 @@ function useCoreHandler() {
1314
const diffHeight = nextHeight / 2 - canvas.height / 2
1415
canvas.setWidth(nextWidth).setHeight(nextHeight)
1516

16-
//@ts-ignore
17-
const workarea = canvas.getObjects().find(obj => obj.id === 'workarea')
17+
const workarea = canvas.getObjects().find((obj: FabricObject) => obj.id === 'workarea')
1818
workarea.center()
1919
canvas.renderAll()
2020

21-
canvas.forEachObject(obj => {
22-
// @ts-ignore
21+
canvas.forEachObject((obj: FabricObject) => {
2322
if (obj.id !== 'workarea') {
2423
const left = obj.left + diffWidth
2524
const top = obj.top + diffHeight
@@ -38,8 +37,7 @@ function useCoreHandler() {
3837
const resizeWorkarea = useCallback(
3938
(width: number, height: number) => {
4039
if (canvas) {
41-
//@ts-ignore
42-
const workarea = canvas.getObjects().find(obj => obj.id === 'workarea')
40+
const workarea = canvas.getObjects().find((obj: FabricObject) => obj.id === 'workarea')
4341
workarea.set({
4442
width,
4543
height,
@@ -60,8 +58,7 @@ function useCoreHandler() {
6058
element.scaleToHeight(180)
6159
}
6260

63-
//@ts-ignore
64-
const workarea = canvas.getObjects().find(obj => obj.id === 'workarea')
61+
const workarea = canvas.getObjects().find((obj: FabricObject) => obj.id === 'workarea')
6562
canvas.add(element)
6663
element.center()
6764

@@ -77,8 +74,7 @@ function useCoreHandler() {
7774

7875
const cloneOject = useCallback(() => {
7976
if (canvas) {
80-
//@ts-ignore
81-
const workarea = canvas.getObjects().find(obj => obj.id === 'workarea')
77+
const workarea = canvas.getObjects().find((obj: FabricObject) => obj.id === 'workarea')
8278

8379
activeObject?.clone((clone: fabric.Object) => {
8480
clone.set({
@@ -141,8 +137,7 @@ function useCoreHandler() {
141137

142138
const setCanvasBackgroundColor = useCallback(
143139
color => {
144-
// @ts-ignore
145-
const workarea = canvas.getObjects().find(object => object.id === 'workarea')
140+
const workarea = canvas.getObjects().find((object: FabricObject) => object.id === 'workarea')
146141
if (workarea) {
147142
workarea.set('fill', color)
148143
canvas.requestRenderAll()

‎src/handlers/useEventsHandler.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ function useEventHandlers() {
1818
const onMouseDown = useCallback(
1919
(e: any) => {
2020
if (e.button === 3 && e.target) {
21-
// @ts-ignore
2221
setContextMenu({
2322
...contextMenu,
2423
visible: true,
@@ -80,7 +79,6 @@ function useEventHandlers() {
8079
/**
8180
* Canvas selection handlers
8281
*/
83-
8482
const onSelect = useCallback(
8583
({ target }) => {
8684
if (target) {
@@ -113,15 +111,9 @@ function useEventHandlers() {
113111
* Keyboard Events Handler
114112
*/
115113

116-
const undo = useCallback(() => {
117-
// @ts-ignore
118-
canvas?.undo()
119-
}, [canvas])
114+
const undo = useCallback(() => {}, [canvas])
120115

121-
const redo = useCallback(() => {
122-
// @ts-ignore
123-
canvas?.redo()
124-
}, [canvas])
116+
const redo = useCallback(() => {}, [canvas])
125117

126118
const moveUp = useCallback(() => {
127119
if (activeObject && canvas) {

0 commit comments

Comments
 (0)