feat:add scroller node

This commit is contained in:
pengfei.zhou 2019-12-21 16:57:07 +08:00
parent 6f2fd39f2c
commit 2bdcc3535b
6 changed files with 585 additions and 324 deletions

762
dist/Counter.js vendored
View File

@ -8,337 +8,457 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var Direction;
(function (Direction) {
Direction[Direction["left"] = 0] = "left";
Direction[Direction["right"] = 1] = "right";
Direction[Direction["up"] = 2] = "up";
Direction[Direction["down"] = 3] = "down";
})(Direction || (Direction = {}));
var State;
(function (State) {
State[State["idel"] = 0] = "idel";
State[State["run"] = 1] = "run";
State[State["fail"] = 2] = "fail";
})(State || (State = {}));
class SnakeModel {
constructor(w, h) {
this.state = State.idel;
this.direction = Direction.right;
this.food = { x: -1, y: -1 };
this.head = {
x: 0,
y: 0,
};
this.width = w;
this.height = h;
}
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) {
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
doric.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 = { x: this.food.x, y: this.food.y };
doric.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
doric.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();
}
const colors = [
"#f0932b",
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
];
function box(idx = 0) {
return (new doric.Stack).also(it => {
it.width = it.height = 20;
it.backgroundColor = doric.Color.parse(colors[idx || 0]);
});
}
class SnakeView extends doric.ViewHolder {
build(root) {
root.backgroundColor = doric.Color.parse('#000000');
doric.vlayout([
doric.text({
text: "Snake",
textSize: 20,
textColor: doric.Color.parse("#ffffff"),
layoutConfig: {
alignment: new doric.Gravity().centerX(),
margin: {
top: 20
},
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
},
}),
(new doric.Stack).also(panel => {
panel.backgroundColor = doric.Color.parse('#00ff00');
this.panel = panel;
}),
doric.hlayout([
doric.text({
text: "Start",
textSize: 30,
textColor: doric.Color.parse("#ffffff"),
function boxStr(str, idx = 0) {
return (new doric.Text).also(it => {
it.width = it.height = 20;
it.text = str;
it.textColor = doric.Color.parse('#ffffff');
it.backgroundColor = doric.Color.parse(colors[idx || 0]);
});
}
function label(str) {
return doric.text({
text: str,
textSize: 16,
});
}
let LayoutDemo = class LayoutDemo extends doric.Panel {
build(rootView) {
doric.scroller(doric.hlayout([
doric.vlayout([
label("Horizontal Layout(Align to Top)"),
doric.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)"),
doric.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 = doric.gravity().bottom();
}),
label("Horizontal Layout(Align to Center)"),
doric.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 = doric.gravity().center();
}),
label("Horizontal Layout(Weight)"),
doric.hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(2),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
}).also(it => this.start = it),
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.hlayout([
box(3),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.hlayout([
box(3),
box(2),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
]).also(it => {
it.layoutConfig = {
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
};
it.space = 20;
it.gravity = doric.gravity().center();
}),
doric.vlayout([
doric.hlayout([
doric.text({
width: 50,
height: 50,
text: "↑",
textSize: 30,
textAlignment: new doric.Gravity().center(),
backgroundColor: doric.Color.parse('#ffff00'),
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
}).also(it => this.up = it)
]).also(it => {
it.layoutConfig = {
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
};
label("Vertical Layout(Algin to Left)"),
doric.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
}),
doric.hlayout([
doric.text({
width: 50,
height: 50,
text: "←",
textSize: 30,
textAlignment: new doric.Gravity().center(),
backgroundColor: doric.Color.parse('#ffff00'),
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
}).also(it => this.left = it),
doric.text({
width: 50,
height: 50,
text: "↓",
textSize: 30,
textAlignment: new doric.Gravity().center(),
backgroundColor: doric.Color.parse('#ffff00'),
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
}).also(it => this.down = it),
doric.text({
width: 50,
height: 50,
text: "→",
textSize: 30,
textAlignment: new doric.Gravity().center(),
backgroundColor: doric.Color.parse('#ffff00'),
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
}).also(it => this.right = it),
]).also(it => {
it.layoutConfig = {
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
};
it.space = 10;
label("Vertical Layout(Algin to Right)"),
doric.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: doric.gravity().right(),
}),
]).also(controlArea => {
controlArea.gravity = new doric.Gravity().centerX();
controlArea.space = 10;
controlArea.layoutConfig = {
alignment: new doric.Gravity().centerX(),
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
};
}),
label("Vertical Layout(Algin to Center)"),
doric.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: doric.gravity().center(),
}),
label("Vertical Layout(Weight)"),
doric.hlayout([
doric.vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
},
}),
box(2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
box(3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
box(3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
},
}),
box(2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
},
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
]).also(it => {
it.space = 20;
}),
]).also(it => {
it.space = 20;
it.gravity = doric.gravity().left();
})
]).also(it => {
it.space = 20;
it.layoutConfig = {
alignment: new doric.Gravity().centerX().top(),
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.MOST,
};
it.gravity = new doric.Gravity().centerX();
}).in(root);
}
bind(state) {
doric.log('build', state);
this.panel.width = state.width * 10;
this.panel.height = state.height * 10;
let node = state.head;
let nodes = [];
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 doric.Stack;
item.width = item.height = 10;
item.corners = 5;
item.shadow = {
color: doric.Color.GRAY,
opacity: 1,
radius: 3,
offsetX: 3,
offsetY: 3,
};
this.panel.addChild(item);
}
if (index === nodes.length - 1) {
item.backgroundColor = doric.Color.parse('#ffff00');
}
else {
item.backgroundColor = doric.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 doric.ViewModel {
constructor() {
super(...arguments);
this.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) {
doric.loge('Game Over');
this.stop();
}
}, 500);
};
this.stop = () => {
if (this.timerId !== undefined) {
clearInterval(this.timerId);
this.timerId = undefined;
}
};
this.left = () => {
this.updateState(it => it.direction = Direction.left);
};
this.right = () => {
this.updateState(it => it.direction = Direction.right);
};
this.up = () => {
this.updateState(it => it.direction = Direction.up);
};
this.down = () => {
this.updateState(it => it.direction = Direction.down);
};
}
onAttached(state, v) {
doric.takeNonNull(v.start)(it => it.onClick = this.start);
doric.takeNonNull(v.left)(it => it.onClick = this.left);
doric.takeNonNull(v.right)(it => it.onClick = this.right);
doric.takeNonNull(v.up)(it => it.onClick = this.up);
doric.takeNonNull(v.down)(it => it.onClick = this.down);
}
onBind(state, v) {
v.bind(state);
}
}
let SnakePanel = class SnakePanel extends doric.VMPanel {
getViewModelClass() {
return SnakeVM;
}
getState() {
return new SnakeModel(35, 35);
}
getViewHolderClass() {
return SnakeView;
})).also(it => {
it.layoutConfig = doric.layoutConfig().most();
})
.in(rootView);
}
};
SnakePanel = __decorate([
LayoutDemo = __decorate([
Entry
], SnakePanel);
//# sourceMappingURL=Snake.js.map
], LayoutDemo);
//# sourceMappingURL=LayoutDemo.js.map

70
dist/index.js vendored
View File

@ -4275,6 +4275,75 @@ return __module.exports;
}
}
class DoricScrollerNode extends DoricSuperViewNode {
constructor() {
super(...arguments);
this.childViewId = "";
}
build() {
const ret = document.createElement('div');
ret.style.overflow = "scroll";
return ret;
}
blendProps(v, propName, prop) {
if (propName === 'content') {
this.childViewId = prop;
}
else {
super.blendProps(v, propName, prop);
}
}
blendSubNode(model) {
var _a;
(_a = this.childNode) === null || _a === void 0 ? void 0 : _a.blend(model.props);
}
getSubNodeById(viewId) {
return viewId === this.childViewId ? this.childNode : undefined;
}
onBlended() {
super.onBlended();
const model = this.getSubModel(this.childViewId);
if (model === undefined) {
return;
}
if (this.childNode) {
if (this.childNode.viewId === this.childViewId) ;
else {
if (this.reusable && this.childNode.viewType === model.type) {
this.childNode.viewId = model.id;
this.childNode.blend(model.props);
}
else {
this.view.removeChild(this.childNode.view);
const childNode = DoricViewNode.create(this.context, model.type);
if (childNode === undefined) {
return;
}
childNode.viewId = model.id;
childNode.init(this);
childNode.blend(model.props);
this.view.appendChild(childNode.view);
this.childNode = childNode;
}
}
}
else {
const childNode = DoricViewNode.create(this.context, model.type);
if (childNode === undefined) {
return;
}
childNode.viewId = model.id;
childNode.init(this);
childNode.blend(model.props);
this.view.appendChild(childNode.view);
this.childNode = childNode;
}
}
layout() {
super.layout();
}
}
const bundles = new Map;
const plugins = new Map;
const nodes = new Map;
@ -4299,6 +4368,7 @@ return __module.exports;
registerViewNode('HLayout', DoricHLayoutNode);
registerViewNode('Text', DoricTextNode);
registerViewNode('Image', DoricImageNode);
registerViewNode('Scroller', DoricScrollerNode);
let __scriptId__ = 0;
function getScriptId() {

2
dist/index.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -6,6 +6,7 @@ import { DoricVLayoutNode } from './shader/DoricVLayoutNode'
import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
import { DoricTextNode } from "./shader/DoricTextNode"
import { DoricImageNode } from "./shader/DoricImageNode"
import { DoricScrollerNode } from "./shader/DoricScrollerNode"
const bundles: Map<string, string> = new Map
@ -45,3 +46,4 @@ registerViewNode('VLayout', DoricVLayoutNode)
registerViewNode('HLayout', DoricHLayoutNode)
registerViewNode('Text', DoricTextNode)
registerViewNode('Image', DoricImageNode)
registerViewNode('Scroller', DoricScrollerNode)

View File

@ -0,0 +1,69 @@
import { LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, DoricSuperViewNode, DVModel, DoricViewNode } from "./DoricViewNode";
export class DoricScrollerNode extends DoricSuperViewNode {
childViewId: string = ""
childNode?: DoricViewNode
build() {
const ret = document.createElement('div')
ret.style.overflow = "scroll"
return ret
}
blendProps(v: HTMLElement, propName: string, prop: any) {
if (propName === 'content') {
this.childViewId = prop
} else {
super.blendProps(v, propName, prop)
}
}
blendSubNode(model: DVModel): void {
this.childNode?.blend(model.props)
}
getSubNodeById(viewId: string) {
return viewId === this.childViewId ? this.childNode : undefined
}
onBlended() {
super.onBlended()
const model = this.getSubModel(this.childViewId)
if (model === undefined) {
return
}
if (this.childNode) {
if (this.childNode.viewId === this.childViewId) {
///skip
} else {
if (this.reusable && this.childNode.viewType === model.type) {
this.childNode.viewId = model.id
this.childNode.blend(model.props)
} else {
this.view.removeChild(this.childNode.view)
const childNode = DoricViewNode.create(this.context, model.type)
if (childNode === undefined) {
return
}
childNode.viewId = model.id
childNode.init(this)
childNode.blend(model.props)
this.view.appendChild(childNode.view)
this.childNode = childNode
}
}
} else {
const childNode = DoricViewNode.create(this.context, model.type)
if (childNode === undefined) {
return
}
childNode.viewId = model.id
childNode.init(this)
childNode.blend(model.props)
this.view.appendChild(childNode.view)
this.childNode = childNode
}
}
layout() {
super.layout()
}
}

View File

@ -336,7 +336,7 @@ export abstract class DoricSuperViewNode extends DoricViewNode {
abstract blendSubNode(model: DVModel): void
abstract getSubNodeById(viewId: string): DoricViewNode
abstract getSubNodeById(viewId: string): DoricViewNode | undefined
}
export abstract class DoricGroupViewNode extends DoricSuperViewNode {