First pass at live mermaid cmd

Author: cldwalker

mermaid.behaviors

@@ -1,4 +1,5 @@
 [
- [:app :lt.objs.plugins/load-js "mermaid_compiled.js"]
- [:myplugin.hello :lt.plugins.mermaid/on-close-destroy]
+ [:app :lt.objs.plugins/load-js ["mermaid_compiled.js"]]
+ [:app :lt.objs.plugins/load-css "mermaid.css"]
+ [:mermaid.hello :lt.plugins.mermaid/on-close-destroy]
  ]

mermaid.css

@@ -0,0 +1,12 @@
+.mermaid g.node {
+  color: black;
+}
+
+.mermaid path.path {
+  stroke: darkgrey !important;
+  stroke-width: 2.5px !important;
+}
+
+.mermaid marker path {
+  fill: darkgrey !important;
+}

mermaid.full.min.js

@@ -1,31 +1,62 @@
 (ns lt.plugins.mermaid
   (:require [lt.object :as object]
             [lt.objs.tabs :as tabs]
-            [lt.objs.command :as cmd])
+            [lt.objs.command :as cmd]
+            [lt.objs.editor :as editor]
+            [lt.objs.editor.pool :as pool]
+            [lt.util.load :as load]
+            [lt.objs.plugins :as plugins]
+            [crate.binding :refer [bound]])
   (:require-macros [lt.macros :refer [defui behavior]]))
 
-(defui hello-panel [this]
-  [:h1 "Hello from mermaid"])
+(defui chart-panel [this]
+  [:div.mermaid (bound this :user-input)])
 
-(object/object* ::mermaid.hello
-                :tags [:mermaid.hello]
+(object/object* ::mermaid.chart
                 :behaviors [::on-close-destroy]
                 :name "mermaid"
-                :init (fn [this]
-                        (hello-panel this)))
+                :user-input ""
+                :init (fn [this filename]
+                        (object/update! this [:name] (constantly (str filename " - Live Mermaid")))
+                        (chart-panel this)))
 
 (behavior ::on-close-destroy
           :triggers #{:close}
           :desc "mermaid: Close tab and tabset as well if last tab"
           :reaction (fn [this]
-                      (when-let [ts (:lt.objs.tabs/tabset @this)]
-                        (when (= (count (:objs @ts)) 1)
-                          (tabs/rem-tabset ts)))
                       (object/raise this :destroy)))
 
-(def hello (object/create ::mermaid.hello))
+(behavior ::read-editor
+          :triggers [:change ::read-editor]
+          :debounce 350
+          :desc "Mermaid: Read the content inside an editor"
+          :reaction (fn [ed]
+                      (object/assoc-in! (:mermaid @ed) [:user-input] (editor/->val ed))
+                      (try
+                        (js/mermaid.init)
+                        (catch :default e
+                          (println (.-message e))))))
 
-(cmd/command {:command ::say-hello
-              :desc "mermaid: Say Hello"
+(defn ensure-and-focus-second-tabset []
+  (when (< (-> @tabs/multi :tabsets count) 2)
+      (cmd/exec! :tabset.new))
+  (cmd/exec! :tabset.next))
+
+(cmd/command {:command :mermaid.watch-editor
+              :desc "Mermaid: Watch this editor for changes"
               :exec (fn []
-                      (tabs/add-or-focus! hello))})
+                      ;; Load hefty dependency dynamically
+                      (when-not js/window.mermaid
+                        (load/js (str plugins/user-plugins-dir "/mermaid/mermaid.full.min.js") true))
+                      (let [ed (pool/last-active)
+                            filename (get-in @ed [:info :name])
+                            mermaid (object/create ::mermaid.chart filename)]
+                        (ensure-and-focus-second-tabset)
+                        (tabs/add-or-focus! mermaid)
+                        (cmd/exec! :tabset.prev)
+                        (object/assoc-in! ed [:mermaid] mermaid)
+                        (object/add-behavior! ed ::read-editor)
+                        (object/raise ed ::read-editor)))})
+
+(comment
+  (-> js/mermaid))