fix: use edit state to toggle activation state

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-import { TLBounds, TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
-import { HTMLContainer, TLComponentProps, TLContextBarProps, useApp } from '@tldraw/react'
-import { makeObservable, transaction } from 'mobx'
-import { useGesture } from '@use-gesture/react'
+import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
+import { HTMLContainer, TLComponentProps, useApp } from '@tldraw/react'
+import { makeObservable } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
 import { ColorInput } from '~components/inputs/ColorInput'
@@ -181,7 +180,8 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     const isMoving = useCameraMovingRef()
     const { Page } = React.useContext(LogseqContext)
     const isSelected = app.selectedIds.has(this.id)
-    const tlEventsEnabled = isMoving || isSelected || app.selectedTool.id !== 'select'
+    const tlEventsEnabled =
+      isMoving || (isSelected && !isEditing) || app.selectedTool.id !== 'select'
     const stop = React.useCallback(
       e => {
         if (!tlEventsEnabled) {
@@ -251,11 +251,9 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
               className="tl-logseq-portal-container"
               style={{
                 background: fill,
-                boxShadow:
-                  isEditing || isBinding
-                    ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)'
-                    : 'var(--shadow-medium)',
-                opacity: isSelected ? 0.8 : 1,
+                boxShadow: isBinding
+                  ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)'
+                  : 'var(--shadow-medium)',
                 color: stroke,
                 // @ts-expect-error ???
                 '--ls-primary-background-color': fill,

tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx

@@ -63,7 +63,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
     )
   })
 
-  ReactComponent = observer(({ events, isErasing, isActivated }: TLComponentProps) => {
+  ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
     const {
       props: { opacity, embedId },
     } = this
@@ -96,7 +96,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
           style={{
             width: '100%',
             height: embedId ? 'calc(100% - 32px)' : '100%',
-            pointerEvents: isActivated ? 'all' : 'none',
+            pointerEvents: isEditing ? 'all' : 'none',
             userSelect: 'none',
             position: 'relative',
           }}
@@ -108,7 +108,6 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
                 paddingBottom: '56.25%',
                 position: 'relative',
                 height: 0,
-                opacity: isSelected ? 0.5 : 1,
               }}
             >
               <iframe

tldraw/demo/src/App.jsx

@@ -49,6 +49,7 @@ const Page = props => {
   return (
     <textarea
       className="whitespace-pre w-full h-full font-mono"
+      style={{ minHeight: '64px' }}
       value={value}
       onChange={e => setValue(e.target.value)}
     />

tldraw/packages/core/src/lib/TLApp/TLApp.ts

@@ -422,24 +422,6 @@ export class TLApp<
     return this
   }
 
-  /* ----------------- Activated Shapes ---------------- */
-  @observable activatedIds: Set<string> = new Set()
-
-  @computed get activatedShapes(): S[] {
-    const { activatedIds, currentPage, selectedTool } = this
-    const stateId = selectedTool.id
-    if (stateId !== 'select') return []
-    return currentPage.shapes.filter(shape => activatedIds.has(shape.id))
-  }
-
-  @action readonly setActivatedShapes = (shapes: S[] | string[]): this => {
-    this.activatedIds.clear()
-    if (typeof shapes[0] === 'string')
-      (shapes as string[]).forEach(shape => this.activatedIds.add(shape))
-    else (shapes as S[]).forEach(shape => this.activatedIds.add(shape.id))
-    return this
-  }
-
   /* ----------------- Selected Shapes ---------------- */
 
   @observable selectedIds: Set<string> = new Set()

tldraw/packages/core/src/lib/TLPage/TLPage.ts

@@ -40,7 +40,7 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
         shapes: toJS(this.shapes.map(shape => toJS(shape.props))),
         bindings: toJS(this.bindings),
         nonce: this.nonce,
-        activatedShape: toJS(this.app.activatedIds),
+        editingShape: toJS(this.app.editingShape),
       }),
       (curr, prev) => {
         this.cleanup(curr, prev)
@@ -261,7 +261,7 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
     })
 
     // Cleanup inactive drafts
