feat:width,height and padding border
This commit is contained in:
pengfei.zhou
parent
dac7b634cb
commit
6706a57406
9
dist/Counter.js
vendored
9
dist/Counter.js
vendored
@ -16,14 +16,19 @@ class CounterView extends doric.ViewHolder {
|
||||
root.backgroundColor = doric.Color.YELLOW;
|
||||
const child1 = new doric.Stack;
|
||||
child1.width = 200;
|
||||
child1.height = 100;
|
||||
child1.height = 200;
|
||||
child1.top = 20
|
||||
child1.left = 100
|
||||
child1.backgroundColor = doric.Color.RED;
|
||||
child1.padding = { left: 50, top: 50 }
|
||||
const grandson = new doric.Stack;
|
||||
grandson.width = 100;
|
||||
grandson.height = 100;
|
||||
grandson.left = 20;
|
||||
grandson.border = {
|
||||
width: 10,
|
||||
color: doric.Color.WHITE,
|
||||
}
|
||||
grandson.backgroundColor = doric.Color.BLUE.alpha(0.5);
|
||||
child1.addChild(grandson);
|
||||
const child2 = new doric.Stack;
|
||||
@ -33,7 +38,7 @@ class CounterView extends doric.ViewHolder {
|
||||
child2.top = 0;
|
||||
child2.backgroundColor = doric.Color.GREEN;
|
||||
root.addChild(child1);
|
||||
root.addChild(child2);
|
||||
//root.addChild(child2);
|
||||
}
|
||||
}
|
||||
class CounterVM extends doric.ViewModel {
|
||||
|
||||
135
dist/index.js
vendored
135
dist/index.js
vendored
@ -3555,31 +3555,22 @@ return __module.exports;
|
||||
LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT";
|
||||
LayoutSpec[LayoutSpec["AT_MOST"] = 2] = "AT_MOST";
|
||||
})(LayoutSpec || (LayoutSpec = {}));
|
||||
function parse(str) {
|
||||
if (!str.startsWith("#")) {
|
||||
throw new Error(`Parse color error with ${str}`);
|
||||
}
|
||||
const val = parseInt(str.substr(1), 16);
|
||||
if (str.length === 7) {
|
||||
return (val | 0xff000000);
|
||||
}
|
||||
else if (str.length === 9) {
|
||||
return (val);
|
||||
}
|
||||
else {
|
||||
throw new Error(`Parse color error with ${str}`);
|
||||
}
|
||||
function toPixelString(v) {
|
||||
return `${v}px`;
|
||||
}
|
||||
function safeParse(str, defVal = 0) {
|
||||
let color = defVal;
|
||||
try {
|
||||
color = parse(str);
|
||||
}
|
||||
catch (e) {
|
||||
}
|
||||
finally {
|
||||
return color;
|
||||
function toRGBAString(color) {
|
||||
let strs = [];
|
||||
for (let i = 0; i < 32; i += 8) {
|
||||
strs.push(((color >> i) & 0xff).toString(16));
|
||||
}
|
||||
strs = strs.map(e => {
|
||||
if (e.length === 1) {
|
||||
return '0' + e;
|
||||
}
|
||||
return e;
|
||||
}).reverse();
|
||||
/// RGBA
|
||||
return `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`;
|
||||
}
|
||||
class DoricViewNode {
|
||||
constructor(context) {
|
||||
@ -3605,6 +3596,8 @@ return __module.exports;
|
||||
};
|
||||
this.frameWidth = 0;
|
||||
this.frameHeight = 0;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.context = context;
|
||||
}
|
||||
init(superNode) {
|
||||
@ -3614,24 +3607,56 @@ return __module.exports;
|
||||
}
|
||||
this.view = this.build();
|
||||
}
|
||||
get paddingLeft() {
|
||||
return this.padding.left || 0;
|
||||
}
|
||||
get paddingRight() {
|
||||
return this.padding.right || 0;
|
||||
}
|
||||
get paddingTop() {
|
||||
return this.padding.top || 0;
|
||||
}
|
||||
get paddingBottom() {
|
||||
return this.padding.bottom || 0;
|
||||
}
|
||||
get borderWidth() {
|
||||
var _a;
|
||||
return ((_a = this.border) === null || _a === void 0 ? void 0 : _a.width) || 0;
|
||||
}
|
||||
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]);
|
||||
}
|
||||
this.width = this.frameWidth;
|
||||
this.height = this.frameHeight;
|
||||
if (this.border) {
|
||||
this.view.style.borderStyle = "solid";
|
||||
this.view.style.borderWidth = toPixelString(this.border.width);
|
||||
this.view.style.borderColor = toRGBAString(this.border.color);
|
||||
}
|
||||
if (this.padding) {
|
||||
this.view.style.paddingLeft = toPixelString(this.paddingLeft);
|
||||
this.view.style.paddingRight = toPixelString(this.paddingRight);
|
||||
this.view.style.paddingTop = toPixelString(this.paddingTop);
|
||||
this.view.style.paddingBottom = toPixelString(this.paddingBottom);
|
||||
}
|
||||
this.x = this.offsetX;
|
||||
this.y = this.offsetY;
|
||||
}
|
||||
blendProps(v, propName, prop) {
|
||||
switch (propName) {
|
||||
case "border":
|
||||
this.border = prop;
|
||||
break;
|
||||
case "padding":
|
||||
this.padding = prop;
|
||||
break;
|
||||
case 'width':
|
||||
this.frameWidth = prop;
|
||||
break;
|
||||
case 'height':
|
||||
this.frameHeight = prop;
|
||||
break;
|
||||
case 'backgroundColor':
|
||||
this.backgroundColor = prop;
|
||||
break;
|
||||
@ -3642,53 +3667,29 @@ return __module.exports;
|
||||
}
|
||||
break;
|
||||
case 'x':
|
||||
this.x = prop;
|
||||
this.offsetX = prop;
|
||||
break;
|
||||
case 'y':
|
||||
this.y = prop;
|
||||
this.offsetY = prop;
|
||||
break;
|
||||
}
|
||||
}
|
||||
set width(v) {
|
||||
this.view.style.width = `${v}px`;
|
||||
}
|
||||
get width() {
|
||||
return this.view.offsetWidth;
|
||||
this.view.style.width = toPixelString(v - this.paddingLeft - this.paddingRight - this.borderWidth * 2);
|
||||
}
|
||||
set height(v) {
|
||||
this.view.style.height = `${v}px`;
|
||||
}
|
||||
get height() {
|
||||
return this.view.offsetHeight;
|
||||
this.view.style.height = toPixelString(v - this.paddingTop - this.paddingBottom - this.borderWidth * 2);
|
||||
}
|
||||
set x(v) {
|
||||
this.view.style.left = `${v}px`;
|
||||
}
|
||||
get x() {
|
||||
return this.view.offsetLeft;
|
||||
}
|
||||
get y() {
|
||||
return this.view.offsetTop;
|
||||
var _a;
|
||||
this.view.style.left = toPixelString(v + (((_a = this.superNode) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0));
|
||||
}
|
||||
set y(v) {
|
||||
this.view.style.top = `${v}px`;
|
||||
var _a;
|
||||
this.view.style.top = toPixelString(v + (((_a = this.superNode) === null || _a === void 0 ? void 0 : _a.paddingBottom) || 0));
|
||||
}
|
||||
set backgroundColor(v) {
|
||||
let strs = [];
|
||||
for (let i = 0; i < 32; i += 8) {
|
||||
strs.push(((v >> i) & 0xff).toString(16));
|
||||
}
|
||||
strs = strs.map(e => {
|
||||
if (e.length === 1) {
|
||||
return '0' + e;
|
||||
}
|
||||
return e;
|
||||
}).reverse();
|
||||
/// RGBA
|
||||
this.view.style.backgroundColor = `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`;
|
||||
}
|
||||
get backgroundColor() {
|
||||
return safeParse(this.view.style.backgroundColor);
|
||||
this.view.style.backgroundColor = toRGBAString(v);
|
||||
}
|
||||
static create(context, type) {
|
||||
const viewNodeClass = acquireViewNode(type);
|
||||
|
||||
2
dist/index.js.map
vendored
2
dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -7,33 +7,27 @@ enum LayoutSpec {
|
||||
AT_MOST = 2,
|
||||
}
|
||||
|
||||
function parse(str: string) {
|
||||
if (!str.startsWith("#")) {
|
||||
throw new Error(`Parse color error with ${str}`);
|
||||
}
|
||||
const val = parseInt(str.substr(1), 16);
|
||||
if (str.length === 7) {
|
||||
return (val | 0xff000000);
|
||||
}
|
||||
else if (str.length === 9) {
|
||||
return (val);
|
||||
}
|
||||
else {
|
||||
throw new Error(`Parse color error with ${str}`);
|
||||
}
|
||||
function toPixelString(v: number) {
|
||||
return `${v}px`
|
||||
}
|
||||
function safeParse(str: string, defVal = 0) {
|
||||
let color = defVal;
|
||||
try {
|
||||
color = parse(str);
|
||||
}
|
||||
catch (e) {
|
||||
}
|
||||
finally {
|
||||
return color;
|
||||
|
||||
function toRGBAString(color: number) {
|
||||
let strs = []
|
||||
for (let i = 0; i < 32; i += 8) {
|
||||
|
||||
strs.push(((color >> i) & 0xff).toString(16))
|
||||
}
|
||||
strs = strs.map(e => {
|
||||
if (e.length === 1) {
|
||||
return '0' + e
|
||||
}
|
||||
return e
|
||||
}).reverse()
|
||||
/// RGBA
|
||||
return `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`
|
||||
}
|
||||
|
||||
|
||||
export type DoricViewNodeClass = { new(...args: any[]): {} }
|
||||
|
||||
export interface DVModel {
|
||||
@ -67,10 +61,23 @@ export abstract class DoricViewNode {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}
|
||||
|
||||
border?: {
|
||||
width: number,
|
||||
color: number,
|
||||
}
|
||||
|
||||
frameWidth = 0
|
||||
|
||||
frameHeight = 0
|
||||
|
||||
offsetX = 0
|
||||
|
||||
offsetY = 0
|
||||
|
||||
view!: HTMLElement
|
||||
|
||||
|
||||
constructor(context: DoricContext) {
|
||||
this.context = context
|
||||
}
|
||||
@ -85,25 +92,62 @@ export abstract class DoricViewNode {
|
||||
|
||||
abstract build(): HTMLElement
|
||||
|
||||
get paddingLeft() {
|
||||
return this.padding.left || 0
|
||||
}
|
||||
|
||||
get paddingRight() {
|
||||
return this.padding.right || 0
|
||||
}
|
||||
|
||||
get paddingTop() {
|
||||
return this.padding.top || 0
|
||||
}
|
||||
|
||||
get paddingBottom() {
|
||||
return this.padding.bottom || 0
|
||||
}
|
||||
|
||||
get borderWidth() {
|
||||
return this.border?.width || 0
|
||||
}
|
||||
|
||||
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])
|
||||
}
|
||||
|
||||
this.width = this.frameWidth
|
||||
this.height = this.frameHeight
|
||||
if (this.border) {
|
||||
this.view.style.borderStyle = "solid"
|
||||
this.view.style.borderWidth = toPixelString(this.border.width)
|
||||
this.view.style.borderColor = toRGBAString(this.border.color)
|
||||
}
|
||||
if (this.padding) {
|
||||
this.view.style.paddingLeft = toPixelString(this.paddingLeft)
|
||||
this.view.style.paddingRight = toPixelString(this.paddingRight)
|
||||
this.view.style.paddingTop = toPixelString(this.paddingTop)
|
||||
this.view.style.paddingBottom = toPixelString(this.paddingBottom)
|
||||
}
|
||||
this.x = this.offsetX
|
||||
this.y = this.offsetY
|
||||
}
|
||||
|
||||
blendProps(v: HTMLElement, propName: string, prop: any) {
|
||||
switch (propName) {
|
||||
case "border":
|
||||
this.border = prop
|
||||
break
|
||||
case "padding":
|
||||
this.padding = prop
|
||||
break
|
||||
case 'width':
|
||||
this.frameWidth = prop as number
|
||||
break
|
||||
case 'height':
|
||||
this.frameHeight = prop as number
|
||||
break
|
||||
case 'backgroundColor':
|
||||
this.backgroundColor = prop as number
|
||||
break
|
||||
@ -114,64 +158,32 @@ export abstract class DoricViewNode {
|
||||
}
|
||||
break
|
||||
case 'x':
|
||||
this.x = prop as number
|
||||
this.offsetX = prop as number
|
||||
break
|
||||
case 'y':
|
||||
this.y = prop as number
|
||||
this.offsetY = prop as number
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
set width(v: number) {
|
||||
this.view.style.width = `${v}px`
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this.view.offsetWidth
|
||||
this.view.style.width = toPixelString(v - this.paddingLeft - this.paddingRight - this.borderWidth * 2)
|
||||
}
|
||||
|
||||
set height(v: number) {
|
||||
this.view.style.height = `${v}px`
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this.view.offsetHeight
|
||||
this.view.style.height = toPixelString(v - this.paddingTop - this.paddingBottom - this.borderWidth * 2)
|
||||
}
|
||||
|
||||
set x(v: number) {
|
||||
this.view.style.left = `${v}px`
|
||||
}
|
||||
|
||||
get x() {
|
||||
return this.view.offsetLeft
|
||||
}
|
||||
|
||||
get y() {
|
||||
return this.view.offsetTop
|
||||
this.view.style.left = toPixelString(v + (this.superNode?.paddingLeft || 0))
|
||||
}
|
||||
|
||||
set y(v: number) {
|
||||
this.view.style.top = `${v}px`
|
||||
this.view.style.top = toPixelString(v + (this.superNode?.paddingBottom || 0))
|
||||
}
|
||||
|
||||
set backgroundColor(v: number) {
|
||||
let strs = []
|
||||
for (let i = 0; i < 32; i += 8) {
|
||||
|
||||
strs.push(((v >> i) & 0xff).toString(16))
|
||||
}
|
||||
strs = strs.map(e => {
|
||||
if (e.length === 1) {
|
||||
return '0' + e
|
||||
}
|
||||
return e
|
||||
}).reverse()
|
||||
/// RGBA
|
||||
this.view.style.backgroundColor = `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`
|
||||
}
|
||||
|
||||
get backgroundColor() {
|
||||
return safeParse(this.view.style.backgroundColor)
|
||||
this.view.style.backgroundColor = toRGBAString(v)
|
||||
}
|
||||
|
||||
static create(context: DoricContext, type: string) {
|
||||
|
||||
Reference in New Issue
Block a user