fix: too many webgl contexts

externs.js

@@ -104,6 +104,10 @@ dummy.addEdge = function() {};
 dummy.source = function() {};
 dummy.target = function() {};
 dummy.PixiGraph = function() {};
+dummy.createGraphWithGraph = function() {};
+dummy.resetView = function() {};
+dummy.dropNode = function() {};
+dummy.dropEdge = function() {};
 
 /**
  * @typedef {{

package.json

@@ -83,7 +83,7 @@
         "jszip": "^3.5.0",
         "mldoc": "0.8.8",
         "path": "^0.12.7",
-        "pixi-graph-fork": "^0.1.2",
+        "pixi-graph-fork": "^0.1.3",
         "posthog-js": "^1.10.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",

src/main/frontend/extensions/graph.cljs

@@ -74,6 +74,7 @@
    :will-unmount (fn [state]
                    (when-let [graph (:graph state)]
                      (.destroy graph))
+                   (reset! pixi/*graph-instance nil)
                    state)}
   [state opts]
   [:div.graph {:style {:height "100vh"}

src/main/frontend/extensions/graph/pixi.cljs

@@ -14,10 +14,11 @@
             [clojure.set :as set]
             [cljs-bean.core :as bean]
             ["pixi-graph-fork" :as Pixi-Graph]
+            ["@pixi/utils" :as pixi-utils]
             ["graphology" :as graphology]
             ["d3-force" :refer [forceSimulation forceManyBody forceCenter forceLink forceCollide forceRadial forceX forceY SimulationLinkDatum SimulationNodeDatum] :as force]))
 
-(def graph (gobj/get graphology "Graph"))
+(def Graph (gobj/get graphology "Graph"))
 
 (defonce colors
   ["#1f77b4"
@@ -81,37 +82,48 @@
         (.tick 3)
         (.stop))))
 
+(defonce *graph-instance (atom nil))
 (defn render!
   [state]
-  (when-let [graph (:graph state)]
-    (.destroy 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 (graph.)
-        nodes-set (set (map :id nodes))
-        links (->> (filter (fn [link]
-                             (and (nodes-set (:source link)) (nodes-set (:target link)))) links)
-                   (distinct))
-        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]
-      (.addEdge graph (.-id (.-source link)) (.-id (.-target link)) link))
-
-    (if-let [container-ref (:ref state)]
-      (let [graph (new (.-PixiGraph Pixi-Graph)
-                       (bean/->js
-                        {:container @container-ref
-                         :graph graph
-                         :style style
-                         :hoverStyle hover-style
-                         :height height}))]
-        (when register-handlers-fn
-          (register-handlers-fn graph))
-
-        ;; (.addEventListener container-ref)
-        (assoc state :graph graph))
-      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)))
+  state)

yarn.lock

@@ -6775,10 +6775,10 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
-pixi-graph-fork@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pixi-graph-fork/-/pixi-graph-fork-0.1.1.tgz#d2bf6c2a4f3efb0516bd7072bf7fceddcfaf7a24"
-  integrity sha512-nP1Uc4NP9r551kxWIm6L5o57WdOUcQ91s3mUAMcWs7qbB2vsCDYnfS17uTiDYqn2w1XyvJdVrJTmpChrpEM07w==
+pixi-graph-fork@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/pixi-graph-fork/-/pixi-graph-fork-0.1.3.tgz#fc7beee363ba3ec71b35df30fce1d5b2ddf27732"
+  integrity sha512-NHmlG0FI2/xme/p9KXOPLbfrQ0UIcCq4GK36IsSYPGJznhUoJTlNbfT4ML7I3DL84vQx0TliGPAA+EmoVz6CDg==
   dependencies:
     "@pixi-essentials/cull" "^1.1.0"
     "@pixi/app" "^6.0.2"