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

rename dir

Browse Source
This commit is contained in:
pengfei.zhou
2019-12-21 22:07:15 +08:00
parent c76274b762
commit 5fcba0a28b
34 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
doric-demo/src/AnimatorDemo.ts Normal file
View File

@@ -0,0 +1,185 @@
import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode } from "doric";
import { title, colors, box } from "./utils";
function thisLabel(str: string) {
return text({
text: str,
width: 60,
height: 50,
backgroundColor: colors[0],
textSize: 15,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
})
}
@Entry
class AnimatorDemo extends Panel {
build(rootView: Group): void {
const view = box(2)
view.onClick = () => {
modal(context).toast('Clicked')
}
const view2 = box(3)
let idx = 0
vlayout([
title("Animator Demo"),
vlayout(
[
hlayout([
thisLabel('Reset').apply({
onClick: () => {
animate(context)({
animations: () => {
view.width = view.height = 20
view.x = view.y = 0
view.rotation = 0
view.backgroundColor = colors[2]
view.corners = 0
view.scaleX = 1
view.scaleY = 1
view.translationX = 0
view.translationY = 0
view.rotation = 0
},
duration: 1500,
}).then(() => {
modal(context).toast('Fininshed')
}).catch(e => {
modal(context).toast(`${e}`)
})
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('X').apply({
onClick: () => {
animate(context)({
animations: () => {
view.x = view.x || 0
view.x += 100
view2.x += 50
},
duration: 1000,
})
}
}),
thisLabel('Y').apply({
onClick: () => {
animate(context)({
animations: () => {
view.y = view.y || 0
view.y += 100
view2.y += 50
},
duration: 1000,
})
}
}),
thisLabel('Width').apply({
onClick: () => {
animate(context)({
animations: () => {
view.width += 100
},
duration: 1000,
})
}
}),
thisLabel('Height').apply({
onClick: () => {
animate(context)({
animations: () => {
view.height += 100
},
duration: 1000,
})
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('BgColor').apply({
onClick: () => {
animate(context)({
animations: () => {
view.backgroundColor = colors[(idx++) % colors.length]
},
duration: 1000,
});
}
}),
thisLabel('Rotation').apply({
onClick: () => {
animate(context)({
animations: () => {
if (view.rotation) {
view.rotation += 0.5
} else {
view.rotation = 0.5
}
},
duration: 1000,
});
}
}),
thisLabel('Corner').apply({
onClick: () => {
animate(context)({
animations: () => {
if (typeof view.corners === 'number') {
view.corners += 10
} else {
view.corners = 10
}
},
duration: 1000,
});
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('scaleX').apply({
onClick: () => {
animate(context)({
animations: () => {
if (view.scaleX) {
view.scaleX += 0.1
} else {
view.scaleX = 1.1
}
},
duration: 1000,
});
}
}),
thisLabel('scaleY').apply({
onClick: () => {
animate(context)({
animations: () => {
if (view.scaleY) {
view.scaleY += 0.1
} else {
view.scaleY = 1.1
}
},
duration: 1000,
});
}
}),
]).apply({ space: 10 } as IHLayout),
]
).apply({ space: 10 } as IVLayout),
stack([
view,
]).apply({
layoutConfig: layoutConfig().most(),
backgroundColor: colors[1].alpha(0.3 * 255),
}),
]).apply({
layoutConfig: layoutConfig().most(),
gravity: gravity().center(),
space: 10,
} as IVLayout).in(rootView)
}
}

202
doric-demo/src/ComplicatedAnimations.ts Normal file
View File

@@ -0,0 +1,202 @@
import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode, TimingFunction } from "doric";
import { title, colors, box } from "./utils";
function thisLabel(str: string) {
return text({
text: str,
width: 80,
height: 30,
backgroundColor: colors[0],
textSize: 10,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
})
}
@Entry
class AnimationDemo extends Panel {
build(rootView: Group): void {
const view = box(2)
const view2 = box(3)
view.onClick = () => {
modal(context).toast('Clicked')
}
vlayout([
title("Complicated Animation"),
vlayout(
[
hlayout([
thisLabel('reset').apply({
onClick: () => {
const rotation = new RotationAnimation
rotation.duration = 1000
rotation.fromRotation = view.rotation || 0
rotation.toRotation = 0
const translation = new TranslationAnimation
translation.duration = 1000
translation.fromTranslationX = view.translationX || 0
translation.toTranslationX = 0
translation.fromTranslationY = view.translationY || 0
translation.toTranslationY = 0
const scale = new ScaleAnimation
scale.duration = 1000
scale.fromScaleX = view.scaleX || 1
scale.toScaleX = 1
scale.fromScaleY = view.scaleY || 1
scale.toScaleY = 1
const animationSet = new AnimationSet
animationSet.addAnimation(rotation)
animationSet.addAnimation(translation)
animationSet.addAnimation(scale)
view.doAnimation(context, animationSet).then(() => {
modal(context).toast('Resetd')
})
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('TranslationX').apply({
onClick: () => {
const animation = new TranslationAnimation
animation.duration = 1000
animation.fromTranslationX = view.translationX || 0
animation.toTranslationX = animation.fromTranslationX + 100
animation.fromTranslationY = view.translationY || 0
animation.toTranslationY = view.translationY || 0
view.doAnimation(context, animation)
}
}),
thisLabel('TranslationY').apply({
onClick: () => {
const animation = new TranslationAnimation
animation.duration = 1000
animation.fromTranslationX = view.translationX || 0
animation.toTranslationX = view.translationX || 0
animation.fromTranslationY = view.translationY || 0
animation.toTranslationY = animation.fromTranslationY + 100
view.doAnimation(context, animation)
}
}),
thisLabel('ScaleX').apply({
onClick: () => {
const animation = new ScaleAnimation
animation.duration = 1000
animation.fromScaleX = view.scaleX || 1
animation.toScaleX = animation.fromScaleX + 1
view.doAnimation(context, animation)
}
}),
thisLabel('ScaleY').apply({
onClick: () => {
const animation = new ScaleAnimation
animation.duration = 1000
animation.fromScaleY = view.scaleY || 1
animation.toScaleY = animation.fromScaleY + 1
view.doAnimation(context, animation)
}
}),
thisLabel('rotation').apply({
onClick: () => {
const animation = new RotationAnimation
animation.duration = 1000
animation.fromRotation = view.rotation || 0
animation.toRotation = animation.fromRotation + 0.25
view.doAnimation(context, animation)
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('group').apply({
onClick: () => {
const rotation = new RotationAnimation
rotation.duration = 1000
rotation.fromRotation = 0
rotation.toRotation = 4
const translation = new TranslationAnimation
translation.duration = 1000
translation.fromTranslationX = view.translationX || 0
translation.toTranslationX = 100
const animationSet = new AnimationSet
animationSet.addAnimation(rotation)
animationSet.addAnimation(translation)
view.doAnimation(context, animationSet)
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('Default').apply({
onClick: () => {
const translation = new TranslationAnimation
translation.duration = 3000
translation.fromTranslationX = 0
translation.toTranslationX = 300
translation.timingFunction = TimingFunction.Default
view.doAnimation(context, translation)
}
}),
thisLabel('Linear').apply({
onClick: () => {
const translation = new TranslationAnimation
translation.duration = 3000
translation.fromTranslationX = 0
translation.toTranslationX = 300
translation.timingFunction = TimingFunction.Linear
view.doAnimation(context, translation)
}
}),
thisLabel('EaseIn').apply({
onClick: () => {
const translation = new TranslationAnimation
translation.duration = 3000
translation.fromTranslationX = 0
translation.toTranslationX = 300
translation.timingFunction = TimingFunction.EaseIn
view.doAnimation(context, translation)
}
}),
thisLabel('EaseOut').apply({
onClick: () => {
const translation = new TranslationAnimation
translation.duration = 3000
translation.fromTranslationX = 0
translation.toTranslationX = 300
translation.timingFunction = TimingFunction.EaseOut
view.doAnimation(context, translation)
}
}),
thisLabel('EaseInEaseOut').apply({
onClick: () => {
const translation = new TranslationAnimation
translation.duration = 3000
translation.fromTranslationX = 0
translation.toTranslationX = 300
translation.timingFunction = TimingFunction.EaseInEaseOut
view.doAnimation(context, translation)
}
}),
]).apply({ space: 10 } as IHLayout),
]
).apply({ space: 10 } as IVLayout),
stack([
view.also(v => {
v.x = 20
v.y = 0
v.width = 30
v.left = 15
}),
view2.also(v => {
v.x = v.y = 20
v.y = 40
v.scaleX = 1.5
})
]).apply({
layoutConfig: layoutConfig().most(),
backgroundColor: colors[1].alpha(0.3 * 255),
}),
]).apply({
layoutConfig: layoutConfig().most(),
gravity: gravity().center(),
space: 10,
} as IVLayout).in(rootView)
}
}

59
doric-demo/src/ComplicatedDemo.ts Normal file
View File

@@ -0,0 +1,59 @@
import { Panel, Group, vlayout, image, layoutConfig, ScaleType, refreshable, Color, pullable, stack, Image, Refreshable, TranslationAnimation, loge, log, list, listItem, text } from "doric";
import { title, icon_refresh, colors } from "./utils";
@Entry
class MyDemo extends Panel {
build(root: Group) {
let refreshed: Refreshable
let headerImage: Image
stack([
refreshed = refreshable({
onRefresh: () => {
refreshed.setRefreshing(context, false)
},
header: pullable(
stack([]).apply({
backgroundColor: Color.RED,
layoutConfig: layoutConfig().just(),
width: 100,
height: 30,
}),
{
startAnimation: () => {
},
stopAnimation: () => {
},
setPullingDistance: (distance: number) => {
headerImage.scaleX = headerImage.scaleY = (headerImage.height + distance * 2) / headerImage.height
},
}),
content: list({
itemCount: 20,
renderItem: (idx) => {
return listItem(text({
text: `Item :${idx}`,
layoutConfig: layoutConfig().just(),
width: root.width,
height: 50,
textColor: Color.WHITE,
backgroundColor: colors[idx % colors.length],
}))
}
}).apply({
}),
}).apply({
layoutConfig: layoutConfig().most(),
}).also(v => {
v.top = 200
}),
headerImage = image({
imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
layoutConfig: layoutConfig().just(),
width: root.width,
height: 200,
scaleType: ScaleType.ScaleAspectFill,
}),
]).in(root)
}
}

120
doric-demo/src/Counter.ts Normal file
View File

@@ -0,0 +1,120 @@
import { text, vlayout, Image, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, log, logw, loge, Group, LayoutSpec, } from "doric"
interface CountModel {
count: number
}
class CounterView extends ViewHolder {
number!: Text
counter!: Text
build(root: Group) {
root.addChild(vlayout([
text({
textSize: 40,
layoutConfig: {
alignment: Gravity.Center,
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
}).also(it => { this.number = it }),
text({
text: "点击计数",
textSize: 20,
border: {
width: 1,
color: Color.parse('#000000'),
},
corners: 5,
layoutConfig: {
alignment: Gravity.Center,
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
shadow: {
color: Color.parse("#00ff00"),
opacity: 0.5,
radius: 20,
offsetX: 10,
offsetY: 10,
}
}).also(it => { this.counter = it }),
]).also(it => {
it.width = 200
it.height = 200
it.space = 20
it.gravity = Gravity.Center
it.layoutConfig = {
alignment: Gravity.Center
}
it.border = {
width: 1,
color: Color.parse("#000000"),
}
it.shadow = {
color: Color.parse("#ffff00"),
opacity: 0.5,
radius: 20,
offsetX: 10,
offsetY: 10,
}
it.corners = 20
it.backgroundColor = Color.parse('#ff00ff')
}))
root.addChild((new Image).also(iv => {
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png"
iv.layoutConfig = {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
}
}))
}
}
class CounterVM extends ViewModel<CountModel, CounterView> {
onAttached(s: CountModel, vh: CounterView) {
vh.counter.onClick = () => {
this.updateState(state => {
state.count++
})
}
}
onBind(s: CountModel, vh: CounterView) {
vh.number.text = `${s.count}`
}
}
@Entry
class MyPage extends VMPanel<CountModel, CounterView>{
getViewHolderClass() {
return CounterView
}
getViewModelClass() {
return CounterVM
}
getState(): CountModel {
return {
count: 0
}
}
@NativeCall
log() {
log("Hello.HEGO")
logw("Hello.HEGO")
loge("Hello.HEGO")
context.modal.toast('This is a toast.').then((r) => {
loge(r)
})
}
}

367
doric-demo/src/EffectsDemo.ts Normal file
View File

@@ -0,0 +1,367 @@
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, Gravity } from "doric";
import { colors } from "./utils";
function box(idx = 0) {
return (new Stack).also(it => {
it.width = it.height = 20
it.backgroundColor = 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.WHITE
it.backgroundColor = 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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().just().configMargin({
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().most()
}).in(rootView)
}
}

60
doric-demo/src/FlowLayoutDemo.ts Normal file
View File

@@ -0,0 +1,60 @@
import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem, text, Color, IFlowLayout, LayoutSpec, Gravity } from "doric";
import { colors, label } from "./utils";
const imageUrls = [
'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
]
@Entry
class FlowDemo extends Panel {
build(rootView: Group): void {
flowlayout({
layoutConfig: layoutConfig().most(),
itemCount: 100,
columnCount: 3,
columnSpace: 10,
rowSpace: 10,
renderItem: (idx) => {
return new FlowLayoutItem().apply({
backgroundColor: colors[idx % colors.length],
height: 50 + (idx % 3) * 20,
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}).also(it => {
it.addChild(text({
text: `${idx}`,
textColor: Color.WHITE,
textSize: 20,
layoutConfig: layoutConfig().fit().configAligmnet(Gravity.Center)
}))
})
},
}).also(it => {
it.loadMore = true
it.onLoadMore = () => {
setTimeout(() => {
it.itemCount += 20
}, 1000)
}
it.loadMoreView = new FlowLayoutItem().apply({
backgroundColor: colors[500 % colors.length],
height: 50,
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}).also(it => {
it.addChild(text({
text: 'load more',
textColor: Color.WHITE,
textSize: 20,
layoutConfig: layoutConfig().fit().configAligmnet(Gravity.Center)
}))
})
})
.in(rootView)
}
}

677
doric-demo/src/Gobang.ts Normal file
View File

@@ -0,0 +1,677 @@
import { Stack, hlayout, Group, Color, stack, layoutConfig, LayoutSpec, vlayout, IVLayout, Text, ViewHolder, ViewModel, VMPanel, scroller, modal, text, gravity, Gravity, IHLayout, takeNonNull, View, log, popover } from "doric";
import { colors } from "./utils";
enum State {
Unspecified,
BLACK,
WHITE,
}
const count = 13
class AIComputer {
wins: Array<Array<{ x: number, y: number }>> = []
winCount = 0
matrix: Map<number, State>
constructor(matrix: Map<number, State>) {
this.matrix = matrix
for (let y = 0; y < count; y++) {
for (let x = 0; x < count - 4; x++) {
this.wins.push([])
for (let k = 0; k < 5; k++) {
this.wins[this.winCount].push({
x: x + k,
y,
})
}
this.winCount++;
}
}
for (let x = 0; x < count; x++) {
for (let y = 0; y < count - 4; y++) {
this.wins.push([])
for (let k = 0; k < 5; k++) {
this.wins[this.winCount].push({
x,
y: y + k,
})
}
this.winCount++;
}
}
for (let x = 0; x < count - 4; x++) {
for (let y = 0; y < count - 4; y++) {
this.wins.push([])
for (let k = 0; k < 5; k++) {
this.wins[this.winCount].push({
x: x + k,
y: y + k,
})
}
this.winCount++;
}
}
for (let x = 0; x < count - 4; x++) {
for (let y = count - 1; y > 3; y--) {
this.wins.push([])
for (let k = 0; k < 5; k++) {
this.wins[this.winCount].push({
x: x + k,
y: y - k,
})
}
this.winCount++;
}
}
}
get blackWins() {
return this.wins.map((win) => {
let idx = 0
for (let e of win) {
switch (this.matrix.get(e.x + e.y * count)) {
case State.BLACK:
idx++
break
case State.WHITE:
return 0
default:
break
}
}
return idx
})
}
get whiteWins() {
return this.wins.map((win) => {
let idx = 0
for (let e of win) {
switch (this.matrix.get(e.x + e.y * count)) {
case State.WHITE:
idx++
break
case State.BLACK:
return 0
default:
break
}
}
return idx
})
}
compute(matrix: State[], role: State.BLACK | State.WHITE) {
const myScore = new Array(matrix.length).fill(0)
const rivalScore = new Array(matrix.length).fill(0)
const myWins = role === State.BLACK ? this.blackWins : this.whiteWins
const rivalWins = role === State.BLACK ? this.whiteWins : this.blackWins
let max = 0
let retIdx = 0
matrix.forEach((state, idx) => {
if (state != State.Unspecified) {
return
}
this.wins.forEach((e, winIdx) => {
if (e.filter(e => (e.x + e.y * count) === idx).length === 0) {
return
}
switch (rivalWins[winIdx]) {
case 1:
rivalScore[idx] += 1
break
case 2:
rivalScore[idx] += 10
break
case 3:
rivalScore[idx] += 100
break
case 4:
rivalScore[idx] += 10000
break
default:
break
}
switch (myWins[winIdx]) {
case 1:
myScore[idx] += 2
break
case 2:
myScore[idx] += 20
break
case 3:
myScore[idx] += 200
break
case 4:
myScore[idx] += 20000
break
default:
break
}
})
if (rivalScore[idx] > max) {
max = rivalScore[idx];
retIdx = idx
} else if (rivalScore[idx] == max) {
if (myScore[idx] > myScore[retIdx]) {
retIdx = idx
}
}
if (myScore[idx] > max) {
max = myScore[idx]
retIdx = idx
} else if (myScore[idx] == max) {
if (rivalScore[idx] > rivalScore[retIdx]) {
retIdx = idx
}
}
})
return retIdx
}
}
const lineColor = Color.BLACK
function columLine() {
return (new Stack).apply({
layoutConfig: layoutConfig().most().configWidth(LayoutSpec.JUST),
width: 1,
backgroundColor: lineColor,
})
}
function rowLine() {
return (new Stack).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 1,
backgroundColor: lineColor,
})
}
function pointer(size: number) {
return (new Stack).apply({
layoutConfig: layoutConfig().just(),
width: size,
height: size,
})
}
enum GameMode {
P2P,
P2C,
C2P,
}
interface GoBangState {
count: number
gap: number
role: "white" | "black"
matrix: Map<number, State>
anchor?: number
gameMode: GameMode
gameState: "blackWin" | "whiteWin" | "idle"
}
class GoBangVH extends ViewHolder {
root!: Group
gap = 0
currentRole!: Text
result!: Text
targetZone: View[] = []
gameMode!: Text
assistant!: Text
build(root: Group): void {
this.root = root
}
actualBuild(state: GoBangState): void {
const boardSize = state.gap * (state.count - 1)
const gap = state.gap
const borderWidth = gap
this.gap = state.gap
scroller(
vlayout([
text({
text: "五子棋",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[0],
textAlignment: gravity().center(),
height: 50,
}),
stack([
stack([
...(new Array(count - 2)).fill(0).map((_, idx) => {
return columLine().also(v => {
v.left = (idx + 1) * gap
})
}),
...(new Array(count - 2)).fill(0).map((_, idx) => {
return rowLine().also(v => {
v.top = (idx + 1) * gap
})
}),
])
.apply({
layoutConfig: layoutConfig().just()
.configMargin({ top: borderWidth, left: borderWidth }),
width: boardSize,
height: boardSize,
border: {
width: 1,
color: lineColor,
},
}),
...this.targetZone = (new Array(count * count)).fill(0).map((_, idx) => {
const row = Math.floor(idx / count)
const colum = idx % count
return pointer(gap).also(v => {
v.top = (row - 0.5) * gap + borderWidth
v.left = (colum - 0.5) * gap + borderWidth
})
}),
]).apply({
layoutConfig: layoutConfig().just(),
width: boardSize + 2 * borderWidth,
height: boardSize + 2 * borderWidth,
backgroundColor: Color.parse("#E6B080"),
}),
this.gameMode = text({
text: "游戏模式",
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 50,
backgroundColor: colors[8],
}),
hlayout([
this.currentRole = text({
text: "当前:",
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configWeight(1),
height: 50,
backgroundColor: colors[1],
}),
this.result = text({
text: "获胜方:",
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configWeight(1),
height: 50,
backgroundColor: colors[2],
}),
]).apply({
layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
} as IHLayout),
this.assistant = text({
text: "提示",
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
height: 50,
backgroundColor: colors[3],
}),
])
.apply({
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse('#ecf0f1'),
} as IVLayout)
).in(this.root)
}
}
class GoBangVM extends ViewModel<GoBangState, GoBangVH>{
computer!: AIComputer
onAttached(state: GoBangState, vh: GoBangVH) {
if (!this.computer) {
this.computer = new AIComputer(state.matrix)
}
vh.actualBuild(state)
vh.targetZone.forEach((e, idx) => {
e.onClick = () => {
if (state.gameState !== 'idle') {
return
}
const zoneState = state.matrix.get(idx)
if (zoneState === State.BLACK || zoneState === State.WHITE) {
modal(context).toast('This position had been token.')
return
}
if (state.anchor === undefined || state.anchor != idx) {
this.updateState(it => {
it.anchor = idx
})
} else {
this.updateState(it => {
if (it.role === 'black') {
it.matrix.set(idx, State.BLACK)
it.role = 'white'
} else {
it.matrix.set(idx, State.WHITE)
it.role = 'black'
}
it.anchor = undefined
if (this.checkResult(idx)) {
modal(context).toast(`恭喜获胜方${it.role === 'white' ? "黑方" : "白方"}`)
it.gameState = it.role === 'white' ? 'blackWin' : 'whiteWin'
} else {
if (it.role === 'black' && it.gameMode === GameMode.C2P) {
setTimeout(() => {
this.computeNextStep(it)
}, 0)
} else if (it.role === 'white' && it.gameMode === GameMode.P2C) {
setTimeout(() => {
this.computeNextStep(it)
}, 0)
}
}
})
}
}
})
vh.gameMode.onClick = () => {
popover(context).show(vlayout([
...[
{
label: "黑方:人 白方:人",
mode: GameMode.P2P,
},
{
label: "黑方:人 白方:机",
mode: GameMode.P2C,
},
{
label: "黑方:机 白方:人",
mode: GameMode.C2P,
},
].map((e) => text({
text: e.label,
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
height: 50,
width: 300,
backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'),
onClick: () => {
this.updateState(s => {
s.gameMode = e.mode
this.reset(s)
})
popover(context).dismiss()
},
}))
])
.apply({
layoutConfig: layoutConfig().most(),
onClick: () => {
popover(context).dismiss()
},
gravity: Gravity.Center,
} as IVLayout)
)
}
vh.result.onClick = () => {
switch (state.gameState) {
case "idle":
this.updateState(state => {
this.reset(state)
})
break
case "blackWin":
case "whiteWin":
break
}
}
vh.currentRole.onClick = () => {
switch (state.gameState) {
case "idle":
break
case "blackWin":
case "whiteWin":
this.updateState(state => {
this.reset(state)
})
break
}
}
vh.assistant.onClick = () => {
const it = this.getState()
if (it.gameState !== 'idle') {
return
}
this.computeNextStep(it)
if (it.gameState !== 'idle') {
return
}
if (it.role === 'black' && it.gameMode === GameMode.C2P) {
setTimeout(() => {
this.computeNextStep(it)
}, 0)
} else if (it.role === 'white' && it.gameMode === GameMode.P2C) {
setTimeout(() => {
this.computeNextStep(it)
}, 0)
}
}
}
computeNextStep(it: GoBangState) {
const tempMatrix: State[] = new Array(count * count).fill(0).map((_, idx) => {
return it.matrix.get(idx) || State.Unspecified
})
let idx = 0
do {
idx = this.computer.compute(tempMatrix, it.role === 'black' ? State.BLACK : State.WHITE)
} while (it.matrix.get(idx) === State.Unspecified)
this.updateState(state => {
state.matrix.set(idx, state.role === 'black' ? State.BLACK : State.WHITE)
state.role = state.role === 'black' ? 'white' : 'black'
if (this.checkResult(idx)) {
modal(context).toast(`恭喜获胜方${it.role === 'white' ? "黑方" : "白方"}`)
it.gameState = it.role === 'white' ? 'blackWin' : 'whiteWin'
}
})
}
reset(it: GoBangState) {
it.matrix.clear()
it.gameState = 'idle'
it.role = "black"
it.anchor = undefined
this.computer = new AIComputer(it.matrix)
if (it.gameMode === GameMode.C2P) {
const idx = Math.floor(Math.random() * count) * count + Math.floor(Math.random() * count)
it.matrix.set(idx, State.BLACK)
it.role = 'white'
}
}
onBind(state: GoBangState, vh: GoBangVH) {
vh.targetZone.forEach((v, idx) => {
const zoneState = state.matrix.get(idx)
switch (zoneState) {
case State.BLACK:
v.also(it => {
it.backgroundColor = Color.BLACK
it.corners = state.gap / 2
it.border = {
color: Color.TRANSPARENT,
width: 0,
}
})
break
case State.WHITE:
v.also(it => {
it.backgroundColor = Color.WHITE
it.corners = state.gap / 2
it.border = {
color: Color.TRANSPARENT,
width: 0,
}
})
break
default:
v.also(it => {
it.backgroundColor = Color.TRANSPARENT
it.corners = 0
it.border = {
color: Color.TRANSPARENT,
width: 0,
}
})
break
}
if (state.anchor === idx) {
v.also(it => {
it.backgroundColor = Color.RED.alpha(0.1)
it.corners = 0
it.border = {
color: Color.RED,
width: 1,
}
})
}
})
vh.gameMode.text = `游戏模式: 黑方 ${state.gameMode === GameMode.C2P ? "机" : "人"} 白方 ${state.gameMode === GameMode.P2C ? "机" : "人"}`
switch (state.gameState) {
case "idle":
vh.result.text = "重新开始"
vh.currentRole.text = `当前: ${(state.role === 'black') ? "黑方" : "白方"}`
break
case "blackWin":
vh.result.text = "黑方获胜"
vh.currentRole.text = "重新开始"
break
case "whiteWin":
vh.result.text = "白方获胜"
vh.currentRole.text = "重新开始"
break
}
}
checkResult(pos: number) {
const matrix = this.getState().matrix
const state = matrix.get(pos)
const y = Math.floor(pos / count)
const x = pos % count
const getState = (x: number, y: number) => matrix.get(y * count + x)
///Horitonzal
{
let left = x
while (left >= 1) {
if (getState(left - 1, y) === state) {
left -= 1
} else {
break
}
}
let right = x
while (right <= count - 2) {
if (getState(right + 1, y) === state) {
right += 1
} else {
break
}
}
if (right - left >= 4) {
return true
}
}
///Vertical
{
let top = y
while (top >= 1) {
if (getState(x, top - 1) === state) {
top -= 1
} else {
break
}
}
let bottom = y
while (bottom <= count - 2) {
if (getState(x, bottom + 1) === state) {
bottom += 1
} else {
break
}
}
if (bottom - top >= 4) {
return true
}
}
///LT-RB
{
let startX = x, startY = y
while (startX >= 1 && startY >= 1) {
if (getState(startX - 1, startY - 1) === state) {
startX -= 1
startY -= 1
} else {
break
}
}
let endX = x, endY = y
while (endX <= count - 2 && endY <= count - 2) {
if (getState(endX + 1, endY + 1) === state) {
endX += 1
endY += 1
} else {
break
}
}
if (endX - startX >= 4) {
return true
}
}
///LB-RT
{
let startX = x, startY = y
while (startX >= 1 && startY <= count + 2) {
if (getState(startX - 1, startY + 1) === state) {
startX -= 1
startY += 1
} else {
break
}
}
let endX = x, endY = y
while (endX <= count - 2 && endY >= 1) {
if (getState(endX + 1, endY - 1) === state) {
endX += 1
endY -= 1
} else {
break
}
}
if (endX - startX >= 4) {
return true
}
}
return false
}
}
@Entry
class Gobang extends VMPanel<GoBangState, GoBangVH> {
getViewModelClass() {
return GoBangVM
}
getState(): GoBangState {
return {
count,
gap: this.getRootView().width / 14,
role: "black",
matrix: new Map,
gameMode: GameMode.P2C,
gameState: "idle"
}
}
getViewHolderClass() {
return GoBangVH
}
}

110
doric-demo/src/ImageDemo.ts Normal file
View File

@@ -0,0 +1,110 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, Image } from "doric";
import { colors, label } from "./utils";
import { img_base64 } from "./image_base64";
const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg'
@Entry
class ImageDemo extends Panel {
build(rootView: Group): void {
let imageView: Image
scroller(vlayout([
text({
text: "Image Demo",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[5],
textAlignment: gravity().center(),
height: 50,
}),
label('Gif'),
image({
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
scaleType: ScaleType.ScaleToFill,
loadCallback: function (ret) {
log('this')
log('loadCallback', ret)
}
}),
label('APNG'),
image({
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
loadCallback: (ret) => {
}
}),
label('Animated WebP'),
image({
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
loadCallback: (ret) => {
}
}),
label('WebP'),
imageView = image({
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
loadCallback: (ret) => {
if (ret) {
imageView.width = ret.width
imageView.height = ret.height
}
}
}),
label('ScaleToFill'),
image({
imageUrl,
width: 300,
height: 300,
isBlur: true,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(),
loadCallback: (ret) => {
}
}),
label('ScaleAspectFit'),
image({
imageUrl,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFit,
layoutConfig: layoutConfig().just(),
}),
label('ScaleAspectFill'),
image({
imageUrl,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
label('ImageBase64'),
image({
imageBase64: img_base64,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(rootView)
}
}

47
doric-demo/src/InputDemo.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log } from "doric";
import { title, colors } from "./utils";
@Entry
class InputDemo extends Panel {
build(root: Group) {
scroller(
vlayout([
title("Input Demo"),
(new Input).also(it => {
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
it.width = 300
it.multiline = false
it.hintText = "HintText"
it.textAlignment = Gravity.Left
it.onTextChange = (s) => {
log(`onTextChange:${s}`)
}
it.onFocusChange = (f) => {
log(`onFocusChange:${f}`)
}
}),
(new Input).also(it => {
it.layoutConfig = layoutConfig().fit()
it.hintText = "HintText"
it.hintTextColor = colors[2]
it.textAlignment = Gravity.Left
it.textColor = colors[3]
it.onTextChange = (s) => {
log(`onTextChange:${s}`)
}
it.onFocusChange = (f) => {
log(`onFocusChange:${f}`)
}
it.backgroundColor = colors[1].alpha(0.3)
}),
])
.also(it => {
it.space = 10
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
}))
.apply({
layoutConfig: layoutConfig().most()
})
.in(root)
}
}

459
doric-demo/src/LayoutDemo.ts Normal file
View File

@@ -0,0 +1,459 @@
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout, layoutConfig } from "doric";
const colors = [
"#f0932b",
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
]
function box(idx = 0) {
return (new Stack).also(it => {
it.width = it.height = 20
it.backgroundColor = Color.parse(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.backgroundColor = Color.parse(colors[idx || 0])
})
}
function label(str: string) {
return text({
text: str,
textSize: 16,
})
}
@Entry
class LayoutDemo extends Panel {
build(rootView: Group) {
scroller(
hlayout([
vlayout([
label("Horizontal Layout(Align to Top)"),
hlayout([
box().apply({
height: 20
}),
box().apply({
height: 40
}),
box().apply({
height: 60
}),
box().apply({
height: 40
}),
box().apply({
height: 20
}),
]).also(it => {
it.space = 20
}),
label("Horizontal Layout(Align to Bottom)"),
hlayout([
box().apply({
height: 20
}),
box().apply({
height: 40
}),
box().apply({
height: 60
}),
box().apply({
height: 40
}),
box().apply({
height: 20
}),
]).also(it => {
it.space = 20
it.gravity = gravity().bottom()
}),
label("Horizontal Layout(Align to Center)"),
hlayout([
box().apply({
height: 20
}),
box().apply({
height: 40
}),
box().apply({
height: 60
}),
box().apply({
height: 40
}),
box().apply({
height: 20
}),
]).also(it => {
it.space = 20
it.gravity = gravity().center()
}),
label("Horizontal Layout(Weight)"),
hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
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({
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({
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),
hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 2).apply({
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([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 4).apply({
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),
]).also(it => {
it.space = 20
it.gravity = gravity().center()
}),
vlayout([
label("Vertical Layout(Algin to Left)"),
vlayout([
box(1).apply({
width: 20
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 60
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 20
}),
]).apply({
space: 20
} as IVLayout),
label("Vertical Layout(Algin to Right)"),
vlayout([
box(1).apply({
width: 20
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 60
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 20
}),
]).apply({
space: 20,
gravity: gravity().right(),
} as IVLayout),
label("Vertical Layout(Algin to Center)"),
vlayout([
box(1).apply({
width: 20
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 60
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 20
}),
]).apply({
space: 20,
gravity: gravity().center(),
} as IVLayout),
label("Vertical Layout(Weight)"),
hlayout([
vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
},
}),
box(2).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IVLayout),
vlayout([
box(3).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IVLayout),
vlayout([
box(3).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
}),
box(2).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IVLayout),
vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IVLayout),
vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IVLayout),
]).also(it => {
it.space = 20
}),
]).also(it => {
it.space = 20
it.gravity = gravity().left()
})
]).also(it => {
it.space = 20
}),
).also(it => {
it.layoutConfig = layoutConfig().most()
})
.in(rootView)
}
}

125
doric-demo/src/ListDemo.ts Normal file
View File

@@ -0,0 +1,125 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, refreshable, Refreshable, ListItem, layoutConfig } from "doric";
import { rotatedArrow, colors } from "./utils";
@Entry
class ListPanel extends Panel {
build(rootView: Group): void {
let refreshView: Refreshable
let offset = Math.ceil(Math.random() * colors.length)
vlayout([
text({
text: "ListDemo",
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
textSize: 30,
textColor: Color.parse("#535c68"),
backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}),
refreshView = refreshable({
onRefresh: () => {
refreshView.setRefreshing(context, false).then(() => {
(refreshView.content as List).also(it => {
it.reset()
offset = Math.ceil(Math.random() * colors.length)
it.itemCount = 40
it.loadMore = true
it.onLoadMore = () => {
setTimeout(() => {
it.itemCount += 10
}, 1000)
}
it.loadMoreView = listItem(text({
text: "Loading",
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAligmnet(Gravity.Center),
height: 50,
}))
it.renderItem = (idx: number) => {
let counter!: Text
return listItem(
hlayout([
text({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.JUST,
alignment: gravity().center(),
},
text: `Cell At Line ${idx}`,
textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"),
textSize: 20,
height: 50,
}),
text({
textColor: Color.parse("#ffffff"),
textSize: 20,
text: "",
}).also(it => {
counter = it
it.layoutConfig = {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
margin: {
left: 10,
}
}
})
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
margin: {
bottom: 2,
}
}
it.gravity = gravity().center()
it.backgroundColor = colors[(idx + offset) % colors.length]
let clicked = 0
it.onClick = () => {
counter.text = `Item Clicked ${++clicked}`
}
})
).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
}
it.onClick = () => {
log(`Click item at ${idx}`)
it.height += 10
it.nativeChannel(context, "getWidth")().then(
resolve => {
log(`resolve,${resolve}`)
},
reject => {
log(`reject,${reject}`)
})
}
})
}
})
})
},
header: rotatedArrow(),
content: list({
itemCount: 0,
renderItem: () => new ListItem,
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.MOST,
},
}),
}),
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.MOST,
}
it.backgroundColor = Color.WHITE
}).in(rootView)
refreshView.backgroundColor = Color.YELLOW
}
}

150
doric-demo/src/ModalDemo.ts Normal file
View File

@@ -0,0 +1,150 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, IText, modal } from "doric";
import { colors, label } from "./utils";
@Entry
class ModalDemo extends Panel {
build(rootView: Group): void {
scroller(vlayout([
text({
text: "Modal",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[1],
textAlignment: Gravity.Center,
height: 50,
}),
label('toast on bottom'),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
modal(context).toast('This is a toast.')
}
} as IText),
label('toast on top'),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
modal(context).toast('This is a toast.', Gravity.Top)
}
} as IText),
label('toast on center'),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
modal(context).toast('This is a toast.', Gravity.Center)
}
} as IText),
text({
text: "Alert",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[2],
textAlignment: Gravity.Center,
height: 50,
}),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
modal(context).alert({
msg: 'This is alert.',
title: 'Alert title',
okLabel: "OkLabel"
}).then(e => {
modal(context).toast('Clicked OK.')
})
}
} as IText),
text({
text: "Confirm",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[3],
textAlignment: Gravity.Center,
height: 50,
}),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
modal(context).confirm({
msg: 'This is Confirm.',
title: 'Confirm title',
okLabel: "OkLabel",
cancelLabel: 'CancelLabel',
}).then(
() => {
modal(context).toast('Clicked OK.')
},
() => {
modal(context).toast('Clicked Cancel.')
})
}
} as IText),
text({
text: "Prompt",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[4],
textAlignment: Gravity.Center,
height: 50,
}),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
modal(context).prompt({
msg: 'This is Prompt.',
title: 'Prompt title',
okLabel: "OkLabel",
cancelLabel: 'CancelLabel',
}).then(
e => {
modal(context).toast(`Clicked OK.Input:${e}`)
},
e => {
modal(context).toast(`Clicked Cancel.Input:${e}`)
})
}
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: Gravity.Center,
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(rootView)
}
}

