johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Alejandro Alonso
2023-12-21 11:19:11 +01:00
parent cd04a41d98
commit b5d3de9fab
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -303,7 +303,7 @@
[:& top-bar/top-bar]] [:& top-bar/top-bar]]
[:svg.render-shapes #_[:svg.render-shapes
{:id "render" {:id "render"
:xmlns "http://www.w3.org/2000/svg" :xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink" :xmlnsXlink "http://www.w3.org/1999/xlink"

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

@@ -22,15 +22,18 @@
(doseq [[_ object] objects] (doseq [[_ object] objects]
(.paintRect ^js @canvas-kit (clj->js object))))) (.paintRect ^js @canvas-kit (clj->js object)))))
(mf/with-effect [canvas-ref] (mf/with-effect [canvas-ref vbox]
(let [canvas (mf/ref-val canvas-ref)] (let [canvas (mf/ref-val canvas-ref)]
(when (some? canvas) (when (and (some? canvas) (some? vbox))
(set! (.-width canvas) (.-clientWidth canvas)) (set! (.-width canvas) (.-clientWidth canvas))
(set! (.-height canvas) (.-clientHeight canvas)) (set! (.-height canvas) (.-clientHeight canvas))
(println "init vbox" vbox) (println "init vbox" vbox)
(-> (.initialize impl/CanvasKit "skia-canvas" vbox) (-> (.initialize impl/CanvasKit "skia-canvas" vbox)
(.then (fn [k] (.then (fn [k]
(reset! canvas-kit k) (reset! canvas-kit k)
(println "init complete")
(doseq [[_ object] objects]
(.paintRect ^js k (clj->js object)))
#_(.clear ^js k))))))) #_(.clear ^js k)))))))
[:canvas {:id "skia-canvas" [:canvas {:id "skia-canvas"

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

@@ -17,20 +17,23 @@ class CanvasKit {
} }
clear() { clear() {
const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId) const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId)
function draw(canvas) { function draw(canvas) {
canvas.clear(CanvasKit.TRANSPARENT); canvas.clear(CanvasKit.TRANSPARENT);
}
surface.drawOnce(draw);
} }
surface.drawOnce(draw);
}
paintRect(shape) { paintRect(shape) {
const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId) const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId)
const self = this; const self = this;
function draw(canvas) { function draw(canvas) {
canvas.translate(- self.vbox.x, - self.vbox.y); if (self.vbox) {
canvas.translate(- self.vbox.x, - self.vbox.y);
}
const paint = new self.CanvasKit.Paint(); const paint = new self.CanvasKit.Paint();
// Drawing fills // Drawing fills
if (shape.fills) { if (shape.fills) {
@@ -51,12 +54,18 @@ clear() {
paint.setStyle(self.CanvasKit.PaintStyle.Stroke); paint.setStyle(self.CanvasKit.PaintStyle.Stroke);
const color = self.CanvasKit.parseColorString(stroke["stroke-color"]); const color = self.CanvasKit.parseColorString(stroke["stroke-color"]);
const opacity = stroke["stroke-opacity"] const opacity = stroke["stroke-opacity"]
paint.setStrokeWidth(stroke["stroke-width"]); const strokeWidth = stroke["stroke-width"];
console.log("stroke color", stroke, stroke["stroke-color"], stroke["stroke-opacity"]) paint.setStrokeWidth(strokeWidth);
console.log("stroke", stroke, stroke["stroke-color"], stroke["stroke-opacity"], strokeWidth)
color[3] = opacity color[3] = opacity
paint.setColor(color); paint.setColor(color);
const rr = self.CanvasKit.RRectXY(self.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), 0, 0); const rr = self.CanvasKit.RRectXY(self.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), 0, 0);
canvas.drawRRect(rr, paint); canvas.drawRRect(rr, paint);
// Inner stroke?
// const rr2 = self.CanvasKit.RRectXY(self.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), 0, 0);
// canvas.clipRRect(rr2, self.CanvasKit.ClipOp.Intersect, true);
} }
} }
paint.delete(); paint.delete();