fix: maintain ordering of shapes

src/main/frontend/handler/whiteboard.cljs

@@ -45,8 +45,8 @@
 (defn- block->shape [block]
   (:block/properties block))
 
-(defn- shape->block [shape page-name]
-  (let [properties (assoc shape :ls-type :whiteboard-shape)
+(defn- shape->block [shape page-name idx]
+  (let [properties (assoc shape :ls-type :whiteboard-shape :index idx)
         block {:block/page {:block/name (util/page-name-sanity-lc page-name)}
                :block/parent {:block/name page-name}
                :block/properties properties}
@@ -68,7 +68,9 @@
                                                                       :block/properties [:ls-type]
                                                                       {:block/parent [:block/uuid]}]})
         shapes (:shapes tldr-data)
-        blocks (mapv #(shape->block % page-name) shapes)
+        ;; we should maintain the order of the shapes in the page
+        ;; bring back/forward is depending on this ordering
+        blocks (map-indexed (fn [idx shape] (shape->block shape page-name idx)) shapes)
         block-ids (->> shapes
                        (map (fn [shape] (when (= (:blockType shape) "B")
                                           (uuid (:pageId shape)))))
@@ -94,7 +96,8 @@
   (let [id (str (:block/uuid page-block))
         shapes (->> blocks
                     (map block->shape)
-                    (filter #(= :whiteboard-shape (:ls-type %))))
+                    (filter #(= :whiteboard-shape (:ls-type %)))
+                    (sort-by :index))
         page-properties (:block/properties page-block)
         assets (:assets page-properties)
         page-properties (dissoc page-properties :assets)]

tldraw/apps/tldraw-logseq/src/app.tsx

@@ -18,6 +18,7 @@ import { LogseqContext, LogseqContextValue } from '~lib/logseq-context'
 import { Shape, shapes } from '~lib/shapes'
 import {
   BoxTool,
+  // DotTool,
   EllipseTool,
   HighlighterTool,
   HTMLTool,

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

@@ -44,7 +44,7 @@ const GeometryToolButtons = observer(() => {
   const geometries = [
     {
       id: 'box',
-      icon: 'rectangle',
+      icon: 'square',
       title: 'Rectangle',
     },
     {

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

@@ -728,6 +728,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           ) : (
             <div
               className="tl-logseq-portal-container"
+              data-collapsed={this.props.collapsed}
               style={{
                 background: this.props.compact ? 'transparent' : fill,
                 boxShadow: isBinding

tldraw/apps/tldraw-logseq/src/styles.css

@@ -544,6 +544,10 @@
   transform: translate(1px, 1px);
   overscroll-behavior: none;
   opacity: 1;
+
+  &[data-collapsed='true'] {
+    @apply overflow-hidden;
+  }
 }
 
 .tl-logseq-portal-header {

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

@@ -130,6 +130,7 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
         this.shapes[index] = this.shapes[index + 1]
         this.shapes[index + 1] = t
       })
+    this.app.persist()
     return this
   }
 
@@ -146,18 +147,21 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
         this.shapes[index] = this.shapes[index - 1]
         this.shapes[index - 1] = t
       })
+    this.app.persist()
     return this
   }
 
   @action bringToFront = (shapes: S[] | string[]): this => {
     const shapesToMove = this.parseShapesArg(shapes)
     this.shapes = this.shapes.filter(shape => !shapesToMove.includes(shape)).concat(shapesToMove)
+    this.app.persist()
     return this
   }
 
   @action sendToBack = (shapes: S[] | string[]): this => {
     const shapesToMove = this.parseShapesArg(shapes)
     this.shapes = shapesToMove.concat(this.shapes.filter(shape => !shapesToMove.includes(shape)))
+    this.app.persist()
     return this
   }
 
@@ -189,6 +193,7 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
         })
       }
     })
+    this.app.persist()
     return this
   }
 

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

@@ -137,7 +137,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                 isSelected={selectedShapesSet.has(shape)}
                 isErasing={erasingShapesSet.has(shape)}
                 meta={meta}
-                zIndex={(selectedShapesSet.has(shape) ? 2000 : 1000) + i}
+                zIndex={1000 + i}
                 onEditingEnd={onEditingEnd}
               />
             ))}