From fcb53d592e28e64d1d7b402126a4efc6e77c84b6 Mon Sep 17 00:00:00 2001
From: Rui-Sun <sunrui1992@foxmail.com>
Date: Fri, 7 Jul 2023 11:11:06 +0800
Subject: [PATCH] feat: add container background in custom-layout (#107)

---
 .../custom/{default.ts => custom-layout.ts}         |  6 +++++-
 packages/vtable/examples/menu.ts                    |  9 +++++++++
 packages/vtable/examples/style.css                  |  2 +-
 packages/vtable/src/render/layout/container.ts      | 13 +++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 rename packages/vtable/examples/custom/{default.ts => custom-layout.ts} (99%)

diff --git a/packages/vtable/examples/custom/default.ts b/packages/vtable/examples/custom/custom-layout.ts
similarity index 99%
rename from packages/vtable/examples/custom/default.ts
rename to packages/vtable/examples/custom/custom-layout.ts
index 02d5d2432..5da38bf0a 100644
--- a/packages/vtable/examples/custom/default.ts
+++ b/packages/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
index 5a43b966e..bb92e0893 100644
--- 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
index 424afa589..28698ee7d 100644
--- 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
index 51e36cce9..0376f47c2 100644
--- 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,