mirror of
https://github.com/penpot/penpot.git
synced 2025-01-22 14:39:45 -05:00
wip: draw rect
This commit is contained in:
parent
dc014bd4eb
commit
81680cffe9
9 changed files with 4404 additions and 538 deletions
|
@ -25,7 +25,7 @@ RUN cd /tmp \
|
|||
RUN cd /tmp \
|
||||
&& git clone 'https://skia.googlesource.com/skia' \
|
||||
&& cd skia \
|
||||
&& git checkout 'chrome/m127'
|
||||
&& git checkout 'chrome/m129'
|
||||
|
||||
ENV PATH=${PATH}:/tmp/depot_tools
|
||||
ENV PATH=${PATH}:/tmp/gn
|
||||
|
|
|
@ -31,7 +31,6 @@ all:
|
|||
-DSK_FORCE_AAA \
|
||||
-DSK_FORCE_8_BYTE_ALIGNMENT \
|
||||
-DSK_SHAPER_HARFBUZZ_AVAILABLE \
|
||||
-DCK_INCLUDE_PARAGRAPH \
|
||||
-DCK_SERIALIZE_SKP \
|
||||
-DSK_GANESH \
|
||||
-DSK_DISABLE_LEGACY_SHADERCONTEXT \
|
||||
|
|
|
@ -1,9 +1,13 @@
|
|||
// Adds compile-time JS functions to augment Renderer interface.
|
||||
(function (Renderer) {
|
||||
console.log("preamble", Renderer);
|
||||
|
||||
//
|
||||
let gr;
|
||||
let surface;
|
||||
|
||||
Renderer.setCanvas = function setCanvas(canvas, attrs) {
|
||||
console.log("GL", GL);
|
||||
debugger
|
||||
const context = GL.createContext(canvas, attrs);
|
||||
if (!context) {
|
||||
throw new Error('Could not create a new WebGL context')
|
||||
|
@ -15,6 +19,77 @@
|
|||
GL.currentContext.GLctx.getExtension('WEBGL_debug_renderer_info');
|
||||
|
||||
console.log("setCanvas", canvas, attrs);
|
||||
const gr = this._MakeGrContext();
|
||||
gr = this._MakeGrContext();
|
||||
console.log("gr", gr);
|
||||
|
||||
surface = this._MakeOnScreenGLSurface(gr, canvas.width, canvas.height);
|
||||
console.log("surface", surface);
|
||||
if (!surface) {
|
||||
throw new Error('Cannot initialize surface')
|
||||
}
|
||||
};
|
||||
|
||||
function wasMalloced(obj) {
|
||||
return obj && obj['_ck'];
|
||||
}
|
||||
|
||||
function copy1dArray(arr, dest, ptr) {
|
||||
if (!arr || !arr.length) return null;
|
||||
if (wasMalloced(arr)) {
|
||||
return arr.byteOffset;
|
||||
}
|
||||
const bytesPerElement = Renderer[dest].BYTES_PER_ELEMENT;
|
||||
if (!ptr) {
|
||||
ptr = Renderer._malloc(arr.length * bytesPerElement);
|
||||
}
|
||||
Renderer[dest].set(arr, ptr / bytesPerElement);
|
||||
return ptr;
|
||||
}
|
||||
|
||||
function copyRectToWasm(fourFloats, ptr) {
|
||||
return copy1dArray(fourFloats, 'HEAPF32', ptr || null);
|
||||
}
|
||||
|
||||
function copyColorToWasm(color4f, ptr) {
|
||||
return copy1dArray(color4f, 'HEAPF32', ptr || null);
|
||||
}
|
||||
|
||||
Renderer.drawCanvas = function drawCanvas(vbox, zoom, objects) {
|
||||
console.log("vbox", vbox);
|
||||
console.log("zoom", zoom);
|
||||
if (!surface) {
|
||||
throw new Error('Surface uninitialized');
|
||||
}
|
||||
|
||||
console.log("renderer", Renderer);
|
||||
console.log("surface", surface);
|
||||
|
||||
// Esto es una ÑAPA terrible, no me gusta.
|
||||
if (!Renderer.Paint.prototype.setColor) {
|
||||
Renderer.Paint.prototype.setColor = function(color4f, colorSpace = null) {
|
||||
const cPtr = copyColorToWasm(color4f);
|
||||
this._setColor(cPtr, colorSpace);
|
||||
}
|
||||
}
|
||||
|
||||
const paint = new Renderer.Paint();
|
||||
paint.setColor(Float32Array.of(1.0, 0, 0, 1.0));
|
||||
paint.setStyle(Renderer.PaintStyle.Fill);
|
||||
paint.setAntiAlias(true);
|
||||
console.log("paint", paint);
|
||||
|
||||
const canvas = surface._getCanvas();
|
||||
console.log("canvas", canvas);
|
||||
|
||||
const cPtr = copyColorToWasm(Float32Array.of(0.0, 0.0, 0.0, 1.0))
|
||||
canvas._clear(cPtr);
|
||||
console.log("canvas cleared");
|
||||
|
||||
for (const { val: object } of objects) {
|
||||
console.log("object", object);
|
||||
const rr = Float32Array.of(object.selrect.x, object.selrect.y, object.selrect.width, object.selrect.height);
|
||||
|
||||
const rPtr = copyRectToWasm(rr);
|
||||
canvas._drawRect(rPtr, paint);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
#!/bin/bash
|
||||
mkdir -p ../../resources/public/js/render-v2/cpp
|
||||
mkdir -p ../../src/app/render-v2/
|
||||
mkdir -p ../../resources/public/js/render_v2/cpp
|
||||
mkdir -p ../../src/app/render_v2/
|
||||
|
||||
# FIXME: This is a VERY HACKY way to set the correct `scriptDirectory` but
|
||||
# I didn't find a better way yet.
|
||||
PREAMBLE_LINES=`wc -l js/preamble.js | egrep -o [0-9]+`
|
||||
POSTAMBLE_LINES=`wc -l js/postamble.js | egrep -o [0-9]+`
|
||||
LINE_NUMBER=`echo "200 + ${PREAMBLE_LINES} + ${POSTAMBLE_LINES}" | bc | egrep -o [0-9]+`
|
||||
sed "${LINE_NUMBER} i \ \ scriptDirectory += 'render-v2/cpp/';" out/render-v2.js > ../../src/app/render-v2/cpp.js
|
||||
cp out/render-v2.wasm ../../resources/public/js/render-v2/cpp
|
||||
sed "${LINE_NUMBER} i \ \ scriptDirectory += 'js/render_v2/cpp/';" out/renderer.js > ../../src/app/render_v2/cpp.js
|
||||
cp out/renderer.wasm ../../resources/public/js/render_v2/cpp
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -114,8 +114,6 @@
|
|||
|
||||
selected-shapes (keep (d/getf objects-modified) selected)
|
||||
|
||||
canvas-ref (mf/use-ref nil)
|
||||
|
||||
;; STATE
|
||||
alt? (mf/use-state false)
|
||||
shift? (mf/use-state false)
|
||||
|
@ -130,12 +128,13 @@
|
|||
hover-top-frame-id (mf/use-state nil)
|
||||
frame-hover (mf/use-state nil)
|
||||
active-frames (mf/use-state #{})
|
||||
canvas-init? (mf/use-ref false)
|
||||
|
||||
;; REFS
|
||||
[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)
|
||||
|
@ -276,14 +275,15 @@
|
|||
[canvas-ref]
|
||||
(let [canvas (mf/ref-val canvas-ref)]
|
||||
(when (some? canvas)
|
||||
(p/then (render-v2/init)
|
||||
(fn []
|
||||
(render-v2/set-canvas canvas vbox' zoom base-objects)
|
||||
(mf/set-ref-val! canvas-init? true))))))
|
||||
(-> (p/then (render-v2/init)
|
||||
(fn []
|
||||
(mf/set-ref-val! canvas-init? true)
|
||||
(render-v2/set-canvas canvas vbox' zoom base-objects)))
|
||||
(p/catch (fn [error] (js/console.error error)))))))
|
||||
|
||||
;; redraw when vbox or shapes change
|
||||
(mf/with-effect
|
||||
[vbox canvas-init? zoom]
|
||||
[vbox canvas-init? base-objects zoom]
|
||||
(when (mf/ref-val canvas-init?)
|
||||
(render-v2/draw-canvas vbox zoom base-objects)))
|
||||
|
||||
|
|
|
@ -31,14 +31,20 @@
|
|||
(cond
|
||||
;; CPP
|
||||
(contains? cf/flags :render-v2-cpp)
|
||||
(render-v2-cpp/set-canvas canvas)
|
||||
(render-v2-cpp/set-canvas canvas vbox zoom base-objects)
|
||||
|
||||
;; Rust
|
||||
(contains? cf/flags :render-v2-rs)
|
||||
(render-v2-rs/set-canvas canvas vbox zoom base-objects)))
|
||||
|
||||
(defn draw-canvas [vbox zoom base-objects]
|
||||
(defn draw-canvas
|
||||
[vbox zoom base-objects]
|
||||
(js/console.log "draw-canvas")
|
||||
(cond
|
||||
;; CPP
|
||||
(contains? cf/flags :render-v2-cpp)
|
||||
(render-v2-cpp/draw-canvas vbox zoom base-objects)
|
||||
|
||||
;; Rust
|
||||
(contains? cf/flags :render-v2-rs)
|
||||
(render-v2-rs/draw-canvas vbox zoom base-objects)))
|
||||
|
|
|
@ -14,9 +14,16 @@
|
|||
(defonce ^:dynamic internal-module nil)
|
||||
|
||||
(defn set-canvas
|
||||
[canvas]
|
||||
[canvas vbox zoom base-objects]
|
||||
(js/console.log "setting canvas" canvas)
|
||||
(.setCanvas internal-module canvas #js {:antialias false}))
|
||||
(.setCanvas ^js internal-module canvas #js {:antialias false})
|
||||
(js/console.log "canvas set")
|
||||
(.drawCanvas ^js internal-module vbox zoom base-objects))
|
||||
|
||||
(defn draw-canvas
|
||||
[vbox zoom base-objects]
|
||||
(js/console.log "draw canvas" vbox zoom base-objects)
|
||||
(.drawCanvas ^js internal-module vbox zoom base-objects))
|
||||
|
||||
(defn on-init
|
||||
[module']
|
||||
|
|
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue