Padding calculation

Compositor/Node.ts

@@ -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,
+                width, height
-                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,
+            canvasWidth * node.scale,
-            frame.offscreen.height * node.scale
+            canvasHeight * node.scale
         )
         node.requiredRedraw = false;
         context.restore();

index.js

@@ -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,
+        left: 10,
-        right: 2,
+        right: 10,
-        top: 2,
+        top: 10,
-        bottom: 2
+        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);
+    let offscreen = new CanvasBuffer(area.width - 8, area.height - 8);
-    offscreen.writeTo(ctx, 0, 0, area.width, area.height, 4, 4, area.width, area.height);
+    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)=>{

index.ts

@@ -7,10 +7,10 @@ container.handleDrawBefore(function(){
     this.width = 400;
     this.height = 400;
     this.padding = {
-        left: 2,
+        left: 10,
-        right: 2,
+        right: 10,
-        top: 2,
+        top: 10,
-        bottom: 2
+        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