Improves transforms

components/canvas/bounds-bg.tsx

@@ -6,7 +6,7 @@ import styled from "styles"
 export default function BoundsBg() {
   const rBounds = useRef<SVGRectElement>(null)
   const bounds = useSelector((state) => state.values.selectedBounds)
-
+  const isSelecting = useSelector((s) => s.isIn("selecting"))
   const rotation = useSelector((s) => {
     if (s.data.selectedIds.size === 1) {
       const { shapes } = s.data.document.pages[s.data.currentPageId]
@@ -18,6 +18,7 @@ export default function BoundsBg() {
   })
 
   if (!bounds) return null
+  if (!isSelecting) return null
 
   const { minX, minY, width, height } = bounds
 

components/canvas/bounds.tsx

@@ -7,9 +7,9 @@ import { lerp } from "utils/utils"
 
 export default function Bounds() {
   const isBrushing = useSelector((s) => s.isIn("brushSelecting"))
+  const isSelecting = useSelector((s) => s.isIn("selecting"))
   const zoom = useSelector((s) => s.data.camera.zoom)
   const bounds = useSelector((s) => s.values.selectedBounds)
-
   const rotation = useSelector((s) => {
     if (s.data.selectedIds.size === 1) {
       const { shapes } = s.data.document.pages[s.data.currentPageId]
@@ -21,6 +21,7 @@ export default function Bounds() {
   })
 
   if (!bounds) return null
+  if (!isSelecting) return null
 
   let { minX, minY, maxX, maxY, width, height } = bounds
 

lib/code/circle.ts

@@ -18,7 +18,7 @@ export default class Circle extends CodeShape<CircleShape> {
       rotation: 0,
       radius: 20,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/code/dot.ts

@@ -17,7 +17,7 @@ export default class Dot extends CodeShape<DotShape> {
       point: [0, 0],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/code/ellipse.ts

@@ -19,7 +19,7 @@ export default class Ellipse extends CodeShape<EllipseShape> {
       radiusY: 20,
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/code/line.ts

@@ -19,7 +19,7 @@ export default class Line extends CodeShape<LineShape> {
       direction: [-0.5, 0.5],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/code/ray.ts

@@ -19,7 +19,7 @@ export default class Ray extends CodeShape<RayShape> {
       direction: [0, 1],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/code/rectangle.ts

@@ -19,7 +19,7 @@ export default class Rectangle extends CodeShape<RectangleShape> {
       size: [100, 100],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/shapes/circle.tsx

@@ -22,7 +22,7 @@ const circle = createShape<CircleShape>({
       rotation: 0,
       radius: 20,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
       },
       ...props,
@@ -157,6 +157,10 @@ const circle = createShape<CircleShape>({
     return shape
   },
 
+  transformSingle(shape, bounds, info) {
+    return this.transform(shape, bounds, info)
+  },
+
   canTransform: true,
 })
 

lib/shapes/dot.tsx

@@ -22,7 +22,7 @@ const dot = createShape<DotShape>({
       point: [0, 0],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
       },
       ...props,
@@ -89,6 +89,10 @@ const dot = createShape<DotShape>({
     return shape
   },
 
+  transformSingle(shape, bounds, info) {
+    return this.transform(shape, bounds, info)
+  },
+
   canTransform: false,
 })
 

lib/shapes/ellipse.tsx

@@ -5,7 +5,12 @@ import { createShape } from "./index"
 import { boundsContained } from "utils/bounds"
 import { intersectEllipseBounds } from "utils/intersections"
 import { pointInEllipse } from "utils/hitTests"
-import { translateBounds } from "utils/utils"
+import {
+  getBoundsFromPoints,
+  getRotatedCorners,
+  rotateBounds,
+  translateBounds,
+} from "utils/utils"
 
 const ellipse = createShape<EllipseShape>({
   boundsCache: new WeakMap([]),
@@ -23,7 +28,7 @@ const ellipse = createShape<EllipseShape>({
       radiusY: 20,
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
       },
       ...props,
@@ -56,7 +61,7 @@ const ellipse = createShape<EllipseShape>({
   },
 
   getRotatedBounds(shape) {
-    return this.getBounds(shape)
+    return getBoundsFromPoints(getRotatedCorners(shape))
   },
 
   getCenter(shape) {
@@ -68,7 +73,8 @@ const ellipse = createShape<EllipseShape>({
       point,
       vec.add(shape.point, [shape.radiusX, shape.radiusY]),
       shape.radiusX,
-      shape.radiusY
+      shape.radiusY,
+      shape.rotation
     )
   },
 
@@ -83,7 +89,8 @@ const ellipse = createShape<EllipseShape>({
         vec.add(shape.point, [shape.radiusX, shape.radiusY]),
         shape.radiusX,
         shape.radiusY,
-        brushBounds
+        brushBounds,
+        shape.rotation
       ).length > 0
     )
   },
@@ -109,6 +116,10 @@ const ellipse = createShape<EllipseShape>({
     return shape
   },
 
+  transformSingle(shape, bounds, info) {
+    return this.transform(shape, bounds, info)
+  },
+
   canTransform: true,
 })
 

lib/shapes/index.tsx

@@ -72,6 +72,23 @@ export interface ShapeUtility<K extends Shape> {
     }
   ): K
 
+  transformSingle(
+    this: ShapeUtility<K>,
+    shape: K,
+    bounds: Bounds,
+    info: {
+      type: TransformEdge | TransformCorner
+      boundsRotation: number
+      initialShape: K
+      initialShapeBounds: BoundsSnapshot
+      initialBounds: Bounds
+      isFlippedX: boolean
+      isFlippedY: boolean
+      isSingle: boolean
+      anchor: TransformEdge | TransformCorner
+    }
+  ): K
+
   // Apply a scale to a shape.
   scale(this: ShapeUtility<K>, shape: K, scale: number): K
 

lib/shapes/line.tsx

@@ -22,7 +22,7 @@ const line = createShape<LineShape>({
       direction: [0, 0],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
       },
       ...props,
@@ -97,6 +97,10 @@ const line = createShape<LineShape>({
     return shape
   },
 
+  transformSingle(shape, bounds, info) {
+    return this.transform(shape, bounds, info)
+  },
+
   canTransform: false,
 })
 

lib/shapes/polyline.tsx

@@ -123,6 +123,10 @@ const polyline = createShape<PolylineShape>({
     return shape
   },
 
+  transformSingle(shape, bounds, info) {
+    return this.transform(shape, bounds, info)
+  },
+
   canTransform: true,
 })
 

lib/shapes/ray.tsx

@@ -22,7 +22,7 @@ const ray = createShape<RayShape>({
       direction: [0, 1],
       rotation: 0,
       style: {
-        fill: "rgba(142, 143, 142, 1.000)",
+        fill: "#c6cacb",
         stroke: "#000",
         strokeWidth: 1,
       },