diff --git a/demo/index.ts b/demo/index.ts index ef40e3af..432ed215 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -5,4 +5,5 @@ export default [ 'src/ScrollerDemo', 'src/SliderDemo', 'src/LayoutDemo', + 'src/EffectsDemo', ] \ No newline at end of file diff --git a/demo/src/EffectsDemo.ts b/demo/src/EffectsDemo.ts new file mode 100644 index 00000000..630b2bcb --- /dev/null +++ b/demo/src/EffectsDemo.ts @@ -0,0 +1,378 @@ + +import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig } from "doric"; + +const colors = [ + "#70a1ff", + "#7bed9f", + "#ff6b81", + "#a4b0be", + "#f0932b", + "#eb4d4b", + "#6ab04c", + "#e056fd", + "#686de0", + "#30336b", +].map(e => Color.parse(e)) + +function box(idx = 0) { + return (new Stack).also(it => { + it.width = it.height = 20 + it.bgColor = colors[idx || 0] + }) +} + +function boxStr(str: string, idx = 0) { + return (new Text).also(it => { + it.width = it.height = 20 + it.text = str + it.textColor = Color.parse('#ffffff') + it.bgColor = colors[idx || 0] + }) +} + +function label(str: string) { + return text({ + text: str, + textSize: 16, + }) +} + +@Entry +class EffectsDemo extends Panel { + build(rootView: Group) { + scroller( + vlayout([ + hlayout([ + vlayout([ + label("Origin view"), + box().apply({ + width: 100, + height: 100 + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Border"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Corner"), + box().apply({ + width: 100, + height: 100, + corners: 10, + layoutConfig: layoutConfig().exactly().m({ + bottom: 10 + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Shadow"), + box().apply({ + width: 100, + height: 100, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + bottom: 10 + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + ]).apply({ space: 20 } as IHLayout), + hlayout([ + vlayout([ + label("Border,Corner"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + corners: 10, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Border,Shadow"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + bottom: 10 + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Corner,Shadow"), + box().apply({ + width: 100, + height: 100, + corners: 10, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + bottom: 10 + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Border,Corner,Shadow"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + corners: 10, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + ]).apply({ space: 20 } as IHLayout), + hlayout([ + vlayout([ + label("Shadow"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 0, + offsetY: 0, + radius: 10, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 10, + right: 10, + bottom: 10, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Shadow,offset"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 5, + offsetY: 5, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 10, + right: 10, + bottom: 10, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Shadow,opacity"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 0.5, + color: colors[1], + offsetX: 5, + offsetY: 5, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 10, + right: 10, + bottom: 10, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Shadow,color"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 1, + color: colors[2], + offsetX: 5, + offsetY: 5, + radius: 5, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 10, + right: 10, + bottom: 10, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + ]).apply({ space: 20 } as IHLayout), + hlayout([ + vlayout([ + label("Corner round"), + box().apply({ + width: 100, + height: 100, + corners: 50, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Corner left top"), + box().apply({ + width: 100, + height: 100, + corners: { + leftTop: 50, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Corner right top"), + box().apply({ + width: 100, + height: 100, + corners: { + rightTop: 50, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Corner left bottom"), + box().apply({ + width: 100, + height: 100, + corners: { + leftBottom: 50, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + vlayout([ + label("Corner right bottom"), + box().apply({ + width: 100, + height: 100, + corners: { + rightBottom: 50, + }, + layoutConfig: layoutConfig().exactly().m({ + left: 5, + right: 5, + bottom: 5, + }) + }),]).apply({ + gravity: gravity().center(), + space: 10, + } as IVLayout), + ]).apply({ space: 20 } as IHLayout), + ]).also(it => { + it.space = 20 + }), + ).also(it => { + it.layoutConfig = layoutConfig().wrap() + }).in(rootView) + } +} \ No newline at end of file diff --git a/demo/src/ListDemo.ts b/demo/src/ListDemo.ts index c4572d97..a0ccb61a 100644 --- a/demo/src/ListDemo.ts +++ b/demo/src/ListDemo.ts @@ -44,6 +44,7 @@ class ListPanel extends Panel { text({ textColor: Color.parse("#ffffff"), textSize: 20, + text: "", }).also(it => { counter = it it.layoutConfig = { diff --git a/demo/src/Snake.ts b/demo/src/Snake.ts index 6b438750..90d2da7d 100644 --- a/demo/src/Snake.ts +++ b/demo/src/Snake.ts @@ -281,6 +281,14 @@ class SnakeView extends ViewHolder { if (item === undefined) { item = new Stack item.width = item.height = 10 + item.corners = 5 + item.shadow = { + color: Color.GRAY, + opacity: 1, + radius: 3, + offsetX: 3, + offsetY: 3, + } this.panel.addChild(item) } if (index === nodes.length - 1) {