Merge branch 'whiteboards' into enhance/whiteboards-tests

src/main/frontend/components/whiteboard.cljs

@@ -203,7 +203,8 @@
 
     (page-refs-count name
                      "text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
-                     (fn [open?] [:<> "Reference" (ui/icon (if open? "references-hide" "references-show"))]))]
+                     (fn [open?] [:<> "References" (ui/icon (if open? "references-hide" "references-show")
+                                                            {:extension? true})]))]
    (tldraw-app name block-id)])
 
 (rum/defc whiteboard-route

tldraw/apps/tldraw-logseq/package.json

@@ -25,7 +25,7 @@
     "@types/react-dom": "^17.0.0",
     "autoprefixer": "^10.4.7",
     "concurrently": "^7.2.1",
-    "esbuild": "^0.15.5",
+    "esbuild": "^0.15.6",
     "mobx": "^6.6.0",
     "mobx-react-lite": "^3.4.0",
     "perfect-freehand": "^1.1.0",

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

@@ -1,23 +1,18 @@
-import * as React from 'react'
 import { observer } from 'mobx-react-lite'
-import { ToolBar } from './Toolbar'
-import { StatusBar } from './StatusBar'
-import { PrimaryTools } from './PrimaryTools'
-import { DevTools } from './Devtools'
-import { Minimap } from './Minimap'
 import { ActionBar } from './ActionBar'
+import { DevTools } from './Devtools'
+import { PrimaryTools } from './PrimaryTools'
+import { StatusBar } from './StatusBar'
 
 const isDev = process.env.NODE_ENV === 'development'
 
 export const AppUI = observer(function AppUI() {
   return (
     <>
-      {/* <ToolBar /> */}
-      {/* <Minimap /> */}
       {isDev && <StatusBar />}
       {isDev && <DevTools />}
       <PrimaryTools />
-      <ActionBar></ActionBar>
+      <ActionBar />
     </>
   )
 })

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -304,7 +304,7 @@ const SwatchAction = observer(() => {
       shapes.forEach(s => {
         s.update({ fill: latestValue, stroke: latestValue })
       })
-      app.persist(true)
+      app.persist()
     }
     return debounce(handler, 100, e => {
       latestValue = e.target.value

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

@@ -5,6 +5,27 @@ import { observer } from 'mobx-react-lite'
 import { useApp } from '@tldraw/react'
 import type { Shape } from '../../lib'
 
+const HistoryStack = observer(function HistoryStack() {
+  const app = useApp<Shape>()
+
+  return (
+    <div className="fixed left-4 top-4 flex gap-4">
+      {app.history.stack.map((item, i) => (
+        <div
+          style={{
+            background: app.history.pointer === i ? 'pink' : 'grey',
+          }}
+          key={i}
+          onClick={() => app.history.setPointer(i)}
+          className="flex items-center rounded-lg p-4"
+        >
+          {item.pages[0].nonce}
+        </div>
+      ))}
+    </div>
+  )
+})
+
 export const StatusBar = observer(function StatusBar() {
   const app = useApp<Shape>()
   React.useEffect(() => {
@@ -30,6 +51,7 @@ export const StatusBar = observer(function StatusBar() {
   })
   return (
     <div className="tl-statusbar">
+      <HistoryStack />
       {app.selectedTool.id} | {app.selectedTool.currentState.id}
       <div style={{ flex: 1 }} />
       <div id="tl-statusbar-anchor" style={{ display: 'flex' }} />

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

@@ -800,7 +800,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
 
   ReactIndicator = observer(() => {
     const bounds = this.getBounds()
-    return <rect width={bounds.width} height={bounds.height} fill="transparent" stroke="none" />
+    return <rect width={bounds.width} height={bounds.height} fill="transparent" rx={8} ry={8} />
   })
 
   validateProps = (props: Partial<LogseqPortalShapeProps>) => {

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

@@ -244,7 +244,6 @@ export class TextShape extends TLTextShape<TextShapeProps> {
         rx={borderRadius}
         ry={borderRadius}
         fill="transparent"
-        stroke="none"
       />
     )
   })

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

@@ -18,7 +18,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
     type: 'youtube',
     parentId: 'page',
     point: [0, 0],
-    size: [600, 320],
+    size: [853, 480],
     url: '',
   }
 
@@ -56,7 +56,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
         <div
           className="rounded-lg w-full h-full relative overflow-hidden shadow-xl"
           style={{
-            pointerEvents: isEditing || isSelected ? 'all' : 'none',
+            pointerEvents: isEditing ? 'all' : 'none',
             userSelect: 'none',
           }}
         >
@@ -64,9 +64,8 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
             <div
               style={{
                 overflow: 'hidden',
-                paddingBottom: '56.25%',
                 position: 'relative',
-                height: 0,
+                height: '100%',
               }}
             >
               <iframe
@@ -120,7 +119,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
         size: [w, h],
       },
     } = this
-    return <rect width={w} height={h} fill="transparent" stroke="none" />
+    return <rect width={w} height={h} fill="transparent" rx={8} ry={8} />
   })
 
   validateProps = (props: Partial<YouTubeShapeProps>) => {

tldraw/demo/package.json

@@ -3,11 +3,11 @@
   "private": true,
   "version": "0.0.0-dev",
   "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.18.2",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.13",
     "tailwindcss": "^3.0.24",
-    "vite": "^3.0.0",
-    "@babel/plugin-proposal-decorators": "^7.18.2"
+    "vite": "^3.0.9"
   },
   "scripts": {
     "dev": "vite"

tldraw/package.json

@@ -28,12 +28,11 @@
     "@types/node": "^17.0.42",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
-    "eslint": "^8.17.0",
-    "fake-indexeddb": "^3.1.8",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "eslint": "^8.23.0",
     "init-package-json": "^3.0.2",
-    "lerna": "^5.1.1",
+    "lerna": "^5.5.0",
     "lint-staged": "^13.0.1",
     "prettier": "^2.6.2",
     "prettier-plugin-jsdoc": "^0.3.38",
@@ -41,7 +40,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.4.0",
     "typedoc": "^0.22.17",
-    "typescript": "^4.7.3"
+    "typescript": "^4.8.2"
   },
   "dependencies": {
     "@types/uuid": "^8.3.4"

tldraw/packages/core/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@tldraw/intersect": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",
-    "@use-gesture/react": "^10.2.15",
+    "@use-gesture/react": "^10.2.19",
     "fast-copy": "^2.1.3",
     "fast-deep-equal": "^3.1.3",
     "hotkeys-js": "^3.9.5",

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

@@ -31,7 +31,7 @@ import { TLViewport } from '../TLViewport'
 import { TLSelectTool, TLMoveTool } from '../tools'
 
 export interface TLDocumentModel<S extends TLShape = TLShape, A extends TLAsset = TLAsset> {
-  currentPageId: string
+  // currentPageId: string
   selectedIds: string[]
   pages: TLPageModel<S>[]
   assets?: A[]
@@ -247,7 +247,7 @@ export class TLApp<
 
   loadDocumentModel(model: TLDocumentModel<S>): this {
     this.history.deserialize(model)
-    if (model.assets) this.addAssets(model.assets)
+    if (model.assets && model.assets.length > 0) this.addAssets(model.assets)
 
     return this
   }
@@ -272,7 +272,7 @@ export class TLApp<
 
   @computed get serialized(): TLDocumentModel<S> {
     return {
-      currentPageId: this.currentPageId,
+      // currentPageId: this.currentPageId,
       selectedIds: Array.from(this.selectedIds.values()),
       pages: Array.from(this.pages.values()).map(page => page.serialized),
       assets: this.getCleanUpAssets(),

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

@@ -1,10 +1,16 @@
-import { computed, makeObservable, transaction } from 'mobx'
+import { action, computed, makeObservable, observable, transaction } from 'mobx'
 import type { TLEventMap } from '../types'
-import { deepEqual } from '../utils'
+import { deepCopy, deepEqual, omit } from '../utils'
 import type { TLShape } from './shapes'
 import type { TLApp, TLDocumentModel } from './TLApp'
 import { TLPage } from './TLPage'
 
+const shouldPersist = (a: TLDocumentModel, b: TLDocumentModel) => {
+  const page0 = omit(a.pages[0], 'nonce')
+  const page1 = omit(b.pages[0], 'nonce')
+  return !deepEqual(page0, page1)
+}
+
 export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEventMap> {
   constructor(app: TLApp<S, K>) {
     this.app = app
@@ -12,8 +18,8 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
   }
 
   app: TLApp<S, K>
-  stack: TLDocumentModel[] = []
-  pointer = 0
+  @observable stack: TLDocumentModel[] = []
+  @observable pointer = 0
   isPaused = true
 
   get creating() {
@@ -40,7 +46,7 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
     this.isPaused = false
   }
 
-  reset = () => {
+  @action reset = () => {
     this.stack = [this.app.serialized]
     this.pointer = 0
     this.resume()
@@ -48,13 +54,15 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
     this.app.notify('persist', null)
   }
 
-  persist = (replace = false) => {
+  @action persist = (replace = false) => {
     if (this.isPaused || this.creating) return
 
     const { serialized } = this.app
 
     // Do not persist if the serialized state is the same as the last one
-    if (deepEqual(this.stack[this.pointer], serialized)) return
+    if (!shouldPersist(this.stack[this.pointer], serialized)) {
+      return
+    }
 
     if (replace) {
       this.stack[this.pointer] = serialized
@@ -62,37 +70,38 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
       if (this.pointer < this.stack.length) {
         this.stack = this.stack.slice(0, this.pointer + 1)
       }
-
       this.stack.push(serialized)
       this.pointer = this.stack.length - 1
     }
 
+    this.app.pages.forEach(page => page.bump()) // Is it ok here?
     this.app.notify('persist', null)
   }
 
-  undo = () => {
+  @action setPointer = (pointer: number) => {
+    this.pointer = pointer
+    const snapshot = this.stack[this.pointer]
+    this.deserialize(snapshot)
+    this.app.notify('persist', null)
+  }
+
+  @action undo = () => {
     if (this.isPaused) return
     if (this.app.selectedTool.currentState.id !== 'idle') return
     if (this.canUndo) {
-      this.pointer--
-      const snapshot = this.stack[this.pointer]
-      this.deserialize(snapshot)
-      this.app.notify('persist', null)
+      this.setPointer(this.pointer - 1)
     }
   }
 
-  redo = () => {
+  @action redo = () => {
     if (this.isPaused) return
     if (this.app.selectedTool.currentState.id !== 'idle') return
     if (this.canRedo) {
-      this.pointer++
-      const snapshot = this.stack[this.pointer]
-      this.deserialize(snapshot)
-      this.app.notify('persist', null)
+      this.setPointer(this.pointer + 1)
     }
   }
 
-  deserialize = (snapshot: TLDocumentModel) => {
+  @action deserialize = (snapshot: TLDocumentModel) => {
     transaction(() => {
       const { pages } = snapshot
       const wasPaused = this.isPaused
@@ -127,11 +136,6 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
               }
             }
 
-            // Do not remove any currently selected shapes
-            newSelectedIds.forEach(id => {
-              shapesMap.delete(id)
-            })
-
             // Do not remove shapes if currently state is creating or editing
             // Any shapes remaining in the shapes map need to be removed
             if (shapesMap.size > 0 && !this.app.selectedTool.isInAny('creating', 'editingShape')) {
@@ -142,13 +146,15 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
             // Remove the page from the map
             pagesMap.delete(serializedPage.id)
             page.updateBindings(serializedPage.bindings)
+            page.nonce = serializedPage.nonce ?? 0
           } else {
             // Create the page
-            const { id, name, shapes, bindings } = serializedPage
+            const { id, name, shapes, bindings, nonce } = serializedPage
             pagesToAdd.push(
               new TLPage(this.app, {
                 id,
                 name,
+                nonce,
                 bindings,
                 shapes: shapes.map(serializedShape => {
                   const ShapeClass = this.app.getShapeClass(serializedShape.type)

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

@@ -21,15 +21,17 @@ export interface TLPageProps<S> {
   name: string
   shapes: S[]
   bindings: Record<string, TLBinding>
+  nonce?: number
 }
 
 export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventMap> {
   constructor(app: TLApp<S, E>, props = {} as TLPageProps<S>) {
-    const { id, name, shapes = [], bindings = {} } = props
+    const { id, name, shapes = [], bindings = {}, nonce } = props
     this.id = id
     this.name = name
     this.bindings = Object.assign({}, bindings) // make sure it is type of object
     this.app = app
+    this.nonce = nonce || 0
     this.addShapes(...shapes)
     makeObservable(this)
 
@@ -73,9 +75,9 @@ export class TLPage<S extends TLShape = TLShape, E extends TLEventMap = TLEventM
     }
   }
 
-  nonce = 0
+  @observable nonce = 0
 
-  private bump = () => {
+  @action bump = () => {
     this.nonce++
   }
 

tldraw/packages/core/src/utils/index.ts

@@ -62,6 +62,11 @@ export function dedupe<T>(arr: T[]) {
   return [...new Set(arr)]
 }
 
+export function omit<T, K extends keyof T>(obj: T, key: K): Omit<T, K> {
+  const { [key]: _, ...rest } = obj
+  return rest
+}
+
 /** Linear interpolate between two values. */
 export function lerp(a: number, b: number, t: number) {
   return a + (b - a) * t

tldraw/packages/react/package.json

@@ -35,7 +35,7 @@
     "@tldraw/core": "2.0.0-alpha.1",
     "@tldraw/intersect": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",
-    "@use-gesture/react": "^10.2.15",
+    "@use-gesture/react": "^10.2.19",
     "hotkeys-js": "^3.9.5",
     "is-plain-object": "^5.0.0",
     "mobx": "^6.6.0",

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

@@ -23,7 +23,7 @@ export const AppCanvas = observer(function InnerApp<S extends TLReactShape>(
       selectionBounds={app.selectionBounds}
       selectedShapes={app.selectedShapesArray}
       erasingShapes={app.erasingShapesArray}
-      shapes={app.shapesInViewport}
+      shapes={app.shapes} // TODO: use shapes in viewport later?
       assets={app.assets}
       showGrid={app.settings.showGrid}
       showSelection={app.showSelection}