84
doric-demo/src/NavbarDemo.ts Normal file
View File

@@ -0,0 +1,84 @@
import { Group, Panel, navbar, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator } from "doric";
import { title, label, colors } from "./utils";
@Entry
class NavbarDemo extends Panel {
build(rootView: Group): void {
scroller(vlayout([
title("Navbar Demo"),
label('isHidden').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
modal(context).alert(e)
})
}
} as IText),
label('setHidden').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navbar(context).isHidden()
.then(e => navbar(context).setHidden(!e))
.catch(e => {
modal(context).alert(e)
})
}
} as IText),
label('setTitle').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navbar(context).setTitle('Setted Title')
.catch(e => {
modal(context).alert(e)
})
}
} as IText),
label('setBgColor').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navbar(context).setBgColor(Color.YELLOW)
.catch(e => {
modal(context).alert(e)
})
}
} as IText),
label('Pop').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navigator(context).pop()
}
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(rootView)
}
}

60
doric-demo/src/NavigatorDemo.ts Normal file
View File

@@ -0,0 +1,60 @@
import { Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, IVLayout, Group, IText, navigator, modal } from "doric";
import { colors, label } from "./utils";
@Entry
class NaivgatorDemo extends Panel {
build(root: Group) {
if (this.getInitData()) {
modal(context).alert(`Init Data :${JSON.stringify(this.getInitData())}`)
}
scroller(vlayout([
text({
text: "Navigator Demo",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[1],
textAlignment: gravity().center(),
height: 50,
}),
...[
'NavbarDemo',
'Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
'ListDemo', 'ModalDemo', 'NavigatorDemo',
'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e =>
label(e).apply({
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
onClick: () => {
navigator(context).push(`assets://demo/${e}.js`, {
alias: `${e}.js`,
extra: {
from: "navigatorDemo"
},
})
},
} as IText)
),
label('POP').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navigator(context).pop()
},
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(root)
}
}

34
doric-demo/src/NetworkDemo.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
import { title, label, colors } from "./utils";
@Entry
class NetworkDemo extends Panel {
build(rootView: Group): void {
scroller(vlayout([
title("Network Demo"),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
network(context).get('https://m.baidu.com').then(
e => {
modal(context).alert(JSON.stringify(e))
}
).catch(e => {
modal(context).toast('Catched:' + JSON.stringify(e))
})
}
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(rootView)
}
}

44
doric-demo/src/PopoverDemo.ts Normal file
View File

@@ -0,0 +1,44 @@
import { Group, Panel, popover, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
import { title, label, colors } from "./utils";
@Entry
class PopoverDemo extends Panel {
build(rootView: Group): void {
scroller(vlayout([
title("Popover Demo"),
label('Popover').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
popover(context).show(text({
width: 200,
height: 50,
backgroundColor: colors[0],
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configAligmnet(Gravity.Center),
text: "This is PopOver Window",
}).also(v => {
let idx = 0
v.onClick = () => {
v.backgroundColor = colors[(++idx) % colors.length]
}
modal(context).toast('Dismissed after 3 seconds')
setTimeout(() => {
popover(context).dismiss()
}, 3000)
}))
}
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(rootView)
}
}

95
doric-demo/src/RefreshableDemo.ts Normal file
View File

@@ -0,0 +1,95 @@
import { refreshable, Group, Panel, pullable, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator, stack, Image } from "doric";
import { title, label, colors, icon_refresh } from "./utils";
@Entry
class RefreshableDemo extends Panel {
build(rootView: Group): void {
let refreshImage: Image
let refreshView = refreshable({
layoutConfig: layoutConfig().most(),
onRefresh: () => {
log('onRefresh')
setTimeout(() => {
refreshView.setRefreshing(context, false)
}, 5000)
},
header: pullable(
stack([
image({
layoutConfig: layoutConfig().just().configMargin({ top: 50, bottom: 10, }),
width: 30,
height: 30,
imageBase64: icon_refresh,
}).also(v => {
refreshImage = v
}),
]),
{
startAnimation: () => {
log('startAnimation')
},
stopAnimation: () => {
log('stopAnimation')
},
setPullingDistance: (distance: number) => {
refreshImage.rotation = distance / 30
},
}),
content: (vlayout([
title("Refreshable Demo"),
label('start Refresh').apply({
width: 300,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
refreshView.setRefreshing(context, true)
}
} as IText),
label('stop Refresh').apply({
width: 300,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
refreshView.setRefreshing(context, false)
}
} as IText),
label('Enable Refresh').apply({
width: 300,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
refreshView.setRefreshable(context, true)
}
} as IText),
label('Disable Refresh').apply({
width: 300,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
refreshView.setRefreshable(context, false)
}
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().centerX(),
space: 10,
} as IVLayout))
}).apply({
backgroundColor: Color.YELLOW
}).in(rootView)
}
}

34
doric-demo/src/ScrollerDemo.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, scroller, layoutConfig } from "doric";
import { label } from "./utils";
@Entry
class ScrollerPanel extends Panel {
build(rootView: Group): void {
scroller(
vlayout([
scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
).apply({
layoutConfig: layoutConfig().just(),
width: 300,
height: 500,
backgroundColor: Color.RED,
}),
scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
).apply({
layoutConfig: layoutConfig().just(),
width: 300,
height: 500,
backgroundColor: Color.BLUE,
})
])
)
.apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 500,
backgroundColor: Color.YELLOW,
})
.in(rootView)
}
}

