Fixes bug on drawn dots

lib/shape-utils/draw.tsx

@@ -57,7 +57,7 @@ const draw = registerShapeUtils<DrawShape>({
         pathCache.set(
           shape,
           getSvgPathFromStroke(
-            getStroke(points, { size: +style.strokeWidth * 2 })
+            getStroke(points, { size: +style.strokeWidth * 2, thinning: 0.9 })
           )
         )
       }

state/commands/draw.ts

@@ -5,10 +5,13 @@ import { getPage } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import { current } from 'immer'
 
-export default function drawCommand(data: Data, id: string, after: number[][]) {
+export default function drawCommand(
+  data: Data,
+  id: string,
+  points: number[][]
+) {
   const restoreShape = current(getPage(data)).shapes[id] as DrawShape
-
+  getShapeUtils(restoreShape).setProperty(restoreShape, 'points', points)
-  getShapeUtils(restoreShape).setProperty!(restoreShape, 'points', after)
 
   history.execute(
     data,

state/sessions/draw-session.ts

@@ -11,11 +11,9 @@ export default class BrushSession extends BaseSession {
   previous: number[]
   points: number[][]
   snapshot: DrawSnapshot
-  shapeId: string
 
   constructor(data: Data, id: string, point: number[]) {
     super(data)
-    this.shapeId = id
     this.origin = point
     this.previous = point
     this.points = []
@@ -27,34 +25,36 @@ export default class BrushSession extends BaseSession {
   }
 
   update = (data: Data, point: number[]) => {
-    const { shapeId } = this
+    const { snapshot } = this
 
     const lp = vec.med(this.previous, vec.toPrecision(point))
     this.points.push(vec.sub(lp, this.origin))
     this.previous = lp
 
     const page = getPage(data)
-    const shape = page.shapes[shapeId]
+    const shape = page.shapes[snapshot.id] as DrawShape
-    getShapeUtils(shape).setPoints!(shape, [...this.points])
+    getShapeUtils(shape).setProperty(shape, 'points', [...this.points])
   }
 
   cancel = (data: Data) => {
-    const { shapeId, snapshot } = this
+    const { snapshot } = this
     const page = getPage(data)
-    const shape = page.shapes[shapeId]
+    const shape = page.shapes[snapshot.id] as DrawShape
-    getShapeUtils(shape).setPoints!(shape, snapshot.points)
+    getShapeUtils(shape).setProperty(shape, 'points', snapshot.points)
   }
 
   complete = (data: Data) => {
-    commands.draw(data, this.shapeId, this.snapshot.points, this.points)
+    commands.draw(data, this.snapshot.id, this.points)
   }
 }
 
 export function getDrawSnapshot(data: Data, shapeId: string) {
   const page = getPage(current(data))
-  const { points } = page.shapes[shapeId] as DrawShape
+  const { points, style } = page.shapes[shapeId] as DrawShape
   return {
+    id: shapeId,
     points,
+    strokeWidth: style.strokeWidth,
   }
 }
 

state/sessions/rotate-session.ts

@@ -70,24 +70,30 @@ export default class RotateSession extends BaseSession {
   }
 
   complete(data: Data) {
+    if (!this.snapshot.hasUnlockedShapes) return
     commands.rotate(data, this.snapshot, getRotateSnapshot(data))
   }
 }
 
 export function getRotateSnapshot(data: Data) {
-  const shapes = getSelectedShapes(current(data))
+  const initialShapes = getSelectedShapes(current(data)).filter(
+    (shape) => !shape.isLocked
+  )
+
+  const hasUnlockedShapes = initialShapes.length > 0
 
   const shapesBounds = Object.fromEntries(
-    shapes.map((shape) => [shape.id, getShapeBounds(shape)])
+    initialShapes.map((shape) => [shape.id, getShapeBounds(shape)])
   )
 
   const bounds = getCommonBounds(...Object.values(shapesBounds))
 
   return {
+    hasUnlockedShapes,
     currentPageId: data.currentPageId,
     boundsRotation: data.boundsRotation,
     boundsCenter: getBoundsCenter(bounds),
-    shapes: shapes.map(({ id, point, rotation }) => {
+    shapes: initialShapes.map(({ id, point, rotation }) => {
       const bounds = shapesBounds[id]
       const offset = [bounds.width / 2, bounds.height / 2]
       const center = getBoundsCenter(bounds)

state/sessions/transform-session.ts

@@ -95,6 +95,8 @@ export default class TransformSession extends BaseSession {
   }
 
   complete(data: Data) {
+    if (!this.snapshot.hasUnlockedShapes) return
+
     commands.transform(
       data,
       this.snapshot,
@@ -110,9 +112,9 @@ export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
   const initialShapes = getSelectedShapes(cData).filter(
     (shape) => !shape.isLocked
   )
-  const hasShapes = initialShapes.length > 0
 
-  // A mapping of selected shapes and their bounds
+  const hasUnlockedShapes = initialShapes.length > 0
+
   const shapesBounds = Object.fromEntries(
     initialShapes.map((shape) => [
       shape.id,
@@ -122,8 +124,7 @@ export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
 
   const boundsArr = Object.values(shapesBounds)
 
-  // The common (exterior) bounds of the selected shapes
+  const commonBounds = getCommonBounds(...boundsArr)
-  const bounds = getCommonBounds(...boundsArr)
 
   const initialInnerBounds = getBoundsFromPoints(boundsArr.map(getBoundsCenter))
 
@@ -131,9 +132,9 @@ export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
   // positions of the shape's bounds within the common bounds shape.
   return {
     type: transformType,
-    hasShapes,
+    hasUnlockedShapes,
     currentPageId,
-    initialBounds: bounds,
+    initialBounds: commonBounds,
     shapeBounds: Object.fromEntries(
       initialShapes.map((shape) => {
         const initialShapeBounds = shapesBounds[shape.id]

state/sessions/transform-single-session.ts

@@ -1,9 +1,9 @@
-import { Data, Edge, Corner } from "types"
+import { Data, Edge, Corner } from 'types'
-import * as vec from "utils/vec"
+import * as vec from 'utils/vec'
-import BaseSession from "./base-session"
+import BaseSession from './base-session'
-import commands from "state/commands"
+import commands from 'state/commands'
-import { current } from "immer"
+import { current } from 'immer'
-import { getShapeUtils } from "lib/shape-utils"
+import { getShapeUtils } from 'lib/shape-utils'
 import {
   getTransformedBoundingBox,
   getCommonBounds,
@@ -12,7 +12,7 @@ import {
   getPage,
   getShape,
   getSelectedShapes,
-} from "utils/utils"
+} from 'utils/utils'
 
 export default class TransformSingleSession extends BaseSession {
   transformType: Edge | Corner
@@ -79,6 +79,8 @@ export default class TransformSingleSession extends BaseSession {
   }
 
   complete(data: Data) {
+    if (!this.snapshot.hasUnlockedShape) return
+
     commands.transformSingle(
       data,
       this.snapshot,
@@ -99,6 +101,7 @@ export function getTransformSingleSnapshot(
 
   return {
     id: shape.id,
+    hasUnlockedShape: !shape.isLocked,
     currentPageId: data.currentPageId,
     type: transformType,
     initialShape: shape,

state/sessions/translate-session.ts

@@ -89,7 +89,7 @@ export default class TranslateSession extends BaseSession {
   }
 
   complete(data: Data) {
-    if (!this.snapshot.hasShapes) return
+    if (!this.snapshot.hasUnlockedShapes) return
 
     commands.translate(
       data,
@@ -103,9 +103,10 @@ export default class TranslateSession extends BaseSession {
 export function getTranslateSnapshot(data: Data) {
   const cData = current(data)
   const shapes = getSelectedShapes(cData).filter((shape) => !shape.isLocked)
-  const hasShapes = shapes.length > 0
+  const hasUnlockedShapes = shapes.length > 0
 
   return {
+    hasUnlockedShapes,
     currentPageId: data.currentPageId,
     initialShapes: shapes.map(({ id, point }) => ({ id, point })),
     clones: shapes.map((shape) => ({
@@ -113,7 +114,6 @@ export function getTranslateSnapshot(data: Data) {
       id: uuid(),
       childIndex: getChildIndexAbove(cData, shape.id),
     })),
-    hasShapes,
   }
 }
 

utils/utils.ts

@@ -978,7 +978,7 @@ export function getBoundsFromPoints(points: number[][]): Bounds {
   let maxX = -Infinity
   let maxY = -Infinity
 
-  if (points.length === 0) {
+  if (points.length < 2) {
     minX = 0
     minY = 0
     maxX = 1