js:change apis of declarable

This commit is contained in:
pengfei.zhou
2020-01-04 19:13:15 +08:00
committed by osborn
parent ce4f9203f2
commit 3b82935b24
20 changed files with 478 additions and 203 deletions

View File

@@ -1,37 +1,40 @@
import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack} from "doric";
import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack, text } from "doric";
import { title } from "./utils";
@Entry
class DraggableDemo extends Panel {
build(root: Group) {
let text = (new Text).also(it => {
it.layoutConfig = layoutConfig().just().configAlignment(Gravity.Center)
it.width = 100
it.height = 30
it.textColor = Color.parse('#ff0000')
it.onClick = () => {
modal(context).toast('Clicked')
}
})
let drag: Draggable
drag = draggable({
onDrag: (x: number, y: number) => {
text.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
}
}, [ text ]).apply({
layoutConfig: layoutConfig().just(),
width: 100,
height: 100,
backgroundColor: Color.WHITE
})
vlayout([
title("Draggable Demo"),
stack([
drag,
]).apply({
layoutConfig: layoutConfig().most()
let textView: Text
let drag = draggable(
textView = text({
layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
width: 100,
height: 30,
textColor: Color.RED,
onClick: () => {
modal(context).toast('Clicked')
}
}),
{
onDrag: (x: number, y: number) => {
textView.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
},
layoutConfig: layoutConfig().just(),
width: 100,
height: 100,
backgroundColor: Color.WHITE
})
])
.apply({
vlayout(
[
title("Draggable Demo"),
stack(
[
drag,
],
{
layoutConfig: layoutConfig().most()
})
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.BLACK
})

View File

@@ -99,66 +99,74 @@ class LayoutDemo extends Panel {
it.gravity = gravity().center()
}),
label("Horizontal Layout(Weight)"),
hlayout([
boxStr('weight=1', 3).apply({
hlayout(
[
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
box(2),
box(4),
],
{
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
}),
box(2),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IHLayout),
hlayout([
box(3),
boxStr('weight=1', 2).apply({
hlayout(
[
box(3),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
box(4),
],
{
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IHLayout),
hlayout([
box(3),
box(2),
boxStr('weight=1', 4).apply({
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
}
),
hlayout(
[
box(3),
box(2),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
],
{
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IHLayout),
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
}
),
hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
@@ -175,16 +183,18 @@ class LayoutDemo extends Panel {
}
}),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IHLayout),
],
{
width: 200,
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
}
),
hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {