feat:add scroller node
This commit is contained in:
pengfei.zhou
parent
6f2fd39f2c
commit
2bdcc3535b
762
dist/Counter.js
vendored
762
dist/Counter.js
vendored
@ -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;
|
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;
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||||
};
|
};
|
||||||
var Direction;
|
const colors = [
|
||||||
(function (Direction) {
|
"#f0932b",
|
||||||
Direction[Direction["left"] = 0] = "left";
|
"#eb4d4b",
|
||||||
Direction[Direction["right"] = 1] = "right";
|
"#6ab04c",
|
||||||
Direction[Direction["up"] = 2] = "up";
|
"#e056fd",
|
||||||
Direction[Direction["down"] = 3] = "down";
|
"#686de0",
|
||||||
})(Direction || (Direction = {}));
|
"#30336b",
|
||||||
var State;
|
];
|
||||||
(function (State) {
|
function box(idx = 0) {
|
||||||
State[State["idel"] = 0] = "idel";
|
return (new doric.Stack).also(it => {
|
||||||
State[State["run"] = 1] = "run";
|
it.width = it.height = 20;
|
||||||
State[State["fail"] = 2] = "fail";
|
it.backgroundColor = doric.Color.parse(colors[idx || 0]);
|
||||||
})(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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
class SnakeView extends doric.ViewHolder {
|
function boxStr(str, idx = 0) {
|
||||||
build(root) {
|
return (new doric.Text).also(it => {
|
||||||
root.backgroundColor = doric.Color.parse('#000000');
|
it.width = it.height = 20;
|
||||||
doric.vlayout([
|
it.text = str;
|
||||||
doric.text({
|
it.textColor = doric.Color.parse('#ffffff');
|
||||||
text: "Snake",
|
it.backgroundColor = doric.Color.parse(colors[idx || 0]);
|
||||||
textSize: 20,
|
});
|
||||||
textColor: doric.Color.parse("#ffffff"),
|
}
|
||||||
layoutConfig: {
|
function label(str) {
|
||||||
alignment: new doric.Gravity().centerX(),
|
return doric.text({
|
||||||
margin: {
|
text: str,
|
||||||
top: 20
|
textSize: 16,
|
||||||
},
|
});
|
||||||
widthSpec: doric.LayoutSpec.FIT,
|
}
|
||||||
heightSpec: doric.LayoutSpec.FIT,
|
let LayoutDemo = class LayoutDemo extends doric.Panel {
|
||||||
},
|
build(rootView) {
|
||||||
}),
|
doric.scroller(doric.hlayout([
|
||||||
(new doric.Stack).also(panel => {
|
doric.vlayout([
|
||||||
panel.backgroundColor = doric.Color.parse('#00ff00');
|
label("Horizontal Layout(Align to Top)"),
|
||||||
this.panel = panel;
|
doric.hlayout([
|
||||||
}),
|
box().apply({
|
||||||
doric.hlayout([
|
height: 20
|
||||||
doric.text({
|
}),
|
||||||
text: "Start",
|
box().apply({
|
||||||
textSize: 30,
|
height: 40
|
||||||
textColor: doric.Color.parse("#ffffff"),
|
}),
|
||||||
|
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: {
|
layoutConfig: {
|
||||||
widthSpec: doric.LayoutSpec.FIT,
|
widthSpec: doric.LayoutSpec.JUST,
|
||||||
heightSpec: doric.LayoutSpec.FIT,
|
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 => {
|
]).also(it => {
|
||||||
it.layoutConfig = {
|
it.space = 20;
|
||||||
widthSpec: doric.LayoutSpec.FIT,
|
it.gravity = doric.gravity().center();
|
||||||
heightSpec: doric.LayoutSpec.FIT,
|
|
||||||
};
|
|
||||||
}),
|
}),
|
||||||
doric.vlayout([
|
doric.vlayout([
|
||||||
doric.hlayout([
|
label("Vertical Layout(Algin to Left)"),
|
||||||
doric.text({
|
doric.vlayout([
|
||||||
width: 50,
|
box(1).apply({
|
||||||
height: 50,
|
width: 20
|
||||||
text: "↑",
|
}),
|
||||||
textSize: 30,
|
box(1).apply({
|
||||||
textAlignment: new doric.Gravity().center(),
|
width: 40
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
}),
|
||||||
layoutConfig: {
|
box(1).apply({
|
||||||
widthSpec: doric.LayoutSpec.JUST,
|
width: 60
|
||||||
heightSpec: doric.LayoutSpec.JUST,
|
}),
|
||||||
},
|
box(1).apply({
|
||||||
}).also(it => this.up = it)
|
width: 40
|
||||||
]).also(it => {
|
}),
|
||||||
it.layoutConfig = {
|
box(1).apply({
|
||||||
widthSpec: doric.LayoutSpec.FIT,
|
width: 20
|
||||||
heightSpec: doric.LayoutSpec.FIT,
|
}),
|
||||||
};
|
]).apply({
|
||||||
|
space: 20
|
||||||
}),
|
}),
|
||||||
doric.hlayout([
|
label("Vertical Layout(Algin to Right)"),
|
||||||
doric.text({
|
doric.vlayout([
|
||||||
width: 50,
|
box(1).apply({
|
||||||
height: 50,
|
width: 20
|
||||||
text: "←",
|
}),
|
||||||
textSize: 30,
|
box(1).apply({
|
||||||
textAlignment: new doric.Gravity().center(),
|
width: 40
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
}),
|
||||||
layoutConfig: {
|
box(1).apply({
|
||||||
widthSpec: doric.LayoutSpec.JUST,
|
width: 60
|
||||||
heightSpec: doric.LayoutSpec.JUST,
|
}),
|
||||||
},
|
box(1).apply({
|
||||||
}).also(it => this.left = it),
|
width: 40
|
||||||
doric.text({
|
}),
|
||||||
width: 50,
|
box(1).apply({
|
||||||
height: 50,
|
width: 20
|
||||||
text: "↓",
|
}),
|
||||||
textSize: 30,
|
]).apply({
|
||||||
textAlignment: new doric.Gravity().center(),
|
space: 20,
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
gravity: doric.gravity().right(),
|
||||||
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;
|
|
||||||
}),
|
}),
|
||||||
]).also(controlArea => {
|
label("Vertical Layout(Algin to Center)"),
|
||||||
controlArea.gravity = new doric.Gravity().centerX();
|
doric.vlayout([
|
||||||
controlArea.space = 10;
|
box(1).apply({
|
||||||
controlArea.layoutConfig = {
|
width: 20
|
||||||
alignment: new doric.Gravity().centerX(),
|
}),
|
||||||
widthSpec: doric.LayoutSpec.FIT,
|
box(1).apply({
|
||||||
heightSpec: doric.LayoutSpec.FIT,
|
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 => {
|
]).also(it => {
|
||||||
it.space = 20;
|
it.space = 20;
|
||||||
it.layoutConfig = {
|
})).also(it => {
|
||||||
alignment: new doric.Gravity().centerX().top(),
|
it.layoutConfig = doric.layoutConfig().most();
|
||||||
widthSpec: doric.LayoutSpec.MOST,
|
})
|
||||||
heightSpec: doric.LayoutSpec.MOST,
|
.in(rootView);
|
||||||
};
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
SnakePanel = __decorate([
|
LayoutDemo = __decorate([
|
||||||
Entry
|
Entry
|
||||||
], SnakePanel);
|
], LayoutDemo);
|
||||||
//# sourceMappingURL=Snake.js.map
|
//# sourceMappingURL=LayoutDemo.js.map
|
||||||
|
|||||||
70
dist/index.js
vendored
70
dist/index.js
vendored
@ -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 bundles = new Map;
|
||||||
const plugins = new Map;
|
const plugins = new Map;
|
||||||
const nodes = new Map;
|
const nodes = new Map;
|
||||||
@ -4299,6 +4368,7 @@ return __module.exports;
|
|||||||
registerViewNode('HLayout', DoricHLayoutNode);
|
registerViewNode('HLayout', DoricHLayoutNode);
|
||||||
registerViewNode('Text', DoricTextNode);
|
registerViewNode('Text', DoricTextNode);
|
||||||
registerViewNode('Image', DoricImageNode);
|
registerViewNode('Image', DoricImageNode);
|
||||||
|
registerViewNode('Scroller', DoricScrollerNode);
|
||||||
|
|
||||||
let __scriptId__ = 0;
|
let __scriptId__ = 0;
|
||||||
function getScriptId() {
|
function getScriptId() {
|
||||||
|
|||||||
2
dist/index.js.map
vendored
2
dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -6,6 +6,7 @@ import { DoricVLayoutNode } from './shader/DoricVLayoutNode'
|
|||||||
import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
|
import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
|
||||||
import { DoricTextNode } from "./shader/DoricTextNode"
|
import { DoricTextNode } from "./shader/DoricTextNode"
|
||||||
import { DoricImageNode } from "./shader/DoricImageNode"
|
import { DoricImageNode } from "./shader/DoricImageNode"
|
||||||
|
import { DoricScrollerNode } from "./shader/DoricScrollerNode"
|
||||||
|
|
||||||
const bundles: Map<string, string> = new Map
|
const bundles: Map<string, string> = new Map
|
||||||
|
|
||||||
@ -44,4 +45,5 @@ registerViewNode('Stack', DoricStackNode)
|
|||||||
registerViewNode('VLayout', DoricVLayoutNode)
|
registerViewNode('VLayout', DoricVLayoutNode)
|
||||||
registerViewNode('HLayout', DoricHLayoutNode)
|
registerViewNode('HLayout', DoricHLayoutNode)
|
||||||
registerViewNode('Text', DoricTextNode)
|
registerViewNode('Text', DoricTextNode)
|
||||||
registerViewNode('Image', DoricImageNode)
|
registerViewNode('Image', DoricImageNode)
|
||||||
|
registerViewNode('Scroller', DoricScrollerNode)
|
||||||
69
src/shader/DoricScrollerNode.ts
Normal file
69
src/shader/DoricScrollerNode.ts
Normal 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()
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -336,7 +336,7 @@ export abstract class DoricSuperViewNode extends DoricViewNode {
|
|||||||
|
|
||||||
abstract blendSubNode(model: DVModel): void
|
abstract blendSubNode(model: DVModel): void
|
||||||
|
|
||||||
abstract getSubNodeById(viewId: string): DoricViewNode
|
abstract getSubNodeById(viewId: string): DoricViewNode | undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
export abstract class DoricGroupViewNode extends DoricSuperViewNode {
|
export abstract class DoricGroupViewNode extends DoricSuperViewNode {
|
||||||
|
|||||||
Reference in New Issue
Block a user