feat: locking (#28)

src/components/canvas/objects/CanvasSprite.tsx

@@ -12,6 +12,7 @@ import {
   spriteMetasWithId,
 } from '../../../state/SpritesState'
 import { useTransformer } from './hooks/useTransformer'
+import { noop } from 'lodash'
 
 interface Props extends KonvaNodeEvents, Partial<ImageConfig> {
   id: string
@@ -26,7 +27,7 @@ export const CanvasSprite = ({ id, ...props }: Props) => {
 
   const isSelected = selectedIds.includes(id)
 
-  const { scale, rotation, position, opacity } = spriteData
+  const { scale, rotation, position, opacity, locked } = spriteData
   const { src, isDragging } = spriteMeta
 
   const [htmlImageElement] = useImage(src)
@@ -54,6 +55,10 @@ export const CanvasSprite = ({ id, ...props }: Props) => {
     setSpriteMeta((meta) => ({ ...meta, isDragging: false }))
   }
 
+  const onDoubleClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
+    onClick(e)
+  }
+
   const onClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
     // prevent deselection by clicking on the canvas
     e.cancelBubble = true
@@ -77,13 +82,15 @@ export const CanvasSprite = ({ id, ...props }: Props) => {
     setSpriteData((data) => ({ ...data, scale: { x: scaleX, y: scaleY, z: '1.0' }, rotation }))
   }
 
+  const draggable = !(locked && !isSelected)
+
   return (
     <>
       {isSelected && <Transformer />}
       <KonvaImage
         // @ts-ignore
         ref={ref}
-        draggable={true}
+        draggable={draggable}
         shadowOffsetX={isDragging ? 10 : 5}
         shadowOffsetY={isDragging ? 10 : 5}
         shadowColor="rgba(0, 0, 0, 0.5)"
@@ -103,8 +110,10 @@ export const CanvasSprite = ({ id, ...props }: Props) => {
         opacity={opacity}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
-        onClick={onClick}
-        onTap={onClick}
+        onClick={locked ? noop : onClick}
+        onDblClick={onDoubleClick}
+        onTap={locked ? noop : onClick}
+        onDblTap={onDoubleClick}
         onTransformEnd={onTransformEnd}
       />
     </>

src/components/sidebars/default-properties/DefaultPropertiesSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Section from '../../layout/Section'
-import { Box, Heading } from 'dracula-ui'
+import { Box, Checkbox, Heading } from 'dracula-ui'
 import FormRow from '../../atoms/FormRow'
 import { Field } from '../../atoms/Field'
 import { defaultPropertiesState } from '../../../state/AssetsState'
@@ -13,9 +13,12 @@ const DefaultPropertiesSection = ({}: Props): JSX.Element => {
   const [defaultProps, setDefaultProps] = useRecoilState(defaultPropertiesState)
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target
-    console.log(id, value)
-    setDefaultProps((data) => set(cloneDeep(data), id, value))
+    const { id, value, checked } = e.target
+    if (e.target.type === 'checkbox') {
+      setDefaultProps((data) => set(cloneDeep(data), id, checked))
+    } else {
+      setDefaultProps((data) => set(cloneDeep(data), id, value))
+    }
   }
 
   return (
@@ -97,6 +100,13 @@ const DefaultPropertiesSection = ({}: Props): JSX.Element => {
         />
         <label htmlFor="opacity">Opacity</label>
       </FormRow>
+
+      <FormRow>
+        <Box mt="xs">
+          <Checkbox color="green" id="locked" checked={defaultProps.locked} onChange={onChange} />
+          <label htmlFor="opacity">Locked</label>
+        </Box>
+      </FormRow>
     </Section>
   )
 }

src/components/sidebars/inspector/InspectorSection.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLInputTypeAttribute } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { selectedSpriteIdsState, spriteDatasWithId } from '../../../state/SpritesState'
-import { Box, Heading } from 'dracula-ui'
+import { Box, Checkbox, Heading } from 'dracula-ui'
 import Section from '../../layout/Section'
 import FormRow from '../../atoms/FormRow'
 import CopyButton from '../../atoms/CopyButton'
@@ -13,8 +13,12 @@ export const InspectorSection = (): JSX.Element => {
   const [spriteData, setSpriteData] = useRecoilState(spriteDatasWithId(selectionId))
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target
-    setSpriteData((data) => set(cloneDeep(data), id, value))
+    const { id, value, checked } = e.target
+    if (e.target.type === 'checkbox') {
+      setSpriteData((data) => set(cloneDeep(data), id, checked))
+    } else {
+      setSpriteData((data) => set(cloneDeep(data), id, value))
+    }
   }
 
   return (
@@ -148,6 +152,13 @@ export const InspectorSection = (): JSX.Element => {
         />
         <label htmlFor="opacity">Opacity</label>
       </FormRow>
+
+      <FormRow>
+        <Box mt="xs">
+          <Checkbox color="green" id="locked" checked={spriteData.locked} onChange={onChange} />
+          <label htmlFor="opacity">Locked</label>
+        </Box>
+      </FormRow>
     </Section>
   )
 }

src/model/DefaultProperties.ts

@@ -5,6 +5,7 @@ export class DefaultProperties implements Partial<SpriteData> {
       rotation: 0,
       scale: { x: '1.0', y: '1.0', z: '1.0' },
       opacity: 1,
+      locked: false,
     }
   }
 }

src/model/SpriteData.ts

@@ -16,6 +16,8 @@ export class SpriteData {
   public opacity: number = 1
   // Relative path to the asset
   public relativePath: string = ''
+  // Whether you can drag the sprite
+  public locked: boolean = false
 
   static createFromDragAndDrop(
     x: number,

src/types.d.ts

@@ -69,6 +69,8 @@ interface SpriteData {
   opacity: number
   // Relative path to the asset
   relativePath: string
+  // Whether you can drag the sprite
+  locked: boolean
 }
 
 interface Sprites {