From c20f8ffbb38f39de3a8fbe7e6a2eda6381efa086 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Sat, 17 Aug 2024 11:12:13 +0800 Subject: [PATCH] fix: disable property drag&&drop when editing or selecting fixes https://github.com/logseq/db-test/issues/18 --- src/main/frontend/components/dnd.cljs | 73 ++++++++++++---------- src/main/frontend/components/property.cljs | 28 +++++---- 2 files changed, 56 insertions(+), 45 deletions(-) diff --git a/src/main/frontend/components/dnd.cljs b/src/main/frontend/components/dnd.cljs index 95e703011..3361412ee 100644 --- a/src/main/frontend/components/dnd.cljs +++ b/src/main/frontend/components/dnd.cljs @@ -4,7 +4,8 @@ ["@dnd-kit/sortable" :refer [useSortable arrayMove SortableContext verticalListSortingStrategy horizontalListSortingStrategy] :as sortable] ["@dnd-kit/utilities" :refer [CSS]] ["@dnd-kit/core" :refer [DndContext closestCenter PointerSensor useSensor useSensors]] - [frontend.rum :as r])) + [frontend.rum :as r] + [frontend.state :as state])) (def dnd-context (r/adapt-class DndContext)) (def sortable-context (r/adapt-class SortableContext)) @@ -32,7 +33,7 @@ children])) (rum/defc items - [col {:keys [on-drag-end parent-node vertical?] + [col {:keys [on-drag-end parent-node vertical? sort-by-inner-element?] :or {vertical? true}}] (let [ids (mapv :id col) items' (bean/->js ids) @@ -44,34 +45,35 @@ dnd-opts {:sensors sensors :collisionDetection closestCenter :onDragStart (fn [event] - (set-active-id (.-id (.-active event)))) + (when-not (state/editing?) + (set-active-id (.-id (.-active event))))) :onDragEnd (fn [event] (let [active-id (.-id (.-active event)) over-id (.-id (.-over event))] - (js/console.dir event) - (when-not (= active-id over-id) - (let [old-index (.indexOf ids active-id) - new-index (.indexOf ids over-id) - new-items (arrayMove items old-index new-index)] - (when (fn? on-drag-end) - (let [new-values (->> (map (fn [id] - (let [item (id->item id)] - (if (map? item) (:value item) item))) - new-items) - (remove nil?) - vec)] - (if (not= (count new-values) (count ids)) - (do - (js/console.error "Dnd length not matched: ") - {:old-items items - :new-items new-items}) - (do - (set-items new-items) - (on-drag-end new-values {:active-id active-id - :over-id over-id - :direction (if (> new-index old-index) - :down - :up)}))))))) + (when active-id + (when-not (= active-id over-id) + (let [old-index (.indexOf ids active-id) + new-index (.indexOf ids over-id) + new-items (arrayMove items old-index new-index)] + (when (fn? on-drag-end) + (let [new-values (->> (map (fn [id] + (let [item (id->item id)] + (if (map? item) (:value item) item))) + new-items) + (remove nil?) + vec)] + (if (not= (count new-values) (count ids)) + (do + (js/console.error "Dnd length not matched: ") + {:old-items items + :new-items new-items}) + (do + (set-items new-items) + (on-drag-end new-values {:active-id active-id + :over-id over-id + :direction (if (> new-index old-index) + :down + :up)})))))))) (set-active-id nil)))} sortable-opts {:items items :strategy (if vertical? @@ -80,13 +82,16 @@ children (for [item col] (let [id (str (:id item)) prop (merge - (:prop item) - {:key id :id id})] - (rum/with-key - (if (:disabled? item) - (non-sortable-item prop (:content item)) - (sortable-item prop (:content item))) - id))) + (:prop item) + {:key id :id id})] + (cond + sort-by-inner-element? + [:div (:content item)] + + (:disabled? item) + (rum/with-key (non-sortable-item prop (:content item)) id) + :else + (rum/with-key (sortable-item prop (:content item)) id)))) children' (if parent-node [parent-node children] children)] diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 0e0526c30..df0926535 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -710,7 +710,7 @@ (rum/defc property-cp < rum/reactive db-mixins/query - [block k v {:keys [inline-text page-cp] :as opts}] + [block k v {:keys [inline-text page-cp sortable-opts] :as opts}] (when (keyword? k) (when-let [property (db/sub-block (:db/id (db/entity k)))] (let [type (get-in property [:block/schema :type] :default) @@ -723,17 +723,20 @@ (:block/page (first v)))) (contains? #{:default} type)) date? (= type :date) - checkbox? (= type :checkbox)] + checkbox? (= type :checkbox) + property-key-cp [:div.property-key.col-span-2 + (property-key block property (assoc (select-keys opts [:class-schema?]) + :block? block? + :inline-text inline-text + :page-cp page-cp))]] [:div {:class (cond (or date? checkbox?) "property-pair items-center" :else "property-pair items-start")} - [:div.property-key.col-span-2 - (property-key block property (assoc (select-keys opts [:class-schema?]) - :block? block? - :inline-text inline-text - :page-cp page-cp))] + (if (seq sortable-opts) + (dnd/sortable-item sortable-opts property-key-cp) + property-key-cp) [:div.property-value-container.col-span-3.flex.flex-row.gap-1.items-center (when-not block? [:div.opacity-30 {:style {:margin-left 5}} [:span.bullet-container.cursor [:span.bullet]]]) @@ -764,11 +767,14 @@ m (zipmap (map first properties) (map second properties)) properties (mapv (fn [k] [k (get m k)]) properties-order) choices (map (fn [[k v]] - {:id (subs (str k) 1) - :value k - :content (property-cp block k v opts)}) properties)] + (let [id (subs (str k) 1) + opts (assoc opts :sortable-opts {:id id})] + {:id id + :value k + :content (property-cp block k v opts)})) properties)] (dnd/items choices - {:on-drag-end (fn [properties-order {:keys [active-id over-id direction]}] + {:sort-by-inner-element? true + :on-drag-end (fn [properties-order {:keys [active-id over-id direction]}] (let [move-down? (= direction :down) over (db/entity (keyword over-id)) active (db/entity (keyword active-id))