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]]
[:svg.render-shapes
#_[:svg.render-shapes
{:id "render"
:xmlns "http://www.w3.org/2000/svg"
: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]
(.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)]
(when (some? canvas)
(when (and (some? canvas) (some? vbox))
(set! (.-width canvas) (.-clientWidth canvas))
(set! (.-height canvas) (.-clientHeight canvas))
(println "init vbox" vbox)
(-> (.initialize impl/CanvasKit "skia-canvas" vbox)
(.then (fn [k]
(reset! canvas-kit k)
(println "init complete")
(doseq [[_ object] objects]
(.paintRect ^js k (clj->js object)))
#_(.clear ^js k)))))))
[:canvas {:id "skia-canvas"

17
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)
function draw(canvas) {
canvas.clear(CanvasKit.TRANSPARENT);
}
surface.drawOnce(draw);
}
}
paintRect(shape) {
const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId)
const self = this;
function draw(canvas) {
if (self.vbox) {
canvas.translate(- self.vbox.x, - self.vbox.y);
}
const paint = new self.CanvasKit.Paint();
// Drawing fills
if (shape.fills) {
@@ -51,12 +54,18 @@ clear() {
paint.setStyle(self.CanvasKit.PaintStyle.Stroke);
const color = self.CanvasKit.parseColorString(stroke["stroke-color"]);
const opacity = stroke["stroke-opacity"]
paint.setStrokeWidth(stroke["stroke-width"]);
console.log("stroke color", stroke, stroke["stroke-color"], stroke["stroke-opacity"])
const strokeWidth = stroke["stroke-width"];
paint.setStrokeWidth(strokeWidth);
console.log("stroke", stroke, stroke["stroke-color"], stroke["stroke-opacity"], strokeWidth)
color[3] = opacity
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);
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();