tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:Gravity static memebers

Browse Source
This commit is contained in:
pengfei.zhou 2019-11-20 17:49:56 +08:00
parent d495043dc9
commit 748bac8bc1
5 changed files with 65 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/src/Counter.ts
View File

@ -13,7 +13,7 @@ class CounterView extends ViewHolder<CountModel> {
text({ text({
textSize: 40, textSize: 40,
layoutConfig: { layoutConfig: {
alignment: new Gravity().center(), alignment: Gravity.Center,
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.WRAP_CONTENT,
}, },
@ -27,7 +27,7 @@ class CounterView extends ViewHolder<CountModel> {
}, },
corners: 5, corners: 5,
layoutConfig: { layoutConfig: {
alignment: new Gravity().center(), alignment: Gravity.Center,
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.WRAP_CONTENT,
}, },
@ -43,9 +43,9 @@ class CounterView extends ViewHolder<CountModel> {
it.width = 200 it.width = 200
it.height = 200 it.height = 200
it.space = 20 it.space = 20
it.gravity = new Gravity().center() it.gravity = Gravity.Center
it.layoutConfig = { it.layoutConfig = {
alignment: new Gravity().center() alignment: Gravity.Center
} }
it.border = { it.border = {
width: 1, width: 1,

38
demo/src/EffectsDemo.ts
View File

@ -1,5 +1,5 @@
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig } from "doric"; import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, Gravity } from "doric";
import { colors } from "./utils"; import { colors } from "./utils";
@ -14,7 +14,7 @@ function boxStr(str: string, idx = 0) {
return (new Text).also(it => { return (new Text).also(it => {
it.width = it.height = 20 it.width = it.height = 20
it.text = str it.text = str
it.textColor = Color.parse('#ffffff') it.textColor = Color.WHITE
it.bgColor = colors[idx || 0] it.bgColor = colors[idx || 0]
}) })
} }
@ -38,7 +38,7 @@ class EffectsDemo extends Panel {
width: 100, width: 100,
height: 100 height: 100
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -56,7 +56,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -69,7 +69,7 @@ class EffectsDemo extends Panel {
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -88,7 +88,7 @@ class EffectsDemo extends Panel {
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
]).apply({ space: 20 } as IHLayout), ]).apply({ space: 20 } as IHLayout),
@ -109,7 +109,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -132,7 +132,7 @@ class EffectsDemo extends Panel {
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -152,7 +152,7 @@ class EffectsDemo extends Panel {
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -178,7 +178,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
]).apply({ space: 20 } as IHLayout), ]).apply({ space: 20 } as IHLayout),
@ -202,7 +202,7 @@ class EffectsDemo extends Panel {
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -224,7 +224,7 @@ class EffectsDemo extends Panel {
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -246,7 +246,7 @@ class EffectsDemo extends Panel {
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -268,7 +268,7 @@ class EffectsDemo extends Panel {
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
]).apply({ space: 20 } as IHLayout), ]).apply({ space: 20 } as IHLayout),
@ -285,7 +285,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -302,7 +302,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -319,7 +319,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -336,7 +336,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -353,7 +353,7 @@ class EffectsDemo extends Panel {
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),]).apply({
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), } as IVLayout),
]).apply({ space: 20 } as IHLayout), ]).apply({ space: 20 } as IHLayout),

4
demo/src/ModalDemo.ts
View File

@ -11,7 +11,7 @@ class ModalDemo extends Panel {
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[1], bgColor: colors[1],
textAlignment: gravity().center(), textAlignment: Gravity.Center,
height: 50, height: 50,
}), }),
label('toast'), label('toast'),
@ -28,7 +28,7 @@ class ModalDemo extends Panel {
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
gravity: gravity().center(), gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().atmost(),

48
js-framework/src/util/gravity.ts
View File

@ -37,45 +37,65 @@ export class Gravity implements Modeling {
val = 0 val = 0
left() { left() {
this.val |= LEFT const val = this.val | LEFT
return this const ret = new Gravity
ret.val = val
return ret
} }
right() { right() {
this.val |= RIGHT const val = this.val | RIGHT
return this const ret = new Gravity
ret.val = val
return ret
} }
top() { top() {
this.val |= TOP const val = this.val | TOP
return this const ret = new Gravity
ret.val = val
return ret
} }
bottom() { bottom() {
this.val |= BOTTOM const val = this.val | BOTTOM
return this const ret = new Gravity
ret.val = val
return ret
} }
center() { center() {
this.val |= CENTER const val = this.val | CENTER
return this const ret = new Gravity
ret.val = val
return ret
} }
centerX() { centerX() {
this.val |= CENTER_X const val = this.val | CENTER_X
return this const ret = new Gravity
ret.val = val
return ret
} }
centerY() { centerY() {
this.val |= CENTER_Y const val = this.val | CENTER_Y
return this const ret = new Gravity
ret.val = val
return ret
} }
toModel() { toModel() {
return this.val return this.val
} }
private static origin = new Gravity
static Center = Gravity.origin.center()
static Left = Gravity.origin.left()
static Right = Gravity.origin.right()
static Top = Gravity.origin.top()
static Bottom = Gravity.origin.bottom()
} }
export function gravity() { export function gravity() {
return new Gravity return new Gravity

8
js-framework/src/util/modal.ts
View File

@ -1,11 +1,15 @@
import { BridgeContext } from "../runtime/global"; import { BridgeContext } from "../runtime/global";
import { Gravity } from "./gravity";
export function modal(context: BridgeContext) { export function modal(context: BridgeContext) {
return { return {
toast: (msg: string) => { toast: (msg: string, gravity: Gravity = Gravity.Bottom) => {
context.modal.toast({ msg }) context.modal.toast({
msg,
gravity: gravity.toModel(),
})
}, },
} }
} }