Skip to content

Commit

Permalink
Improves rotated transforms, cleans up code
Browse files Browse the repository at this point in the history
  • Loading branch information
@steveruizok
steveruizok committed May 19, 2021
1 parent c3740ca commit 0c205d1
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 617 deletions.
12 changes: 9 additions & 3 deletions lib/shapes/circle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createShape } from "./index"
import { boundsContained } from "utils/bounds"
import { intersectCircleBounds } from "utils/intersections"
import { pointInCircle } from "utils/hitTests"
import { translateBounds } from "utils/utils"
import { getTransformAnchor, translateBounds } from "utils/utils"

const circle = createShape<CircleShape>({
boundsCache: new WeakMap([]),
Expand Down Expand Up @@ -94,7 +94,9 @@ const circle = createShape<CircleShape>({
return shape
},

transform(shape, bounds, { anchor }) {
transform(shape, bounds, { type, initialShape, scaleX, scaleY }) {
const anchor = getTransformAnchor(type, scaleX < 0, scaleY < 0)

// Set the new corner or position depending on the anchor
switch (anchor) {
case TransformCorner.TopLeft: {
Expand All @@ -112,7 +114,11 @@ const circle = createShape<CircleShape>({
}
case TransformCorner.BottomRight: {
shape.radius = Math.min(bounds.width, bounds.height) / 2
shape.point = [bounds.minX, bounds.minY]
shape.point = [
bounds.maxX - shape.radius * 2,
bounds.maxY - shape.radius * 2,
]
break
break
}
case TransformCorner.BottomLeft: {
Expand Down
18 changes: 4 additions & 14 deletions lib/shapes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,9 @@ export interface ShapeUtility<K extends Shape> {
bounds: Bounds,
info: {
type: TransformEdge | TransformCorner
boundsRotation: number
initialShape: K
initialShapeBounds: BoundsSnapshot
initialBounds: Bounds
isFlippedX: boolean
isFlippedY: boolean
isSingle: boolean
anchor: TransformEdge | TransformCorner
scaleX: number
scaleY: number
}
): K

Expand All @@ -78,14 +73,9 @@ export interface ShapeUtility<K extends Shape> {
bounds: Bounds,
info: {
type: TransformEdge | TransformCorner
boundsRotation: number
initialShape: K
initialShapeBounds: BoundsSnapshot
initialBounds: Bounds
isFlippedX: boolean
isFlippedY: boolean
isSingle: boolean
anchor: TransformEdge | TransformCorner
scaleX: number
scaleY: number
}
): K

Expand Down
136 changes: 14 additions & 122 deletions lib/shapes/rectangle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,142 +99,34 @@ const rectangle = createShape<RectangleShape>({
return shape
},

transform(
shape,
shapeBounds,
{ initialShape, isSingle, initialShapeBounds, isFlippedX, isFlippedY }
) {
if (shape.rotation === 0 || isSingle) {
shape.size = [shapeBounds.width, shapeBounds.height]
shape.point = [shapeBounds.minX, shapeBounds.minY]
transform(shape, bounds, { initialShape, scaleX, scaleY }) {
if (shape.rotation === 0) {
shape.size = [bounds.width, bounds.height]
shape.point = [bounds.minX, bounds.minY]
} else {
// Center shape in resized bounds
shape.size = vec.mul(
initialShape.size,
Math.min(
shapeBounds.width / initialShapeBounds.width,
shapeBounds.height / initialShapeBounds.height
)
Math.min(Math.abs(scaleX), Math.abs(scaleY))
)

const newCenter = [
shapeBounds.minX + shapeBounds.width / 2,
shapeBounds.minY + shapeBounds.height / 2,
]

shape.point = vec.sub(newCenter, vec.div(shape.size, 2))
shape.point = vec.sub(
vec.med([bounds.minX, bounds.minY], [bounds.maxX, bounds.maxY]),
vec.div(shape.size, 2)
)
}

// Rotation for flipped shapes

// Set rotation for flipped shapes
shape.rotation = initialShape.rotation

if (isFlippedX) {
shape.rotation *= -1
}

if (isFlippedY) {
shape.rotation *= -1
}
if (scaleX < 0) shape.rotation *= -1
if (scaleY < 0) shape.rotation *= -1

return shape
},

transformSingle(
shape,
bounds,
{ initialShape, initialShapeBounds, anchor, isFlippedY, isFlippedX }
) {
transformSingle(shape, bounds) {
shape.size = [bounds.width, bounds.height]
shape.point = [bounds.minX, bounds.minY]

// const prevCorners = getRotatedCorners(
// initialShapeBounds,
// initialShape.rotation
// )

// let currCorners = getRotatedCorners(this.getBounds(shape), shape.rotation)

// if (isFlippedX) {
// let t = currCorners[3]
// currCorners[3] = currCorners[2]
// currCorners[2] = t

// t = currCorners[0]
// currCorners[0] = currCorners[1]
// currCorners[1] = t
// }

// if (isFlippedY) {
// let t = currCorners[3]
// currCorners[3] = currCorners[0]
// currCorners[0] = t

// t = currCorners[2]
// currCorners[2] = currCorners[1]
// currCorners[1] = t
// }

// switch (anchor) {
// case TransformCorner.TopLeft: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[2], prevCorners[2])
// )
// break
// }
// case TransformCorner.TopRight: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[3], prevCorners[3])
// )
// break
// }
// case TransformCorner.BottomRight: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[0], prevCorners[0])
// )
// break
// }
// case TransformCorner.BottomLeft: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[1], prevCorners[1])
// )
// break
// }
// case TransformEdge.Top: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[3], prevCorners[3])
// )
// break
// }
// case TransformEdge.Right: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[3], prevCorners[3])
// )
// break
// }
// case TransformEdge.Bottom: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[0], prevCorners[0])
// )
// break
// }
// case TransformEdge.Left: {
// shape.point = vec.sub(
// shape.point,
// vec.sub(currCorners[2], prevCorners[2])
// )
// break
// }
// }

// console.log(shape.point, shape.size)

return shape
},

Expand Down
55 changes: 15 additions & 40 deletions state/commands/transform-single.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,38 @@ export default function transformSingleCommand(
data: Data,
before: TransformSingleSnapshot,
after: TransformSingleSnapshot,
anchor: TransformCorner | TransformEdge
scaleX: number,
scaleY: number
) {
history.execute(
data,
new Command({
name: "translate_shapes",
name: "transform_single_shape",
category: "canvas",
do(data) {
const {
type,
initialShape,
initialShapeBounds,
currentPageId,
id,
boundsRotation,
} = after
const { id, currentPageId, type, initialShape, initialShapeBounds } =
after

const { shapes } = data.document.pages[currentPageId]
const shape = data.document.pages[currentPageId].shapes[id]

const shape = shapes[id]

getShapeUtils(shape).transform(shape, initialShapeBounds, {
getShapeUtils(shape).transformSingle(shape, initialShapeBounds, {
type,
initialShape,
initialShapeBounds,
initialBounds: initialShapeBounds,
boundsRotation,
isFlippedX: false,
isFlippedY: false,
isSingle: false,
anchor,
scaleX,
scaleY,
})
},
undo(data) {
const {
type,
initialShape,
initialShapeBounds,
currentPageId,
id,
boundsRotation,
} = before
const { id, currentPageId, type, initialShape, initialShapeBounds } =
before

const { shapes } = data.document.pages[currentPageId]

const shape = shapes[id]
const shape = data.document.pages[currentPageId].shapes[id]

getShapeUtils(shape).transform(shape, initialShapeBounds, {
type,
initialShape,
initialShapeBounds,
initialBounds: initialShapeBounds,
boundsRotation,
isFlippedX: false,
isFlippedY: false,
isSingle: false,
anchor,
initialShape: after.initialShape,
scaleX: 1,
scaleY: 1,
})
},
})
Expand Down
51 changes: 12 additions & 39 deletions state/commands/transform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,68 +8,41 @@ export default function transformCommand(
data: Data,
before: TransformSnapshot,
after: TransformSnapshot,
anchor: TransformCorner | TransformEdge
scaleX: number,
scaleY: number
) {
history.execute(
data,
new Command({
name: "translate_shapes",
category: "canvas",
do(data) {
const {
type,
shapeBounds,
initialBounds,
currentPageId,
selectedIds,
boundsRotation,
} = after

const { shapes } = data.document.pages[currentPageId]
const { type, currentPageId, selectedIds } = after

selectedIds.forEach((id) => {
const { initialShape, initialShapeBounds } = shapeBounds[id]
const shape = shapes[id]
const { initialShape, initialShapeBounds } = after.shapeBounds[id]
const shape = data.document.pages[currentPageId].shapes[id]

getShapeUtils(shape).transform(shape, initialShapeBounds, {
type,
initialShape,
initialShapeBounds,
initialBounds,
boundsRotation,
isFlippedX: false,
isFlippedY: false,
isSingle: false,
anchor,
scaleX: 1,
scaleY: 1,
})
})
},
undo(data) {
const {
type,
shapeBounds,
initialBounds,
currentPageId,
selectedIds,
boundsRotation,
} = before

const { shapes } = data.document.pages[currentPageId]
const { type, currentPageId, selectedIds } = before

selectedIds.forEach((id) => {
const { initialShape, initialShapeBounds } = shapeBounds[id]
const shape = shapes[id]
const { initialShape, initialShapeBounds } = before.shapeBounds[id]
const shape = data.document.pages[currentPageId].shapes[id]

getShapeUtils(shape).transform(shape, initialShapeBounds, {
type,
initialShape,
initialShapeBounds,
initialBounds,
boundsRotation,
isFlippedX: false,
isFlippedY: false,
isSingle: false,
anchor: type,
scaleX: 1,
scaleY: 1,
})
})
},
Expand Down
Loading

0 comments on commit 0c205d1

Please sign in to comment.