fix: cleanup some codes

tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx

@@ -27,15 +27,6 @@ export const DevTools = observer(() => {
     statusbarAnchorRef.current = statusbarAnchor
   }, [])
 
-  const originPoint = canvasAnchorRef.current
-    ? ReactDOM.createPortal(
-        <svg className="tl-renderer-dev-tools tl-grid">
-          <circle cx={point[0] * zoom} cy={point[1] * zoom} r="4" fill="red" />
-        </svg>,
-        canvasAnchorRef.current
-      )
-    : null
-
   const rendererStatusText = [
     ['Z', zoom.toFixed(2)],
     ['MP', printPoint(inputs.currentPoint)],
@@ -63,7 +54,6 @@ export const DevTools = observer(() => {
 
   return (
     <>
-      {originPoint}
       {rendererStatus}
     </>
   )

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

@@ -116,7 +116,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
   canChangeAspectRatio = true
   canFlip = true
   canActivate = true
-  canEdit = false
+  canEdit = true
 
   constructor(props = {} as Partial<LogseqPortalShapeProps>) {
     super(props)
@@ -172,7 +172,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     )
   })
 
-  ReactComponent = observer(({ events, isErasing, isActivated, isBinding }: TLComponentProps) => {
+  ReactComponent = observer(({ events, isErasing, isEditing, isBinding }: TLComponentProps) => {
     const {
       props: { opacity, pageId, stroke, fill },
     } = this
@@ -194,7 +194,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
 
     // It is a bit weird to update shapes here. Is there a better place?
     React.useEffect(() => {
-      if (this.props.collapsed && isActivated) {
+      if (this.props.collapsed && isEditing) {
         // Should temporarily disable collapsing
         this.update({
           size: [this.props.size[0], this.props.collapsedHeight],
@@ -208,7 +208,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       return () => {
         // no-ops
       }
-    }, [isActivated, this.props.collapsed])
+    }, [isEditing, this.props.collapsed])
 
     const onPageNameChanged = React.useCallback((id: string) => {
       app.wrapUpdate(() => {
@@ -218,7 +218,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           blockType: 'P',
         })
         this.setDraft(false)
-        app.setActivatedShapes([])
+        app.clearEditingShape()
       })
     }, [])
 
@@ -241,7 +241,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           style={{
             width: '100%',
             height: '100%',
-            pointerEvents: isActivated ? 'all' : 'none',
+            pointerEvents: isEditing ? 'all' : 'none',
           }}
         >
           {this.draft ? (
@@ -252,7 +252,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
               style={{
                 background: fill,
                 boxShadow:
-                  isActivated || isBinding
+                  isEditing || isBinding
                     ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)'
                     : 'var(--shadow-medium)',
                 opacity: isSelected ? 0.8 : 1,
@@ -264,7 +264,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
               }}
             >
               <LogseqPortalShapeHeader type={this.props.blockType ?? 'P'} pageId={pageId} />
-              {(!this.props.collapsed || isActivated) && (
+              {(!this.props.collapsed || isEditing) && (
                 <div
                   style={{
                     width: '100%',

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

@@ -633,7 +633,8 @@ export class TLApp<
       this.isIn('select') &&
       !this.isInAny('select.translating', 'select.pinching') &&
       this.selectedShapes.size > 0 &&
-      !this.selectedShapesArray.every(shape => shape.hideSelectionDetail)
+      !this.selectedShapesArray.every(shape => shape.hideSelectionDetail) &&
+      false // FIXME: should we shoult the selection detail?
     )
   }
 

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

@@ -1,32 +1,32 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import * as React from 'react'
+import { TLAsset, TLBinding, TLBounds, TLCursor, TLTheme } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
+import * as React from 'react'
 import {
-  Shape,
-  Indicator,
-  HTMLLayer,
   Container,
-  SelectionDetailContainer,
   ContextBarContainer,
+  HTMLLayer,
+  Indicator,
+  SelectionDetailContainer,
+  Shape,
   SVGContainer,
 } from '~components'
+import { DirectionIndicator } from '~components/ui/DirectionIndicator'
+import { EMPTY_OBJECT, NOOP } from '~constants'
 import {
+  useApp,
   useCanvasEvents,
+  useCursor,
   useGestureEvents,
+  usePreventNavigation,
+  useRendererContext,
   useResizeObserver,
   useStylesheet,
-  useRendererContext,
-  usePreventNavigation,
-  useCursor,
   useZoom,
-  useApp,
 } from '~hooks'
-import { TLAsset, TLBinding, TLBounds, TLCursor, TLTheme } from '@tldraw/core'
-import { EMPTY_OBJECT, NOOP } from '~constants'
-import type { TLReactShape } from '~lib'
-import { DirectionIndicator } from '~components/ui/DirectionIndicator'
 import { useKeyboardEvents } from '~hooks/useKeyboardEvents'
+import type { TLReactShape } from '~lib'
 
 export interface TLCanvasProps<S extends TLReactShape> {
   id: string
@@ -117,7 +117,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
         {showGrid && components.Grid && <components.Grid size={gridSize} />}
         <HTMLLayer>
           {components.SelectionBackground && selectedShapes && selectionBounds && showSelection && (
-            <Container bounds={selectionBounds} zIndex={2}>
+            <Container data-type="SelectionBackground" bounds={selectionBounds} zIndex={2}>
               <components.SelectionBackground
                 zoom={zoom}
                 shapes={selectedShapes}
@@ -161,7 +161,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
           {selectedShapes && selectionBounds && (
             <>
               {showSelection && components.SelectionForeground && (
-                <Container bounds={selectionBounds} zIndex={10002}>
+                <Container data-type="SelectionForeground" bounds={selectionBounds} zIndex={10002}>
                   <components.SelectionForeground
                     zoom={zoom}
                     shapes={selectedShapes}
@@ -172,7 +172,11 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                 </Container>
               )}
               {showHandles && onlySelectedShapeWithHandles && components.Handle && (
-                <Container bounds={selectionBounds} zIndex={10003}>
+                <Container
+                  data-type="onlySelectedShapeWithHandles"
+                  bounds={selectionBounds}
+                  zIndex={10003}
+                >
                   <SVGContainer>
                     {Object.entries(onlySelectedShapeWithHandles.props.handles!).map(
                       ([id, handle]) =>

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

@@ -31,7 +31,13 @@ export const Indicator = observer(function Shape({
   } = shape
 
   return (
-    <Container bounds={bounds} rotation={rotation} scale={scale} zIndex={10000}>
+    <Container
+      data-type="Indicator"
+      bounds={bounds}
+      rotation={rotation}
+      scale={scale}
+      zIndex={10000}
+    >
       <SVGContainer>
         <g
           className={`tl-indicator-container ${

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

@@ -1,11 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
+import type { TLAsset } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { Container } from '~components'
-import type { TLReactShape } from '~lib'
 import { useShapeEvents } from '~hooks/useShapeEvents'
-import { useApp } from '~hooks'
-import type { TLAsset } from '@tldraw/core'
+import type { TLReactShape } from '~lib'
 
 interface ShapeProps {
   shape: TLReactShape
@@ -32,6 +30,7 @@ export const Shape = observer(function Shape({
   onEditingEnd,
   asset,
   meta,
+  zIndex,
 }: ShapeProps) {
   const {
     bounds,
@@ -39,14 +38,8 @@ export const Shape = observer(function Shape({
     ReactComponent,
   } = shape
   const events = useShapeEvents(shape)
-  // const app = useApp()
-  // let linkButton = null
-  // if (shape.serialized.logseqLink) {
-  //   const f = () => app.pubEvent('whiteboard-go-to-link', shape.serialized.logseqLink)
-  //   linkButton = <a onMouseDown={f}>Go to Link</a>
-  // }
   return (
-    <Container bounds={bounds} rotation={rotation} scale={scale}>
+    <Container zIndex={zIndex} data-type="Shape" bounds={bounds} rotation={rotation} scale={scale}>
       <ReactComponent
         meta={meta}
         isEditing={isEditing}