瀏覽代碼

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

main
Steve Ruiz 4 年之前
父節點
當前提交
5baf89a513
共有 4 個檔案被更改,包括 41 行新增17 行删除
  1. 6
    11
      lib/shape-styles.ts
  2. 2
    1
      lib/shape-utils/draw.tsx
  3. 28
    4
      lib/shape-utils/text.tsx
  4. 5
    1
      state/commands/reset-bounds.ts

+ 6
- 11
lib/shape-styles.ts 查看文件

44
 }
44
 }
45
 
45
 
46
 const fontSizes = {
46
 const fontSizes = {
47
-  [FontSize.Small]: 16,
48
-  [FontSize.Medium]: 28,
49
-  [FontSize.Large]: 32,
50
-  [FontSize.ExtraLarge]: 72,
47
+  [SizeStyle.Small]: 24,
48
+  [SizeStyle.Medium]: 48,
49
+  [SizeStyle.Large]: 72,
51
   auto: 'auto',
50
   auto: 'auto',
52
 }
51
 }
53
 
52
 
59
   return dashArrays[dash](strokeWidth)
58
   return dashArrays[dash](strokeWidth)
60
 }
59
 }
61
 
60
 
62
-export function getFontSize(size: FontSize) {
61
+export function getFontSize(size: SizeStyle) {
63
   return fontSizes[size]
62
   return fontSizes[size]
64
 }
63
 }
65
 
64
 
66
-export function getFontStyle(
67
-  size: FontSize,
68
-  scale: number,
69
-  style: ShapeStyles
70
-) {
71
-  const fontSize = getFontSize(size)
65
+export function getFontStyle(scale: number, style: ShapeStyles) {
66
+  const fontSize = getFontSize(style.size)
72
 
67
 
73
   return `${fontSize * scale}px/1.4 Verveine Regular`
68
   return `${fontSize * scale}px/1.4 Verveine Regular`
74
 }
69
 }

+ 2
- 1
lib/shape-utils/draw.tsx 查看文件

126
 
126
 
