update .gitignore
This commit is contained in:
parent
65f8a3c40c
commit
9174297980
3
.gitignore
vendored
3
.gitignore
vendored
@ -6,3 +6,6 @@
|
||||
/build
|
||||
/captures
|
||||
.externalNativeBuild
|
||||
.project
|
||||
.classpath
|
||||
.settings/
|
@ -1,225 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function box(idx = 0) {
|
||||
return (new doric.Stack).also(it => {
|
||||
it.width = it.height = 20;
|
||||
it.backgroundColor = colors[idx || 0];
|
||||
});
|
||||
}
|
||||
function title(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
function thisLabel(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
width: 60,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 15,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
});
|
||||
}
|
||||
let AnimatorDemo = class AnimatorDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
const view = box(2);
|
||||
view.onClick = () => {
|
||||
doric.modal(context).toast('Clicked');
|
||||
};
|
||||
const view2 = box(3);
|
||||
let idx = 0;
|
||||
doric.vlayout([
|
||||
title("Animator Demo"),
|
||||
doric.vlayout([
|
||||
doric.hlayout([
|
||||
thisLabel('Reset').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
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(() => {
|
||||
doric.modal(context).toast('Fininshed');
|
||||
}).catch(e => {
|
||||
doric.modal(context).toast(`${e}`);
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
doric.hlayout([
|
||||
thisLabel('X').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
view.x = view.x || 0;
|
||||
view.x += 100;
|
||||
view2.x += 50;
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Y').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
view.y = view.y || 0;
|
||||
view.y += 100;
|
||||
view2.y += 50;
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Width').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
view.width += 100;
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Height').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
view.height += 100;
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
doric.hlayout([
|
||||
thisLabel('BgColor').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
view.backgroundColor = colors[(idx++) % colors.length];
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Rotation').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
if (view.rotation) {
|
||||
view.rotation += 0.5;
|
||||
}
|
||||
else {
|
||||
view.rotation = 0.5;
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Corner').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
if (typeof view.corners === 'number') {
|
||||
view.corners += 10;
|
||||
}
|
||||
else {
|
||||
view.corners = 10;
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
doric.hlayout([
|
||||
thisLabel('scaleX').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
if (view.scaleX) {
|
||||
view.scaleX += 0.1;
|
||||
}
|
||||
else {
|
||||
view.scaleX = 1.1;
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('scaleY').apply({
|
||||
onClick: () => {
|
||||
doric.animate(this)({
|
||||
animations: () => {
|
||||
if (view.scaleY) {
|
||||
view.scaleY += 0.1;
|
||||
}
|
||||
else {
|
||||
view.scaleY = 1.1;
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
]).apply({ space: 10 }),
|
||||
doric.stack([
|
||||
view,
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
AnimatorDemo = __decorate([
|
||||
Entry
|
||||
], AnimatorDemo);
|
||||
//# sourceMappingURL=AnimatorDemo.js.map
|
@ -1,239 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function box(idx = 0) {
|
||||
return (new doric.Stack).also(it => {
|
||||
it.width = it.height = 20;
|
||||
it.backgroundColor = colors[idx || 0];
|
||||
});
|
||||
}
|
||||
function title(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
function thisLabel(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
width: 80,
|
||||
height: 30,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 10,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
});
|
||||
}
|
||||
let AnimationDemo = class AnimationDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
const view = box(2);
|
||||
const view2 = box(3);
|
||||
view.onClick = () => {
|
||||
doric.modal(context).toast('Clicked');
|
||||
};
|
||||
doric.vlayout([
|
||||
title("Complicated Animation"),
|
||||
doric.vlayout([
|
||||
doric.hlayout([
|
||||
thisLabel('reset').apply({
|
||||
onClick: () => {
|
||||
const rotation = new doric.RotationAnimation;
|
||||
rotation.duration = 1000;
|
||||
rotation.fromRotation = view.rotation || 0;
|
||||
rotation.toRotation = 0;
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 1000;
|
||||
translation.fromTranslationX = view.translationX || 0;
|
||||
translation.toTranslationX = 0;
|
||||
translation.fromTranslationY = view.translationY || 0;
|
||||
translation.toTranslationY = 0;
|
||||
const scale = new doric.ScaleAnimation;
|
||||
scale.duration = 1000;
|
||||
scale.fromScaleX = view.scaleX || 1;
|
||||
scale.toScaleX = 1;
|
||||
scale.fromScaleY = view.scaleY || 1;
|
||||
scale.toScaleY = 1;
|
||||
const animationSet = new doric.AnimationSet;
|
||||
animationSet.addAnimation(rotation);
|
||||
animationSet.addAnimation(translation);
|
||||
animationSet.addAnimation(scale);
|
||||
view.doAnimation(context, animationSet).then(() => {
|
||||
doric.modal(context).toast('Resetd');
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
doric.hlayout([
|
||||
thisLabel('TranslationX').apply({
|
||||
onClick: () => {
|
||||
const animation = new doric.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 doric.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 doric.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 doric.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 doric.RotationAnimation;
|
||||
animation.duration = 1000;
|
||||
animation.fromRotation = view.rotation || 0;
|
||||
animation.toRotation = animation.fromRotation + 0.25;
|
||||
view.doAnimation(context, animation);
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
doric.hlayout([
|
||||
thisLabel('group').apply({
|
||||
onClick: () => {
|
||||
const rotation = new doric.RotationAnimation;
|
||||
rotation.duration = 1000;
|
||||
rotation.fromRotation = 0;
|
||||
rotation.toRotation = 4;
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 1000;
|
||||
translation.fromTranslationX = view.translationX || 0;
|
||||
translation.toTranslationX = 100;
|
||||
const animationSet = new doric.AnimationSet;
|
||||
animationSet.addAnimation(rotation);
|
||||
animationSet.addAnimation(translation);
|
||||
view.doAnimation(context, animationSet);
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
doric.hlayout([
|
||||
thisLabel('Default').apply({
|
||||
onClick: () => {
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 3000;
|
||||
translation.fromTranslationX = 0;
|
||||
translation.toTranslationX = 300;
|
||||
translation.timingFunction = doric.TimingFunction.Default;
|
||||
view.doAnimation(context, translation);
|
||||
}
|
||||
}),
|
||||
thisLabel('Linear').apply({
|
||||
onClick: () => {
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 3000;
|
||||
translation.fromTranslationX = 0;
|
||||
translation.toTranslationX = 300;
|
||||
translation.timingFunction = doric.TimingFunction.Linear;
|
||||
view.doAnimation(context, translation);
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseIn').apply({
|
||||
onClick: () => {
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 3000;
|
||||
translation.fromTranslationX = 0;
|
||||
translation.toTranslationX = 300;
|
||||
translation.timingFunction = doric.TimingFunction.EaseIn;
|
||||
view.doAnimation(context, translation);
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 3000;
|
||||
translation.fromTranslationX = 0;
|
||||
translation.toTranslationX = 300;
|
||||
translation.timingFunction = doric.TimingFunction.EaseOut;
|
||||
view.doAnimation(context, translation);
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseInEaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new doric.TranslationAnimation;
|
||||
translation.duration = 3000;
|
||||
translation.fromTranslationX = 0;
|
||||
translation.toTranslationX = 300;
|
||||
translation.timingFunction = doric.TimingFunction.EaseInEaseOut;
|
||||
view.doAnimation(context, translation);
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 }),
|
||||
]).apply({ space: 10 }),
|
||||
doric.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: doric.layoutConfig().atmost(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
AnimationDemo = __decorate([
|
||||
Entry
|
||||
], AnimationDemo);
|
||||
//# sourceMappingURL=ComplicatedAnimations.js.map
|
@ -1,78 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let MyDemo = class MyDemo extends doric.Panel {
|
||||
build(root) {
|
||||
let refreshed;
|
||||
let headerImage;
|
||||
doric.stack([
|
||||
refreshed = doric.refreshable({
|
||||
onRefresh: () => {
|
||||
refreshed.setRefreshing(context, false);
|
||||
},
|
||||
header: doric.pullable(doric.stack([]).apply({
|
||||
backgroundColor: doric.Color.RED,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
width: 100,
|
||||
height: 30,
|
||||
}), {
|
||||
startAnimation: () => {
|
||||
},
|
||||
stopAnimation: () => {
|
||||
},
|
||||
setPullingDistance: (distance) => {
|
||||
headerImage.scaleX = headerImage.scaleY = (headerImage.height + distance * 2) / headerImage.height;
|
||||
},
|
||||
}),
|
||||
content: doric.list({
|
||||
itemCount: 20,
|
||||
renderItem: (idx) => {
|
||||
return doric.listItem(doric.text({
|
||||
text: `Item :${idx}`,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
width: root.width,
|
||||
height: 50,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[idx % colors.length],
|
||||
}));
|
||||
}
|
||||
}).apply({}),
|
||||
}).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).also(v => {
|
||||
v.top = 200;
|
||||
}),
|
||||
headerImage = doric.image({
|
||||
imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
width: root.width,
|
||||
height: 200,
|
||||
scaleType: doric.ScaleType.ScaleAspectFill,
|
||||
}),
|
||||
]).in(root);
|
||||
}
|
||||
};
|
||||
MyDemo = __decorate([
|
||||
Entry
|
||||
], MyDemo);
|
||||
//# sourceMappingURL=ComplicatedDemo.js.map
|
@ -1,128 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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 __metadata = (undefined && undefined.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
class CounterView extends doric.ViewHolder {
|
||||
build(root) {
|
||||
root.addChild(doric.vlayout([
|
||||
doric.text({
|
||||
textSize: 40,
|
||||
layoutConfig: {
|
||||
alignment: doric.Gravity.Center,
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
}).also(it => { this.number = it; }),
|
||||
doric.text({
|
||||
text: "点击计数",
|
||||
textSize: 20,
|
||||
border: {
|
||||
width: 1,
|
||||
color: doric.Color.parse('#000000'),
|
||||
},
|
||||
corners: 5,
|
||||
layoutConfig: {
|
||||
alignment: doric.Gravity.Center,
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
},
|
||||
shadow: {
|
||||
color: doric.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 = doric.Gravity.Center;
|
||||
it.layoutConfig = {
|
||||
alignment: doric.Gravity.Center
|
||||
};
|
||||
it.border = {
|
||||
width: 1,
|
||||
color: doric.Color.parse("#000000"),
|
||||
};
|
||||
it.shadow = {
|
||||
color: doric.Color.parse("#ffff00"),
|
||||
opacity: 0.5,
|
||||
radius: 20,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
};
|
||||
it.corners = 20;
|
||||
it.backgroundColor = doric.Color.parse('#ff00ff');
|
||||
}));
|
||||
root.addChild((new doric.Image).also(iv => {
|
||||
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png";
|
||||
iv.layoutConfig = {
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
};
|
||||
}));
|
||||
}
|
||||
bind(state) {
|
||||
this.number.text = `${state.count}`;
|
||||
}
|
||||
setCounter(v) {
|
||||
this.counter.onClick = v;
|
||||
}
|
||||
}
|
||||
class CounterVM extends doric.ViewModel {
|
||||
onAttached(s, vh) {
|
||||
vh.counter.onClick = () => {
|
||||
this.updateState(state => {
|
||||
state.count++;
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
let MyPage = class MyPage extends doric.VMPanel {
|
||||
getViewHolderClass() {
|
||||
return CounterView;
|
||||
}
|
||||
getViewModelClass() {
|
||||
return CounterVM;
|
||||
}
|
||||
getState() {
|
||||
return {
|
||||
count: 0
|
||||
};
|
||||
}
|
||||
log() {
|
||||
doric.log("Hello.HEGO");
|
||||
doric.logw("Hello.HEGO");
|
||||
doric.loge("Hello.HEGO");
|
||||
context.modal.toast('This is a toast.').then((r) => {
|
||||
doric.loge(r);
|
||||
});
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
doric.NativeCall,
|
||||
__metadata("design:type", Function),
|
||||
__metadata("design:paramtypes", []),
|
||||
__metadata("design:returntype", void 0)
|
||||
], MyPage.prototype, "log", null);
|
||||
MyPage = __decorate([
|
||||
Entry
|
||||
], MyPage);
|
||||
//# sourceMappingURL=Counter.js.map
|
@ -1,392 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
function box(idx = 0) {
|
||||
return (new doric.Stack).also(it => {
|
||||
it.width = it.height = 20;
|
||||
it.backgroundColor = colors[idx || 0];
|
||||
});
|
||||
}
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
let EffectsDemo = class EffectsDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Origin view"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Border"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Border,Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.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: doric.layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.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: doric.layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.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: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
radius: 10,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.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: doric.layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.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: doric.layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.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: doric.layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Corner round"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner left top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftTop: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner right top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightTop: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner left bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftBottom: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner right bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightBottom: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
]).also(it => {
|
||||
it.space = 20;
|
||||
})).also(it => {
|
||||
it.layoutConfig = doric.layoutConfig().atmost();
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
EffectsDemo = __decorate([
|
||||
Entry
|
||||
], EffectsDemo);
|
||||
//# sourceMappingURL=EffectsDemo.js.map
|
@ -1,53 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let FlowDemo = class FlowDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.flowlayout({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
itemCount: 500,
|
||||
columnCount: 3,
|
||||
columnSpace: 10,
|
||||
rowSpace: 10,
|
||||
renderItem: (idx) => {
|
||||
return new doric.FlowLayoutItem().apply({
|
||||
backgroundColor: colors[idx % colors.length],
|
||||
height: 50 + (idx % 3) * 20,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
}).also(it => {
|
||||
it.addChild(doric.text({
|
||||
text: `${idx}`,
|
||||
textColor: doric.Color.WHITE,
|
||||
textSize: 20,
|
||||
layoutConfig: doric.layoutConfig().wrap().a(doric.Gravity.Center)
|
||||
}));
|
||||
});
|
||||
},
|
||||
})
|
||||
.in(rootView);
|
||||
}
|
||||
};
|
||||
FlowDemo = __decorate([
|
||||
Entry
|
||||
], FlowDemo);
|
||||
//# sourceMappingURL=FlowLayoutDemo.js.map
|
File diff suppressed because one or more lines are too long
@ -1,464 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
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]);
|
||||
});
|
||||
}
|
||||
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.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.hlayout([
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.hlayout([
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20;
|
||||
it.gravity = doric.gravity().center();
|
||||
}),
|
||||
doric.vlayout([
|
||||
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
|
||||
}),
|
||||
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(),
|
||||
}),
|
||||
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.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
||||
gravity: doric.gravity().center(),
|
||||
}),
|
||||
doric.vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
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;
|
||||
})).also(it => {
|
||||
it.layoutConfig = doric.layoutConfig().atmost();
|
||||
})
|
||||
.in(rootView);
|
||||
}
|
||||
};
|
||||
LayoutDemo = __decorate([
|
||||
Entry
|
||||
], LayoutDemo);
|
||||
//# sourceMappingURL=LayoutDemo.js.map
|
File diff suppressed because one or more lines are too long
@ -1,174 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let ModalDemo = class ModalDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
doric.text({
|
||||
text: "Modal",
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('toast on bottom'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.modal(context).toast('This is a toast.');
|
||||
}
|
||||
}),
|
||||
label('toast on top'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Top);
|
||||
}
|
||||
}),
|
||||
label('toast on center'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Center);
|
||||
}
|
||||
}),
|
||||
doric.text({
|
||||
text: "Alert",
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[2],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.modal(context).alert({
|
||||
msg: 'This is alert.',
|
||||
title: 'Alert title',
|
||||
okLabel: "OkLabel"
|
||||
}).then(e => {
|
||||
doric.modal(context).toast('Clicked OK.');
|
||||
});
|
||||
}
|
||||
}),
|
||||
doric.text({
|
||||
text: "Confirm",
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.modal(context).confirm({
|
||||
msg: 'This is Confirm.',
|
||||
title: 'Confirm title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(() => {
|
||||
doric.modal(context).toast('Clicked OK.');
|
||||
}, () => {
|
||||
doric.modal(context).toast('Clicked Cancel.');
|
||||
});
|
||||
}
|
||||
}),
|
||||
doric.text({
|
||||
text: "Prompt",
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[4],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.modal(context).prompt({
|
||||
msg: 'This is Prompt.',
|
||||
title: 'Prompt title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(e => {
|
||||
doric.modal(context).toast(`Clicked OK.Input:${e}`);
|
||||
}, e => {
|
||||
doric.modal(context).toast(`Clicked Cancel.Input:${e}`);
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
ModalDemo = __decorate([
|
||||
Entry
|
||||
], ModalDemo);
|
||||
//# sourceMappingURL=ModalDemo.js.map
|
@ -1,124 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
function title(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let NavbarDemo = class NavbarDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
title("Navbar Demo"),
|
||||
label('isHidden').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.navbar(context).isHidden().then(e => doric.modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
|
||||
doric.modal(context).alert(e);
|
||||
});
|
||||
}
|
||||
}),
|
||||
label('setHidden').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.navbar(context).isHidden()
|
||||
.then(e => doric.navbar(context).setHidden(!e))
|
||||
.catch(e => {
|
||||
doric.modal(context).alert(e);
|
||||
});
|
||||
}
|
||||
}),
|
||||
label('setTitle').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.navbar(context).setTitle('Setted Title')
|
||||
.catch(e => {
|
||||
doric.modal(context).alert(e);
|
||||
});
|
||||
}
|
||||
}),
|
||||
label('setBgColor').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.navbar(context).setBgColor(doric.Color.YELLOW)
|
||||
.catch(e => {
|
||||
doric.modal(context).alert(e);
|
||||
});
|
||||
}
|
||||
}),
|
||||
label('Pop').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.navigator(context).pop();
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
NavbarDemo = __decorate([
|
||||
Entry
|
||||
], NavbarDemo);
|
||||
//# sourceMappingURL=NavbarDemo.js.map
|
@ -1,80 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let NaivgatorDemo = class NaivgatorDemo extends doric.Panel {
|
||||
build(root) {
|
||||
doric.scroller(doric.vlayout([
|
||||
doric.text({
|
||||
text: "Navigator Demo",
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.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: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly().w(doric.LayoutSpec.AT_MOST),
|
||||
onClick: () => {
|
||||
doric.navigator(context).push(`assets://demo/${e}.js`, `${e}.js`);
|
||||
},
|
||||
})),
|
||||
label('POP').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.navigator(context).pop();
|
||||
},
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).in(root);
|
||||
}
|
||||
};
|
||||
NaivgatorDemo = __decorate([
|
||||
Entry
|
||||
], NaivgatorDemo);
|
||||
//# sourceMappingURL=NavigatorDemo.js.map
|
@ -1,72 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
function title(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let NetworkDemo = class NetworkDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
title("Network Demo"),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.network(context).get('https://m.baidu.com').then(e => {
|
||||
doric.modal(context).alert(JSON.stringify(e));
|
||||
}).catch(e => {
|
||||
doric.modal(context).toast('Catched:' + JSON.stringify(e));
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
NetworkDemo = __decorate([
|
||||
Entry
|
||||
], NetworkDemo);
|
||||
//# sourceMappingURL=NetworkDemo.js.map
|
@ -1,84 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
function title(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let PopoverDemo = class PopoverDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
title("Popover Demo"),
|
||||
label('Popover').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.popover(context).show(doric.text({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly().a(doric.Gravity.Center),
|
||||
text: "This is PopOver Window",
|
||||
}).also(v => {
|
||||
let idx = 0;
|
||||
v.onClick = () => {
|
||||
v.backgroundColor = colors[(++idx) % colors.length];
|
||||
};
|
||||
doric.modal(context).toast('Dismissed after 3 seconds');
|
||||
setTimeout(() => {
|
||||
doric.popover(context).dismiss();
|
||||
}, 3000);
|
||||
}));
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
PopoverDemo = __decorate([
|
||||
Entry
|
||||
], PopoverDemo);
|
||||
//# sourceMappingURL=PopoverDemo.js.map
|
File diff suppressed because one or more lines are too long
@ -1,57 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
let ScrollerPanel = class ScrollerPanel extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
doric.scroller(doric.vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))).apply({
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: doric.Color.RED,
|
||||
}),
|
||||
doric.scroller(doric.vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))).apply({
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: doric.Color.BLUE,
|
||||
})
|
||||
]))
|
||||
.apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.EXACTLY),
|
||||
height: 500,
|
||||
backgroundColor: doric.Color.YELLOW,
|
||||
})
|
||||
.in(rootView);
|
||||
}
|
||||
};
|
||||
ScrollerPanel = __decorate([
|
||||
Entry
|
||||
], ScrollerPanel);
|
||||
//# sourceMappingURL=ScrollerDemo.js.map
|
@ -1,81 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
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',
|
||||
];
|
||||
let SliderPanel = class SliderPanel extends doric.Panel {
|
||||
build(rootView) {
|
||||
rootView.addChild(doric.vlayout([
|
||||
doric.text({
|
||||
text: "Gallery",
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
doric.slider({
|
||||
itemCount: 100,
|
||||
renderPage: (idx) => {
|
||||
return doric.slideItem(doric.image({
|
||||
imageUrl: imageUrls[idx % imageUrls.length],
|
||||
scaleType: doric.ScaleType.ScaleAspectFit,
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST).h(doric.LayoutSpec.AT_MOST).a(doric.gravity().center()),
|
||||
})).also(it => {
|
||||
let start = idx;
|
||||
it.onClick = () => {
|
||||
it.backgroundColor = (colors[++start % colors.length]);
|
||||
};
|
||||
});
|
||||
},
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.AT_MOST,
|
||||
};
|
||||
}));
|
||||
}
|
||||
};
|
||||
SliderPanel = __decorate([
|
||||
Entry
|
||||
], SliderPanel);
|
||||
//# sourceMappingURL=SliderDemo.js.map
|
@ -1,341 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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();
|
||||
}
|
||||
}
|
||||
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.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
}),
|
||||
(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"),
|
||||
layoutConfig: {
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
}).also(it => this.start = it),
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
};
|
||||
}),
|
||||
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.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).also(it => this.up = it)
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
};
|
||||
}),
|
||||
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.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).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.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).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.EXACTLY,
|
||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).also(it => this.right = it),
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
};
|
||||
it.space = 10;
|
||||
}),
|
||||
]).also(controlArea => {
|
||||
controlArea.gravity = new doric.Gravity().centerX();
|
||||
controlArea.space = 10;
|
||||
controlArea.layoutConfig = {
|
||||
alignment: new doric.Gravity().centerX(),
|
||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
||||
};
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20;
|
||||
it.layoutConfig = {
|
||||
alignment: new doric.Gravity().centerX().top(),
|
||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
||||
heightSpec: doric.LayoutSpec.AT_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);
|
||||
}
|
||||
}
|
||||
let SnakePanel = class SnakePanel extends doric.VMPanel {
|
||||
getViewModelClass() {
|
||||
return SnakeVM;
|
||||
}
|
||||
getState() {
|
||||
return new SnakeModel(35, 35);
|
||||
}
|
||||
getViewHolderClass() {
|
||||
return SnakeView;
|
||||
}
|
||||
};
|
||||
SnakePanel = __decorate([
|
||||
Entry
|
||||
], SnakePanel);
|
||||
//# sourceMappingURL=Snake.js.map
|
@ -1,119 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var doric = require('doric');
|
||||
|
||||
const colors = [
|
||||
"#70a1ff",
|
||||
"#7bed9f",
|
||||
"#ff6b81",
|
||||
"#a4b0be",
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
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;
|
||||
};
|
||||
const storedKey = 'StoredKey';
|
||||
const zone = 'StorageDemo';
|
||||
let StorageDemo = class StorageDemo extends doric.Panel {
|
||||
update() {
|
||||
doric.storage(context).getItem(storedKey, zone).then(e => {
|
||||
this.stored.text = e || "";
|
||||
doric.log('Called in then');
|
||||
});
|
||||
}
|
||||
build(root) {
|
||||
doric.scroller(doric.vlayout([
|
||||
doric.text({
|
||||
text: "Storage Demo",
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
label('Stored'),
|
||||
doric.text({
|
||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
||||
textSize: 20,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: doric.gravity().center(),
|
||||
height: 50,
|
||||
}).also(it => this.stored = it),
|
||||
label('store a value').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.storage(context).getItem(storedKey, zone).then(e => {
|
||||
doric.modal(context).prompt({
|
||||
text: e,
|
||||
title: "Please input text to store",
|
||||
defaultText: "Default Value",
|
||||
}).then(text => {
|
||||
doric.storage(context).setItem(storedKey, text, zone).then(() => {
|
||||
this.update();
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
}),
|
||||
label('remove value').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.storage(context).remove(storedKey, zone).then(e => {
|
||||
this.update();
|
||||
});
|
||||
},
|
||||
}),
|
||||
label('clear values').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
doric.storage(context).clear(zone).then(e => {
|
||||
this.update();
|
||||
});
|
||||
},
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
||||
gravity: doric.gravity().center(),
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().atmost(),
|
||||
}).in(root);
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
StorageDemo = __decorate([
|
||||
Entry
|
||||
], StorageDemo);
|
||||
//# sourceMappingURL=StorageDemo.js.map
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user