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

feat:add demo

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-20 13:14:48 +08:00
parent 23b482806f
commit dac7b634cb
5 changed files with 123 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/Counter.js vendored
View File

@ -13,7 +13,27 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
};
class CounterView extends doric.ViewHolder {
build(root) {
root.backgroundColor = doric.Color.BLUE;
root.backgroundColor = doric.Color.YELLOW;
const child1 = new doric.Stack;
child1.width = 200;
child1.height = 100;
child1.top = 20
child1.left = 100
child1.backgroundColor = doric.Color.RED;
const grandson = new doric.Stack;
grandson.width = 100;
grandson.height = 100;
grandson.left = 20;
grandson.backgroundColor = doric.Color.BLUE.alpha(0.5);
child1.addChild(grandson);
const child2 = new doric.Stack;
child2.width = 200;
child2.height = 100;
child2.left = 0;
child2.top = 0;
child2.backgroundColor = doric.Color.GREEN;
root.addChild(child1);
root.addChild(child2);
}
}
class CounterVM extends doric.ViewModel {

68
dist/index.js vendored
View File

@ -3597,6 +3597,14 @@ return __module.exports;
bottom: 0
}
};
this.padding = {
left: 0,
right: 0,
top: 0,
bottom: 0,
};
this.frameWidth = 0;
this.frameHeight = 0;
this.context = context;
}
init(superNode) {
@ -3607,18 +3615,23 @@ return __module.exports;
this.view = this.build();
}
blend(props) {
if (props.padding) {
this.padding = props.padding;
}
if (props.width !== undefined) {
this.frameWidth = props.width;
}
if (props.height !== undefined) {
this.frameHeight = props.height;
}
this.width = this.frameWidth - (this.padding.left || 0) - (this.padding.right || 0);
this.height = this.frameHeight - (this.padding.top || 0) - (this.padding.bottom || 0);
for (let key in props) {
this.blendProps(this.view, key, props[key]);
}
}
blendProps(v, propName, prop) {
switch (propName) {
case 'width':
this.width = prop;
break;
case 'height':
this.height = prop;
break;
case 'backgroundColor':
this.backgroundColor = prop;
break;
@ -3628,27 +3641,37 @@ return __module.exports;
Reflect.set(this.layoutConfig, key, Reflect.get(layoutConfig, key, layoutConfig));
}
break;
case 'x':
this.x = prop;
break;
case 'y':
this.y = prop;
break;
}
}
set width(v) {
this.view.style.width = `${v}px`;
}
get width() {
const ret = this.view.style.width.match(/([0-9]*)px/);
if (ret && ret.length > 1) {
return parseInt(ret[1]);
}
return 0;
return this.view.offsetWidth;
}
set height(v) {
this.view.style.width = `${v}px`;
this.view.style.height = `${v}px`;
}
get height() {
const ret = this.view.style.height.match(/([0-9]*)px/);
if (ret && ret.length > 1) {
return parseInt(ret[1]);
}
return 0;
return this.view.offsetHeight;
}
set x(v) {
this.view.style.left = `${v}px`;
}
get x() {
return this.view.offsetLeft;
}
get y() {
return this.view.offsetTop;
}
set y(v) {
this.view.style.top = `${v}px`;
}
set backgroundColor(v) {
let strs = [];
@ -3835,9 +3858,8 @@ return __module.exports;
this.childNodes = this.childNodes.slice(0, this.childViewIds.length);
}
blendSubNode(model) {
this.childNodes.filter(e => e.viewId === model.id).forEach(e => {
e.blend(model.props);
});
var _a;
(_a = this.getSubNodeById(model.id)) === null || _a === void 0 ? void 0 : _a.blend(model.props);
}
getSubNodeById(viewId) {
return this.childNodes.filter(e => e.viewId === viewId)[0];
@ -3848,6 +3870,12 @@ return __module.exports;
build() {
return document.createElement('div');
}
blend(props) {
super.blend(props);
this.childNodes.forEach(e => {
e.view.style.position = "absolute";
});
}
}
const bundles = new Map;

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
src/shader/DoricStackViewNode.ts
View File

@ -1,9 +1,15 @@
import { DoricGroupViewNode } from "./DoricViewNode";
import { DoricGroupViewNode, DVModel } from "./DoricViewNode";
export class DoricStackViewNode extends DoricGroupViewNode {
build() {
return document.createElement('div')
}
blend(props: { [index: string]: any }) {
super.blend(props)
this.childNodes.forEach(e => {
e.view.style.position = "absolute"
})
}
}

66
src/shader/DoricViewNode.ts
View File

@ -61,6 +61,15 @@ export abstract class DoricViewNode {
bottom: 0
}
}
padding = {
left: 0,
right: 0,
top: 0,
bottom: 0,
}
frameWidth = 0
frameHeight = 0
view!: HTMLElement
constructor(context: DoricContext) {
this.context = context
@ -77,6 +86,17 @@ export abstract class DoricViewNode {
abstract build(): HTMLElement
blend(props: { [index: string]: any }) {
if (props.padding) {
this.padding = props.padding
}
if (props.width !== undefined) {
this.frameWidth = props.width
}
if (props.height !== undefined) {
this.frameHeight = props.height
}
this.width = this.frameWidth - (this.padding.left || 0) - (this.padding.right || 0)
this.height = this.frameHeight - (this.padding.top || 0) - (this.padding.bottom || 0)
for (let key in props) {
this.blendProps(this.view, key, props[key])
}
@ -84,12 +104,6 @@ export abstract class DoricViewNode {
blendProps(v: HTMLElement, propName: string, prop: any) {
switch (propName) {
case 'width':
this.width = prop as number
break
case 'height':
this.height = prop as number
break
case 'backgroundColor':
this.backgroundColor = prop as number
break
@ -99,6 +113,12 @@ export abstract class DoricViewNode {
Reflect.set(this.layoutConfig, key, Reflect.get(layoutConfig, key, layoutConfig))
}
break
case 'x':
this.x = prop as number
break
case 'y':
this.y = prop as number
break
}
}
@ -107,23 +127,31 @@ export abstract class DoricViewNode {
}
get width() {
const ret = this.view.style.width.match(/([0-9]*)px/)
if (ret && ret.length > 1) {
return parseInt(ret[1])
}
return 0
return this.view.offsetWidth
}
set height(v: number) {
this.view.style.width = `${v}px`
this.view.style.height = `${v}px`
}
get height() {
const ret = this.view.style.height.match(/([0-9]*)px/)
if (ret && ret.length > 1) {
return parseInt(ret[1])
}
return 0
return this.view.offsetHeight
}
set x(v: number) {
this.view.style.left = `${v}px`
}
get x() {
return this.view.offsetLeft
}
get y() {
return this.view.offsetTop
}
set y(v: number) {
this.view.style.top = `${v}px`
}
set backgroundColor(v: number) {
@ -318,9 +346,7 @@ export abstract class DoricGroupViewNode extends DoricSuperViewNode {
}
blendSubNode(model: DVModel) {
this.childNodes.filter(e => e.viewId === model.id).forEach(e => {
e.blend(model.props)
})
this.getSubNodeById(model.id)?.blend(model.props)
}
getSubNodeById(viewId: string) {