refact dir
This commit is contained in:
pengfei.zhou
30
js-framework/src/ui/page.js
Normal file
30
js-framework/src/ui/page.js
Normal file
@@ -0,0 +1,30 @@
|
||||
"use strict";
|
||||
exports.__esModule = true;
|
||||
var Page = /** @class */ (function () {
|
||||
function Page() {
|
||||
}
|
||||
Page.prototype.onCreate = function () { };
|
||||
Page.prototype.onDestory = function () { };
|
||||
Page.prototype.onShow = function () { };
|
||||
Page.prototype.onHidden = function () { };
|
||||
/**
|
||||
* Native Call
|
||||
*/
|
||||
Page.prototype.__onCreate__ = function () {
|
||||
this.onCreate();
|
||||
};
|
||||
Page.prototype.__onDestory__ = function () {
|
||||
this.onDestory();
|
||||
};
|
||||
Page.prototype.__onShow__ = function () {
|
||||
this.onShow();
|
||||
};
|
||||
Page.prototype.__onHidden__ = function () {
|
||||
this.onHidden();
|
||||
};
|
||||
Page.prototype.__build__ = function () {
|
||||
return this.build();
|
||||
};
|
||||
return Page;
|
||||
}());
|
||||
exports.Page = Page;
|
||||
34
js-framework/src/ui/page.ts
Normal file
34
js-framework/src/ui/page.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { View } from "./view";
|
||||
|
||||
export abstract class Page {
|
||||
onCreate(): void { }
|
||||
onDestory(): void { }
|
||||
onShow(): void { }
|
||||
onHidden(): void { }
|
||||
|
||||
abstract build(): View
|
||||
|
||||
|
||||
/**
|
||||
* Native Call
|
||||
*/
|
||||
private __onCreate__(): void {
|
||||
this.onCreate()
|
||||
}
|
||||
|
||||
private __onDestory__(): void {
|
||||
this.onDestory()
|
||||
}
|
||||
|
||||
private __onShow__(): void {
|
||||
this.onShow()
|
||||
}
|
||||
|
||||
private __onHidden__(): void {
|
||||
this.onHidden()
|
||||
}
|
||||
|
||||
private __build__(): View {
|
||||
return this.build()
|
||||
}
|
||||
}
|
||||
0
js-framework/src/ui/state.js
Normal file
0
js-framework/src/ui/state.js
Normal file
0
js-framework/src/ui/state.ts
Normal file
0
js-framework/src/ui/state.ts
Normal file
251
js-framework/src/ui/view.js
Normal file
251
js-framework/src/ui/view.js
Normal file
@@ -0,0 +1,251 @@
|
||||
"use strict";
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __decorate = (this && this.__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;
|
||||
};
|
||||
exports.__esModule = true;
|
||||
require("reflect-metadata");
|
||||
function Property(target, propKey) {
|
||||
Reflect.defineMetadata(propKey, true, target);
|
||||
}
|
||||
exports.Property = Property;
|
||||
var View = /** @class */ (function () {
|
||||
function View() {
|
||||
var _this = this;
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
/** Anchor end*/
|
||||
this.__dirty_props__ = {};
|
||||
return new Proxy(this, {
|
||||
get: function (target, p) {
|
||||
return Reflect.get(target, p);
|
||||
},
|
||||
set: function (target, p, v) {
|
||||
var oldV = Reflect.get(target, p);
|
||||
var ret = Reflect.set(target, p, v);
|
||||
if (Reflect.getMetadata(p, target)) {
|
||||
_this.onPropertyChanged(p.toString(), oldV, v);
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
});
|
||||
}
|
||||
Object.defineProperty(View.prototype, "left", {
|
||||
/** Anchor start*/
|
||||
get: function () {
|
||||
return this.x;
|
||||
},
|
||||
set: function (v) {
|
||||
this.x = v;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(View.prototype, "right", {
|
||||
get: function () {
|
||||
return this.x + this.width;
|
||||
},
|
||||
set: function (v) {
|
||||
this.x = v - this.width;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(View.prototype, "top", {
|
||||
get: function () {
|
||||
return this.y;
|
||||
},
|
||||
set: function (v) {
|
||||
this.y = v;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(View.prototype, "bottom", {
|
||||
get: function () {
|
||||
return this.y + this.height;
|
||||
},
|
||||
set: function (v) {
|
||||
this.y = v - this.height;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
View.prototype.onPropertyChanged = function (propKey, oldV, newV) {
|
||||
if (newV instanceof Object
|
||||
&& Reflect.has(newV, 'toModel')
|
||||
&& Reflect.get(newV, 'toModel') instanceof Function) {
|
||||
newV = Reflect.apply(Reflect.get(newV, 'toModel'), newV, []);
|
||||
}
|
||||
this.__dirty_props__[propKey] = newV;
|
||||
};
|
||||
View.prototype.toModel = function () {
|
||||
return this.__dirty_props__ || {};
|
||||
};
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "width");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "height");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "x");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "y");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "bgColor");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "corners");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "border");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "shadow");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "alpha");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "padding");
|
||||
__decorate([
|
||||
Property
|
||||
], View.prototype, "config");
|
||||
return View;
|
||||
}());
|
||||
exports.View = View;
|
||||
var Alignment;
|
||||
(function (Alignment) {
|
||||
Alignment[Alignment["center"] = 0] = "center";
|
||||
Alignment[Alignment["start"] = 1] = "start";
|
||||
Alignment[Alignment["end"] = 2] = "end";
|
||||
})(Alignment = exports.Alignment || (exports.Alignment = {}));
|
||||
var Gravity;
|
||||
(function (Gravity) {
|
||||
Gravity[Gravity["center"] = 0] = "center";
|
||||
Gravity[Gravity["left"] = 1] = "left";
|
||||
Gravity[Gravity["right"] = 2] = "right";
|
||||
Gravity[Gravity["top"] = 3] = "top";
|
||||
Gravity[Gravity["bottom"] = 4] = "bottom";
|
||||
})(Gravity = exports.Gravity || (exports.Gravity = {}));
|
||||
var Group = /** @class */ (function (_super) {
|
||||
__extends(Group, _super);
|
||||
function Group() {
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this.children = [];
|
||||
return _this;
|
||||
}
|
||||
__decorate([
|
||||
Property
|
||||
], Group.prototype, "children");
|
||||
return Group;
|
||||
}(View));
|
||||
exports.Group = Group;
|
||||
var Stack = /** @class */ (function (_super) {
|
||||
__extends(Stack, _super);
|
||||
function Stack() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
__decorate([
|
||||
Property
|
||||
], Stack.prototype, "gravity");
|
||||
return Stack;
|
||||
}(Group));
|
||||
exports.Stack = Stack;
|
||||
var LinearLayout = /** @class */ (function (_super) {
|
||||
__extends(LinearLayout, _super);
|
||||
function LinearLayout() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
__decorate([
|
||||
Property
|
||||
], LinearLayout.prototype, "space");
|
||||
__decorate([
|
||||
Property
|
||||
], LinearLayout.prototype, "gravity");
|
||||
return LinearLayout;
|
||||
}(Group));
|
||||
var VLayout = /** @class */ (function (_super) {
|
||||
__extends(VLayout, _super);
|
||||
function VLayout() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
return VLayout;
|
||||
}(LinearLayout));
|
||||
exports.VLayout = VLayout;
|
||||
var HLayout = /** @class */ (function (_super) {
|
||||
__extends(HLayout, _super);
|
||||
function HLayout() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
return HLayout;
|
||||
}(LinearLayout));
|
||||
exports.HLayout = HLayout;
|
||||
var Text = /** @class */ (function (_super) {
|
||||
__extends(Text, _super);
|
||||
function Text() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
__decorate([
|
||||
Property
|
||||
], Text.prototype, "text");
|
||||
__decorate([
|
||||
Property
|
||||
], Text.prototype, "textColor");
|
||||
__decorate([
|
||||
Property
|
||||
], Text.prototype, "textSize");
|
||||
__decorate([
|
||||
Property
|
||||
], Text.prototype, "maxLines");
|
||||
return Text;
|
||||
}(View));
|
||||
exports.Text = Text;
|
||||
var Image = /** @class */ (function (_super) {
|
||||
__extends(Image, _super);
|
||||
function Image() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
__decorate([
|
||||
Property
|
||||
], Image.prototype, "imageUrl");
|
||||
return Image;
|
||||
}(View));
|
||||
exports.Image = Image;
|
||||
var List = /** @class */ (function (_super) {
|
||||
__extends(List, _super);
|
||||
function List() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
return List;
|
||||
}(View));
|
||||
exports.List = List;
|
||||
var Slide = /** @class */ (function (_super) {
|
||||
__extends(Slide, _super);
|
||||
function Slide() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
return Slide;
|
||||
}(View));
|
||||
exports.Slide = Slide;
|
||||
191
js-framework/src/ui/view.ts
Normal file
191
js-framework/src/ui/view.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
import { Color, GradientColor } from "../util/color"
|
||||
import { Modeling, Model } from "../util/types";
|
||||
import "reflect-metadata"
|
||||
|
||||
export function Property(target: Object, propKey: string) {
|
||||
Reflect.defineMetadata(propKey, true, target)
|
||||
}
|
||||
|
||||
export abstract class View implements Modeling {
|
||||
@Property
|
||||
width: number = 0
|
||||
|
||||
@Property
|
||||
height: number = 0
|
||||
|
||||
@Property
|
||||
x: number = 0
|
||||
|
||||
@Property
|
||||
y: number = 0
|
||||
|
||||
@Property
|
||||
bgColor?: Color | GradientColor
|
||||
|
||||
@Property
|
||||
corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
|
||||
|
||||
@Property
|
||||
border?: { width: number; color: Color; }
|
||||
|
||||
@Property
|
||||
shadow?: { color: Color; opacity: number; radius: number; offset: { width: number; height: number; }; }
|
||||
|
||||
@Property
|
||||
alpha?: number
|
||||
constructor() {
|
||||
return new Proxy(this, {
|
||||
get: (target, p) => {
|
||||
return Reflect.get(target, p)
|
||||
},
|
||||
set: (target, p, v) => {
|
||||
const oldV = Reflect.get(target, p)
|
||||
const ret = Reflect.set(target, p, v)
|
||||
if (Reflect.getMetadata(p, target)) {
|
||||
this.onPropertyChanged(p.toString(), oldV, v)
|
||||
}
|
||||
return ret
|
||||
}
|
||||
})
|
||||
}
|
||||
/** Anchor start*/
|
||||
get left() {
|
||||
return this.x
|
||||
}
|
||||
set left(v: number) {
|
||||
this.x = v
|
||||
}
|
||||
|
||||
get right() {
|
||||
return this.x + this.width
|
||||
}
|
||||
set right(v: number) {
|
||||
this.x = v - this.width
|
||||
}
|
||||
|
||||
get top() {
|
||||
return this.y
|
||||
}
|
||||
|
||||
set top(v: number) {
|
||||
this.y = v
|
||||
}
|
||||
|
||||
get bottom() {
|
||||
return this.y + this.height
|
||||
}
|
||||
|
||||
set bottom(v: number) {
|
||||
this.y = v - this.height
|
||||
}
|
||||
/** Anchor end*/
|
||||
|
||||
__dirty_props__: { [index: string]: Model | undefined } = {}
|
||||
|
||||
onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {
|
||||
if (newV instanceof Object
|
||||
&& Reflect.has(newV, 'toModel')
|
||||
&& Reflect.get(newV, 'toModel') instanceof Function) {
|
||||
newV = Reflect.apply(Reflect.get(newV, 'toModel'), newV, [])
|
||||
}
|
||||
this.__dirty_props__[propKey] = newV
|
||||
}
|
||||
|
||||
toModel() {
|
||||
return this.__dirty_props__ || {}
|
||||
}
|
||||
|
||||
@Property
|
||||
padding?: {
|
||||
left?: number,
|
||||
right?: number,
|
||||
top?: number,
|
||||
bottom?: number,
|
||||
}
|
||||
|
||||
@Property
|
||||
config?: Config
|
||||
}
|
||||
|
||||
export enum Alignment {
|
||||
center = 0,
|
||||
start,
|
||||
end,
|
||||
}
|
||||
|
||||
export enum Gravity {
|
||||
center = 0,
|
||||
left,
|
||||
right,
|
||||
top,
|
||||
bottom,
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
margin?: {
|
||||
left?: number,
|
||||
right?: number,
|
||||
top?: number,
|
||||
bottom?: number,
|
||||
}
|
||||
alignment?: Alignment
|
||||
}
|
||||
|
||||
export interface StackConfig extends Config {
|
||||
|
||||
}
|
||||
|
||||
export interface LayoutConfig extends Config {
|
||||
weight?: number
|
||||
}
|
||||
|
||||
export abstract class Group extends View {
|
||||
@Property
|
||||
children: View[] = []
|
||||
}
|
||||
|
||||
export class Stack extends Group {
|
||||
@Property
|
||||
gravity?: number
|
||||
}
|
||||
|
||||
class LinearLayout extends Group {
|
||||
@Property
|
||||
space?: number
|
||||
|
||||
@Property
|
||||
gravity?: number
|
||||
}
|
||||
|
||||
export class VLayout extends LinearLayout {
|
||||
}
|
||||
|
||||
export class HLayout extends LinearLayout {
|
||||
}
|
||||
|
||||
export class Text extends View {
|
||||
@Property
|
||||
text?: string
|
||||
|
||||
@Property
|
||||
textColor?: Color
|
||||
|
||||
@Property
|
||||
textSize?: number
|
||||
|
||||
@Property
|
||||
maxLines?: number
|
||||
}
|
||||
|
||||
export class Image extends View {
|
||||
@Property
|
||||
imageUrl?: string
|
||||
}
|
||||
|
||||
export class List extends View {
|
||||
|
||||
}
|
||||
|
||||
export class Slide extends View {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user