various fixes

- remove font-scanner and simplify gh actions
- build frame css and remove hardcoded values
- enhance input font styles
- add versions and env to preload
- wip text->path for web
- always use web apis to query local fonts

Author: sprocketc

.clj-kondo/funcool/promesa/config.edn

@@ -40,15 +40,6 @@ jobs:
         with:
           cli: 1.12.0.1530
 
-      # Required for font-scanner.
-      - name: Install python setuptools
-        if: matrix.os == 'macos-latest'
-        run: brew install python-setuptools
-
-      - name: Install fontconfig
-        if: matrix.os == 'ubuntu-latest'
-        run: sudo apt -y install libfontconfig1-dev
-
       - name: Electron Builder Action
         uses: samuelmeuli/action-electron-builder@v1.6.0
         with:

.github/workflows/studio.yml

@@ -9,12 +9,14 @@
   "scripts": {
     "upgrade": "npx npm-check-updates -u -x 'codemirror'",
     "postinstall": "electron-builder install-app-deps",
-    "tailwindcss:build": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --minify",
-    "tailwindcss:watch": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --watch=always",
+    "tailwindcss-main:build": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --minify",
+    "tailwindcss-main:watch": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --watch=always",
+    "tailwindcss-frame:build": "npx @tailwindcss/cli -i ./src/renderer/frame/styles.css -o ./resources/public/css/frame.css --minify",
+    "tailwindcss-frame:watch": "npx @tailwindcss/cli -i ./src/renderer/frame/styles.css -o ./resources/public/css/frame.css --watch=always",
     "shadow:build": "npx shadow-cljs release main preload renderer bootstrap",
     "shadow:watch": "npx shadow-cljs watch main preload renderer bootstrap browser-test karma-test portfolio",
-    "dev": "npx npm-run-all --parallel tailwindcss:watch shadow:watch",
-    "build": "npx npm-run-all --parallel tailwindcss:build shadow:build",
+    "dev": "npx npm-run-all --parallel tailwindcss-main:watch tailwindcss-frame:watch shadow:watch",
+    "build": "npx npm-run-all --parallel tailwindcss-main:build tailwindcss-frame:build shadow:build",
     "portfolio": "npx shadow-cljs watch portfolio & npm run tailwindcss:watch",
     "electron": "npx electron .",
     "dist": "npx electron-builder",
@@ -100,6 +102,7 @@
     "karma-junit-reporter": "2.0.1",
     "mdn-data": "2.21.0",
     "npm-run-all": "4.1.5",
+    "opentype.js": "1.3.4",
     "paper": "0.12.18",
     "paperjs-offset": "1.0.8",
     "path": "0.12.7",
@@ -126,9 +129,7 @@
   "dependencies": {
     "electron-log": "5.4.0",
     "electron-reloader": "1.2.3",
-    "electron-window-state": "5.0.3",
-    "font-scanner": "0.2.1",
-    "opentype.js": "1.3.4"
+    "electron-window-state": "5.0.3"
   },
   "overrides": {
     "react": "19.1.0",

package-lock.json

@@ -5,7 +5,6 @@
    ["electron-log/main" :as log]
    ["electron-reloader"]
    ["electron-window-state" :as window-state-keeper]
-   ["font-scanner" :as fontManager]
    ["os" :as os]
    ["path" :as path]
    ["url" :as url]
@@ -68,8 +67,7 @@
      ["save-document" file/save!]
      ["save-document-as" file/save-as!]
      ["export" file/export!]
-     ["print" file/print!]
-     ["load-system-fonts" #(.getAvailableFonts fontManager)]]]
+     ["print" file/print!]]]
     (.handle ipcMain e #(f %2))))
 
 (defn register-window-events!

package.json

@@ -1,30 +1,20 @@
 (ns electron.preload
   "https://www.electronjs.org/docs/latest/tutorial/tutorial-preload"
   (:require
-   ["electron" :refer [contextBridge ipcRenderer]]
-   ["font-scanner" :as fontManager]
-   ["opentype.js" :as opentype]
-   ["os" :as os]))
-
-(defn text->path
-  "https://github.com/opentypejs/opentype.js#loading-a-font-synchronously-nodejs"
-  [text {:keys [font-url x y font-size]}]
-  (let [font (.loadSync opentype font-url)
-        path (.getPath font text x y font-size)]
-    (.toPathData path)))
+   ["electron" :refer [contextBridge ipcRenderer]]))
 
 (defonce api
-  {;; Strip event as it includes `sender`
+  {;; Strip event as it includes `sender`.
    ;; https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendereronchannel-listener
-   :on (fn [channel f] (.on ipcRenderer channel (fn [_e args] (f args))))
+   :on (fn [channel f] (.on ipcRenderer channel (fn [_event args] (f args))))
    :send (fn [channel args] (.send ipcRenderer channel args))
    :invoke (fn [channel args] (.invoke ipcRenderer channel args))
-   :platform (.platform os)
-   :findFont (fn [descriptor] (.findFontSync fontManager descriptor))
-   :textToPath (fn [s options] (text->path s (js->clj options :keywordize-keys true)))})
+   :platform (.-platform js/process)
+   :versions (.-versions js/process)
+   :env (.-env js/process)})
 
