Fixes more bugs with groups

components/canvas/bounds/center-handle.tsx

@@ -10,8 +10,10 @@ export default function CenterHandle({
 }) {
   return (
     <StyledBounds
-      width={bounds.width}
-      height={bounds.height}
+      x={-1}
+      y={-1}
+      width={bounds.width + 2}
+      height={bounds.height + 2}
       pointerEvents="none"
       isLocked={isLocked}
     />

components/canvas/bounds/corner-handle.tsx

@@ -20,15 +20,15 @@ export default function CornerHandle({
     <g>
       <StyledCorner
         corner={corner}
-        x={(isLeft ? 0 : bounds.width) - size}
-        y={(isTop ? 0 : bounds.height) - size}
+        x={(isLeft ? -1 : bounds.width + 1) - size}
+        y={(isTop ? -1 : bounds.height + 1) - size}
         width={size * 2}
         height={size * 2}
         {...events}
       />
       <StyledCornerInner
-        x={(isLeft ? 0 : bounds.width) - size / 2}
-        y={(isTop ? 0 : bounds.height) - size / 2}
+        x={(isLeft ? -1 : bounds.width + 1) - size / 2}
+        y={(isTop ? -1 : bounds.height + 1) - size / 2}
         width={size}
         height={size}
         pointerEvents="none"

components/canvas/bounds/edge-handle.tsx

@@ -16,13 +16,15 @@ export default function EdgeHandle({
   const isHorizontal = edge === Edge.Top || edge === Edge.Bottom
   const isFarEdge = edge === Edge.Right || edge === Edge.Bottom
 
+  const { height, width } = bounds
+
   return (
     <StyledEdge
       edge={edge}
-      x={isHorizontal ? size / 2 : (isFarEdge ? bounds.width : 0) - size / 2}
-      y={isHorizontal ? (isFarEdge ? bounds.height : 0) - size / 2 : size / 2}
-      width={isHorizontal ? Math.max(0, bounds.width - size) : size}
-      height={isHorizontal ? size : Math.max(0, bounds.height - size)}
+      x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
+      y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}
+      width={isHorizontal ? Math.max(0, width + 1 - size) : size}
+      height={isHorizontal ? size : Math.max(0, height + 1 - size)}
       {...events}
     />
   )

components/canvas/shape.tsx

@@ -40,30 +40,30 @@ function Shape({ id, isSelecting, parentPoint, parentRotation }: ShapeProps) {
   const style = getShapeStyle(shape.style)
 
   return (
-    <>
-      <StyledGroup ref={rGroup} transform={transform}>
-        {isSelecting && !isGroup && (
-          <HoverIndicator
-            as="use"
-            href={'#' + id}
-            strokeWidth={+style.strokeWidth + 4}
-            variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
-            {...events}
+    <StyledGroup ref={rGroup} transform={transform}>
+      {isSelecting && !isGroup && (
+        <HoverIndicator
+          as="use"
+          href={'#' + id}
+          strokeWidth={+style.strokeWidth + 4}
+          variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
+          {...events}
+        />
+      )}
+      {!shape.isHidden && (
+        <StyledShape as="use" data-shy={isGroup} href={'#' + id} {...style} />
+      )}
+      {isGroup &&
+        shape.children.map((shapeId) => (
+          <Shape
+            key={shapeId}
+            id={shapeId}
+            isSelecting={isSelecting}
+            parentPoint={shape.point}
+            parentRotation={shape.rotation}
           />
-        )}
-        {!shape.isHidden && <StyledShape as="use" href={'#' + id} {...style} />}
-        {isGroup &&
-          shape.children.map((shapeId) => (
-            <Shape
-              key={shapeId}
-              id={shapeId}
-              isSelecting={isSelecting}
-              parentPoint={shape.point}
-              parentRotation={shape.rotation}
-            />
-          ))}
-      </StyledGroup>
-    </>
+        ))}
+    </StyledGroup>
   )
 }
 
@@ -93,15 +93,25 @@ const HoverIndicator = styled('path', {
 })
 
 const StyledGroup = styled('g', {
+  outline: 'none',
+  [`& *[data-shy="true"]`]: {
+    opacity: '0',
+  },
   [`& ${HoverIndicator}`]: {
     opacity: '0',
   },
   [`&:hover ${HoverIndicator}`]: {
     opacity: '0.16',
   },
+  [`&:hover *[data-shy="true"]`]: {
+    opacity: '1',
+  },
   variants: {
     isSelected: {
       true: {
+        [`& *[data-shy="true"]`]: {
+          opacity: '1',
+        },
         [`& ${HoverIndicator}`]: {
           opacity: '0.2',
         },

lib/shape-utils/group.tsx

@@ -48,9 +48,12 @@ const group = registerShapeUtils<GroupShape>({
     const { id, size } = shape
 
     return (
-      <g id={id}>
-        <StyledGroupShape id={id} width={size[0]} height={size[1]} />
-      </g>
+      <StyledGroupShape
+        id={id}
+        width={size[0]}
+        height={size[1]}
+        data-shy={true}
+      />
     )
   },
 

lib/shape-utils/rectangle.tsx

@@ -36,8 +36,10 @@ const rectangle = registerShapeUtils<RectangleShape>({
           id={id}
           rx={radius}
           ry={radius}
-          width={Math.max(0, size[0] - Number(styles.strokeWidth) / 2)}
-          height={Math.max(0, size[1] - Number(styles.strokeWidth) / 2)}
+          x={+styles.strokeWidth / 2}
+          y={+styles.strokeWidth / 2}
+          width={Math.max(0, size[0] + -styles.strokeWidth)}
+          height={Math.max(0, size[1] + -styles.strokeWidth)}
         />
       </g>
     )

state/commands/delete-selected.ts

@@ -30,6 +30,11 @@ export default function deleteSelected(data: Data) {
 
         for (let id of selectedIds) {
           const shape = page.shapes[id]
+          if (!shape) {
+            console.error('no shape ' + id)
+            continue
+          }
+
           if (shape.parentId !== data.currentPageId) {
             const parent = page.shapes[shape.parentId]
             getShapeUtils(parent)
@@ -43,10 +48,10 @@ export default function deleteSelected(data: Data) {
                 parent.children.map((id) => page.shapes[id])
               )
           }
+        }
 
-          for (let shape of childrenToDelete) {
-            delete page.shapes[shape.id]
-          }
+        for (let shape of childrenToDelete) {
+          delete page.shapes[shape.id]
         }
 
         data.selectedIds.clear()

state/sessions/brush-session.ts

@@ -64,14 +64,16 @@ export function getBrushSnapshot(data: Data) {
     shapeHitTests: Object.fromEntries(
       getShapes(current(data))
         .filter((shape) => shape.type !== ShapeType.Group)
-        .map((shape) => [
-          shape.id,
-          {
-            selectId: getTopParentId(data, shape.id),
-            test: (bounds: Bounds) =>
-              getShapeUtils(shape).hitTestBounds(shape, bounds),
-          },
-        ])
+        .map((shape) => {
+          return [
+            shape.id,
+            {
+              selectId: getTopParentId(data, shape.id),
+              test: (bounds: Bounds) =>
+                getShapeUtils(shape).hitTestBounds(shape, bounds),
+            },
+          ]
+        })
     ),
   }
 }

state/sessions/transform-session.ts

@@ -1,4 +1,4 @@
-import { Data, Edge, Corner } from 'types'
+import { Data, Edge, Corner, Bounds } from 'types'
 import * as vec from 'utils/vec'
 import BaseSession from './base-session'
 import commands from 'state/commands'
@@ -8,6 +8,7 @@ import {
   getBoundsCenter,
   getBoundsFromPoints,
   getCommonBounds,
+  getDocumentBranch,
   getPage,
   getRelativeTransformedBoundingBox,
   getSelectedShapes,
@@ -115,10 +116,11 @@ export default class TransformSession extends BaseSession {
 export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
   const cData = current(data)
   const { currentPageId } = cData
+  const page = getPage(cData)
 
-  const initialShapes = getSelectedShapes(cData).filter(
-    (shape) => !shape.isLocked
-  )
+  const initialShapes = Array.from(cData.selectedIds.values())
+    .flatMap((id) => getDocumentBranch(cData, id).map((id) => page.shapes[id]))
+    .filter((shape) => !shape.isLocked)
 
   const hasUnlockedShapes = initialShapes.length > 0
 
@@ -182,3 +184,27 @@ export type TransformSnapshot = ReturnType<typeof getTransformSnapshot>
 // }
 
 // const origin = transformOrigins[this.transformType]
+
+// function resizeDescendants(data: Data, shapeId: string, bounds: Bounds) {
+
+//   const { initialShape, initialShapeBounds, transformOrigin } =
+//     shapeBounds[id]
+
+//   const newShapeBounds = getRelativeTransformedBoundingBox(
+//     newBoundingBox,
+//     initialBounds,
+//     initialShapeBounds,
+//     this.scaleX < 0,
+//     this.scaleY < 0
+//   )
+
+//   const shape = shapes[id]
+
+//   getShapeUtils(shape).transform(shape, newShapeBounds, {
+//     type: this.transformType,
+//     initialShape,
+//     scaleX: this.scaleX,
+//     scaleY: this.scaleY,
+//     transformOrigin,
+//   })
+// }

state/state.ts

@@ -24,6 +24,7 @@ import {
   getParentRotation,
   rotateBounds,
   getBoundsCenter,
+  getDocumentBranch,
 } from 'utils/utils'
 import {
   Data,
@@ -924,6 +925,7 @@ const state = createState({
       payload: PointerInfo & { target: Corner | Edge }
     ) {
       const point = screenToWorld(inputs.pointer.origin, data)
+      // session = new Sessions.TransformSession(data, payload.target, point)
       session =
         data.selectedIds.size === 1
           ? new Sessions.TransformSingleSession(data, payload.target, point)
@@ -1385,7 +1387,7 @@ const state = createState({
     },
 
     restoreSavedData(data) {
-      // history.load(data)
+      history.load(data)
     },
 
     clearBoundsRotation(data) {
@@ -1441,16 +1443,22 @@ const state = createState({
       }
 
       const commonBounds = getCommonBounds(
-        ...shapes.map((shape) => {
-          const parentOffset = getParentOffset(data, shape.id)
-          const parentRotation = getParentRotation(data, shape.id)
-          const bounds = getShapeUtils(shape).getRotatedBounds(shape)
-
-          return translateBounds(
-            rotateBounds(bounds, getBoundsCenter(bounds), parentRotation),
-            vec.neg(parentOffset)
-          )
-        })
+        ...shapes
+          .flatMap((shape) => getDocumentBranch(data, shape.id))
+          .map((id) => page.shapes[id])
+          .filter((shape) => shape.type !== ShapeType.Group)
+          .map((shape) => {
+            const parentOffset = getParentOffset(data, shape.id)
+            const parentRotation = getParentRotation(data, shape.id)
+            const bounds = getShapeUtils(shape).getRotatedBounds(shape)
+
+            return bounds
+
+            return translateBounds(
+              rotateBounds(bounds, getBoundsCenter(bounds), parentRotation),
+              vec.neg(parentOffset)
+            )
+          })
       )
 
       return commonBounds
@@ -1463,6 +1471,7 @@ const state = createState({
         return currentStyle
       }
       const page = getPage(data)
+
       const shapeStyles = selectedIds.map((id) => page.shapes[id].style)
 
       const commonStyle: ShapeStyles = {} as ShapeStyles

styles/stitches.config.ts

@@ -6,12 +6,12 @@ const { styled, global, css, theme, getCssString } = createCss({
   },
   theme: {
     colors: {
-      brushFill: 'rgba(0,0,0,.1)',
-      brushStroke: 'rgba(0,0,0,.5)',
+      brushFill: 'rgba(0,0,0,.05)',
+      brushStroke: 'rgba(0,0,0,.25)',
       hint: 'rgba(216, 226, 249, 1.000)',
       selected: 'rgba(66, 133, 244, 1.000)',
       bounds: 'rgba(65, 132, 244, 1.000)',
-      boundsBg: 'rgba(65, 132, 244, 0.100)',
+      boundsBg: 'rgba(65, 132, 244, 0.050)',
       border: '#aaa',
       canvas: '#fafafa',
       panel: '#fefefe',

todo.md

@@ -0,0 +1,10 @@
+# Todo
+
+## Groups
+
+- Restore select highlight, fix for children of rotated groups
+- Transforming on rotated shapes
+- Fix bounding box for rotated shapes
+- Allow single-selected groups to transform their children correctly
+- (merge transform-session and transform-single-session)
+- fix drift when moving children of rotated group

utils/utils.ts

@@ -1623,6 +1623,7 @@ export function updateParents(data: Data, changedShapeIds: string[]) {
 
   for (const parentId of parentToUpdateIds) {
     const parent = shapes[parentId] as GroupShape
+
     getShapeUtils(parent).onChildrenChange(
       parent,
       parent.children.map((id) => shapes[id])