block shape dnd

src/main/frontend/components/block.cljs

@@ -97,6 +97,10 @@
 ;; TODO:
 ;; add `key`
 
+(defn get-dragging-block
+  []
+  @*dragging-block)
+
 (defn- remove-nils
   [col]
   (remove nil? col))
@@ -2332,6 +2336,16 @@
   [*move-to]
   (reset! *move-to nil))
 
+(defn block-drag-end
+  ([_event]
+   (block-drag-end _event *move-to))
+  ([_event *move-to]
+   (reset! *dragging? false)
+   (reset! *dragging-block nil)
+   (reset! *drag-to-block nil)
+   (reset! *move-to nil)
+   (editor-handler/unhighlight-blocks!)))
+
 (defn- block-drop
   [event uuid target-block *move-to]
   (util/stop event)
@@ -2341,19 +2355,7 @@
           selected (db/pull-many (state/get-current-repo) '[*] lookup-refs)
           blocks (if (seq selected) selected [@*dragging-block])]
       (dnd/move-blocks event blocks target-block @*move-to)))
-  (reset! *dragging? false)
-  (reset! *dragging-block nil)
-  (reset! *drag-to-block nil)
-  (reset! *move-to nil)
-  (editor-handler/unhighlight-blocks!))
-
-(defn- block-drag-end
-  [_event *move-to]
-  (reset! *dragging? false)
-  (reset! *dragging-block nil)
-  (reset! *drag-to-block nil)
-  (reset! *move-to nil)
-  (editor-handler/unhighlight-blocks!))
+  (block-drag-end event *move-to))
 
 (defn- block-mouse-over
   [e *control-show? block-id doc-mode?]

src/main/frontend/extensions/tldraw.cljs

@@ -1,9 +1,10 @@
 (ns frontend.extensions.tldraw
   (:require ["/tldraw-logseq" :as TldrawLogseq]
-            [frontend.components.page :as page]
             [frontend.components.block :as block]
+            [frontend.components.page :as page]
             [frontend.handler.whiteboard :refer [page-name->tldr
-                                                 transact-tldr!]]
+                                                 transact-tldr!
+                                                 add-new-block-shape!]]
             [frontend.rum :as r]
             [frontend.search :as search]
             [frontend.state :as state]
@@ -24,6 +25,13 @@
   [props]
   (block/breadcrumb {} (state/get-current-repo) (uuid (gobj/get props "blockId")) nil))
 
+(defn create-block-shape-by-id [e]
+  (when-let [block (block/get-dragging-block)]
+    (let [uuid (:block/uuid block)
+          client-x (gobj/get e "clientX")
+          client-y (gobj/get e "clientY")]
+      (add-new-block-shape! uuid client-x client-y))))
+
 (rum/defcs tldraw-app < rum/reactive
   (rum/local false ::view-mode?)
   [state name block-id]
@@ -32,6 +40,7 @@
       [:div.draw.tldraw.relative.w-full.h-full
        {:style {:overscroll-behavior "none"}
         :on-blur #(state/set-block-component-editing-mode! false)
+        :on-drop create-block-shape-by-id
         ;; wheel -> overscroll may cause browser navigation
         :on-wheel util/stop-propagation}
 
@@ -40,9 +49,5 @@
                 :onPersist (fn [app]
                              (let [document (gobj/get app "serialized")]
                                (transact-tldr! name document)))
-                :model data
-                :onMount (fn [app]
-                           (state/set-state! [:ui/whiteboards (::id state)] app)
-                           (gobj/set app "pubEvent"
-                                     (fn [type & args]
-                                       (state/pub-event! (cons (keyword type) args)))))})])))
+                :model data})])))
+

src/main/frontend/handler/whiteboard.cljs

@@ -23,9 +23,17 @@
   []
   (= (state/get-current-route) :whiteboard))
 
+(defn get-tldr-app
+  []
+  ^js js/tln)
+
+(defn get-tldr-api
+  []
+  ^js js/tln.api)
+
 (defn create-page!
   [page-title]
-  (when-let [app ^js (state/get-current-whiteboard)]
+  (when-let [app (get-tldr-app)]
     (when-not (string/blank? page-title)
       (.createShapes app (clj->js
                           [{:id (str "logseq-portal-" page-title)
@@ -102,13 +110,29 @@
        :assets #js []})
 
 (defn create-new-whiteboard-page!
-  ([name]
-   (let [uuid (or (parse-uuid name) (d/squuid))]
-     (transact-tldr! name (get-default-tldr (str uuid)))
-     (let [entity (get-whiteboard-entity name)
-           tx (assoc (select-keys entity [:db/id])
-                     :block/uuid uuid)]
-       (db-utils/transact! [tx])
-       (let [page-entity (get-whiteboard-entity name)]
-         (when (and page-entity (nil? (:block/file page-entity)))
-           (outliner-file/sync-to-file page-entity)))))))
+  [name]
+  (let [uuid (or (parse-uuid name) (d/squuid))]
+    (transact-tldr! name (get-default-tldr (str uuid)))
+    (let [entity (get-whiteboard-entity name)
+          tx (assoc (select-keys entity [:db/id])
+                    :block/uuid uuid)]
+      (db-utils/transact! [tx])
+      (let [page-entity (get-whiteboard-entity name)]
+        (when (and page-entity (nil? (:block/file page-entity)))
+          (outliner-file/sync-to-file page-entity))))))
+
+(defn ->logseq-portal-shape
+  [block-id point]
+  {:blockType "B"
+   :id (d/squuid)
+   :pageId (str block-id)
+   :point point
+   :size [600, 400]
+   :type "logseq-portal"})
+
+(defn add-new-block-shape!
+  [block-id client-x client-y]
+  (let [api (get-tldr-api)
+        point (js->clj (.. (get-tldr-app) -viewport (getPagePoint #js[client-x client-y])))
+        shape (->logseq-portal-shape block-id point)]
+    (.createShapes api (clj->js shape))))

src/main/frontend/state.cljs

@@ -228,7 +228,6 @@
 
      :encryption/graph-parsing?             false
 
-     :ui/whiteboards                        {}
      })))
 
 ;; block uuid -> {content(String) -> ast}
@@ -1697,11 +1696,6 @@
   (:feature/enable-encryption?
    (get (sub-config) repo)))
 
-;; FIXME:
-(defn get-current-whiteboard
-  []
-  (second (first (:ui/whiteboards @state))))
-
 ;; (defn get-tldraw-api
 ;;   []
 ;;   (some-> (get-current-whiteboard)

tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -6,11 +6,11 @@ import {
   TLBinding,
   TLShapeModel,
   uniqueId,
-  validUUID,
+  validUUID
 } from '@tldraw/core'
-import { parse as uuidParse, NIL as NIL_UUID } from 'uuid'
 import type { TLReactCallbacks } from '@tldraw/react'
 import * as React from 'react'
+import { NIL as NIL_UUID } from 'uuid'
 import { LogseqPortalShape, Shape } from '~lib'
 
 export function usePaste() {