From 30b254ab472f04d819900e55f78a8bf0a24ecc67 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Sat, 23 Jul 2022 20:49:52 +0800 Subject: [PATCH] block shape dnd --- src/main/frontend/components/block.cljs | 28 +++++------ src/main/frontend/extensions/tldraw.cljs | 21 +++++---- src/main/frontend/handler/whiteboard.cljs | 46 ++++++++++++++----- src/main/frontend/state.cljs | 6 --- .../apps/tldraw-logseq/src/hooks/usePaste.ts | 4 +- 5 files changed, 65 insertions(+), 40 deletions(-) diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index 568ca57d2..35ebf7443 100644 --- a/src/main/frontend/components/block.cljs +++ b/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?] diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs index 7ab35063b..cb30fb7ac 100644 --- a/src/main/frontend/extensions/tldraw.cljs +++ b/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})]))) + diff --git a/src/main/frontend/handler/whiteboard.cljs b/src/main/frontend/handler/whiteboard.cljs index e47d82eca..19c193146 100644 --- a/src/main/frontend/handler/whiteboard.cljs +++ b/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)))) diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index 7f99bc227..be4df6174 100644 --- a/src/main/frontend/state.cljs +++ b/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) diff --git a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts b/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts index a47c76749..b330fe998 100644 --- a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts +++ b/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() {