-    const shapesToDelete = this.shapes.filter(s => s.draft && !this.app.activatedShapes.includes(s))
+    const shapesToDelete = this.shapes.filter(s => s.draft && this.app.editingShape !== s)
 
     if (!deepEqual(updated, curr) || shapesToDelete.length) {
       this.update({

tldraw/packages/core/src/lib/tools/TLDotTool/states/CreatingState.tsx

@@ -47,7 +47,7 @@ export class CreatingState<
       transaction(() => {
         this.app.currentPage.addShapes(shape)
         if (this.tool.Shape.smart && shape.draft) {
-          this.app.setActivatedShapes([shape])
+          this.app.setEditingShape(shape)
         } else {
           this.app.setSelectedShapes([shape])
         }

tldraw/packages/core/src/lib/tools/TLSelectTool/states/IdleState.ts

@@ -47,6 +47,7 @@ export class IdleState<
   onPointerDown: TLEvents<S>['pointer'] = (info, event) => {
     const {
       selectedShapes,
+      selectedShapesArray,
       inputs: { ctrlKey },
     } = this.app
 
@@ -56,6 +57,15 @@ export class IdleState<
       return
     }
 
+    if (selectedShapesArray.length === 1 && selectedShapesArray[0].canEdit) {
+      this.tool.transition('editingShape', {
+        type: TLTargetType.Shape,
+        shape: selectedShapesArray[0],
+        order: 0,
+      })
+      return
+    }
+
     switch (info.type) {
       case TLTargetType.Selection: {
         switch (info.handle) {

tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingBoundsBackgroundState.ts

@@ -38,7 +38,7 @@ export class PointingBoundsBackgroundState<
 
   onPointerUp: TLEvents<S>['pointer'] = () => {
     if (this.pointedSelectedShape?.canActivate) {
-      this.app.setActivatedShapes([this.pointedSelectedShape.id])
+      this.app.setEditingShape(this.pointedSelectedShape.id)
     }
     this.app.setSelectedShapes([])
     this.tool.transition('idle')

tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingCanvasState.ts

@@ -16,7 +16,6 @@ export class PointingCanvasState<
     const { shiftKey } = this.app.inputs
     if (!shiftKey) {
       this.app.setSelectedShapes([])
-      this.app.setActivatedShapes([])
     }
   }
 
@@ -54,7 +53,7 @@ export class PointingCanvasState<
         })
         shape.setDraft(true)
         this.app.history.pause()
-        this.app.setActivatedShapes([shape.id])
+        this.app.setEditingShape(shape)
         this.app.currentPage.addShapes(shape)
       }
     })

tldraw/packages/react/src/components/AppCanvas.tsx

@@ -23,7 +23,6 @@ export const AppCanvas = observer(function InnerApp<S extends TLReactShape>(
       selectionDirectionHint={app.selectionDirectionHint}
       selectionBounds={app.selectionBounds}
       selectedShapes={app.selectedShapesArray}
-      activatedShapes={app.activatedShapes}
       erasingShapes={app.erasingShapesArray}
       shapes={app.shapes}
       assets={app.assets}

tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -42,7 +42,6 @@ export interface TLCanvasProps<S extends TLReactShape> {
   selectionDirectionHint: number[]
   selectionBounds: TLBounds
   selectedShapes: S[]
-  activatedShapes: S[]
   erasingShapes: S[]
   gridSize: number
   cursor: TLCursor
@@ -71,7 +70,6 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
   hoveredShape,
   selectionBounds,
   selectedShapes,
-  activatedShapes,
   erasingShapes,
   selectionDirectionHint,
   cursor = TLCursor.Default,
@@ -138,7 +136,6 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                 isBinding={bindingShapes?.includes(shape)}
                 isSelected={selectedShapesSet.has(shape)}
                 isErasing={erasingShapesSet.has(shape)}
-                isActivated={activatedShapes?.includes(shape)}
                 meta={meta}
                 zIndex={1000 + i}
                 onEditingEnd={onEditingEnd}

tldraw/packages/react/src/components/Indicator/Indicator.tsx

@@ -10,7 +10,6 @@ interface IndicatorProps {
   isSelected?: boolean
   isBinding?: boolean
   isEditing?: boolean
-  isActivated?: boolean
   meta?: any
 }
 
@@ -20,7 +19,6 @@ export const Indicator = observer(function Shape({
   isSelected = false,
   isBinding = false,
   isEditing = false,
-  isActivated = false,
   meta,
 }: IndicatorProps) {
   const {
@@ -39,13 +37,8 @@ export const Indicator = observer(function Shape({
       zIndex={10000}
     >
       <SVGContainer>
-        <g
-          className={`tl-indicator-container ${
-            isSelected || isActivated ? 'tl-selected' : 'tl-hovered'
-          }`}
-        >
+        <g className={`tl-indicator-container ${isSelected ? 'tl-selected' : 'tl-hovered'}`}>
           <ReactIndicator
-            isActivated={isActivated}
             isEditing={isEditing}
             isBinding={isBinding}
             isHovered={isHovered}

tldraw/packages/react/src/components/Shape/Shape.tsx

@@ -13,7 +13,6 @@ interface ShapeProps {
   isSelected?: boolean
   isBinding?: boolean
   isErasing?: boolean
-  isActivated?: boolean
   isEditing?: boolean
   onEditingEnd: () => void
   meta: any
@@ -26,7 +25,6 @@ export const Shape = observer(function Shape({
   isBinding = false,
   isErasing = false,
   isEditing = false,
-  isActivated = false,
   onEditingEnd,
   asset,
   meta,
@@ -47,7 +45,6 @@ export const Shape = observer(function Shape({
         isHovered={isHovered}
         isSelected={isSelected}
         isErasing={isErasing}
-        isActivated={isActivated}
         events={events}
         asset={asset}
         onEditingEnd={onEditingEnd}

tldraw/packages/react/src/lib/TLReactShape.tsx

@@ -8,7 +8,6 @@ export interface TLCommonShapeProps<M = unknown> {
   isHovered: boolean
   isSelected: boolean
   isErasing: boolean
-  isActivated: boolean
   asset?: TLAsset
 }