diff --git a/frontend/src/app/main/ui/workspace/viewport/sk.cljs b/frontend/src/app/main/ui/workspace/viewport/sk.cljs index 3fa0e402da..7767035562 100644 --- a/frontend/src/app/main/ui/workspace/viewport/sk.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/sk.cljs @@ -3,8 +3,6 @@ (:require ;; TODO el cp de node_modules/canvaskit-wasm/bin/canvaskit.wasm ["./sk_impl.js" :as impl] - [app.main.store :as st] - [app.util.path.format :as upf] [rumext.v2 :as mf])) (mf/defc canvas @@ -13,34 +11,26 @@ (let [objects (unchecked-get props "objects") vbox (unchecked-get props "vbox") canvas-ref (mf/use-ref nil) - kit (mf/use-state nil) - zoom (get-in @st/state [:workspace-local :zoom] 1)] - (println "zoom " zoom) - - (mf/with-effect [objects vbox] - (when @kit - (let [canvas (mf/ref-val canvas-ref)] - (do - (impl/clear @kit "skia-canvas") - (doseq [[_ object] objects] - (let [selrect (:selrect object) - x (:x selrect) - y (:y selrect) - width (+ (:width selrect) x) - height (+ (:height selrect) y)] - (impl/rect @kit "skia-canvas" x y width height (:x vbox) (:y vbox) zoom) - (when (:content object) - (impl/path @kit "skia-canvas" x y (upf/format-path (:content object)) (:x vbox) (:y vbox) zoom)))))))) + canvas-kit (mf/use-state nil)] + + (mf/with-effect [vbox] + (when @canvas-kit + (.setVbox ^js @canvas-kit vbox))) + + (mf/with-effect [objects] + (when @canvas-kit + (do + (doseq [[_ object] objects] + (.paintRect ^js @canvas-kit (clj->js object)))))) (mf/with-effect [canvas-ref] (let [canvas (mf/ref-val canvas-ref)] (when (some? canvas) (set! (.-width canvas) (.-clientWidth canvas)) (set! (.-height canvas) (.-clientHeight canvas)) - (-> (impl/init "skia-canvas") - (.then (fn [canvas-kit] - (js/console.log "canvas-kit" canvas-kit) - (reset! kit canvas-kit))))))) + (-> (.initialize impl/CanvasKit "skia-canvas" vbox) + (.then (fn [k] + (reset! canvas-kit k))))))) [:canvas {:id "skia-canvas" :class (stl/css :canvas) diff --git a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js index 57bd678793..d37902590b 100644 --- a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js +++ b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js @@ -1,10 +1,98 @@ import CanvasKitInit from 'canvaskit-wasm/bin/canvaskit.js'; +class CanvasKit { + constructor(canvasId, CanvasKit, vbox) { + this.canvasId = canvasId; + this.CanvasKit = CanvasKit; + this.vbox = vbox; + } + + static async initialize(canvasId, vbox) { + const kit = await CanvasKitInit(); + return new CanvasKit(canvasId, kit, vbox); + } + + setVbox(vbox) { + this.vbox = vbox; + } + + paintRect(shape) { + const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId) + + // Drawing fills + if (shape.fills) { + for (const fill of shape.fills) { + const paint = new this.CanvasKit.Paint(); + paint.setStyle(this.CanvasKit.PaintStyle.Fill); + const color = this.CanvasKit.parseColorString(fill["fill-color"]); + const opacity = fill["fill-opacity"] + color[3] = opacity + paint.setColor(color); + const rr = this.CanvasKit.RRectXY(this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), 0, 0); + const self = this; + + function draw(canvas) { + canvas.translate(- self.vbox.x, - self.vbox.y); + canvas.drawRRect(rr, paint); + paint.delete(); + } + + surface.drawOnce(draw); + } + } + + // // Drawing another border + // const paint2 = new this.CanvasKit.Paint(); + // paint2.setColor(this.CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); + // paint2.setStyle(this.CanvasKit.PaintStyle.Stroke); + // paint2.setStrokeWidth(25.0); + // paint2.setAntiAlias(true); + // const rr2 = this.CanvasKit.RRectXY(this.CanvasKit.LTRBRect(x, y, width, height), 0, 0); + + // // Drawing a shadow + // const paint3 = new this.CanvasKit.Paint(); + // paint3.setColor(this.CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); + // paint3.setStyle(this.CanvasKit.PaintStyle.Fill); + // const rr3 = this.CanvasKit.RRectXY(this.CanvasKit.LTRBRect(x, y, width, height), 0, 0); + // const drop = this.CanvasKit.ImageFilter.MakeDropShadow(4, 4, 4, 4,this.CanvasKit.MAGENTA, null); + // paint3.setImageFilter(drop) + + // // Drawing a blur + // const paint4 = new this.CanvasKit.Paint(); + // paint4.setColor(this.CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); + // paint4.setStyle(this.CanvasKit.PaintStyle.Fill); + // const rr4 = this.CanvasKit.RRectXY(this.CanvasKit.LTRBRect(x, y, width, height), 0, 0); + // const blur = this.CanvasKit.ImageFilter.MakeBlur(4, 4, this.CanvasKit.TileMode.Decal, null); + // paint4.setImageFilter(blur) + // const self = this; + // function draw(canvas) { + // canvas.translate(- self.vbox.x, - self.vbox.y); + // // canvas.scale(kk3, kk3); + // for (const d of toDraw) { + // canvas.drawRRect(d, paint); + // } + + // // canvas.drawRRect(rr2, paint2); + // // canvas.drawRRect(rr3, paint3); + // // canvas.drawRRect(rr4, paint4); + // paint.delete(); + // // paint2.delete(); + // // paint3.delete(); + // // paint4.delete(); + // } + // surface.drawOnce(draw); + } +} + +export { CanvasKit }; + export function init() { return CanvasKitInit(); } export function rect(CanvasKit, canvasId, x, y, width, height, kk1, kk2, kk3) { surface = CanvasKit.MakeCanvasSurface(canvasId) + + // Drawing a border console.log("rect:", x, y, width, height) const paint = new CanvasKit.Paint(); paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0)); @@ -14,6 +102,7 @@ export function rect(CanvasKit, canvasId, x, y, width, height, kk1, kk2, kk3) { paint.setAntiAlias(true); const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, width, height), 0, 0); + // Drawing another border const paint2 = new CanvasKit.Paint(); paint2.setColor(CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); paint2.setStyle(CanvasKit.PaintStyle.Stroke); @@ -21,13 +110,33 @@ export function rect(CanvasKit, canvasId, x, y, width, height, kk1, kk2, kk3) { paint2.setAntiAlias(true); const rr2 = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, width, height), 0, 0); + // Drawing a shadow + const paint3 = new CanvasKit.Paint(); + paint3.setColor(CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); + paint3.setStyle(CanvasKit.PaintStyle.Fill); + const rr3 = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, width, height), 0, 0); + const drop = CanvasKit.ImageFilter.MakeDropShadow(4, 4, 4, 4, CanvasKit.MAGENTA, null); + paint3.setImageFilter(drop) + + + // Drawing a blur + const paint4 = new CanvasKit.Paint(); + paint4.setColor(CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); + paint4.setStyle(CanvasKit.PaintStyle.Fill); + const rr4 = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, width, height), 0, 0); + const blur = CanvasKit.ImageFilter.MakeBlur(4, 4, CanvasKit.TileMode.Decal, null); + paint4.setImageFilter(blur) + function draw(canvas) { canvas.translate(- kk1, - kk2); // canvas.scale(kk3, kk3); - canvas.drawRRect(rr, paint); - canvas.drawRRect(rr2, paint2); + // canvas.drawRRect(rr, paint); + // canvas.drawRRect(rr2, paint2); + // canvas.drawRRect(rr3, paint3); + canvas.drawRRect(rr4, paint4); paint.delete(); paint2.delete(); + paint3.delete(); } surface.drawOnce(draw); } @@ -53,6 +162,26 @@ export function path(CanvasKit, canvasId, x, y, content, kk1, kk2, kk3) { surface.drawOnce(draw); } +// export function shadow(CanvasKit, canvasId, kk1, kk2, kk3) { +// console.log("CanvasKit", CanvasKit) +// console.log("CanvasKit.ImageFilter", CanvasKit.ImageFilter.MakeDropShadow()) +// const paint = new CanvasKit.Paint(); +// paint.setColor(CanvasKit.Color4f(0.9, 0, 1.0, 1.0)); +// paint.setStyle(CanvasKit.PaintStyle.Fill); +// // var paint = SKPaint +// // { +// // Color = SKColors.Red, +// // Style = SKPaintStyle.Fill +// // }; +// const drop = CanvasKit.ImageFilter.MakeDropShadow(0, 0, 4.0, 2.0, CanvasKit.MAGENTA, null); +// const paint = new CanvasKit.Paint(); +// paint.setImageFilter(drop) + +// } + + + + export function clear(CanvasKit, canvasId) { surface = CanvasKit.MakeCanvasSurface(canvasId)