-(defn ^:export init! []
-  ;; Expose protected methods that allow the renderer process to use the
-  ;; ipcRenderer without exposing the entire object
-  ;; https://www.electronjs.org/docs/api/context-bridge
+(defn ^:export init!
+  "Expose protected methods that allow the renderer process to use the ipcRenderer.
+   https://www.electronjs.org/docs/api/context-bridge"
+  []
   (.exposeInMainWorld contextBridge "api" (clj->js api)))

src/electron/main.cljs

@@ -55,7 +55,7 @@
    [:document-tabs {:default [] :persist true} [:vector uuid?]]
    [:recent {:max 10 :default [] :persist true} [:vector string?]]
    [:drag-threshold {:default 1} number?]
-   [:system-fonts {:optional true} vector?]
+   [:system-fonts {:optional true} map?]
    [:notifications {:default []} [:* Notification]]
    [:debug-info {:default false} boolean?]
    [:help-bar {:default true} boolean?]
@@ -64,6 +64,8 @@
    [:lang {:optional true :persist true} Lang]
    [:system-lang {:optional true} string?]
    [:platform {:optional true} Platform]
+   [:versions {:optional true} [:maybe map?]]
+   [:env {:optional true} [:maybe map?]]
    [:user-agent {:optional true} string?]
    [:repl-mode {:default :cljs} keyword?]
    [:worker {:default {:tasks {}}} [:map [:tasks map?]]]

src/electron/preload.cljs

@@ -16,6 +16,20 @@
                                 js/window.api.platform
                                 "web"))))
 