58
doric-demo/src/SliderDemo.ts Normal file
View File

@@ -0,0 +1,58 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, image, layoutConfig, ScaleType } from "doric";
import { colors } from "./utils";
const imageUrls = [
'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
]
@Entry
class SliderPanel extends Panel {
build(rootView: Group): void {
rootView.addChild(vlayout([
text({
text: "Gallery",
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[1],
textAlignment: gravity().center(),
height: 50,
}),
slider({
itemCount: 100,
renderPage: (idx) => {
return slideItem(image({
imageUrl: imageUrls[idx % imageUrls.length],
scaleType: ScaleType.ScaleAspectFit,
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST).configHeight(LayoutSpec.MOST).configAligmnet(gravity().center()),
})).also(it => {
let start = idx
it.onClick = () => {
it.backgroundColor = (colors[++start % colors.length])
}
})
},
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
weight: 1,
},
}),
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.MOST,
}
}))
}
}

371
doric-demo/src/Snake.ts Normal file
View File

@@ -0,0 +1,371 @@
import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull, stack } from "doric";
type SnakeNode = {
x: number
y: number
prev?: SnakeNode
next?: SnakeNode
}
enum Direction {
left = 0,
right = 1,
up = 2,
down = 3,
}
enum State {
idel,
run,
fail,
}
class SnakeModel {
state = State.idel
direction = Direction.right
width: number
height: number
constructor(w: number, h: number) {
this.width = w
this.height = h
}
food = { x: -1, y: -1 }
head: SnakeNode = {
x: 0,
y: 0,
}
refreshFood() {
this.food.x = Math.floor(Math.random() * (this.width - 1))
this.food.y = Math.floor(Math.random() * (this.height - 1))
}
get tail() {
let node = this.head
while (node.next !== undefined) {
node = node.next
}
return node
}
get score() {
let node = this.head
let n = 0
while (node.next !== undefined) {
n++
node = node.next
}
return n
}
forward(node: SnakeNode) {
switch (this.direction) {
case Direction.left:
node.x -= 1
break;
case Direction.right:
node.x += 1
break;
case Direction.up:
node.y -= 1
break;
case Direction.down:
node.y += 1
break;
}
}
step() {
if (this.state !== State.run) {
return
}
let tail = this.tail
while (tail.prev != undefined) {
tail.x = tail.prev.x
tail.y = tail.prev.y
tail = tail.prev
}
this.forward(this.head)
if (this.head.x < 0 || this.head.x >= this.width
|| this.head.y < 0 || this.head.y >= this.height) {
//If out of bound
loge('out of bound')
this.state = State.fail
} else if (this.head.x == this.food.x && this.head.y == this.food.y) {
//If eat food
let head: SnakeNode = { x: this.food.x, y: this.food.y }
log('eat food', head)
this.forward(head)
this.head.prev = head
head.next = this.head
this.head = head
this.refreshFood()
}
if (this.crashAtSelf()) {
//If crash at self
loge('crash at self')
this.state = State.fail
}
}
crashAtSelf() {
let cur = this.head.next
while (cur !== undefined) {
if (cur.x == this.head.x && cur.y == this.head.y) {
return true
}
cur = cur.next
}
return false
}
reset() {
this.direction = Direction.right
this.state = State.run
this.head.x = 0
this.head.y = 0
this.head.next = undefined
this.refreshFood()
}
}
class SnakeView extends ViewHolder {
panel!: Stack
start?: Text
up?: Text
down?: Text
left?: Text
right?: Text
build(root: Group): void {
root.backgroundColor = Color.parse('#000000')
vlayout([
text({
text: "Snake",
textSize: 20,
textColor: Color.parse("#ffffff"),
layoutConfig: {
alignment: new Gravity().centerX(),
margin: {
top: 20
},
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
}),
(new Stack).also(panel => {
panel.backgroundColor = Color.parse('#00ff00')
this.panel = panel
}),
hlayout([
text({
text: "Start",
textSize: 30,
textColor: Color.parse("#ffffff"),
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
}).also(it => this.start = it),
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
}
}),
vlayout([
hlayout([
text({
width: 50,
height: 50,
text: "↑",
textSize: 30,
textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
}).also(it => this.up = it)
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
}
}),
hlayout([
text({
width: 50,
height: 50,
text: "←",
textSize: 30,
textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
}).also(it => this.left = it),
text({
width: 50,
height: 50,
text: "↓",
textSize: 30,
textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
}).also(it => this.down = it),
text({
width: 50,
height: 50,
text: "→",
textSize: 30,
textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
}).also(it => this.right = it),
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
}
it.space = 10
}),
]).also(controlArea => {
controlArea.gravity = new Gravity().centerX()
controlArea.space = 10
controlArea.layoutConfig = {
alignment: new Gravity().centerX(),
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
}
}),
]).also(it => {
it.space = 20
it.layoutConfig = {
alignment: new Gravity().centerX().top(),
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.MOST,
}
it.gravity = new Gravity().centerX()
}).in(root)
}
bind(state: SnakeModel): void {
log('build', state)
this.panel.width = state.width * 10
this.panel.height = state.height * 10
let node: SnakeNode | undefined = state.head
let nodes: SnakeNode[] = []
while (node != undefined) {
nodes.push(node)
node = node.next
}
nodes.push(state.food)
nodes.forEach((e, index) => {
let item = this.panel.children[index]
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) {
item.backgroundColor = Color.parse('#ffff00')
} else {
item.backgroundColor = Color.parse('#ff0000')
}
item.x = e.x * 10
item.y = e.y * 10
})
if (nodes.length < this.panel.children.length) {
this.panel.children.length = nodes.length
}
}
}
class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
timerId?: any
start = () => {
if (this.timerId !== undefined) {
clearInterval(this.timerId)
}
this.updateState(it => it.reset())
this.timerId = setInterval(() => {
this.updateState(it => it.step())
if (this.getState().state === State.fail) {
loge('Game Over')
this.stop()
}
}, 500)
}
stop = () => {
if (this.timerId !== undefined) {
clearInterval(this.timerId)
this.timerId = undefined
}
}
left = () => {
this.updateState(it => it.direction = Direction.left)
}
right = () => {
this.updateState(it => it.direction = Direction.right)
}
up = () => {
this.updateState(it => it.direction = Direction.up)
}
down = () => {
this.updateState(it => it.direction = Direction.down)
}
onAttached(state: SnakeModel, v: SnakeView) {
takeNonNull(v.start)(it => it.onClick = this.start)
takeNonNull(v.left)(it => it.onClick = this.left)
takeNonNull(v.right)(it => it.onClick = this.right)
takeNonNull(v.up)(it => it.onClick = this.up)
takeNonNull(v.down)(it => it.onClick = this.down)
}
onBind(state: SnakeModel, v: SnakeView) {
v.bind(state)
}
}
@Entry
class SnakePanel extends VMPanel<SnakeModel, SnakeView>{
getViewModelClass() {
return SnakeVM
}
getState(): SnakeModel {
return new SnakeModel(35, 35)
}
getViewHolderClass() {
return SnakeView
}
}

