feat: add thickness selection feature to the sidebar for drawings

Author: mustafacagri

src/App.tsx

@@ -5,14 +5,13 @@ import { getRandomColor } from './utils'
 // @ts-expect-error -> no support for EaselJS in TypeScript -> https://github.com/CreateJS/EaselJS/issues/796
 import { Stage, Shape, Ticker } from '@createjs/easeljs'
 import { Shape as ShapeInterface } from './interfaces'
-import { ShapeType } from './utils/constants'
+import { defaultPathThickness, ShapeType } from './utils/constants'
 import Sidebar from './components/Sidebar'
 import ThreeJSViewer from './components/ThreeJSViewer'
 import { isEmpty } from 'lodash'
 
 const Canvas: React.FC = () => {
-  const pathThickness = 25
-
+  const [pathThickness, setPathThickness] = useState(defaultPathThickness)
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const stageRef = useRef<Stage | null>(null)
   const [shapes, setShapes] = useState<ShapeInterface[]>([])
@@ -49,12 +48,13 @@ const Canvas: React.FC = () => {
           if (props.endX === undefined || props.endY === undefined) return
 
           g.beginStroke(props.strokeColor)
+            .setStrokeStyle(props?.thickness ?? pathThickness)
             .moveTo(0, 0)
             .lineTo(props.endX - props.x, props.endY - props.y)
           break
         case 'path':
           if (props?.points && props.points?.length > 1) {
-            g.beginStroke(props.strokeColor).setStrokeStyle(pathThickness)
+            g.beginStroke(props.strokeColor).setStrokeStyle(props?.thickness ?? pathThickness)
             g.moveTo(props.points[0].x, props.points[0].y)
 
             props.points.forEach((point: { x: number; y: number }, index: number) => {
@@ -102,6 +102,7 @@ const Canvas: React.FC = () => {
           const g = this.graphics
           g.clear()
             .beginStroke(props.strokeColor)
+            .setStrokeStyle(pathThickness)
             .moveTo(0, 0)
             .lineTo(props.endX - props.x, props.endY - props.y)
         } else if (props.type === 'path' && props.points) {
@@ -177,7 +178,7 @@ const Canvas: React.FC = () => {
         break
       }
       case 'line':
-        g.beginStroke(pathColor.current).moveTo(startX, startY).lineTo(x, y)
+        g.beginStroke(pathColor.current).setStrokeStyle(pathThickness).moveTo(startX, startY).lineTo(x, y)
         break
       case 'path': {
         const newPoints = g.beginStroke(pathColor.current).setStrokeStyle(pathThickness)
@@ -227,11 +228,12 @@ const Canvas: React.FC = () => {
         shapeProps = {
           type: 'line',
           fillColor: 'transparent',
-          strokeColor: getRandomColor(),
+          strokeColor: pathColor.current,
           x: startPoint.x,
           y: startPoint.y,
           endX: x,
           endY: y,
+          thickness: pathThickness,
         }
         break
       default:
@@ -249,12 +251,11 @@ const Canvas: React.FC = () => {
   // Mouse event handlers
   const handleCanvasMouseDown = useCallback(
     (event: React.MouseEvent<HTMLCanvasElement>) => {
+      if (!isDrawing) pathColor.current = getRandomColor()
       const { offsetX, offsetY } = event.nativeEvent
 
       if (shapeType === 'path') {
         pathPointsRef.current.push({ x: offsetX, y: offsetY })
-      } else {
-        pathColor.current = getRandomColor()
       }
 
       const clickedShape = stageRef.current?.getObjectsUnderPoint(offsetX, offsetY, 1)?.[0] as ShapeInterface
@@ -383,6 +384,7 @@ const Canvas: React.FC = () => {
             y: 0,
             points: pathPointsRef.current,
             instance: stageRef.current?.children[stageRef.current?.children.length - 1] as Shape,
+            thickness: pathThickness,
           }
 
           stageRef.current?.removeChild(currentShape)
@@ -422,6 +424,8 @@ const Canvas: React.FC = () => {
           shapeType={shapeType}
           toggleViewMode={toggleViewMode}
           is3DMode={is3DMode}
+          pathThickness={pathThickness}
+          setPathThickness={setPathThickness}
         />
         <div
           id='CanvasContainer'

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { importShapes, exportShapes } from '../utils/exportimport'
 import { isEmpty } from 'lodash'
-import { shapeList } from '../utils/constants'
+import { defaultPathThickness, shapeList } from '../utils/constants'
 import { SidebarProps } from '../interfaces'
 import Button from './ui/Button'
 
@@ -12,11 +12,18 @@ export default function Sidebar({
   shapeType,
   toggleViewMode,
   is3DMode,
+  pathThickness,
+  setPathThickness,
 }: Readonly<SidebarProps>) {
   const importFunc = (event: React.ChangeEvent<HTMLInputElement>) => {
     importShapes({ event, createShape, clearShapes })
   }
 
+  const setThickness = (thickness: number) => {
+    if (thickness < 1 || isNaN(thickness)) thickness = defaultPathThickness
+
+    setPathThickness(thickness)
+  }
   const iconList = ['rectangle', 'circle', 'horizontal_rule', 'route']
 
   return (
@@ -34,6 +41,19 @@ export default function Sidebar({
                   <span className='material-icons mr-2'>{iconList[index]}</span>
                   {type.charAt(0).toUpperCase() + type.slice(1)}
                 </Button>
+
+                {['line', 'path'].includes(type) && shapeType === type && (
+                  <div className='w-full my-4 flex items-center justify-between'>
+                    <span className='text-gray-500 text-xs'>Path thickness:</span>
+                    <input
+                      type='number'
+                      value={pathThickness}
+                      onChange={e => setThickness(Number(e.target.value))}
+                      className='p-2 border border-gray-200 rounded-md focus:outline-none focus:shadow-outline w-32'
+                      placeholder='Path thickness'
+                    />
+                  </div>
+                )}
               </li>
             ))}
           </ul>

src/components/ThreeJSViewer.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { Shape as ShapeInterface } from '../interfaces'
+import { defaultPathThickness } from '../utils/constants'
 
 interface ThreeJSViewerProps {
   shapes: ShapeInterface[]
@@ -49,6 +50,8 @@ const ThreeJSViewer: React.FC<ThreeJSViewerProps> = ({ shapes }) => {
       let material: THREE.Material
       let mesh: THREE.Mesh
 
+      const thickness = shape?.thickness ?? shape?.instance?._strokeStyle?.width ?? defaultPathThickness
+
       switch (shape.type) {
         case 'rectangle': {
           if (shape.width === undefined || shape.height === undefined) {
@@ -75,7 +78,7 @@ const ThreeJSViewer: React.FC<ThreeJSViewerProps> = ({ shapes }) => {
           const startPosition = convertTo3DCoords(shape.x, shape.y)
           const endPosition = convertTo3DCoords(shape.endX!, shape.endY!)
           const lineCurve = new THREE.LineCurve3(startPosition, endPosition)
-          geometry = new THREE.TubeGeometry(lineCurve, 10, 2, 8, false)
+          geometry = new THREE.TubeGeometry(lineCurve, 10, thickness, 8, false)
           material = new THREE.MeshPhongMaterial({ color: shape?.strokeColor ?? 0x000000 })
           mesh = new THREE.Mesh(geometry, material)
           break
@@ -84,7 +87,7 @@ const ThreeJSViewer: React.FC<ThreeJSViewerProps> = ({ shapes }) => {
           if (shape.points && shape.points.length > 1) {
             const pathPoints = shape.points.map(point => convertTo3DCoords(point.x, point.y))
             const curve = new THREE.CatmullRomCurve3(pathPoints)
-            geometry = new THREE.TubeGeometry(curve, 64, 25, 8, true)
+            geometry = new THREE.TubeGeometry(curve, 64, thickness, 8, false)
             material = new THREE.MeshPhongMaterial({ color: shape.strokeColor || 0x000000 })
             mesh = new THREE.Mesh(geometry, material)
           } else {

src/interfaces/index.ts

@@ -16,6 +16,7 @@ export interface Shape {
   endY?: number
   graphics?: any
   instance?: any
+  thickness?: number
 }
 
 export interface SidebarProps {
@@ -26,4 +27,6 @@ export interface SidebarProps {
   shapeType: string
   toggleViewMode: () => void
   is3DMode: boolean
+  pathThickness: number
+  setPathThickness: (thickness: number) => void
 }

src/utils/constants.ts

@@ -1,2 +1,3 @@
 export const shapeList = ['rectangle', 'circle', 'line', 'path']
 export type ShapeType = (typeof shapeList)[number]
+export const defaultPathThickness = 25

src/utils/exportimport.ts

@@ -1,4 +1,5 @@
 import { Shape } from '../interfaces'
+import { defaultPathThickness } from './constants'
 
 const getUpdatedShapeData = (shape: Shape) => {
   const instance = shape.instance
@@ -23,12 +24,15 @@ const getUpdatedShapeData = (shape: Shape) => {
         const dy = instance.y - shape.y
         updatedShape.endX = (shape.endX ?? 0) + dx
         updatedShape.endY = (shape.endY ?? 0) + dy
+        updatedShape.thickness ??= shape?.instance?._strokeStyle?.width || defaultPathThickness
       }
+
       break
     case 'path':
       if (instance && updatedShape.points) {
         updatedShape.x = 0
         updatedShape.y = 0
+        updatedShape.thickness ??= shape?.instance?._strokeStyle?.width || defaultPathThickness
 
         const dx = instance.x - shape.x
         const dy = instance.y - shape.y