diff --git a/lib/shape-styles.ts b/lib/shape-styles.ts index fc32546aa..3ddee9d00 100644 --- a/lib/shape-styles.ts +++ b/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` } diff --git a/lib/shape-utils/draw.tsx b/lib/shape-utils/draw.tsx index 42e24e9e7..754e41b2b 100644 --- a/lib/shape-utils/draw.tsx +++ b/lib/shape-utils/draw.tsx @@ -126,7 +126,7 @@ const draw = registerShapeUtils({ 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({ (scaleY < 0 // * cos? ? 1 - y / initialShapeBounds.height : y / initialShapeBounds.height), + r, ] }) diff --git a/lib/shape-utils/text.tsx b/lib/shape-utils/text.tsx index 00f18986a..799812c3f 100644 --- a/lib/shape-utils/text.tsx +++ b/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({ 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({ getBounds(shape) { if (!this.boundsCache.has(shape)) { mdiv.innerHTML = shape.text + '‍' - 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({ 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 }, diff --git a/state/commands/reset-bounds.ts b/state/commands/reset-bounds.ts index 2f6ea2d6d..ca8d9c39b 100644 --- a/state/commands/reset-bounds.ts +++ b/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)) }, }) )