131
doric-demo/src/StickDemo.ts Normal file
View File

@@ -0,0 +1,131 @@
import { Panel, Group, scroller, vlayout, image, layoutConfig, LayoutSpec, Input, Gravity, log, stack, hlayout, text, IHLayout, CENTER, slider, slideItem, modal, Slider, Text, Color, View, Stack, animate, flowlayout, FlowLayoutItem, NestedSlider, ScaleType } from "doric";
import { title, colors } from "./utils";
function tab(idx: number, title: string, sliderView: Slider) {
return text({
text: title,
layoutConfig: layoutConfig().just().configWeight(1),
height: 41,
onClick: () => {
sliderView.slidePage(context, 0, true)
},
})
}
@Entry
class StickDemo extends Panel {
private tabs!: Text[]
private indicator!: View
private sliderView!: NestedSlider
build(root: Group) {
this.indicator = new Stack
this.indicator.backgroundColor = colors[0]
this.indicator.width = 20
this.indicator.height = 2
scroller(
vlayout([
stack([
image({
layoutConfig: layoutConfig().most(),
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
scaleType: ScaleType.ScaleAspectFill,
}),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 200,
backgroundColor: colors[0],
}),
stack([
hlayout([
...this.tabs = [0, 1, 2].map(idx => {
return text({
text: `Tab ${idx}`,
layoutConfig: layoutConfig().just().configWeight(1),
height: 41,
onClick: () => {
this.sliderView.slidePage(context, idx, true)
},
})
})
]).apply({
layoutConfig: layoutConfig().most(),
gravity: Gravity.Center,
} as IHLayout),
this.indicator,
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 57,
}),
(new NestedSlider).also(v => {
this.sliderView = v;
v.onPageSlided = (idx) => {
this.refreshTabs(idx)
}
[0, 1, 2].map(idx => {
return flowlayout({
layoutConfig: layoutConfig().just(),
width: root.width,
height: root.height - 57,
itemCount: 100,
columnCount: 2,
columnSpace: 10,
rowSpace: 10,
renderItem: (itemIdx) => {
return new FlowLayoutItem().apply({
backgroundColor: colors[itemIdx % colors.length],
height: 50,
layoutConfig: layoutConfig().configWidth(LayoutSpec.JUST),
}).also(it => {
it.addChild(text({
text: `In Page ${idx},${itemIdx}`,
textColor: Color.WHITE,
textSize: 20,
layoutConfig: layoutConfig().fit().configAligmnet(Gravity.Center)
}).also(v => {
v.onClick = () => {
v.text = "Clicked"
}
}))
})
},
})
}).forEach(e => {
v.addSlideItem(e)
})
}).apply({
layoutConfig: layoutConfig().just(),
width: root.width,
height: root.height - 57,
}),
])
.also(it => {
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
}))
.apply({
layoutConfig: layoutConfig().most()
})
.in(root)
this.indicator.centerX = this.getRootView().width / this.tabs.length / 2
this.refreshTabs(0)
}
refreshTabs(page: number) {
this.tabs.forEach((e, idx) => {
if (idx == page) {
e.textColor = colors[0]
} else {
e.textColor = Color.BLACK
}
})
this.indicator.layoutConfig = layoutConfig().just().configAligmnet(Gravity.Bottom).configMargin({ bottom: 13 })
animate(context)({
animations: () => {
this.indicator.centerX = this.getRootView().width / this.tabs.length * (page + 0.5)
},
duration: 300,
})
}
}

