c16: refactor: change term from rectangle to shape (#94)

client/src/modules/pad-common/pad.slice.ts

@@ -3,7 +3,7 @@ import {
   PadCursor,
   SVGColor,
   PathData,
-  RectangleData,
+  ShapeData,
   PadElementType,
 } from '@/modules/pad-common/pad.types'
 import { Point } from '@/modules/common/geometry.types'
@@ -32,8 +32,8 @@ export interface PadState {
     [id: string]: PadCursor
   }
 
-  rectangles: Record<string, RectangleData>
-  draftRectangles: Record<string, RectangleData>
+  shapes: Record<string, ShapeData>
+  draftShapes: Record<string, ShapeData>
 
   activeType: PadElementType
 }
@@ -49,8 +49,8 @@ const INITIAL_STATE: PadState = {
 
   cursors: {},
 
-  rectangles: {},
-  draftRectangles: {},
+  shapes: {},
+  draftShapes: {},
 
   activeType: 'PATH',
 }
@@ -119,15 +119,15 @@ export const padSlice = createSlice({
 
     resetSlice: () => INITIAL_STATE,
 
-    setRectangle: (state, { payload }: PayloadAction<RectangleData>) => {
-      state.rectangles[payload.id] = payload
+    setShape: (state, { payload }: PayloadAction<ShapeData>) => {
+      state.shapes[payload.id] = payload
     },
 
-    setDraftRectangle: (state, { payload }: PayloadAction<RectangleData>) => {
-      state.rectangles[payload.id] = payload
+    setDraftShape: (state, { payload }: PayloadAction<ShapeData>) => {
+      state.shapes[payload.id] = payload
     },
 
-    updateDraftRectangle: (
+    updateDraftShape: (
       state,
       {
         payload,
@@ -137,7 +137,7 @@ export const padSlice = createSlice({
         counter: number
       }>
     ) => {
-      const inState = state.rectangles[payload.id]
+      const inState = state.shapes[payload.id]
       if (!inState) {
         return
       }
@@ -146,12 +146,12 @@ export const padSlice = createSlice({
       inState.focus = payload.focus
     },
 
-    removeRectangle: (state, { payload }: PayloadAction<string>) => {
-      delete state.rectangles[payload]
+    removeShape: (state, { payload }: PayloadAction<string>) => {
+      delete state.shapes[payload]
     },
 
-    removeDraftRectangle: (state, { payload }: PayloadAction<string>) => {
-      delete state.rectangles[payload]
+    removeDraftShape: (state, { payload }: PayloadAction<string>) => {
+      delete state.shapes[payload]
     },
 
     setActiveType: (state, { payload }: PayloadAction<PadElementType>) => {

client/src/modules/pad-common/pad.types.ts

@@ -26,14 +26,14 @@ export type PadCursor = {
   diameter?: number
 }
 
-export interface RectangleRenderData {
+export interface ShapeRenderData {
   anchor: Point
   focus: Point
   thickness: number
   color: SVGColor
 }
 
-export type RectangleData = RectangleRenderData &
+export type ShapeData = ShapeRenderData &
   PadElementData & {
     counter: number
   }

client/src/modules/pad-service/rectangle-input-service-impl.context.ts → client/src/modules/pad-service/shape-input-service-impl.context.ts

@@ -1,7 +1,7 @@
 import { PadActions } from '@/modules/pad-common/pad.slice'
-import { RectangleData } from '@/modules/pad-common/pad.types'
+import { ShapeData } from '@/modules/pad-common/pad.types'
 import { useUndoStackService } from '@/modules/pad-common/undo-stack.context'
-import { RectangleInputService } from '@/modules/pad-service/rectangle-input-service.context'
+import { ShapeInputService } from '@/modules/pad-service/shape-input-service.context'
 import {
   PAD_SOCKET_EVENT,
   PadRequest,
@@ -12,18 +12,18 @@ import { useAppDispatch, useAppSelector } from '@/store/hooks'
 import { nanoid } from 'nanoid'
 import { useCallback, useRef } from 'react'
 
-export function useRectangleInputServiceImpl(): RectangleInputService {
+export function useShapeInputServiceImpl(): ShapeInputService {
   const dispatch = useAppDispatch()
-  const draft = useRef<RectangleData | null>(null)
+  const draft = useRef<ShapeData | null>(null)
 
   const { color, thickness } = useAppSelector(({ pad }) => pad.options)
   const { push } = useUndoStackService()
   const sendMessage = useSendMessage()
 
-  const handler: RectangleInputService['emitDraw'] = useCallback(
+  const handler: ShapeInputService['emitDraw'] = useCallback(
     (event) => {
       if (event.isStart) {
-        const data: RectangleData = {
+        const data: ShapeData = {
           anchor: event.point,
           focus: event.point,
           color,
@@ -38,7 +38,7 @@ export function useRectangleInputServiceImpl(): RectangleInputService {
          * Passing a shallow copy will end up causing writes to the draft ref to be blocked by React since
          * that same ref is being used in the state now.
          */
-        dispatch(PadActions.setDraftRectangle({ ...data }))
+        dispatch(PadActions.setDraftShape({ ...data }))
         sendMessage(PadSocketCode.SHAPE_DRAFT_START, data)
         draft.current = data
       }
@@ -47,16 +47,16 @@ export function useRectangleInputServiceImpl(): RectangleInputService {
         const id = draft.current!.id
         draft.current!.counter++
 
-        dispatch(PadActions.removeDraftRectangle(id))
+        dispatch(PadActions.removeDraftShape(id))
         dispatch(
-          PadActions.setRectangle({
+          PadActions.setShape({
             ...draft.current!,
             focus: event.point,
           })
         )
 
         push(({ store, socket }) => {
-          store.dispatch(PadActions.removeRectangle(id))
+          store.dispatch(PadActions.removeShape(id))
           socket.emit(PAD_SOCKET_EVENT, {
             SHAPE_DELETE: {
               id,
@@ -70,13 +70,13 @@ export function useRectangleInputServiceImpl(): RectangleInputService {
         return
       }
 
-      const updated: RectangleData = {
+      const updated: ShapeData = {
         ...draft.current!,
         focus: event.point,
         counter: draft.current!.counter + 1,
       }
 
-      dispatch(PadActions.setDraftRectangle({ ...updated }))
+      dispatch(PadActions.setDraftShape({ ...updated }))
       sendMessage(PadSocketCode.SHAPE_DRAFT_MOVE, {
         counter: updated.counter,
         focus: updated.focus,

client/src/modules/pad-service/shape-input-service.context.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react'
+import { Point } from '@/modules/common/geometry.types'
+
+export interface ShapeDrawEvent {
+  point: Point
+  isStart?: boolean
+  isEnd?: boolean
+}
+
+/**
+ * Facade/abstract for path input mechanisms
+ */
+export interface ShapeInputService {
+  emitDraw(event: ShapeDrawEvent): void
+}
+
+const ShapeInputServiceContext = createContext<ShapeInputService>({
+  emitDraw: () => {
+    console.warn(
+      'ShapeInput: emitDraw was called, but context was not provided'
+    )
+  },
+})
+
+/**
+ * To be used at the ancestor level.
+ * This will provide the implementation of `PathInputService`
+ */
+export const ShapeInputServiceProvider = ShapeInputServiceContext.Provider
+
+export function useShapeInputService() {
+  return useContext(ShapeInputServiceContext)
+}

client/src/modules/pad-socket/pad-socket.types.ts

@@ -1,5 +1,5 @@
 import { Point } from '@/modules/common/geometry.types'
-import { PathData, RectangleData } from '@/modules/pad-common/pad.types'
+import { PathData, ShapeData } from '@/modules/pad-common/pad.types'
 
 export const PAD_SOCKET_EVENT = 'PAD'
 
@@ -43,7 +43,7 @@ interface PathDelete {
   [PadSocketCode.PATH_DELETE]: PathDeletePayload
 }
 
-export type ShapeDraftStartPayload = RectangleData
+export type ShapeDraftStartPayload = ShapeData
 interface ShapeDraftStart {
   [PadSocketCode.SHAPE_DRAFT_START]: ShapeDraftStartPayload
 }
@@ -57,7 +57,7 @@ interface ShapeDraftMove {
   [PadSocketCode.SHAPE_DRAFT_MOVE]: ShapeDraftMovePayload
 }
 
-export type ShapeCreatePayload = RectangleData
+export type ShapeCreatePayload = ShapeData
 interface ShapeCreate {
   [PadSocketCode.SHAPE_CREATE]: ShapeCreatePayload
 }

client/src/modules/pad-socket/shape-watcher.hook.ts

@@ -16,16 +16,16 @@ export function useShapeSocketWatcher() {
   const shapeCreateHandler = useCallback(
     (payload: ShapeCreatePayload) => {
       console.debug('Socket: created shape %s', payload.id)
-      dispatch(PadActions.removeDraftRectangle(payload.id))
-      dispatch(PadActions.setRectangle(payload))
+      dispatch(PadActions.removeDraftShape(payload.id))
+      dispatch(PadActions.setShape(payload))
     },
     [dispatch]
   )
   useMessageEffect(PadSocketCode.SHAPE_CREATE, shapeCreateHandler)
 
   const shapeDraftStartHandler = useCallback(
     (payload: ShapeDraftStartPayload) => {
-      dispatch(PadActions.setDraftRectangle(payload))
+      dispatch(PadActions.setDraftShape(payload))
     },
     [dispatch]
   )
@@ -34,7 +34,7 @@ export function useShapeSocketWatcher() {
   const shapeDraftMoveHAndler = useCallback(
     ({ id, focus, counter }: ShapeDraftMovePayload) => {
       dispatch(
-        PadActions.updateDraftRectangle({
+        PadActions.updateDraftShape({
           id,
           focus,
           counter,
@@ -48,7 +48,7 @@ export function useShapeSocketWatcher() {
   const shapeDeleteHandler = useCallback(
     ({ id }: ShapeDeletePayload) => {
       console.debug('Socket: deleted shape %s', id)
-      dispatch(PadActions.removeRectangle(id))
+      dispatch(PadActions.removeShape(id))
     },
     [dispatch]
   )

client/src/modules/pad/Pad.tsx

@@ -5,7 +5,7 @@ import PadOptionsThicknessWheelInput from '@/modules/pad/PadOptionsThicknessWhee
 import { Dimensions } from '@/modules/common/geometry.types'
 import { useScaledDimensions } from '@/modules/common/scale-dimensions.hook'
 import TransformScale from '@/modules/common/TransformScale'
-import PadRectanglesRenderer from '@/modules/pad/PadRectanglesRenderer'
+import PadShapesRenderer from '@/modules/pad/PadShapesRenderer'
 import { PadShapeInput } from '@/modules/pad/PadShapeInput'
 import { Case, Switch } from 'react-if'
 import { useAppSelector } from '@/store/hooks'
@@ -50,7 +50,7 @@ export function Pad({
           <TransformScale scale={scale} dimensions={dimensions}>
             <div style={dimensions} className="position-relative">
               <PadPathsRenderer dimensions={dimensions} />
-              <PadRectanglesRenderer dimensions={dimensions} />
+              <PadShapesRenderer dimensions={dimensions} />
             </div>
           </TransformScale>
         </div>

client/src/modules/pad/PadRectangle.tsx

@@ -1,13 +1,13 @@
 import { Dimensions } from '@/modules/common/geometry.types'
-import { RectangleRenderData } from '@/modules/pad-common/pad.types'
+import { ShapeRenderData } from '@/modules/pad-common/pad.types'
 import { useMemo } from 'react'
 
 export default function PadRectangle({
   dimensions,
   value: { anchor, focus, thickness, color },
 }: {
   dimensions: Dimensions
-  value: RectangleRenderData
+  value: ShapeRenderData
 }) {
   const svgProps = useMemo(() => {
     const start = {

client/src/modules/pad/PadShapeInput.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { Dimensions } from '@/modules/common/geometry.types'
 import { DraggableEvent } from './Draggable'
 import { PadBaseInput } from '@/modules/pad/PadBaseInput'
-import { useRectangleInputServiceImpl } from '@/modules/pad-service/rectangle-input-service-impl.context'
+import { useShapeInputServiceImpl } from '@/modules/pad-service/shape-input-service-impl.context'
 
 export function PadShapeInput({
   dimensions,
@@ -11,7 +11,7 @@ export function PadShapeInput({
   dimensions: Dimensions
   counterScale: number
 }) {
-  const { emitDraw } = useRectangleInputServiceImpl()
+  const { emitDraw } = useShapeInputServiceImpl()
 
   const handleDrag = useCallback(
     (event: DraggableEvent) => {

client/src/modules/pad/PadRectanglesRenderer.tsx → client/src/modules/pad/PadShapesRenderer.tsx

@@ -2,14 +2,14 @@ import { useAppSelector } from '@/store/hooks'
 import { Dimensions } from '@/modules/common/geometry.types'
 import PadRectangle from '@/modules/pad/PadRectangle'
 import { useMemo } from 'react'
-import { RectangleData } from '@/modules/pad-common/pad.types'
+import { ShapeData } from '@/modules/pad-common/pad.types'
 import { shortenMillis } from '@/modules/common/datetime.utils'
 
 function Rectangles({
   values,
   dimensions,
 }: {
-  values: Record<string, RectangleData>
+  values: Record<string, ShapeData>
   dimensions: Dimensions
 }) {
   const asArray = useMemo(() => Object.values(values), [values])
@@ -31,13 +31,13 @@ function Rectangles({
   )
 }
 
-export default function PadRectanglesRenderer({
+export default function PadShapesRenderer({
   dimensions,
 }: {
   dimensions: Dimensions
 }) {
-  const draft = useAppSelector((state) => state.pad.draftRectangles)
-  const stable = useAppSelector((state) => state.pad.rectangles)
+  const draft = useAppSelector((state) => state.pad.draftShapes)
+  const stable = useAppSelector((state) => state.pad.shapes)
 
   return (
     <>