feat: add container background in custom-layout (#107)

VisActor · Jul 7, 2023 · fcb53d5 · fcb53d5
1 parent 734e7e9
commit fcb53d5
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/packages/vtable/examples/custom/default.ts → ...s/vtable/examples/custom/custom-layout.ts b/packages/vtable/examples/custom/default.ts → ...s/vtable/examples/custom/custom-layout.ts
@@ -78,7 +78,11 @@ export function createTable() {
             showBounds: false,
             direction: 'column',
             alignContent: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
+            background: {
+              fill: 'blue',
+              stroke: 'red'
+            }
           });
           container.add(containerLeft);
 

diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts
@@ -244,6 +244,15 @@ export const menus = [
       }
     ]
   },
+  {
+    menu: 'custom',
+    children: [
+      {
+        path: 'custom',
+        name: 'custom-layout'
+      }
+    ]
+  },
   {
     menu: '调试使用',
     children: [

diff --git a/packages/vtable/examples/style.css b/packages/vtable/examples/style.css
@@ -27,7 +27,7 @@ body p {
 }
 
 .container .sidebar {
-  width: 100px;
+  width: 200px;
   /* height: 100%; */
   border-right: 1px solid rgba(0, 0, 0, 0.06);
 }

diff --git a/packages/vtable/src/render/layout/container.ts b/packages/vtable/src/render/layout/container.ts
@@ -187,6 +187,19 @@ export class Container extends BaseElement {
     this.updateYAlign();
 
     const elements = [];
+    if (this.background && this.background.fill) {
+      const backgroundRect = new Rect({
+        width: this.width,
+        height: this.height,
+        stroke: this.background.stroke ?? false,
+        fill: this.background.fill,
+        cornerRadius: this.background.cornerRadius ?? 0,
+        lineWidth: this.background.lineWidth ?? 1
+      });
+      backgroundRect.x += this.x + parentPos.parentX;
+      backgroundRect.y += this.y + parentPos.parentY;
+      elements.push(backgroundRect);
+    }
     if (this.showBounds) {
       const boundsRect = new Rect({
         width: this.width,