saqut
/
canvas-compositor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Padding calculation

This commit is contained in:
Abdussamed 2023-06-11 16:23:54 +03:00
parent 96a35c133f
commit 635ece9755
4 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Compositor/Node.ts
View File

@ -105,19 +105,24 @@ export default class Node
let width = drawableAreaWidth - (this.padding.right + this.padding.left);
let height = drawableAreaHeight - (this.padding.bottom + this.padding.top);
this.context.resize(width, height);
this.buffered = true;
let offscreen = new CanvasBuffer(width, height);
for (const node of this.ChildNodes)
{
this.DrawChild(
this.context,
offscreen,
node,
width,
height
width, height
);
};
offscreen.writeTo(
this.context,
0, 0,
offscreen.width, offscreen.height,
this.padding.left, this.padding.top,
offscreen.width, offscreen.height
);
return this.context;
}
@ -166,8 +171,7 @@ export default class Node
x += node.x;
y += node.y;
x += this.padding.left;
y += this.padding.top;
let frame : CanvasBuffer;
if(!node.buffered)
@ -209,8 +213,8 @@ export default class Node
frame.offscreen.height,
x,
y,
frame.offscreen.width * node.scale,
frame.offscreen.height * node.scale
canvasWidth * node.scale,
canvasHeight * node.scale
)
node.requiredRedraw = false;
context.restore();

35
index.js
View File

@ -579,17 +579,15 @@ var _node = require("./Compositor/Node");
var _nodeDefault = parcelHelpers.interopDefault(_node);
var _canvas = require("./Compositor/Canvas");
var _canvasDefault = parcelHelpers.interopDefault(_canvas);
var _canvasBuffer = require("./Compositor/CanvasBuffer");
var _canvasBufferDefault = parcelHelpers.interopDefault(_canvasBuffer);
let container = new (0, _nodeDefault.default)("Box");
container.handleDrawBefore(function() {
this.width = 400;
this.height = 400;
this.padding = {
left: 2,
right: 2,
top: 2,
bottom: 2
left: 10,
right: 10,
top: 10,
bottom: 10
};
});
let scroll = 2;
@ -601,9 +599,17 @@ container.handleDraw(function(canvasBuffer, area) {
ctx.rect(2, 2, area.width - 2, area.height - 2);
ctx.stroke();
ctx.closePath();
let offscreen = new (0, _canvasBufferDefault.default)(area.width - 8, area.height - 8);
for (const child of this.ChildNodes)this.DrawChild(offscreen, child, offscreen.width - 8, offscreen.height - 8);
offscreen.writeTo(ctx, 0, 0, area.width, area.height, 4, 4, area.width, area.height);
/*
let offscreen = new CanvasBuffer(area.width - 8, area.height - 8);
for (const child of this.ChildNodes)
{
this.DrawChild(offscreen, child, offscreen.width - 8, offscreen.height - 8);
};
offscreen.writeTo(
ctx,
0,0, area.width, area.height,
4,4, area.width, area.height
)*/ return true;
});
class Button extends (0, _nodeDefault.default) {
constructor(x, y, name){
@ -685,7 +691,7 @@ t.canvas.addEventListener("wheel", function(event) {
container.update();
});
},{"./Compositor/Node":"a8tDl","./Compositor/Canvas":"lKBnk","./Compositor/CanvasBuffer":"jI6Ug","@parcel/transformer-js/src/esmodule-helpers.js":"7Rzro"}],"a8tDl":[function(require,module,exports) {
},{"./Compositor/Node":"a8tDl","./Compositor/Canvas":"lKBnk","@parcel/transformer-js/src/esmodule-helpers.js":"7Rzro"}],"a8tDl":[function(require,module,exports) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
var _canvasBuffer = require("./CanvasBuffer");
@ -757,9 +763,10 @@ class Node {
}
let width = drawableAreaWidth - (this.padding.right + this.padding.left);
let height = drawableAreaHeight - (this.padding.bottom + this.padding.top);
this.context.resize(width, height);
this.buffered = true;
for (const node of this.ChildNodes)this.DrawChild(this.context, node, width, height);
let offscreen = new (0, _canvasBufferDefault.default)(width, height);
for (const node of this.ChildNodes)this.DrawChild(offscreen, node, width, height);
offscreen.writeTo(this.context, 0, 0, offscreen.width, offscreen.height, this.padding.left, this.padding.top, offscreen.width, offscreen.height);
return this.context;
}
getContextArea() {
@ -784,8 +791,6 @@ class Node {
canvasHeight = Math.min(node.height, maxHeight);
x += node.x;
y += node.y;
x += this.padding.left;
y += this.padding.top;
let frame;
if (!node.buffered) frame = node.draw(canvasWidth, canvasHeight);
else if (node.requiredRedraw) frame = node.draw(canvasWidth, canvasHeight);
@ -801,7 +806,7 @@ class Node {
context.rotate(node.rotate);
context.translate(-translateX, -translateY);
}
canvas.writeFrom(frame.offscreen, 0, 0, frame.offscreen.width, frame.offscreen.height, x, y, frame.offscreen.width * node.scale, frame.offscreen.height * node.scale);
canvas.writeFrom(frame.offscreen, 0, 0, frame.offscreen.width, frame.offscreen.height, x, y, canvasWidth * node.scale, canvasHeight * node.scale);
node.requiredRedraw = false;
context.restore();
node.handleEvent("draw:after", (callback)=>{

2
index.js.map
View File

File diff suppressed because one or more lines are too long

12
index.ts
View File

@ -7,10 +7,10 @@ container.handleDrawBefore(function(){
this.width = 400;
this.height = 400;
this.padding = {
left: 2,
right: 2,
top: 2,
bottom: 2
left: 10,
right: 10,
top: 10,
bottom: 10
};
});
@ -23,6 +23,7 @@ container.handleDraw(function(canvasBuffer,area){
ctx.rect(2,2,area.width - 2,area.height - 2);
ctx.stroke();
ctx.closePath();
/*
let offscreen = new CanvasBuffer(area.width - 8, area.height - 8);
for (const child of this.ChildNodes)
{
@ -32,7 +33,8 @@ container.handleDraw(function(canvasBuffer,area){
ctx,
0,0, area.width, area.height,
4,4, area.width, area.height
);
)*/
return true;
});
class Button extends Node