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

update vnode and hlayout

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-20 17:56:01 +08:00
parent e99ec29919
commit 0fe55fdec4
7 changed files with 394 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
dist/Counter.js vendored
View File

@ -13,44 +13,83 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
};
class CounterView extends doric.ViewHolder {
build(root) {
root.backgroundColor = doric.Color.YELLOW;
const child1 = new doric.Stack;
child1.width = 200;
child1.height = 200;
child1.top = 20
child1.left = 100
child1.backgroundColor = doric.Color.RED;
child1.padding = { left: 50, top: 50 }
child1.layoutConfig = {
root.addChild(doric.vlayout([
doric.text({
textSize: 40,
layoutConfig: {
alignment: doric.Gravity.Center,
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
},
}).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.FIT,
heightSpec: doric.LayoutSpec.FIT,
},
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
}
const grandson = new doric.Stack;
grandson.width = 100;
grandson.height = 100;
grandson.left = 20;
grandson.border = {
width: 10,
color: doric.Color.WHITE,
}
grandson.layoutConfig = {
alignment: doric.Gravity.Center
}
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);
};
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.FIT,
// heightSpec: doric.LayoutSpec.FIT,
// };
// }));
}
}
class CounterVM extends doric.ViewModel {
onAttached(s, vh) {
vh.counter.onClick = () => {
this.updateState(state => {
state.count++;
});
};
}
onBind(s, vh) {
vh.number.text = `${s.count}`;
}
}
let MyPage = class MyPage extends doric.VMPanel {

290
dist/index.js vendored
View File

@ -3896,7 +3896,7 @@ return __module.exports;
}
}
class DoricStackViewNode extends DoricGroupViewNode {
class DoricStackNode extends DoricGroupViewNode {
build() {
return document.createElement('div');
}
@ -3992,6 +3992,287 @@ return __module.exports;
}
}
class DoricVLayoutNode extends DoricGroupViewNode {
constructor() {
super(...arguments);
this.space = 0;
this.gravity = 0;
this.contentSize = {
width: 0,
height: 0,
weight: 0,
};
}
build() {
return document.createElement('div');
}
blendProps(v, propName, prop) {
if (propName === 'space') {
this.space = prop;
}
else if (propName === 'gravity') {
this.gravity = prop;
}
else {
super.blendProps(v, propName, prop);
}
}
blend(props) {
super.blend(props);
this.childNodes.forEach(e => {
e.view.style.position = "absolute";
});
}
measureContentSize(targetSize) {
let width = this.frameWidth;
let height = this.frameHeight;
let contentSize = { width: 0, height: 0, weight: 0 };
let limitSize = {
width: targetSize.width - this.paddingLeft - this.paddingRight,
height: targetSize.height - this.paddingTop - this.paddingBottom,
};
contentSize = this.childNodes.reduce((prev, current) => {
var _a, _b, _c, _d, _e;
const size = current.measureContentSize(limitSize);
return {
width: Math.max(prev.width, size.width),
height: prev.height + size.height + this.space
+ ((_b = (_a = current.layoutConfig) === null || _a === void 0 ? void 0 : _a.margin) === null || _b === void 0 ? void 0 : _b.top) || 0
+ ((_d = (_c = current.layoutConfig) === null || _c === void 0 ? void 0 : _c.margin) === null || _d === void 0 ? void 0 : _d.bottom) || 0,
weight: prev.weight + ((_e = current.layoutConfig) === null || _e === void 0 ? void 0 : _e.weight) || 0
};
}, contentSize);
contentSize.height -= this.space;
switch (this.layoutConfig.widthSpec) {
case LayoutSpec.AT_MOST:
width = targetSize.width;
break;
case LayoutSpec.WRAP_CONTENT:
width = contentSize.width;
break;
}
switch (this.layoutConfig.heightSpec) {
case LayoutSpec.AT_MOST:
height = targetSize.height;
break;
case LayoutSpec.WRAP_CONTENT:
height = contentSize.height;
break;
}
if (contentSize.weight > 0) {
contentSize.height = targetSize.height;
}
this.contentSize = contentSize;
return { width, height };
}
layoutSelf(targetSize) {
const { width, height } = this.measureContentSize(targetSize);
this.width = width;
this.height = height;
let yStart = this.paddingTop;
if ((this.gravity & TOP) == TOP) {
yStart = this.paddingTop;
}
else if ((this.gravity & BOTTOM) == BOTTOM) {
yStart = targetSize.height - this.contentSize.height - this.paddingBottom;
}
else if ((this.gravity & CENTER_Y) == CENTER_Y) {
yStart = (targetSize.height - this.contentSize.height - this.paddingTop - this.paddingBottom) / 2 + this.paddingTop;
}
let remain = targetSize.height - this.contentSize.height - this.paddingTop - this.paddingBottom;
this.childNodes.forEach(e => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const childTargetSize = {
width: width - this.paddingLeft - this.paddingRight,
height: height - yStart - this.paddingBottom,
};
if (((_a = e.layoutConfig) === null || _a === void 0 ? void 0 : _a.weight) > 0) {
childTargetSize.height += remain / this.contentSize.weight * e.layoutConfig.weight;
}
e.layoutSelf(childTargetSize);
let gravity = ((_b = e.layoutConfig) === null || _b === void 0 ? void 0 : _b.alignment) | this.gravity;
if ((gravity & LEFT) === LEFT) {
e.x = 0;
}
else if ((gravity & RIGHT) === RIGHT) {
e.x = width - e.width + this.paddingLeft - this.paddingRight;
}
else if ((gravity & CENTER_X) === CENTER_X) {
e.x = width / 2 - e.width / 2 - this.paddingLeft;
}
else {
if ((_c = e.layoutConfig.margin) === null || _c === void 0 ? void 0 : _c.left) {
e.x = (_d = e.layoutConfig.margin) === null || _d === void 0 ? void 0 : _d.left;
}
else if ((_e = e.layoutConfig.margin) === null || _e === void 0 ? void 0 : _e.right) {
e.x = width - e.width + this.paddingLeft - this.paddingRight - ((_f = e.layoutConfig.margin) === null || _f === void 0 ? void 0 : _f.right);
}
}
if (((_g = e.layoutConfig.margin) === null || _g === void 0 ? void 0 : _g.top) !== undefined) {
yStart += e.layoutConfig.margin.top;
}
e.y = yStart - this.paddingTop;
yStart += e.height + this.space;
if (((_h = e.layoutConfig.margin) === null || _h === void 0 ? void 0 : _h.bottom) !== undefined) {
yStart += e.layoutConfig.margin.bottom;
}
});
}
}
class DoricHLayoutNode extends DoricGroupViewNode {
constructor() {
super(...arguments);
this.space = 0;
this.gravity = 0;
this.contentSize = {
width: 0,
height: 0,
weight: 0,
};
}
build() {
return document.createElement('div');
}
blendProps(v, propName, prop) {
if (propName === 'space') {
this.space = prop;
}
else if (propName === 'gravity') {
this.gravity = prop;
}
else {
super.blendProps(v, propName, prop);
}
}
blend(props) {
super.blend(props);
this.childNodes.forEach(e => {
e.view.style.position = "absolute";
});
}
measureContentSize(targetSize) {
let width = this.frameWidth;
let height = this.frameHeight;
let contentSize = { width: 0, height: 0, weight: 0 };
let limitSize = {
width: targetSize.width - this.paddingLeft - this.paddingRight,
height: targetSize.height - this.paddingTop - this.paddingBottom,
};
contentSize = this.childNodes.reduce((prev, current) => {
var _a, _b, _c, _d, _e;
const size = current.measureContentSize(limitSize);
return {
width: prev.width + size.width + this.space
+ ((_b = (_a = current.layoutConfig) === null || _a === void 0 ? void 0 : _a.margin) === null || _b === void 0 ? void 0 : _b.left) || 0
+ ((_d = (_c = current.layoutConfig) === null || _c === void 0 ? void 0 : _c.margin) === null || _d === void 0 ? void 0 : _d.right) || 0,
height: Math.max(prev.height, size.height),
weight: prev.weight + ((_e = current.layoutConfig) === null || _e === void 0 ? void 0 : _e.weight) || 0
};
}, contentSize);
contentSize.width -= this.space;
switch (this.layoutConfig.widthSpec) {
case LayoutSpec.AT_MOST:
width = targetSize.width;
break;
case LayoutSpec.WRAP_CONTENT:
width = contentSize.width;
break;
}
switch (this.layoutConfig.heightSpec) {
case LayoutSpec.AT_MOST:
height = targetSize.height;
break;
case LayoutSpec.WRAP_CONTENT:
height = contentSize.height;
break;
}
if (contentSize.weight > 0) {
contentSize.width = targetSize.width;
}
this.contentSize = contentSize;
return { width, height };
}
layoutSelf(targetSize) {
const { width, height } = this.measureContentSize(targetSize);
this.width = width;
this.height = height;
let xStart = this.paddingLeft;
if ((this.gravity & LEFT) == LEFT) {
xStart = this.paddingLeft;
}
else if ((this.gravity & RIGHT) == RIGHT) {
xStart = targetSize.width - this.contentSize.width - this.paddingRight;
}
else if ((this.gravity & CENTER_X) == CENTER_X) {
xStart = (targetSize.width - this.contentSize.width - this.paddingLeft - this.paddingRight) / 2 + this.paddingLeft;
}
let remain = targetSize.width - this.contentSize.width - this.paddingLeft - this.paddingRight;
this.childNodes.forEach(e => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const childTargetSize = {
width: width - xStart - this.paddingRight,
height: height - this.paddingTop - this.paddingBottom,
};
if (((_a = e.layoutConfig) === null || _a === void 0 ? void 0 : _a.weight) > 0) {
childTargetSize.width += remain / this.contentSize.weight * e.layoutConfig.weight;
}
e.layoutSelf(childTargetSize);
let gravity = ((_b = e.layoutConfig) === null || _b === void 0 ? void 0 : _b.alignment) | this.gravity;
if ((gravity & TOP) === TOP) {
e.y = 0;
}
else if ((gravity & BOTTOM) === BOTTOM) {
e.y = height - e.height + this.paddingTop - this.paddingBottom;
}
else if ((gravity & CENTER_Y) === CENTER_Y) {
e.x = height / 2 - e.height / 2 - this.paddingTop;
}
else {
if ((_c = e.layoutConfig.margin) === null || _c === void 0 ? void 0 : _c.left) {
e.x = (_d = e.layoutConfig.margin) === null || _d === void 0 ? void 0 : _d.left;
}
else if ((_e = e.layoutConfig.margin) === null || _e === void 0 ? void 0 : _e.right) {
e.x = width - e.width + this.paddingLeft - this.paddingRight - ((_f = e.layoutConfig.margin) === null || _f === void 0 ? void 0 : _f.right);
}
}
if (((_g = e.layoutConfig.margin) === null || _g === void 0 ? void 0 : _g.left) !== undefined) {
xStart += e.layoutConfig.margin.left;
}
e.x = xStart - this.paddingLeft;
xStart += e.width + this.space;
if (((_h = e.layoutConfig.margin) === null || _h === void 0 ? void 0 : _h.right) !== undefined) {
xStart += e.layoutConfig.margin.right;
}
});
}
}
class DoricTextNode extends DoricViewNode {
build() {
return document.createElement('p');
}
measureContentSize(targetSize) {
return targetSize;
}
blendProps(v, propName, prop) {
switch (propName) {
case 'text':
v.innerText = prop;
break;
case 'textSize':
v.style.fontSize = toPixelString(prop);
break;
case 'textColor':
v.style.color = toRGBAString(prop);
break;
default:
super.blendProps(v, propName, prop);
break;
}
}
}
const bundles = new Map;
const plugins = new Map;
const nodes = new Map;
@ -4011,7 +4292,10 @@ return __module.exports;
return nodes.get(name);
}
registerPlugin('shader', ShaderPlugin);
registerViewNode('Stack', DoricStackViewNode);
registerViewNode('Stack', DoricStackNode);
registerViewNode('VLayout', DoricVLayoutNode);
registerViewNode('HLayout', DoricHLayoutNode);
registerViewNode('Text', DoricTextNode);
let __scriptId__ = 0;
function getScriptId() {
@ -4120,7 +4404,7 @@ ${content}
this.pluginInstances = new Map;
createContext(this.contextId, content);
doricContexts.set(this.contextId, this);
this.rootNode = new DoricStackViewNode(this);
this.rootNode = new DoricStackNode(this);
}
get panel() {
var _a;

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/DoricRegistry.ts
View File

@ -4,6 +4,7 @@ import { DoricViewNodeClass } from "./shader/DoricViewNode"
import { DoricStackNode } from "./shader/DoricStackNode"
import { DoricVLayoutNode } from './shader/DoricVLayoutNode'
import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
import { DoricTextNode } from "./shader/DoricTextNode"
const bundles: Map<string, string> = new Map
@ -41,3 +42,4 @@ registerPlugin('shader', ShaderPlugin)
registerViewNode('Stack', DoricStackNode)
registerViewNode('VLayout', DoricVLayoutNode)
registerViewNode('HLayout', DoricHLayoutNode)
registerViewNode('Text', DoricTextNode)

29
src/shader/DoricTextNode.ts Normal file
View File

@ -0,0 +1,29 @@
import { DoricViewNode, FrameSize, toPixelString, toRGBAString } from "./DoricViewNode";
export class DoricTextNode extends DoricViewNode {
build(): HTMLElement {
return document.createElement('p')
}
measureContentSize(targetSize: FrameSize) {
return targetSize
}
blendProps(v: HTMLParagraphElement, propName: string, prop: any) {
switch (propName) {
case 'text':
v.innerText = prop
break
case 'textSize':
v.style.fontSize = toPixelString(prop)
break
case 'textColor':
v.style.color = toRGBAString(prop)
break
default:
super.blendProps(v, propName, prop)
break
}
}
}

2
src/shader/DoricVLayoutNode.ts
View File

@ -113,7 +113,7 @@ export class DoricVLayoutNode extends DoricGroupViewNode {
yStart += e.layoutConfig.margin.top
}
e.y = yStart - this.paddingTop
yStart += e.width + this.space
yStart += e.height + this.space
if (e.layoutConfig.margin?.bottom !== undefined) {
yStart += e.layoutConfig.margin.bottom
}

4
src/shader/DoricViewNode.ts
View File

@ -29,11 +29,11 @@ export type FrameSize = {
width: number,
height: number,
}
function toPixelString(v: number) {
export function toPixelString(v: number) {
return `${v}px`
}
function toRGBAString(color: number) {
export function toRGBAString(color: number) {
let strs = []
for (let i = 0; i < 32; i += 8) {