Restores selected indicator, removes hook for isSelected on shape

components/canvas/canvas.tsx

@@ -56,14 +56,13 @@ export default function Canvas() {
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
       onTouchStart={handleTouchStart}
-      // onTouchMove={handleTouchMove}
     >
       <Defs />
       {isReady && (
         <g ref={rGroup}>
           <BoundsBg />
           <Page />
-          {/* <Selected /> */}
+          <Selected />
           <Bounds />
           <Handles />
           <Brush />

components/canvas/shape.tsx

@@ -8,8 +8,6 @@ import useShapeEvents from 'hooks/useShapeEvents'
 import { getShapeStyle } from 'lib/shape-styles'
 
 function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
-  const isSelected = useSelector((s) => s.values.selectedIds.has(id))
-
   const shape = useSelector(({ data }) => getPage(data).shapes[id])
 
   const rGroup = useRef<SVGGElement>(null)
@@ -32,7 +30,7 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
   const style = getShapeStyle(shape.style)
 
   return (
-    <StyledGroup ref={rGroup} isSelected={isSelected} transform={transform}>
+    <StyledGroup ref={rGroup} transform={transform}>
       {isSelecting && (
         <HoverIndicator
           as="use"
@@ -86,6 +84,9 @@ const StyledGroup = styled('g', {
   [`& ${HoverIndicator}`]: {
     opacity: '0',
   },
+  [`&:hover ${HoverIndicator}`]: {
+    opacity: '0.16',
+  },
   variants: {
     isSelected: {
       true: {
@@ -103,9 +104,6 @@ const StyledGroup = styled('g', {
         [`& ${HoverIndicator}`]: {
           opacity: '0',
         },
-        [`&:hover ${HoverIndicator}`]: {
-          opacity: '0.16',
-        },
       },
     },
   },

state/sessions/brush-session.ts

@@ -1,9 +1,9 @@
-import { current } from "immer"
+import { current } from 'immer'
-import { Bounds, Data } from "types"
+import { Bounds, Data } from 'types'
-import BaseSession from "./base-session"
+import BaseSession from './base-session'
-import { getShapeUtils } from "lib/shape-utils"
+import { getShapeUtils } from 'lib/shape-utils'
-import { getBoundsFromPoints, getShapes } from "utils/utils"
+import { getBoundsFromPoints, getShapes } from 'utils/utils'
-import * as vec from "utils/vec"
+import * as vec from 'utils/vec'
 
 export default class BrushSession extends BaseSession {
   origin: number[]
@@ -25,7 +25,9 @@ export default class BrushSession extends BaseSession {
     for (let id in snapshot.shapeHitTests) {
       const test = snapshot.shapeHitTests[id]
       if (test(brushBounds)) {
-        data.selectedIds.add(id)
+        if (!data.selectedIds.has(id)) {
+          data.selectedIds.add(id)
+        }
       } else if (data.selectedIds.has(id)) {
         data.selectedIds.delete(id)
       }