diff --git a/web/src/main/frontend/components/draw.cljs b/web/src/main/frontend/components/draw.cljs new file mode 100644 index 000000000..a5a154648 --- /dev/null +++ b/web/src/main/frontend/components/draw.cljs @@ -0,0 +1,14 @@ +(ns frontend.components.draw + (:require [rum.core :as rum] + [goog.object :as gobj])) + +(rum/defc draw + [] + [:div#draw.relative + [:iframe {:title "Excalidraw" + :src "https://excalidraw.com"}] + [:div.absolute.bottom-15.left-2.hidden.md:block + [:a {:on-click (fn [] (.back (gobj/get js/window "history")))} + [:img.h-8.w-auto + {:alt "Logseq" + :src "/static/img/logo.png"}]]]]) diff --git a/web/src/main/frontend/components/editor.cljs b/web/src/main/frontend/components/editor.cljs index 455100af9..5b2ade19d 100644 --- a/web/src/main/frontend/components/editor.cljs +++ b/web/src/main/frontend/components/editor.cljs @@ -61,6 +61,7 @@ file-name) format {:last-pattern (if drop? "" "/")}) + (reset! *image-uploading-process 0)) (fn [e] (let [process (* (/ (gobj/get e "loaded") @@ -303,11 +304,11 @@ :hidden true}] (when-let [uploading? (rum/react *image-uploading?)] (let [processing (rum/react *image-uploading-process)] - (transition-cp - [:div.flex.flex-row.align-center - [:span.lds-dual-ring.mr-2] - [:span {:style {:margin-top 2}} - (util/format "Uploading %s%" (util/format "%2d" processing))]])))]) + (transition-cp + [:div.flex.flex-row.align-center.rounded-md.shadow-sm.bg-white.pl-1.pr-1 + [:span.lds-dual-ring.mr-2] + [:span {:style {:margin-top 2}} + (util/format "Uploading %s%" (util/format "%2d" processing))]])))]) (defn- clear-when-saved! [] @@ -437,20 +438,18 @@ (string/trim content)))) state) :did-mount (fn [state] - (let [[content opts id] (:rum/args state)] - (handler/restore-cursor-pos! id content (:dummy? opts))) + (let [[content {:keys [heading format dummy?]} id] (:rum/args state)] + (handler/restore-cursor-pos! id content dummy?) + (when-let [input (gdom/getElement id)] + (dnd/subscribe! + input + :upload-images + {:drop (fn [e files] + (upload-image id files format *image-uploading? true))}) + (when (and @*new-inserted-heading + (= @*new-inserted-heading (:heading/uuid heading))) + (util/move-cursor-to-end input)))) state) - :after-render (fn [state] - (let [[content {:keys [heading format]} id] (:rum/args state)] - (when-let [input (gdom/getElement id)] - (dnd/subscribe! - input - :upload-images - {:drop (fn [e files] (upload-image id files format *image-uploading? true))}) - (when (and @*new-inserted-heading - (= @*new-inserted-heading (:heading/uuid heading))) - (util/move-cursor-to-end input)))) - state) :will-unmount (fn [state] (let [[content opts id] (:rum/args state)] (when-let [input (gdom/getElement id)] diff --git a/web/src/main/frontend/components/sidebar.cljs b/web/src/main/frontend/components/sidebar.cljs index 465f5e68c..843009bf4 100644 --- a/web/src/main/frontend/components/sidebar.cljs +++ b/web/src/main/frontend/components/sidebar.cljs @@ -250,17 +250,21 @@ [:div.flex-1.px-4.flex.justify-between (search/search) [:div.ml-4.flex.items-center.md:ml-6 + [:a {:title "Draw with Excalidraw" + :href "/draw"} + (svg/excalidraw-logo)] [:div {:class (if pulling? "loader")} - [:button.p-1.m-2.text-gray-400.rounded-full.hover:bg-gray-100.focus:outline-none.focus:shadow-outline.focus:text-gray-400 - {:on-click handler/pull-current-repo} - [:svg.h-6.w-6 - {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"} - [:path - {:d - "M6 18.7V21a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7.1A7 7 0 0 0 19 12a1 1 0 1 1 2 0 9 9 0 0 1-15 6.7zM18 5.3V3a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1h-5a1 1 0 0 1 0-2h2.9A7 7 0 0 0 5 12a1 1 0 1 1-2 0 9 9 0 0 1 15-6.7z" - :stroke-width "1", - :stroke-linejoin "round", - :stroke-linecap "round"}]]]] + [:a {:title "Git pull"} + [:button.p-1.m-2.text-gray-400.rounded-full.hover:bg-gray-100.focus:outline-none.focus:shadow-outline.focus:text-gray-400 + {:on-click handler/pull-current-repo} + [:svg.h-6.w-6 + {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"} + [:path + {:d + "M6 18.7V21a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7.1A7 7 0 0 0 19 12a1 1 0 1 1 2 0 9 9 0 0 1-15 6.7zM18 5.3V3a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1h-5a1 1 0 0 1 0-2h2.9A7 7 0 0 0 5 12a1 1 0 1 1-2 0 9 9 0 0 1 15-6.7z" + :stroke-width "1", + :stroke-linejoin "round", + :stroke-linecap "round"}]]]]] (ui/dropdown-with-links (fn [{:keys [toggle-fn]}] [:button.max-w-xs.flex.items-center.text-sm.rounded-full.focus:outline-none.focus:shadow-outline diff --git a/web/src/main/frontend/components/svg.cljs b/web/src/main/frontend/components/svg.cljs index 3ae938267..de6f79ff4 100644 --- a/web/src/main/frontend/components/svg.cljs +++ b/web/src/main/frontend/components/svg.cljs @@ -107,3 +107,27 @@ "M3 15C3 14.4477 3.44772 14 4 14H16C16.5523 14 17 14.4477 17 15C17 15.5523 16.5523 16 16 16H4C3.44772 16 3 15.5523 3 15Z", :clip-rule "evenodd", :fill-rule "evenodd"}]]) + +(defn excalidraw-logo + [] + [:svg + {:preserve-aspect-ratio "xMidYMid meet", + :view-box "0 0 109.000000 269.000000", + :height 24, + :width 24, + :version "1.0"} + [:g + {:stroke "none", + :fill "currentColor", + :transform + "translate(0.000000,269.000000) scale(0.100000,-0.100000)"} + [:path + {:d + "M393 2643 c-74 -59 -188 -159 -278 -245 l-71 -67 13 -88 c7 -48 20 -142 28 -208 9 -66 18 -128 21 -137 4 -12 0 -18 -11 -18 -19 0 -20 5 32 -160 19 -63 37 -121 39 -127 2 -7 10 -10 19 -7 9 4 14 12 11 19 -3 8 2 16 10 19 11 4 10 12 -7 41 -27 45 -96 429 -100 553 -3 88 -3 89 34 139 36 49 119 123 247 217 36 27 72 57 82 67 15 18 22 13 148 -121 73 -77 154 -156 180 -176 l48 -36 -37 -78 c-20 -42 -101 -204 -181 -358 -167 -324 -133 -293 -327 -296 l-126 -1 -42 -48 c-44 -51 -50 -70 -29 -102 8 -11 14 -29 14 -40 0 -18 7 -21 47 -23 25 -1 48 -4 51 -7 3 -3 7 -65 10 -138 l4 -132 -67 -144 c-111 -240 -155 -350 -155 -386 0 -19 4 -35 8 -35 10 0 10 1 417 850 189 394 368 765 398 826 30 61 57 117 59 125 2 9 -67 78 -177 175 -99 88 -186 168 -194 177 -23 28 -57 19 -118 -30z m34 -1150 c-46 -89 -48 -90 -174 -96 -111 -6 -113 -5 -113 16 0 12 -4 28 -9 36 -6 9 -2 25 12 47 l22 34 100 0 c55 1 118 5 140 9 22 4 41 6 43 5 2 -1 -8 -24 -21 -51z m-84 -160 c-8 -21 -29 -65 -46 -98 -28 -56 -31 -58 -38 -35 -4 14 -7 55 -8 92 -1 73 -3 72 81 77 l27 1 -16 -37z"}] + [:path + {:d + "M423 2405 c-18 -13 -23 -26 -23 -59 0 -39 3 -45 30 -56 27 -11 34 -10 65 11 41 28 42 35 12 80 -26 39 -52 46 -84 24z m57 -36 c16 -28 6 -49 -24 -49 -27 0 -39 27 -24 54 12 22 35 20 48 -5z"}] + [:path + {:d + "M1050 2180 c0 -5 -6 -10 -13 -10 -6 0 -23 -28 -36 -62 -40 -104 -440 -895 -441 -870 0 13 -6 22 -16 22 -14 0 -16 -8 -10 -47 6 -45 2 -55 -140 -331 -80 -157 -166 -321 -191 -365 -26 -46 -46 -96 -48 -117 -3 -36 1 -41 88 -116 50 -44 114 -99 142 -124 126 -115 185 -161 201 -158 24 4 395 393 396 415 0 10 -18 162 -40 338 -38 300 -74 651 -70 685 3 21 -12 127 -23 173 -9 36 -5 51 67 215 42 97 97 216 121 264 23 48 43 90 43 93 0 3 -7 5 -15 5 -8 0 -15 -4 -15 -10z m-230 -747 c11 -70 33 -238 49 -373 31 -248 67 -523 77 -593 6 -35 2 -42 -63 -114 -113 -127 -233 -252 -274 -284 l-38 -30 -195 182 c-180 166 -195 183 -184 203 6 11 57 104 113 206 56 102 130 238 164 302 35 65 67 121 73 124 7 4 9 -97 7 -312 -4 -321 -3 -322 29 -315 4 0 7 162 7 359 l0 358 105 210 c58 116 106 209 108 208 2 -1 12 -60 22 -131z"}]]] +) diff --git a/web/src/main/frontend/config.cljs b/web/src/main/frontend/config.cljs index 0d611a4e8..d3692398c 100644 --- a/web/src/main/frontend/config.cljs +++ b/web/src/main/frontend/config.cljs @@ -39,8 +39,8 @@ (set))] (set/union config-formats - #{:json :org :md :xml :yml :dat :asciidoc :rst :txt :markdown :adoc :html :js :ts :clj :ml :rb :ex :erl :java :php :c} - ))) + #{:json :org :md :xml :yml :dat :asciidoc :rst :txt :markdown :adoc :html :js :ts :clj :ml :rb :ex :erl :java :php :c + :excalidraw}))) (defn img-formats [] diff --git a/web/src/main/frontend/page.cljs b/web/src/main/frontend/page.cljs index 73db92e90..9b4bd33f4 100644 --- a/web/src/main/frontend/page.cljs +++ b/web/src/main/frontend/page.cljs @@ -11,26 +11,29 @@ (rum/defc current-page < rum/reactive [] (when-let [route-match (state/sub :route-match)] - (if-let [view (:view (:data route-match))] - (sidebar/sidebar - route-match - (view route-match)) + (let [route-name (get-in route-match [:data :name])] + (if-let [view (:view (:data route-match))] + (if (= :draw route-name) + (view route-match) + (sidebar/sidebar + route-match + (view route-match))) - ;; FIXME: disable for now - ;; (let [route-name (get-in route-match [:data :name]) - ;; no-animate? (contains? #{:repos :repo-add :file} - ;; route-name)] - ;; (when-let [view (:view (:data route-match))] - ;; (sidebar/sidebar - ;; route-match - ;; (if no-animate? - ;; (route-view view route-match) - ;; (ui/transition-group - ;; {:class-name "router-wrapper"} - ;; (ui/css-transition - ;; {:class-names "pageChange" - ;; :key route-name - ;; :timeout {:enter 300 - ;; :exit 200}} - ;; (route-view view route-match))))))) - [:div "404 Page"]))) + ;; FIXME: disable for now + ;; (let [route-name (get-in route-match [:data :name]) + ;; no-animate? (contains? #{:repos :repo-add :file} + ;; route-name)] + ;; (when-let [view (:view (:data route-match))] + ;; (sidebar/sidebar + ;; route-match + ;; (if no-animate? + ;; (route-view view route-match) + ;; (ui/transition-group + ;; {:class-name "router-wrapper"} + ;; (ui/css-transition + ;; {:class-names "pageChange" + ;; :key route-name + ;; :timeout {:enter 300 + ;; :exit 200}} + ;; (route-view view route-match))))))) + [:div "404 Page"])))) diff --git a/web/src/main/frontend/routes.cljs b/web/src/main/frontend/routes.cljs index 9a8fc0def..85ebc5481 100644 --- a/web/src/main/frontend/routes.cljs +++ b/web/src/main/frontend/routes.cljs @@ -5,6 +5,7 @@ [frontend.components.file :as file] [frontend.components.page :as page] [frontend.components.diff :as diff] + [frontend.components.draw :as draw] [frontend.components.agenda :as agenda])) (def routes @@ -42,4 +43,8 @@ ["/diff" {:name :diff - :view diff/diff}]]) + :view diff/diff}] + + ["/draw" + {:name :draw + :view draw/draw}]])