Adds bounds reset / sizing for text, fixes lost pressure on draw shape resize

lib/shape-styles.ts

@@ -44,10 +44,9 @@ const dashArrays = {
 }
 
 const fontSizes = {
-  [FontSize.Small]: 16,
-  [FontSize.Medium]: 28,
-  [FontSize.Large]: 32,
-  [FontSize.ExtraLarge]: 72,
+  [SizeStyle.Small]: 24,
+  [SizeStyle.Medium]: 48,
+  [SizeStyle.Large]: 72,
   auto: 'auto',
 }
 
@@ -59,16 +58,12 @@ function getStrokeDashArray(dash: DashStyle, strokeWidth: number) {
   return dashArrays[dash](strokeWidth)
 }
 
-export function getFontSize(size: FontSize) {
+export function getFontSize(size: SizeStyle) {
   return fontSizes[size]
 }
 
-export function getFontStyle(
-  size: FontSize,
-  scale: number,
-  style: ShapeStyles
-) {
-  const fontSize = getFontSize(size)
+export function getFontStyle(scale: number, style: ShapeStyles) {
+  const fontSize = getFontSize(style.size)
 
   return `${fontSize * scale}px/1.4 Verveine Regular`
 }

lib/shape-utils/draw.tsx

@@ -126,7 +126,7 @@ const draw = registerShapeUtils<DrawShape>({
 
   transform(shape, bounds, { initialShape, scaleX, scaleY }) {
     const initialShapeBounds = this.boundsCache.get(initialShape)
-    shape.points = initialShape.points.map(([x, y]) => {
+    shape.points = initialShape.points.map(([x, y, r]) => {
       return [
         bounds.width *
           (scaleX < 0 // * sin?
@@ -136,6 +136,7 @@ const draw = registerShapeUtils<DrawShape>({
           (scaleY < 0 // * cos?
             ? 1 - y / initialShapeBounds.height
             : y / initialShapeBounds.height),
+        r,
       ]
     })
 

lib/shape-utils/text.tsx

@@ -1,6 +1,6 @@
 import { uniqueId } from 'utils/utils'
 import vec from 'utils/vec'
-import { TextShape, ShapeType, FontSize } from 'types'
+import { TextShape, ShapeType, FontSize, SizeStyle } from 'types'
 import { registerShapeUtils } from './index'
 import { defaultStyle, getFontStyle, getShapeStyle } from 'lib/shape-styles'
 import styled from 'styles'
@@ -71,7 +71,7 @@ const text = registerShapeUtils<TextShape>({
   render(shape, { isEditing, ref }) {
     const { id, text, style } = shape
     const styles = getShapeStyle(style)
-    const font = getFontStyle(shape.fontSize, shape.scale, shape.style)
+    const font = getFontStyle(shape.scale, shape.style)
 
     const bounds = this.getBounds(shape)
 
@@ -140,7 +140,7 @@ const text = registerShapeUtils<TextShape>({
   getBounds(shape) {
     if (!this.boundsCache.has(shape)) {
       mdiv.innerHTML = shape.text + '&zwj;'
-      mdiv.style.font = getFontStyle(shape.fontSize, shape.scale, shape.style)
+      mdiv.style.font = getFontStyle(shape.scale, shape.style)
 
       const [minX, minY] = shape.point
       const [width, height] = [mdiv.offsetWidth, mdiv.offsetHeight]
@@ -183,11 +183,35 @@ const text = registerShapeUtils<TextShape>({
   transformSingle(shape, bounds, { initialShape, scaleX }) {
     shape.point = [bounds.minX, bounds.minY]
     shape.scale = initialShape.scale * Math.abs(scaleX)
+
     return this
   },
 
   onBoundsReset(shape) {
-    shape.size = 'auto'
+    const center = this.getCenter(shape)
+
+    this.boundsCache.delete(shape)
+
+    shape.scale = 1
+
+    const newCenter = this.getCenter(shape)
+
+    shape.point = vec.add(shape.point, vec.sub(center, newCenter))
+
+    return this
+  },
+
+  applyStyles(shape, style) {
+    const center = this.getCenter(shape)
+
+    this.boundsCache.delete(shape)
+
+    Object.assign(shape.style, style)
+
+    const newCenter = this.getCenter(shape)
+
+    shape.point = vec.add(shape.point, vec.sub(center, newCenter))
+
     return this
   },
 

state/commands/reset-bounds.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage, getSelectedShapes } from 'utils/utils'
+import { getPage, getSelectedShapes, updateParents } from 'utils/utils'
 import { current } from 'immer'
 import { getShapeUtils } from 'lib/shape-utils'
 
@@ -19,12 +19,16 @@ export default function resetBoundsCommand(data: Data) {
         getSelectedShapes(data).forEach((shape) => {
           getShapeUtils(shape).onBoundsReset(shape)
         })
+
+        updateParents(data, Object.keys(initialShapes))
       },
       undo(data) {
         const page = getPage(data)
         getSelectedShapes(data).forEach((shape) => {
           page.shapes[shape.id] = initialShapes[shape.id]
         })
+
+        updateParents(data, Object.keys(initialShapes))
       },
     })
   )