93
doric-demo/src/StorageDemo.ts Normal file
View File

@@ -0,0 +1,93 @@
import { storage, Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, IVLayout, Group, IText, modal, Text, log, loge } from "doric";
import { colors, label } from "./utils";
const storedKey = 'StoredKey'
const zone = 'StorageDemo'
@Entry
class StorageDemo extends Panel {
stored!: Text
update() {
storage(context).getItem(storedKey, zone).then(e => {
this.stored.text = e || ""
log('Called in then')
})
}
build(root: Group) {
scroller(vlayout([
text({
text: "Storage Demo",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[1],
textAlignment: gravity().center(),
height: 50,
}),
label('Stored'),
text({
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 20,
textColor: Color.WHITE,
backgroundColor: colors[3],
textAlignment: gravity().center(),
height: 50,
}).also(it => this.stored = it),
label('store a value').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
storage(context).getItem(storedKey, zone).then(e => {
modal(context).prompt({
text: e,
title: "Please input text to store",
defaultText: "Default Value",
}).then(text => {
storage(context).setItem(storedKey, text, zone).then(() => {
this.update()
})
})
})
},
} as IText),
label('remove value').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
storage(context).remove(storedKey, zone).then(e => {
this.update()
})
},
} as IText),
label('clear values').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
storage(context).clear(zone).then(e => {
this.update()
})
},
} as IText),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().most(),
}).in(root)
this.update()
}
}

2
doric-demo/src/image_base64.ts Normal file
View File

File diff suppressed because one or more lines are too long

72
doric-demo/src/utils.ts Normal file
View File

File diff suppressed because one or more lines are too long