trying to normalize the paddings...

Author: bandinopla

src/colors/Theme.ts

@@ -14,6 +14,7 @@ export class Theme {
     readonly fontSize = 12;
     readonly nodeRowHeight = 20;
     readonly nodeBorderRadius = 5;
+    readonly nodeMargin = 10;
 
     readonly selectionBoxColor = "white";
 

src/components/Button.ts

@@ -18,10 +18,11 @@ export class Button extends InteractiveLayoutElement
     override render(ctx: CanvasRenderingContext2D, maxWidth: number, maxHeight: number): void {
 
         //background
+        this.boxShadow(ctx, 2)
         this.roundedRect(ctx, 0,0, maxWidth, maxHeight, 2);
         ctx.fillStyle = Theme.config.btnBgColor;
         ctx.fill();  
-
+        this.boxShadow(ctx, 0)
         //text
         this.writeText(ctx, this.label, this.fontSize, maxWidth/2, maxHeight, Theme.config.btnTextColor, "center");
 

src/components/DraggableValue.ts

@@ -12,7 +12,7 @@ export class DraggableValue extends InteractiveLayoutElement {
     constructor( readonly name:string, readonly usesBar:boolean, readonly min:number, readonly max:number, protected step:number, protected onChange?:( value:number, percent:number )=>void )
     {
         super(); 
-        this.xPadding=10
+        //this.xPadding=10
         this.size = max-min;
     } 
 
@@ -61,6 +61,9 @@ export class DraggableValue extends InteractiveLayoutElement {
 
         ctx.restore();  
 
+        ctx.translate(5, 0);
+        maxWidth-= 10;
+        
         this.writeText( ctx, this.name, this.fontSize, this.xPadding, this.rowHeight,  Theme.config.barTextColor, "left");
         this.writeText( ctx, this.stringValue, this.fontSize, maxWidth-this.xPadding, this.rowHeight,  Theme.config.barTextColor, "right"); 
 

src/layout/Layout.ts

@@ -23,6 +23,7 @@ export type LayoutConfig = {
     width?:number,
     lineHeight?:number,
     bgColor?:FillStyle
+    xPadding?:number
 }
 
 export class Layout extends LayoutElement {
@@ -42,6 +43,8 @@ export class Layout extends LayoutElement {
             ...config
         };
 
+        this.xPadding = this.config.xPadding ?? 0;
+
         if( this.config.lineHeight )
         {
             this.rowHeight = this.config.lineHeight;

src/layout/LayoutElement.ts

@@ -9,6 +9,7 @@ export class LayoutElement extends CanvasElement {
     private _fontColor? :FillStyle;
     private _rowHeight? :number ;
     private _layout?:Layout;
+    private _xMargin?:number;
 
     /**
      * Used to return the height of this element to the layout. If true it will return the nodeRowHeight defined in the theme, else
@@ -49,6 +50,11 @@ export class LayoutElement extends CanvasElement {
     set rowHeight( rowHeight:number ) { this._rowHeight = rowHeight }
     get rowHeight() { return this._rowHeight ?? this._parent?.rowHeight ?? Theme.config.nodeRowHeight }
 
+    set xMargin( newxMargin:number ) { this._xMargin = newxMargin }
+    /**
+     * Side space. Custom or inherited by a parent...
+     */
+    get xMargin() { return this._xMargin ?? this._parent?.xMargin ?? 0 }
 
     /**
      * Return the size...
@@ -77,12 +83,14 @@ export class LayoutElement extends CanvasElement {
             ctx.fillRect(0,0,maxWidth, maxHeight);
         }
 
-        if( this.xPadding )
+        const xSpacing = this.xPadding  ;
+
+        if( xSpacing )
         {
-            ctx.translate(this.xPadding, 0)
+            ctx.translate(xSpacing, 0)
         }
 
-        this.renderContents( ctx, maxWidth-this.xPadding*2, maxHeight ); 
+        this.renderContents( ctx, maxWidth-xSpacing*2, maxHeight ); 
 
         this.boxShadow(ctx, 0);
     }

src/nodes/WinNode.ts

@@ -1,4 +1,4 @@
-import { FillStyle } from "../colors/Theme";
+import { FillStyle, Theme } from "../colors/Theme";
 import { HeaderElement } from "../components/Header";
 import { Layout } from "../layout/Layout";
 import { LayoutElement } from "../layout/LayoutElement";
@@ -21,7 +21,8 @@ export class WinNode extends Node {
 
             new Layout( childs, {
                 direction:"column",
-                gap: 5
+                gap: 5,
+                xPadding: Theme.config.nodeMargin
             })
 
         ], {

src/nodes/preview/ScenePreview.ts

@@ -16,7 +16,7 @@ export class ScenePreviewNode extends WinNode {
         const ambientLightSlider = new DraggableValue("Ambient light", true, 0, 3, 0.1, value =>this.onAmbientLightSlider(value) );
         const rotationSpeedSlider = new DraggableValue("Rotation speed", true, 0, 2, 0.1, value =>scene.rotationSpeed=value);
         const objType = new ComboBox("Wrapping mode", scene.meshes.map(m=>m.name), value=>scene.currentObjectIndex=value  );
-              objType.xPadding = 10;
+              //objType.xPadding = 10;
 
         const materialSlots = [
             new MaterialProperty(0),

src/properties/BaseColorProperty.ts

@@ -22,7 +22,7 @@ export class BaseColorProperty extends Input {
             justify:"space-between"
         }); 
 
-        this.xPadding = 10; 
+        //this.xPadding = 10; 
     } 
 
     override writeScript(script: Script): string {

src/properties/MaterialProperty.ts

@@ -10,7 +10,7 @@ export class MaterialProperty extends Input {
         this.layout = new Row([
             new TextLabel( `.material # ${index}  ` ),  
         ] ); 
-        this.xPadding = 10; 
+        //this.xPadding = 10; 
     }  
 
     getMaterial() {

src/properties/MaterialsToExport.ts

@@ -0,0 +1,12 @@
+import { TextLabel } from "../components/TextLabel";
+import { Row } from "../layout/Layout";
+import { Input } from "./Input";
+
+export class MaterialsToExport extends Input {
+    constructor() {
+        super(5);
+        this.layout = new Row([
+            new TextLabel("Materials used")
+        ])
+    }
+}