+(rf/reg-cofx
+ ::versions
+ (fn [coeffects _]
+   (cond-> coeffects
+     js/window.api
+     (assoc :versions js/window.api.versions))))
+
+(rf/reg-cofx
+ ::env
+ (fn [coeffects _]
+   (cond-> coeffects
+     js/window.api
+     (assoc :env js/window.api.env))))
+
 (rf/reg-cofx
  ::user-agent
  (fn [coeffects _]

src/renderer/app/db.cljs

@@ -27,10 +27,14 @@
  ::initialize-db
  [(rf/inject-cofx ::app.effects/user-agent)
   (rf/inject-cofx ::app.effects/platform)
+  (rf/inject-cofx ::app.effects/versions)
+  (rf/inject-cofx ::app.effects/env)
   (rf/inject-cofx ::app.effects/system-language)]
- (fn [{:keys [user-agent platform system-language]} _]
+ (fn [{:keys [user-agent platform versions env system-language]} _]
    {:db (assoc app.db/default
                :platform platform
+               :versions (js->clj versions)
+               :env (js->clj env)
                :user-agent user-agent
                :system-lang system-language)}))
 
@@ -111,26 +115,19 @@
  (fn [db [_ k]]
    (update-in db [:panels k :visible] not)))
 
-(defn ->font-map
-  [^js/FontData font-data]
-  (into {} [[:postscriptName (.-postscriptName font-data)]
-            [:fullName (.-fullName font-data)]
-            [:family (.-family font-data)]
-            [:style (.-style font-data)]]))
-
 (rf/reg-event-fx
  ::load-system-fonts
- (fn [{:keys [db]} _]
-   (if (= (:platform db) "web")
-     {::app.effects/query-local-fonts
-      {:on-success [::set-system-fonts]
-       :on-error [::notification.events/show-exception]
-       :formatter #(mapv ->font-map %)}}
-     {::effects/ipc-invoke
-      {:channel "load-system-fonts"
-       :on-success [::set-system-fonts]
-       :on-error [::notification.events/show-exception]
-       :formatter #(js->clj % :keywordize-keys true)}})))
+ (fn [_ _]
+   {::app.effects/query-local-fonts
+    {:on-success [::set-system-fonts]
+     :on-error [::notification.events/show-exception]
+     :formatter #(reduce (fn [fonts ^js/FontData font-data]
+                           (let [family (.-family font-data)
+                                 style (.-style font-data)]
+                             (assoc-in fonts [family style]
+                                       {:postscript-name (.-postscriptName font-data)
+                                        :full-name (.-fullName font-data)})))
+                         {} %)}}))
 
 (def schema-validator
   (rf/->interceptor

src/renderer/app/effects.cljs

@@ -92,12 +92,3 @@
  ::panel-visible?
  (fn [db [_ k]]
    (-> db :panels k :visible)))
-
-(rf/reg-sub
- ::font-options
- :<- [::system-fonts]
- (fn [system-fonts _]
-   (when system-fonts
-     (->> system-fonts
-          (map :family)
-          (distinct)))))

src/renderer/app/events.cljs

@@ -66,8 +66,7 @@
 
 (defn debug-info
   []
-  (into [:div.absolute.top-1.left-2.pointer-events-none
-         {:style {:color "#555"}}]
+  (into [:div.absolute.top-1.left-2.pointer-events-none]
         (for [[s v] (debug-rows)]
           [:div.flex [:strong.mr-1 s] [:div v]])))
 
@@ -99,6 +98,7 @@
         [:div.bg-primary
          [ruler.views/ruler :vertical]])
       [:div.relative.grow.flex
+       {:data-theme "light"}
        [frame.views/root]
        (when read-only?
          [:div.absolute.inset-0.border-4.border-accent
@@ -111,7 +111,6 @@
           {:on-click #(rf/dispatch [::app.events/set-backdrop false])}])
        (when (and help-bar (seq help-message))
          [:div.flex.absolute.justify-center.w-full.p-4.pointer-events-none
-          {:data-theme "light"}
           [:div.bg-primary.rounded-full.overflow-hidden.shadow-lg
            [:div.overlay.text-color.text-xs.gap-1.flex.flex-wrap.truncate.py-2.px-4.justify-center
             {:aria-live "polite"}

src/renderer/app/subs.cljs

@@ -31,19 +31,19 @@
        (if-not suggestions
          [:div.w-full [views/loading-indicator]]
          "No local fonts found.")]
-      (for [item suggestions]
-        ^{:key item}
+      (for [[family _item] suggestions]
+        ^{:key family}
         [:> Command/CommandItem
-         {:on-select #(rf/dispatch [::element.events/set-attr :font-family item])}
+         {:on-select #(rf/dispatch [::element.events/set-attr :font-family family])}
          [:div.flex.justify-between.items-center.w-full.gap-2
-          [:div item]
+          [:div family]
           [:div.leading-none.text-muted
-           {:style {:font-family item}}
-           "Lorem ipsum"]]])]]]])
+           {:style {:font-family family}}
+           "AaBbCc 0123"]]])]]]])
 
 (defmethod attribute.hierarchy/form-element [:default :font-family]
   [_ k v attrs]
-  (let [suggestions @(rf/subscribe [::app.subs/font-options])]
+  (let [suggestions @(rf/subscribe [::app.subs/system-fonts])]
     [:div.flex.gap-px.w-full
      [attribute.views/form-input k v attrs]
      [:> Popover/Root

src/renderer/app/views.cljs

@@ -32,7 +32,8 @@
   [_ k v {:keys [disabled placeholder]}]
   [:div.flex.w-full.gap-px
    [attribute.views/form-input k v
-    {:disabled disabled
+    {:class "font-mono"
+     :disabled disabled
      :placeholder (if v placeholder "multiple")}]
    [:div.flex.gap-px
     [:button.form-control-button

src/renderer/attribute/impl/font_family.cljs

@@ -110,7 +110,7 @@
   [:div.flex.w-full.gap-px
    [form-input k v {:disabled disabled
                     :placeholder placeholder
-                    :class "w-20"}]
+                    :class "font-mono w-20"}]
    [:div.px-1.w-full.bg-primary
     [views/slider
      (merge

src/renderer/attribute/impl/length.cljs

@@ -32,7 +32,6 @@
    [renderer.ruler.subs]
    [renderer.snap.events]
    [renderer.snap.subs]
-   [renderer.theme.db :as theme.db]
    [renderer.theme.effects]
    [renderer.theme.events :as theme.events]
    [renderer.theme.subs]
@@ -85,7 +84,7 @@
   (print "Type (help) to see a list of commands."))
 
 (defn ^:export init! []
-  (js/console.log (str "%c" easter-egg) (str "color: " theme.db/accent))
+  (js/console.log (str "%c" easter-egg) (str "color: " "pink"))
 
   ;; https://code.thheller.com/blog/shadow-cljs/2017/10/14/bootstrap-support.html
   (bootstrap/init replumb.repl/st {:path "js/bootstrap"

src/renderer/attribute/views.cljs

@@ -35,7 +35,7 @@
        {:on-pointer-up pointer-handler
         :on-pointer-down pointer-handler
         :on-pointer-move pointer-handler
-        :fill "#888"
+        :fill "var(--font-color-muted)"
         :font-family "monospace"
         :font-size (/ 12 zoom)}) (or (:label el) (name (:tag el)))]