refactor: cleanup draft flag which is confusing

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

@@ -182,8 +182,9 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     const isMoving = useCameraMovingRef()
     const { Page } = React.useContext(LogseqContext)
     const isSelected = app.selectedIds.has(this.id)
+    const isCreating = app.isIn('logseq-portal.creating') && !pageId
     const tlEventsEnabled =
-      (isMoving || (isSelected && !isEditing) || app.selectedTool.id !== 'select') && !this.draft
+      (isMoving || (isSelected && !isEditing) || app.selectedTool.id !== 'select') && !isCreating
     const stop = React.useCallback(
       e => {
         if (!tlEventsEnabled) {
@@ -213,16 +214,14 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     }, [isEditing, this.props.collapsed])
 
     const onPageNameChanged = React.useCallback((id: string) => {
-      app.history.resume()
-      app.wrapUpdate(() => {
-        this.setDraft(false)
-        this.update({
-          pageId: id,
-          size: [600, 320],
-          blockType: 'P',
-        })
-        app.selectTool('select')
+      this.update({
+        pageId: id,
+        size: [600, 320],
+        blockType: 'P',
       })
+      app.selectTool('select')
+      app.history.resume()
+      app.history.persist()
     }, [])
 
     if (!Page) {
@@ -247,7 +246,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
             pointerEvents: isEditing ? 'all' : 'none',
           }}
         >
-          {this.draft ? (
+          {isCreating ? (
             <LogseqQuickSearch onChange={onPageNameChanged} />
           ) : (
             <div

tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/CreatingState.tsx

@@ -26,7 +26,6 @@ export class CreatingState extends TLToolState<
         point: Vec.sub(this.app.inputs.originPoint, this.offset),
         size: LogseqPortalShape.defaultProps.size,
       } as any)
-      shape.setDraft(true)
       this.creatingShape = shape
       this.app.currentPage.addShapes(shape)
       this.app.setEditingShape(shape)
@@ -57,12 +56,13 @@ export class CreatingState extends TLToolState<
 
   onExit = () => {
     if (!this.creatingShape) return
-    if (this.creatingShape?.draft) {
-      this.app.deleteShapes([this.creatingShape.id])
-    } else {
-      this.app.setSelectedShapes([this.creatingShape.id])
-    }
     this.app.clearEditingShape()
     this.app.history.resume()
+
+    if (this.creatingShape?.props.pageId) {
+      this.app.setSelectedShapes([this.creatingShape.id])
+    } else {
+      this.app.deleteShapes([this.creatingShape.id])
+    }
   }
 }

tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/IdleState.tsx

@@ -12,13 +12,13 @@ export class IdleState extends TLToolState<
   static id = 'idle'
   cursor = TLCursor.Cross
 
-  onEnter = ({ quick }: { quick: boolean } = { quick: false }) => {
+  onEnter = ({ quick }: { quick?: boolean }) => {
     if (quick) {
       this.tool.transition('creating')
     }
   }
 
-  onPointerDown: TLReactEvents<Shape>['pointer'] = (e) => {
+  onPointerDown: TLReactEvents<Shape>['pointer'] = e => {
     this.tool.transition('creating')
   }
 }

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

@@ -43,6 +43,7 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
         editingShape: toJS(this.app.editingShape),
       }),
       (curr, prev) => {
+        if (this.app.isInAny('creating')) return
         this.cleanup(curr, prev)
       }
     )
@@ -260,16 +261,11 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
       }
     })
 
-    // Cleanup inactive drafts
-    const shapesToDelete = this.shapes.filter(s => s.draft && this.app.editingShape !== s)
-
-    if (!deepEqual(updated, curr) || shapesToDelete.length) {
+    if (!deepEqual(updated, curr)) {
       this.update({
         bindings: updated.bindings,
       })
 
-      this.removeShapes(...shapesToDelete)
-
       updated.shapes.forEach(shape => {
         this.getShapeById(shape.id)?.update(shape)
       })

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx

@@ -105,7 +105,6 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
 
   bindingDistance = BINDING_DISTANCE
 
-  @observable private _draft = false
   @observable private isDirty = false
   @observable private lastSerialized: TLShapeModel<P> | undefined
 
@@ -115,15 +114,6 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
     return this.props.id
   }
 
-  @computed
-  get draft() {
-    return this._draft
-  }
-
-  @action setDraft(draft: boolean) {
-    this._draft = draft
-  }
-
   @action setNonce(nonce: number) {
     this.nonce = nonce
   }
@@ -296,7 +286,7 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
 
   @computed
   get serialized(): TLShapeModel<P> | null {
-    return this.draft ? null : this.getCachedSerialized()
+    return this.getCachedSerialized()
   }
 
   validateProps = (

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

@@ -48,7 +48,6 @@ export class BrushingState<
           ? BoundsUtils.boundsContain(brushBounds, shape.rotatedBounds)
           : shape.hitTestBounds(brushBounds)
       )
-      .filter(s => !s.draft)
 
     if (shiftKey) {
       if (hits.every(hit => this.initialSelectedShapes.includes(hit))) {

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

@@ -83,11 +83,8 @@ export class IdleState<
           const { selectionBounds, inputs } = this.app
           if (selectionBounds && PointUtils.pointInBounds(inputs.currentPoint, selectionBounds)) {
             this.tool.transition('pointingShapeBehindBounds', info)
-          } else if (!info.shape.draft) {
-            this.tool.transition('pointingShape', info)
           } else {
-            // as if clicking the canvas
-            this.tool.transition('pointingCanvas')
+            this.tool.transition('pointingShape', info)
           }
         }
         break

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

@@ -67,7 +67,6 @@ export class ResizingState<
     // @ts-expect-error maybe later
     this.snapshots = Object.fromEntries(
       selectedShapesArray
-        .filter(s => !s.draft)
         .map(shape => {
           const bounds = { ...shape.bounds }
           const [cx, cy] = BoundsUtils.getBoundsCenter(bounds)

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

@@ -151,7 +151,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
               isSelected={true}
             />
           ))}
-          {hoveredShape && !hoveredShape.draft && (
+          {hoveredShape && app.isInAny('creating') && (
             <Indicator key={'hovered_indicator_' + hoveredShape.id} shape={hoveredShape} />
           )}
           {brush && components.Brush && <components.Brush bounds={brush} />}