127
   transform(shape, bounds, { initialShape, scaleX, scaleY }) {
127
   transform(shape, bounds, { initialShape, scaleX, scaleY }) {
128
     const initialShapeBounds = this.boundsCache.get(initialShape)
128
     const initialShapeBounds = this.boundsCache.get(initialShape)
129
-    shape.points = initialShape.points.map(([x, y]) => {
129
+    shape.points = initialShape.points.map(([x, y, r]) => {
130
       return [
130
       return [
131
         bounds.width *
131
         bounds.width *
132
           (scaleX < 0 // * sin?
132
           (scaleX < 0 // * sin?
136
           (scaleY < 0 // * cos?
136
           (scaleY < 0 // * cos?
137
             ? 1 - y / initialShapeBounds.height
137
             ? 1 - y / initialShapeBounds.height
138
             : y / initialShapeBounds.height),
138
             : y / initialShapeBounds.height),
139
+        r,
139
       ]
140
       ]
140
     })
141
     })
141
 
142
 

+ 28
- 4
lib/shape-utils/text.tsx 查看文件

1
 import { uniqueId } from 'utils/utils'
1
 import { uniqueId } from 'utils/utils'
2
 import vec from 'utils/vec'
2
 import vec from 'utils/vec'
3
-import { TextShape, ShapeType, FontSize } from 'types'
3
+import { TextShape, ShapeType, FontSize, SizeStyle } from 'types'
4
 import { registerShapeUtils } from './index'
4
 import { registerShapeUtils } from './index'
5
 import { defaultStyle, getFontStyle, getShapeStyle } from 'lib/shape-styles'
5
 import { defaultStyle, getFontStyle, getShapeStyle } from 'lib/shape-styles'
6
 import styled from 'styles'
6
 import styled from 'styles'
71
   render(shape, { isEditing, ref }) {
71
   render(shape, { isEditing, ref }) {
72
     const { id, text, style } = shape
72
     const { id, text, style } = shape
73
     const styles = getShapeStyle(style)
73
     const styles = getShapeStyle(style)
74
-    const font = getFontStyle(shape.fontSize, shape.scale, shape.style)
74
+    const font = getFontStyle(shape.scale, shape.style)
75
 
75
 
76
     const bounds = this.getBounds(shape)
76
     const bounds = this.getBounds(shape)
77
 
77
 
140
   getBounds(shape) {
140
   getBounds(shape) {
141
     if (!this.boundsCache.has(shape)) {
141
     if (!this.boundsCache.has(shape)) {
142
       mdiv.innerHTML = shape.text + '&zwj;'
142
       mdiv.innerHTML = shape.text + '&zwj;'
143
-      mdiv.style.font = getFontStyle(shape.fontSize, shape.scale, shape.style)
143
+      mdiv.style.font = getFontStyle(shape.scale, shape.style)
144
 
144
 
145
       const [minX, minY] = shape.point
145
       const [minX, minY] = shape.point
146
       const [width, height] = [mdiv.offsetWidth, mdiv.offsetHeight]
146
       const [width, height] = [mdiv.offsetWidth, mdiv.offsetHeight]
183
   transformSingle(shape, bounds, { initialShape, scaleX }) {
183
   transformSingle(shape, bounds, { initialShape, scaleX }) {
184
     shape.point = [bounds.minX, bounds.minY]
184
     shape.point = [bounds.minX, bounds.minY]
185
     shape.scale = initialShape.scale * Math.abs(scaleX)
185
     shape.scale = initialShape.scale * Math.abs(scaleX)
186
+
186
     return this
187
     return this
187
   },
188
   },
188
 
189
 
189
   onBoundsReset(shape) {
190
   onBoundsReset(shape) {
190
-    shape.size = 'auto'
191
+    const center = this.getCenter(shape)
192
+
193
+    this.boundsCache.delete(shape)
194
+
195
+    shape.scale = 1
196
+
197
+    const newCenter = this.getCenter(shape)
198
+
199
+    shape.point = vec.add(shape.point, vec.sub(center, newCenter))
200
+
201
+    return this
202
+  },
203
+
204
+  applyStyles(shape, style) {
205
+    const center = this.getCenter(shape)
206
+
207
+    this.boundsCache.delete(shape)
208
+
209
+    Object.assign(shape.style, style)
210
+
211
+    const newCenter = this.getCenter(shape)
212
+
213
+    shape.point = vec.add(shape.point, vec.sub(center, newCenter))
214
+
191
     return this
215
     return this
192
   },
216
   },
193
 
217
 

+ 5
- 1
state/commands/reset-bounds.ts 查看文件

1
 import Command from './command'
1
 import Command from './command'
2
 import history from '../history'
2
 import history from '../history'
3
 import { Data } from 'types'
3
 import { Data } from 'types'
4
-import { getPage, getSelectedShapes } from 'utils/utils'
4
+import { getPage, getSelectedShapes, updateParents } from 'utils/utils'
5
 import { current } from 'immer'
5
 import { current } from 'immer'
6
 import { getShapeUtils } from 'lib/shape-utils'
6
 import { getShapeUtils } from 'lib/shape-utils'
7
 
7
 
19
         getSelectedShapes(data).forEach((shape) => {
19
         getSelectedShapes(data).forEach((shape) => {
20
           getShapeUtils(shape).onBoundsReset(shape)
20
           getShapeUtils(shape).onBoundsReset(shape)
21
         })
21
         })
22
+
23
+        updateParents(data, Object.keys(initialShapes))
22
       },
24
       },
23
       undo(data) {
25
       undo(data) {
24
         const page = getPage(data)
26
         const page = getPage(data)
25
         getSelectedShapes(data).forEach((shape) => {
27
         getSelectedShapes(data).forEach((shape) => {
26
           page.shapes[shape.id] = initialShapes[shape.id]
28
           page.shapes[shape.id] = initialShapes[shape.id]
27
         })
29
         })
30
+
31
+        updateParents(data, Object.keys(initialShapes))
28
       },
32
       },
29
     })
33
     })
30
   )
34
   )

Loading…
取消
儲存