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

at least current can control background

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-19 21:12:41 +08:00
parent 5d2e237d9f
commit 23b482806f
8 changed files with 99 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
dist/Counter.js vendored
View File

@ -13,83 +13,13 @@ var __metadata = (undefined && undefined.__metadata) || function (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.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
};
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,
};
}));
root.backgroundColor = doric.Color.BLUE;
}
}
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 {

59
dist/index.js vendored
View File

@ -3532,7 +3532,7 @@ return __module.exports;
},this,[{exports:{}}])]);
/**--------Lib--------*/
(function (axios, sandbox, doric) {
(function (axios, sandbox) {
'use strict';
axios = axios && axios.hasOwnProperty('default') ? axios['default'] : axios;
@ -3545,18 +3545,50 @@ return __module.exports;
class ShaderPlugin extends DoricPlugin {
render(ret) {
console.log('render', ret);
this.context.rootNode.blend(ret.props);
}
}
var LayoutSpec;
(function (LayoutSpec) {
LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
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 safeParse(str, defVal = 0) {
let color = defVal;
try {
color = parse(str);
}
catch (e) {
}
finally {
return color;
}
}
class DoricViewNode {
constructor(context) {
this.viewId = "";
this.viewType = "View";
this.layoutConfig = {
widthSpec: doric.LayoutSpec.EXACTLY,
heightSpec: doric.LayoutSpec.EXACTLY,
alignment: new doric.Gravity,
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
alignment: 0,
weight: 0,
margin: {
left: 0,
@ -3619,19 +3651,21 @@ return __module.exports;
return 0;
}
set backgroundColor(v) {
const strs = [];
let strs = [];
for (let i = 0; i < 32; i += 8) {
strs.push(((v >> i) & 0xff).toString(16));
}
this.view.style.backgroundColor = "#" + strs.map(e => {
strs = strs.map(e => {
if (e.length === 1) {
return '0' + e;
}
return e;
}).reverse().join('');
}).reverse();
/// RGBA
this.view.style.backgroundColor = `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`;
}
get backgroundColor() {
return doric.Color.safeParse(this.view.style.backgroundColor).toModel();
return safeParse(this.view.style.backgroundColor);
}
static create(context, type) {
const viewNodeClass = acquireViewNode(type);
@ -3811,8 +3845,6 @@ return __module.exports;
}
class DoricStackViewNode extends DoricGroupViewNode {
blendSubNode(model) {
}
build() {
return document.createElement('div');
}
@ -3946,6 +3978,7 @@ ${content}
this.pluginInstances = new Map;
createContext(this.contextId, content);
doricContexts.set(this.contextId, this);
this.rootNode = new DoricStackViewNode(this);
}
get panel() {
var _a;
@ -3976,8 +4009,8 @@ ${content}
this.context = new DoricContext(content);
const divElement = document.createElement('div');
divElement.style.height = '100%';
divElement.style.backgroundColor = 'red';
this.append(divElement);
this.context.rootNode.view = divElement;
this.context.init({
width: divElement.offsetWidth,
height: divElement.offsetHeight,
@ -3987,5 +4020,5 @@ ${content}
window.customElements.define('doric-div', DoricElement);
}(axios, doric, doric_lib));
}(axios, doric));
//# sourceMappingURL=index.js.map

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
src/DoricContext.ts
View File

@ -2,6 +2,7 @@ import { jsObtainContext, jsCallEntityMethod } from 'doric/src/runtime/sandbox'
import { Panel } from 'doric'
import { DoricPlugin } from "./DoricPlugin"
import { createContext } from "./DoricDriver"
import { DoricStackViewNode } from './shader/DoricStackViewNode'
const doricContexts: Map<string, DoricContext> = new Map
let __contextId__ = 0
@ -16,9 +17,11 @@ export function getDoricContext(contextId: string) {
export class DoricContext {
contextId = getContextId()
pluginInstances: Map<string, DoricPlugin> = new Map
rootNode: DoricStackViewNode
constructor(content: string) {
createContext(this.contextId, content)
doricContexts.set(this.contextId, this)
this.rootNode = new DoricStackViewNode(this)
}
get panel() {

2
src/DoricElement.ts
View File

@ -20,8 +20,8 @@ export class DoricElement extends HTMLElement {
const divElement = document.createElement('div')
divElement.style.height = '100%'
divElement.style.backgroundColor = 'red';
this.append(divElement)
this.context.rootNode.view = divElement
this.context.init({
width: divElement.offsetWidth,
height: divElement.offsetHeight,

5
src/plugins/ShaderPlugin.ts
View File

@ -1,7 +1,8 @@
import { DoricPlugin } from "../DoricPlugin";
import { DVModel } from "../shader/DoricViewNode";
export class ShaderPlugin extends DoricPlugin {
render(ret: any) {
console.log('render', ret)
render(ret: DVModel) {
this.context.rootNode.blend(ret.props)
}
}

4
src/shader/DoricStackViewNode.ts
View File

@ -1,8 +1,8 @@
import { DoricGroupViewNode, DVModel } from "./DoricViewNode";
import { DoricGroupViewNode } from "./DoricViewNode";
export class DoricStackViewNode extends DoricGroupViewNode {
build(): HTMLElement {
build() {
return document.createElement('div')
}

50
src/shader/DoricViewNode.ts
View File

@ -1,7 +1,39 @@
import { DoricContext } from "../DoricContext";
import { LayoutConfig, LayoutSpec, Gravity, Color } from "doric"
import { acquireViewNode } from "../DoricRegistry";
enum LayoutSpec {
EXACTLY = 0,
WRAP_CONTENT = 1,
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 safeParse(str: string, defVal = 0) {
let color = defVal;
try {
color = parse(str);
}
catch (e) {
}
finally {
return color;
}
}
export type DoricViewNodeClass = { new(...args: any[]): {} }
export interface DVModel {
@ -17,10 +49,10 @@ export abstract class DoricViewNode {
viewType = "View"
context: DoricContext
superNode?: DoricSuperViewNode
layoutConfig: LayoutConfig = {
layoutConfig = {
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
alignment: new Gravity,
alignment: 0,
weight: 0,
margin: {
left: 0,
@ -62,7 +94,7 @@ export abstract class DoricViewNode {
this.backgroundColor = prop as number
break
case 'layoutConfig':
const layoutConfig = prop as LayoutConfig
const layoutConfig = prop
for (let key in layoutConfig) {
Reflect.set(this.layoutConfig, key, Reflect.get(layoutConfig, key, layoutConfig))
}
@ -95,21 +127,23 @@ export abstract class DoricViewNode {
}
set backgroundColor(v: number) {
const strs = []
let strs = []
for (let i = 0; i < 32; i += 8) {
strs.push(((v >> i) & 0xff).toString(16))
}
this.view.style.backgroundColor = "#" + strs.map(e => {
strs = strs.map(e => {
if (e.length === 1) {
return '0' + e
}
return e
}).reverse().join('')
}).reverse()
/// RGBA
this.view.style.backgroundColor = `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`
}
get backgroundColor() {
return Color.safeParse(this.view.style.backgroundColor).toModel()
return safeParse(this.view.style.backgroundColor)
}
static create(context: DoricContext, type: string) {