feat: row box and column box

dromara · May 14, 2024 · 707d425 · 707d425
1 parent 62daf84
commit 707d425
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 37 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -1,5 +1,4 @@
-/* eslint-disable no-console */
-import { CarEngine, Color, Shader, Text } from 'newcar'
+import { CarEngine, Color, Rect, Shader, Text } from 'newcar'
 import { Angle, Brace } from '@newcar/mod-geometry'
 import { BarChart, BubbleChart, ChartDataUnit, ChartUtil, LineChart, MixedChart, ScatterChart } from '@newcar/mod-chart'
 import { Markdown } from '@newcar/mod-markdown'
@@ -17,26 +16,19 @@ const engine = await new CarEngine().init(
 )
 
 export const scene1 = new nc.Scene(
-  new nc.Circle(100, {
+  new nc.Widget({
     style: {
-      border: true,
-      // fill: false,
-      borderShader: Shader.createLinearGradientShader([0, 0], [0, 200], [Color.parse('red'), Color.parse('blue')], null, 'repeat'),
-      fillShader: Shader.createLinearGradientShader([0, 0], [0, 200], [Color.parse('red'), Color.parse('blue')], null, 'repeat'),
+      margin: 100,
+      layout: 'row',
     },
-  }).animate(nc.stroke, 0, 30).on(nc.click, (w, x, y) => {
-    w.x = x
-    w.y = y
-  }).setup(function *(widget, animate) {
-    console.time()
-    yield 90
-    console.timeEnd()
-    widget.x = 100
-    widget.y = 100
-    yield animate(nc.move, 100, {
-      to: [300, 300],
-    }).setAsync()
-  }),
+  })
+    .add(
+      new nc.Circle(100, {
+        style: {
+          margin: 100,
+        },
+      }),
+    ),
 )
 
 export const scene2 = new nc.Scene(

diff --git a/packages/core/src/widget.ts b/packages/core/src/widget.ts
@@ -1,5 +1,5 @@
 import type { Canvas, CanvasKit } from 'canvaskit-wasm'
-import { type BlendMode, isNull } from '@newcar/utils'
+import { type BlendMode, isNull, isUndefined } from '@newcar/utils'
 import type { Animation, AnimationInstance } from './animation'
 import { deepClone } from './utils/deepClone'
 import type { AnimationTree } from './animationTree'
@@ -84,12 +84,13 @@ export class Widget {
     this.style.blendMode = options.style.blendMode ?? 'srcOver'
     this.style.antiAlias = options.style.antiAlias ?? true
     this.style.layout = options.style.layout ?? 'absolute'
-    this.style.margin = typeof options.style.margin === 'number'
-      ? [options.style.margin, options.style.margin, options.style.margin, options.style.margin]
-      : options.style.margin.length === 2
-        ? [options.style.margin[0], options.style.margin[0], options.style.margin[1], options.style.margin[1]]
-        : options.style.margin
-        ?? [0, 0, 0, 0]
+    this.style.margin = isUndefined(options.style.margin)
+      ? [0, 0, 0, 0]
+      : typeof options.style.margin === 'number'
+        ? [options.style.margin, options.style.margin, options.style.margin, options.style.margin]
+        : options.style.margin.length === 2
+          ? [options.style.margin[0], options.style.margin[0], options.style.margin[1], options.style.margin[1]]
+          : options.style.margin
   }
 
   /**
@@ -146,27 +147,35 @@ export class Widget {
       for (const plugin of this.plugins)
         plugin.onDraw(this, canvas)
     }
-    for (const child of this.children) {
-      switch (child.style.layout) {
-        case 'row':
-          // TODO: WIP
-          break
-        case 'column':
-          // TODO: WIP
-      }
-    }
   }
 
   /**
    * Add children widgets for the widget.
    * @param children The added children.
    */
   add(...children: Widget[]): this {
+    let index = 0
     for (const child of children) {
       child.parent = child
       this.children.push(child)
+      switch (this.style.layout) {
+        case 'row': {
+          if (index === 0)
+            child.x = child.x + (child.style.margin as [number, number, number, number])[2]
+          else
+            child.x = child.x + (this.children[index - 1].style.margin as [number, number, number, number])[3] + (child.style.margin as [number, number, number, number])[2]
+          break
+        }
+        case 'column': {
+          if (index === 0)
+            child.y = child.y + (child.style.margin as [number, number, number, number])[0]
+          else
+            child.y = child.y + (this.children[index - 1].style.margin as [number, number, number, number])[1] + (child.style.margin as [number, number, number, number])[0]
+          break
+        }
+      }
+      index += 1
     }
-
     return this
   }