CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-13 07:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Alejandro Alonso
2023-12-20 13:54:44 +01:00
parent a1da3065f7
commit 69582add4b
2 changed files with 145 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/app/main/ui/workspace/viewport/sk.cljs
View File

@@ -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)

133
frontend/src/app/main/ui/workspace/viewport/sk_impl.js
View File

@@ -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)