mirror of
https://github.com/penpot/penpot.git
synced 2025-07-19 05:37:22 +02:00
Merge pull request #5190 from penpot/ladybenko-9046-emscripten
🎉 Switch new renderer to Emscripten (from wasm-bindgen)
This commit is contained in:
Belén Albeza
GitHub
commit
09e1bac41c
15 changed files with 1009 additions and 457 deletions
|
|
@ -75,7 +75,6 @@
|
|||
[app.main.repo :as rp]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.worker :as uw]
|
||||
[app.renderer-v2 :as renderer]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.globals :as ug]
|
||||
[app.util.http :as http]
|
||||
|
|
@ -357,8 +356,8 @@
|
|||
(dcm/retrieve-comment-threads file-id)
|
||||
(fetch-bundle project-id file-id))
|
||||
|
||||
(when (contains? cf/flags :renderer-v2)
|
||||
(rx/of (renderer/init)))
|
||||
;; (when (contains? cf/flags :renderer-v2)
|
||||
;; (rx/of (renderer/init)))
|
||||
|
||||
(->> stream
|
||||
(rx/filter dch/commit?)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.config :as cf]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.notifications :as ntf]
|
||||
[app.main.data.persistence :as dps]
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
[app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
|
||||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport]]
|
||||
[app.renderer-v2 :as renderer]
|
||||
[app.util.debug :as dbg]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.globals :as globals]
|
||||
|
|
@ -204,10 +202,6 @@
|
|||
(ntf/hide)
|
||||
(dw/finalize-file project-id file-id))))
|
||||
|
||||
(mf/with-effect [file-ready?]
|
||||
(when (and file-ready? (contains? cf/flags :renderer-v2))
|
||||
(renderer/print-msg "hello from wasm fn!")))
|
||||
|
||||
[:& (mf/provider ctx/current-file-id) {:value file-id}
|
||||
[:& (mf/provider ctx/current-project-id) {:value project-id}
|
||||
[:& (mf/provider ctx/current-team-id) {:value team-id}
|
||||
|
|
|
|||
|
|
@ -50,8 +50,10 @@
|
|||
[app.main.ui.workspace.viewport.utils :as utils]
|
||||
[app.main.ui.workspace.viewport.viewport-ref :refer [create-viewport-ref]]
|
||||
[app.main.ui.workspace.viewport.widgets :as widgets]
|
||||
[app.render-wasm :as render.wasm]
|
||||
[app.util.debug :as dbg]
|
||||
[beicon.v2.core :as rx]
|
||||
[promesa.core :as p]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
;; --- Viewport
|
||||
|
|
@ -137,6 +139,9 @@
|
|||
[viewport-ref
|
||||
on-viewport-ref] (create-viewport-ref)
|
||||
|
||||
canvas-ref (mf/use-ref nil)
|
||||
canvas-init (mf/use-ref false)
|
||||
|
||||
;; VARS
|
||||
disable-paste (mf/use-var false)
|
||||
in-viewport? (mf/use-var false)
|
||||
|
|
@ -269,6 +274,21 @@
|
|||
|
||||
rule-area-size (/ rulers/ruler-area-size zoom)]
|
||||
|
||||
(when ^boolean render.wasm/enabled?
|
||||
(mf/with-effect []
|
||||
(when-let [canvas (mf/ref-val canvas-ref)]
|
||||
(->> render.wasm/module
|
||||
(p/fmap (fn [ready?]
|
||||
(when ready?
|
||||
(mf/set-ref-val! canvas-init true)
|
||||
(render.wasm/assign-canvas canvas)))))
|
||||
(fn []
|
||||
(render.wasm/clear-canvas))))
|
||||
|
||||
(mf/with-effect [vbox' base-objects]
|
||||
(when (mf/ref-val canvas-init)
|
||||
(render.wasm/draw-objects base-objects zoom vbox'))))
|
||||
|
||||
(hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool drawing-path?)
|
||||
(hooks/setup-viewport-size vport viewport-ref)
|
||||
(hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? read-only?)
|
||||
|
|
@ -312,50 +332,59 @@
|
|||
:layout layout
|
||||
:viewport-ref viewport-ref}])]
|
||||
|
||||
[:svg
|
||||
{:id "render"
|
||||
:class (stl/css :render-shapes)
|
||||
:xmlns "http://www.w3.org/2000/svg"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns:penpot "https://penpot.app/xmlns"
|
||||
:preserveAspectRatio "xMidYMid meet"
|
||||
:key (str "render" page-id)
|
||||
:width (:width vport 0)
|
||||
:height (:height vport 0)
|
||||
:view-box (utils/format-viewbox vbox)
|
||||
:style {:background-color background
|
||||
:pointer-events "none"}
|
||||
:fill "none"}
|
||||
(if ^boolean render.wasm/enabled?
|
||||
[:canvas {:id "render"
|
||||
:ref canvas-ref
|
||||
:class (stl/css :render-shapes)
|
||||
:key (dm/str "render" page-id)
|
||||
:width (:width vport 0)
|
||||
:height (:height vport 0)
|
||||
:style {:background-color background
|
||||
:pointer-events "none"}}]
|
||||
[:svg
|
||||
{:id "render"
|
||||
:class (stl/css :render-shapes)
|
||||
:xmlns "http://www.w3.org/2000/svg"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns:penpot "https://penpot.app/xmlns"
|
||||
:preserveAspectRatio "xMidYMid meet"
|
||||
:key (str "render" page-id)
|
||||
:width (:width vport 0)
|
||||
:height (:height vport 0)
|
||||
:view-box (utils/format-viewbox vbox)
|
||||
:style {:background-color background
|
||||
:pointer-events "none"}
|
||||
:fill "none"}
|
||||
|
||||
[:defs
|
||||
[:linearGradient {:id "frame-placeholder-gradient"}
|
||||
[:animateTransform
|
||||
{:attributeName "gradientTransform"
|
||||
:type "translate"
|
||||
:from "-1 0"
|
||||
:to "1 0"
|
||||
:dur "2s"
|
||||
:repeatCount "indefinite"}]
|
||||
[:stop {:offset "0%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]
|
||||
[:stop {:offset "50%" :stop-color (str "color-mix(in srgb-linear, " background " 80%, #777)") :stop-opacity 1}]
|
||||
[:stop {:offset "100%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]]]
|
||||
[:defs
|
||||
[:linearGradient {:id "frame-placeholder-gradient"}
|
||||
[:animateTransform
|
||||
{:attributeName "gradientTransform"
|
||||
:type "translate"
|
||||
:from "-1 0"
|
||||
:to "1 0"
|
||||
:dur "2s"
|
||||
:repeatCount "indefinite"}]
|
||||
[:stop {:offset "0%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]
|
||||
[:stop {:offset "50%" :stop-color (str "color-mix(in srgb-linear, " background " 80%, #777)") :stop-opacity 1}]
|
||||
[:stop {:offset "100%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]]]
|
||||
|
||||
(when (dbg/enabled? :show-export-metadata)
|
||||
[:& use/export-page {:page page}])
|
||||
(when (dbg/enabled? :show-export-metadata)
|
||||
[:& use/export-page {:page page}])
|
||||
|
||||
;; We need a "real" background shape so layer transforms work properly in firefox
|
||||
[:rect {:width (:width vbox 0)
|
||||
:height (:height vbox 0)
|
||||
:x (:x vbox 0)
|
||||
:y (:y vbox 0)
|
||||
:fill background}]
|
||||
;; We need a "real" background shape so layer transforms work properly in firefox
|
||||
[:rect {:width (:width vbox 0)
|
||||
:height (:height vbox 0)
|
||||
:x (:x vbox 0)
|
||||
:y (:y vbox 0)
|
||||
:fill background}]
|
||||
|
||||
[:& (mf/provider ctx/current-vbox) {:value vbox'}
|
||||
[:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)}
|
||||
;; Render root shape
|
||||
[:& shapes/root-shape {:key page-id
|
||||
:objects base-objects
|
||||
:active-frames @active-frames}]]]]
|
||||
[:& (mf/provider ctx/current-vbox) {:value vbox'}
|
||||
[:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)}
|
||||
;; Render root shape
|
||||
[:& shapes/root-shape {:key page-id
|
||||
:objects base-objects
|
||||
:active-frames @active-frames}]]]])
|
||||
|
||||
[:svg.viewport-controls
|
||||
{:xmlns "http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
88
frontend/src/app/render_wasm.cljs
Normal file
88
frontend/src/app/render_wasm.cljs
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.render-wasm
|
||||
"A WASM based render API"
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.config :as cf]
|
||||
[promesa.core :as p]))
|
||||
|
||||
(def enabled?
|
||||
(contains? cf/flags :render-wasm))
|
||||
|
||||
(defonce ^:dynamic internal-module #js {})
|
||||
(defonce ^:dynamic internal-gpu-state #js {})
|
||||
|
||||
(defn draw-objects [objects zoom vbox]
|
||||
(let [draw-rect (unchecked-get internal-module "_draw_rect")
|
||||
translate (unchecked-get internal-module "_translate")
|
||||
reset-canvas (unchecked-get internal-module "_reset_canvas")
|
||||
scale (unchecked-get internal-module "_scale")
|
||||
flush (unchecked-get internal-module "_flush")
|
||||
gpu-state internal-gpu-state]
|
||||
|
||||
(js/requestAnimationFrame
|
||||
(fn []
|
||||
(reset-canvas gpu-state)
|
||||
(scale gpu-state zoom zoom)
|
||||
|
||||
(let [x (dm/get-prop vbox :x)
|
||||
y (dm/get-prop vbox :y)]
|
||||
(translate gpu-state (- x) (- y)))
|
||||
|
||||
(run! (fn [shape]
|
||||
(let [selrect (dm/get-prop shape :selrect)
|
||||
x1 (dm/get-prop selrect :x1)
|
||||
y1 (dm/get-prop selrect :y1)
|
||||
x2 (dm/get-prop selrect :x2)
|
||||
y2 (dm/get-prop selrect :y2)]
|
||||
(draw-rect gpu-state x1 y1 x2 y2)))
|
||||
(vals objects))
|
||||
|
||||
(flush gpu-state)))))
|
||||
|
||||
(def canvas-options
|
||||
#js {:antialias true
|
||||
:depth true
|
||||
:stencil true
|
||||
:alpha true})
|
||||
|
||||
(defn clear-canvas
|
||||
[]
|
||||
;; TODO: perform corresponding cleaning
|
||||
)
|
||||
|
||||
(defn assign-canvas
|
||||
[canvas]
|
||||
(let [gl (unchecked-get internal-module "GL")
|
||||
init-fn (unchecked-get internal-module "_init")
|
||||
|
||||
context (.getContext ^js canvas "webgl2" canvas-options)
|
||||
|
||||
;; Register the context with emscripten
|
||||
handle (.registerContext ^js gl context #js {"majorVersion" 2})
|
||||
_ (.makeContextCurrent ^js gl handle)
|
||||
|
||||
;; Initialize Skia
|
||||
state (init-fn (.-width ^js canvas)
|
||||
(.-height ^js canvas))]
|
||||
|
||||
(set! (.-width canvas) (.-clientWidth ^js canvas))
|
||||
(set! (.-height canvas) (.-clientHeight ^js canvas))
|
||||
(set! internal-gpu-state state)))
|
||||
|
||||
(defonce module
|
||||
(->> (js/dynamicImport "/js/render_wasm.js")
|
||||
(p/mcat (fn [module]
|
||||
(let [default (unchecked-get module "default")]
|
||||
(default))))
|
||||
(p/fmap (fn [module]
|
||||
(set! internal-module module)
|
||||
true))
|
||||
(p/merr (fn [cause]
|
||||
(js/console.error cause)
|
||||
(p/resolved false)))))
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.renderer-v2
|
||||
(:require
|
||||
[app.config :as cf]
|
||||
[beicon.v2.core :as rx]
|
||||
[potok.v2.core :as ptk]))
|
||||
|
||||
(defonce internal-module #js {})
|
||||
|
||||
(defn on-module-loaded
|
||||
[module']
|
||||
(let [init-fn (.-default ^js module')]
|
||||
(->> (rx/from (init-fn))
|
||||
(rx/map (constantly module')))))
|
||||
|
||||
(defn- on-module-initialized
|
||||
[module]
|
||||
(set! internal-module module))
|
||||
|
||||
(defn print-msg [msg]
|
||||
(let [print-fn (.-print internal-module)]
|
||||
(print-fn msg)))
|
||||
|
||||
(defn init
|
||||
[]
|
||||
(ptk/reify ::init
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(let [module-uri (assoc cf/public-uri :path "/js/renderer/renderer.js")]
|
||||
(->> (rx/from (js/dynamicImport (str module-uri)))
|
||||
(rx/mapcat on-module-loaded)
|
||||
(rx/tap on-module-initialized)
|
||||
(rx/ignore))))))
|
||||
Loading…
Add table
Add a link
Reference in a new issue