瀏覽代碼

fix: multiple same nodes in the page graph

Tienson Qin 4 年之前
父節點
當前提交
55b68cbc51

+ 1 - 0
externs.js

@@ -108,6 +108,7 @@ dummy.createGraphWithGraph = function() {};
 dummy.resetView = function() {};
 dummy.dropNode = function() {};
 dummy.dropEdge = function() {};
+dummy.unhoverNode = function() {};
 
 /**
  * @typedef {{

+ 13 - 9
src/main/frontend/components/page.cljs

@@ -647,6 +647,18 @@
         reset? (rum/react *graph-reset?)]
     (global-graph-inner graph settings theme)))
 
+(rum/defc page-graph-inner < rum/static
+  [graph dark?]
+  [:div.sidebar-item.flex-col
+   (graph/graph-2d {:nodes (:nodes graph)
+                    :links (:links graph)
+                    :width 600
+                    :height 600
+                    :dark? dark?
+                    :register-handlers-fn
+                    (fn [graph]
+                      (graph-register-handlers graph (atom nil) (atom nil) dark?))})])
+
 (rum/defc page-graph < db-mixins/query rum/reactive
   []
   (let [page (or
@@ -659,15 +671,7 @@
                 (graph-handler/build-block-graph (uuid page) theme)
                 (graph-handler/build-page-graph page theme))]
     (when (seq (:nodes graph))
-      [:div.sidebar-item.flex-col
-       (graph/graph-2d {:nodes (:nodes graph)
-                        :links (:links graph)
-                        :width 600
-                        :height 600
-                        :dark? dark?
-                        :register-handlers-fn
-                        (fn [graph]
-                          (graph-register-handlers graph (atom nil) (atom nil) dark?))})])))
+      (page-graph-inner graph dark?))))
 
 (rum/defc all-pages < rum/reactive
   ;; {:did-mount (fn [state]

+ 3 - 1
src/main/frontend/extensions/graph.cljs

@@ -61,8 +61,10 @@
       (highlight-edges! graph node dark?))
     (when-not drag?
       (let [page-name (string/lower-case node)]
+        (.unhoverNode ^js graph node)
         (route-handler/redirect! {:to :page
-                                  :path-params {:name page-name}})))))
+                                  :path-params {:name page-name}})
+        ))))
 
 (defn reset-graph!
   [^js graph]

+ 45 - 40
src/main/frontend/extensions/graph/pixi.cljs

@@ -83,47 +83,52 @@
         (.stop))))
 
 (defonce *graph-instance (atom nil))
+
+(defn- clear-nodes!
+  [graph]
+  (.forEachNode graph (fn [node]
+                        (.dropNode graph node))))
+
 (defn render!
   [state]
   (try
-    (let [old-instance @*graph-instance
-          {:keys [graph pixi]} old-instance
-          _ (when (and graph pixi)
-            (.forEachNode graph (fn [node]
-                                  (.dropNode graph node))))]
-      (let [{:keys [nodes links style hover-style height register-handlers-fn dark?]} (first (:rum/args state))
-            style (or style (default-style dark?))
-            hover-style (or hover-style (default-hover-style dark?))
-            graph (or graph (Graph.))
-            nodes-set (set (map :id nodes))
-            links (->> (filter (fn [link]
-                                 (and (nodes-set (:source link)) (nodes-set (:target link)))) links)
-                       (distinct))
-            nodes (remove nil? nodes)
-            links (remove (fn [{:keys [source target]}] (or (nil? source) (nil? target))) links)
-            nodes-js (bean/->js nodes)
-            links-js (bean/->js links)]
-        (layout! nodes-js links-js)
-        (doseq [node nodes-js]
-          (.addNode graph (.-id node) node))
-        (doseq [link links-js]
-          (let [source (.-id (.-source link))
-                target (.-id (.-target link))]
-            (.addEdge graph source target link)))
-        (if-let [{:keys [pixi]} @*graph-instance]
-          (.resetView pixi)
-          (when-let [container-ref (:ref state)]
-            (let [pixi-graph (new (.-PixiGraph Pixi-Graph)
-                                  (bean/->js
-                                   {:container @container-ref
-                                    :graph graph
-                                    :style style
-                                    :hoverStyle hover-style
-                                    :height height}))]
-              (reset! *graph-instance {:graph graph
-                                       :pixi pixi-graph})
-              (when register-handlers-fn
-                (register-handlers-fn pixi-graph)))))))
-    (catch js/Error e
-      (js/console.error e)))
+     (let [old-instance @*graph-instance
+           {:keys [graph pixi]} old-instance]
+       (when (and graph pixi)
+         (clear-nodes! graph))
+       (let [{:keys [nodes links style hover-style height register-handlers-fn dark?]} (first (:rum/args state))
+             style (or style (default-style dark?))
+             hover-style (or hover-style (default-hover-style dark?))
+             graph (or graph (Graph.))
+             nodes-set (set (map :id nodes))
+             links (->> (filter (fn [link]
+                                  (and (nodes-set (:source link)) (nodes-set (:target link)))) links)
+                        (distinct))
+             nodes (remove nil? nodes)
+             links (remove (fn [{:keys [source target]}] (or (nil? source) (nil? target))) links)
+             nodes-js (bean/->js nodes)
+             links-js (bean/->js links)]
+         (layout! nodes-js links-js)
+         (doseq [node nodes-js]
+           (.addNode graph (.-id node) node))
+         (doseq [link links-js]
+           (let [source (.-id (.-source link))
+                 target (.-id (.-target link))]
+             (.addEdge graph source target link)))
+         (if-let [{:keys [pixi]} @*graph-instance]
+           (.resetView pixi)
+           (when-let [container-ref (:ref state)]
+             (let [pixi-graph (new (.-PixiGraph Pixi-Graph)
+                                   (bean/->js
+                                    {:container @container-ref
+                                     :graph graph
+                                     :style style
+                                     :hoverStyle hover-style
+                                     :height height}))]
+               (reset! *graph-instance {:graph graph
+                                        :pixi pixi-graph})
+               (when register-handlers-fn
+                 (register-handlers-fn pixi-graph)))))))
+     (catch js/Error e
+       (js/console.error e)))
   state)