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

iOS:add FlexLayoutNode

Browse Source
This commit is contained in:
pengfei.zhou
2020-04-09 20:01:22 +08:00
committed by osborn
parent 404b4b594f
commit 6f09341723
16 changed files with 697 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
doric-js/bundle/doric-lib.es5.js
View File

@@ -376,7 +376,6 @@ var View = /** @class */ (function () {
View.prototype.getLocationOnScreen = function (context) {
return this.nativeChannel(context, "getLocationOnScreen")();
};
/**----------transform----------*/
View.prototype.doAnimation = function (context, animation) {
var _this = this;
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then(function (args) {
@@ -466,6 +465,10 @@ var View = /** @class */ (function () {
Property,
__metadata("design:type", Number)
], View.prototype, "rotation", void 0);
__decorate([
Property,
__metadata("design:type", Object)
], View.prototype, "flexConfig", void 0);
return View;
}());
var Superview = /** @class */ (function (_super) {
@@ -865,6 +868,36 @@ function vlayout(views, config) {
}
return ret;
}
var FlexLayout = /** @class */ (function (_super) {
__extends$1(FlexLayout, _super);
function FlexLayout() {
return _super !== null && _super.apply(this, arguments) || this;
}
return FlexLayout;
}(Group));
function flexlayout(views, config) {
var e_4, _a;
var ret = new FlexLayout;
try {
for (var views_4 = __values$1(views), views_4_1 = views_4.next(); !views_4_1.done; views_4_1 = views_4.next()) {
var v = views_4_1.value;
ret.addChild(v);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (views_4_1 && !views_4_1.done && (_a = views_4.return)) { _a.call(views_4); }
}
finally { if (e_4) { throw e_4.error; } }
}
if (config) {
for (var key in config) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret);
}
}
return ret;
}
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3185,6 +3218,7 @@ exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y;
exports.Color = Color;
exports.Draggable = Draggable;
exports.FlexLayout = FlexLayout;
exports.FlowLayout = FlowLayout;
exports.FlowLayoutItem = FlowLayoutItem;
exports.Gravity = Gravity;
@@ -3225,6 +3259,7 @@ exports.ViewModel = ViewModel;
exports.animate = animate;
exports.coordinator = coordinator;
exports.draggable = draggable;
exports.flexlayout = flexlayout;
exports.flowItem = flowItem;
exports.flowlayout = flowlayout;
exports.gravity = gravity;

21
doric-js/bundle/doric-lib.js
View File

@@ -292,7 +292,6 @@ class View {
getLocationOnScreen(context) {
return this.nativeChannel(context, "getLocationOnScreen")();
}
/**----------transform----------*/
doAnimation(context, animation) {
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
for (let key in args) {
@@ -382,6 +381,10 @@ __decorate([
Property,
__metadata("design:type", Number)
], View.prototype, "rotation", void 0);
__decorate([
Property,
__metadata("design:type", Object)
], View.prototype, "flexConfig", void 0);
class Superview extends View {
subviewById(id) {
for (let v of this.allSubviews()) {
@@ -647,6 +650,20 @@ function vlayout(views, config) {
}
return ret;
}
class FlexLayout extends Group {
}
function flexlayout(views, config) {
const ret = new FlexLayout;
for (let v of views) {
ret.addChild(v);
}
if (config) {
for (let key in config) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret);
}
}
return ret;
}
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2413,6 +2430,7 @@ exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y;
exports.Color = Color;
exports.Draggable = Draggable;
exports.FlexLayout = FlexLayout;
exports.FlowLayout = FlowLayout;
exports.FlowLayoutItem = FlowLayoutItem;
exports.Gravity = Gravity;
@@ -2453,6 +2471,7 @@ exports.ViewModel = ViewModel;
exports.animate = animate;
exports.coordinator = coordinator;
exports.draggable = draggable;
exports.flexlayout = flexlayout;
exports.flowItem = flowItem;
exports.flowlayout = flowlayout;
exports.gravity = gravity;

21
doric-js/bundle/doric-vm.js
View File

@@ -1751,7 +1751,6 @@ class View {
getLocationOnScreen(context) {
return this.nativeChannel(context, "getLocationOnScreen")();
}
/**----------transform----------*/
doAnimation(context, animation) {
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
for (let key in args) {
@@ -1841,6 +1840,10 @@ __decorate([
Property,
__metadata("design:type", Number)
], View.prototype, "rotation", void 0);
__decorate([
Property,
__metadata("design:type", Object)
], View.prototype, "flexConfig", void 0);
class Superview extends View {
subviewById(id) {
for (let v of this.allSubviews()) {
@@ -2106,6 +2109,20 @@ function vlayout(views, config) {
}
return ret;
}
class FlexLayout extends Group {
}
function flexlayout(views, config) {
const ret = new FlexLayout;
for (let v of views) {
ret.addChild(v);
}
if (config) {
for (let key in config) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret);
}
}
return ret;
}
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4007,6 +4024,7 @@ exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y;
exports.Color = Color;
exports.Draggable = Draggable;
exports.FlexLayout = FlexLayout;
exports.FlowLayout = FlowLayout;
exports.FlowLayoutItem = FlowLayoutItem;
exports.Gravity = Gravity;
@@ -4047,6 +4065,7 @@ exports.ViewModel = ViewModel;
exports.animate = animate;
exports.coordinator = coordinator;
exports.draggable = draggable;
exports.flexlayout = flexlayout;
exports.flowItem = flowItem;
exports.flowlayout = flowlayout;
exports.gravity = gravity;

133
doric-js/index.d.ts vendored
View File

@@ -125,6 +125,7 @@ declare module 'doric/lib/src/ui/view' {
import { BridgeContext } from "doric/lib/src/runtime/global";
import { LayoutConfig } from 'doric/lib/src/util/layoutconfig';
import { IAnimation } from "doric/lib/src/ui/animation";
import { FlexConfig } from "doric/lib/src/util/flexbox";
export function Property(target: Object, propKey: string): void;
export interface IView {
width?: number;
@@ -178,6 +179,10 @@ declare module 'doric/lib/src/ui/view' {
* rotation*PI
*/
rotation?: number;
/**
* Only affected when its superview or itself is FlexLayout.
*/
flexConfig?: FlexConfig;
}
export type NativeViewModel = {
id: string;
@@ -267,6 +272,7 @@ declare module 'doric/lib/src/ui/view' {
pivotY?: number;
rotation?: number;
/**----------transform----------*/
flexConfig?: FlexConfig;
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
}
export abstract class Superview extends View {
@@ -457,6 +463,9 @@ declare module 'doric/lib/src/widget/layouts' {
export function stack(views: View[], config?: IStack): Stack;
export function hlayout(views: View[], config?: IHLayout): HLayout;
export function vlayout(views: View[], config?: IVLayout): VLayout;
export class FlexLayout extends Group {
}
export function flexlayout(views: View[], config: IView): FlexLayout;
export {};
}
@@ -1301,3 +1310,127 @@ declare module 'doric/lib/src/pattern/mvvm' {
}
}
declare module 'doric/lib/src/util/flexbox' {
import { Modeling } from "doric/lib/src/util/types";
enum ValueType {
Undefined = 0,
Point = 1,
Percent = 2,
Auto = 3
}
export class FlexTypedValue implements Modeling {
type: ValueType;
value: number;
static Auto: FlexTypedValue;
static percent(v: number): FlexTypedValue;
static point(v: number): FlexTypedValue;
toModel(): {
type: ValueType;
value: number;
};
}
export enum FlexDirection {
COLUMN = 0,
COLUMN_REVERSE = 1,
ROW = 2,
ROW_REVERSE = 3
}
export enum Align {
AUTO = 0,
FLEX_START = 1,
CENTER = 2,
FLEX_END = 3,
STRETCH = 4,
BASELINE = 5,
SPACE_BETWEEN = 6,
SPACE_AROUND = 7
}
export enum Justify {
FLEX_START = 0,
CENTER = 1,
FLEX_END = 2,
SPACE_BETWEEN = 3,
SPACE_AROUND = 4,
SPACE_EVENLY = 5
}
export enum Direction {
INHERIT = 0,
LTR = 1,
RTL = 2
}
export enum PositionType {
RELATIVE = 0,
ABSOLUTE = 1
}
export enum Wrap {
NO_WRAP = 0,
WRAP = 1,
WRAP_REVERSE = 2
}
export enum OverFlow {
VISIBLE = 0,
HIDDEN = 1,
SCROLL = 2
}
export enum Display {
FLEX = 0,
NONE = 1
}
export type FlexValue = FlexTypedValue | number;
export interface FlexConfig {
direction?: Direction;
flexDirection?: FlexDirection;
justifyContent?: Justify;
alignContent?: Align;
alignItems?: Align;
alignSelf?: Align;
positionType?: PositionType;
flexWrap?: Wrap;
overFlow?: OverFlow;
display?: Display;
flex?: number;
flexGrow?: number;
flexShrink?: number;
flexBasis?: FlexValue;
marginLeft?: FlexValue;
marginRight?: FlexValue;
marginTop?: FlexValue;
marginBottom?: FlexValue;
marginStart?: FlexValue;
marginEnd?: FlexValue;
marginHorizontal?: FlexValue;
marginVertical?: FlexValue;
margin?: FlexValue;
paddingLeft?: FlexValue;
paddingRight?: FlexValue;
paddingTop?: FlexValue;
paddingBottom?: FlexValue;
paddingStart?: FlexValue;
paddingEnd?: FlexValue;
paddingHorizontal?: FlexValue;
paddingVertical?: FlexValue;
padding?: FlexValue;
borderLeftWidth?: number;
borderRightWidth?: number;
borderTopWidth?: number;
borderBottomWidth?: number;
borderStartWidth?: number;
borderEndWidth?: number;
borderWidth?: number;
left?: FlexValue;
right?: FlexValue;
top?: FlexValue;
bottom?: FlexValue;
start?: FlexValue;
end?: FlexValue;
width?: FlexValue;
height?: FlexValue;
minWidth?: FlexValue;
minHeight?: FlexValue;
maxWidth?: FlexValue;
maxHeight?: FlexValue;
aspectRatio?: number;
}
export {};
}

7
doric-js/lib/src/ui/view.d.ts vendored
View File

@@ -3,6 +3,7 @@ import { Modeling, Model } from "../util/types";
import { BridgeContext } from "../runtime/global";
import { LayoutConfig } from '../util/layoutconfig';
import { IAnimation } from "./animation";
import { FlexConfig } from "../util/flexbox";
export declare function Property(target: Object, propKey: string): void;
export interface IView {
width?: number;
@@ -56,6 +57,11 @@ export interface IView {
* rotation*PI
*/
rotation?: number;
/**----------transform----------*/
/**
* Only affected when its superview or itself is FlexLayout.
*/
flexConfig?: FlexConfig;
}
export declare type NativeViewModel = {
id: string;
@@ -149,6 +155,7 @@ export declare abstract class View implements Modeling, IView {
pivotY?: number;
rotation?: number;
/**----------transform----------*/
flexConfig?: FlexConfig;
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
}
export declare abstract class Superview extends View {

5
doric-js/lib/src/ui/view.js
View File

@@ -177,7 +177,6 @@ export class View {
getLocationOnScreen(context) {
return this.nativeChannel(context, "getLocationOnScreen")();
}
/**----------transform----------*/
doAnimation(context, animation) {
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
for (let key in args) {
@@ -267,6 +266,10 @@ __decorate([
Property,
__metadata("design:type", Number)
], View.prototype, "rotation", void 0);
__decorate([
Property,
__metadata("design:type", Object)
], View.prototype, "flexConfig", void 0);
export class Superview extends View {
subviewById(id) {
for (let v of this.allSubviews()) {

121
doric-js/lib/src/util/flexbox.d.ts vendored Normal file
View File

@@ -0,0 +1,121 @@
import { Modeling } from "./types";
declare enum ValueType {
Undefined = 0,
Point = 1,
Percent = 2,
Auto = 3
}
export declare class FlexTypedValue implements Modeling {
type: ValueType;
value: number;
static Auto: FlexTypedValue;
static percent(v: number): FlexTypedValue;
static point(v: number): FlexTypedValue;
toModel(): {
type: ValueType;
value: number;
};
}
export declare enum FlexDirection {
COLUMN = 0,
COLUMN_REVERSE = 1,
ROW = 2,
ROW_REVERSE = 3
}
export declare enum Align {
AUTO = 0,
FLEX_START = 1,
CENTER = 2,
FLEX_END = 3,
STRETCH = 4,
BASELINE = 5,
SPACE_BETWEEN = 6,
SPACE_AROUND = 7
}
export declare enum Justify {
FLEX_START = 0,
CENTER = 1,
FLEX_END = 2,
SPACE_BETWEEN = 3,
SPACE_AROUND = 4,
SPACE_EVENLY = 5
}
export declare enum Direction {
INHERIT = 0,
LTR = 1,
RTL = 2
}
export declare enum PositionType {
RELATIVE = 0,
ABSOLUTE = 1
}
export declare enum Wrap {
NO_WRAP = 0,
WRAP = 1,
WRAP_REVERSE = 2
}
export declare enum OverFlow {
VISIBLE = 0,
HIDDEN = 1,
SCROLL = 2
}
export declare enum Display {
FLEX = 0,
NONE = 1
}
export declare type FlexValue = FlexTypedValue | number;
export interface FlexConfig {
direction?: Direction;
flexDirection?: FlexDirection;
justifyContent?: Justify;
alignContent?: Align;
alignItems?: Align;
alignSelf?: Align;
positionType?: PositionType;
flexWrap?: Wrap;
overFlow?: OverFlow;
display?: Display;
flex?: number;
flexGrow?: number;
flexShrink?: number;
flexBasis?: FlexValue;
marginLeft?: FlexValue;
marginRight?: FlexValue;
marginTop?: FlexValue;
marginBottom?: FlexValue;
marginStart?: FlexValue;
marginEnd?: FlexValue;
marginHorizontal?: FlexValue;
marginVertical?: FlexValue;
margin?: FlexValue;
paddingLeft?: FlexValue;
paddingRight?: FlexValue;
paddingTop?: FlexValue;
paddingBottom?: FlexValue;
paddingStart?: FlexValue;
paddingEnd?: FlexValue;
paddingHorizontal?: FlexValue;
paddingVertical?: FlexValue;
padding?: FlexValue;
borderLeftWidth?: number;
borderRightWidth?: number;
borderTopWidth?: number;
borderBottomWidth?: number;
borderStartWidth?: number;
borderEndWidth?: number;
borderWidth?: number;
left?: FlexValue;
right?: FlexValue;
top?: FlexValue;
bottom?: FlexValue;
start?: FlexValue;
end?: FlexValue;
width?: FlexValue;
height?: FlexValue;
minWidth?: FlexValue;
minHeight?: FlexValue;
maxWidth?: FlexValue;
maxHeight?: FlexValue;
aspectRatio?: number;
}
export {};

87
doric-js/lib/src/util/flexbox.js Normal file
View File

@@ -0,0 +1,87 @@
var ValueType;
(function (ValueType) {
ValueType[ValueType["Undefined"] = 0] = "Undefined";
ValueType[ValueType["Point"] = 1] = "Point";
ValueType[ValueType["Percent"] = 2] = "Percent";
ValueType[ValueType["Auto"] = 3] = "Auto";
})(ValueType || (ValueType = {}));
export class FlexTypedValue {
constructor() {
this.type = ValueType.Auto;
this.value = 0;
}
static percent(v) {
const ret = new FlexTypedValue;
ret.type = ValueType.Percent;
ret.value = v;
return ret;
}
static point(v) {
const ret = new FlexTypedValue;
ret.type = ValueType.Point;
ret.value = v;
return ret;
}
toModel() {
return {
type: this.type,
value: this.value,
};
}
}
FlexTypedValue.Auto = new FlexTypedValue;
export var FlexDirection;
(function (FlexDirection) {
FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN";
FlexDirection[FlexDirection["COLUMN_REVERSE"] = 1] = "COLUMN_REVERSE";
FlexDirection[FlexDirection["ROW"] = 2] = "ROW";
FlexDirection[FlexDirection["ROW_REVERSE"] = 3] = "ROW_REVERSE";
})(FlexDirection || (FlexDirection = {}));
export var Align;
(function (Align) {
Align[Align["AUTO"] = 0] = "AUTO";
Align[Align["FLEX_START"] = 1] = "FLEX_START";
Align[Align["CENTER"] = 2] = "CENTER";
Align[Align["FLEX_END"] = 3] = "FLEX_END";
Align[Align["STRETCH"] = 4] = "STRETCH";
Align[Align["BASELINE"] = 5] = "BASELINE";
Align[Align["SPACE_BETWEEN"] = 6] = "SPACE_BETWEEN";
Align[Align["SPACE_AROUND"] = 7] = "SPACE_AROUND";
})(Align || (Align = {}));
export var Justify;
(function (Justify) {
Justify[Justify["FLEX_START"] = 0] = "FLEX_START";
Justify[Justify["CENTER"] = 1] = "CENTER";
Justify[Justify["FLEX_END"] = 2] = "FLEX_END";
Justify[Justify["SPACE_BETWEEN"] = 3] = "SPACE_BETWEEN";
Justify[Justify["SPACE_AROUND"] = 4] = "SPACE_AROUND";
Justify[Justify["SPACE_EVENLY"] = 5] = "SPACE_EVENLY";
})(Justify || (Justify = {}));
export var Direction;
(function (Direction) {
Direction[Direction["INHERIT"] = 0] = "INHERIT";
Direction[Direction["LTR"] = 1] = "LTR";
Direction[Direction["RTL"] = 2] = "RTL";
})(Direction || (Direction = {}));
export var PositionType;
(function (PositionType) {
PositionType[PositionType["RELATIVE"] = 0] = "RELATIVE";
PositionType[PositionType["ABSOLUTE"] = 1] = "ABSOLUTE";
})(PositionType || (PositionType = {}));
export var Wrap;
(function (Wrap) {
Wrap[Wrap["NO_WRAP"] = 0] = "NO_WRAP";
Wrap[Wrap["WRAP"] = 1] = "WRAP";
Wrap[Wrap["WRAP_REVERSE"] = 2] = "WRAP_REVERSE";
})(Wrap || (Wrap = {}));
export var OverFlow;
(function (OverFlow) {
OverFlow[OverFlow["VISIBLE"] = 0] = "VISIBLE";
OverFlow[OverFlow["HIDDEN"] = 1] = "HIDDEN";
OverFlow[OverFlow["SCROLL"] = 2] = "SCROLL";
})(OverFlow || (OverFlow = {}));
export var Display;
(function (Display) {
Display[Display["FLEX"] = 0] = "FLEX";
Display[Display["NONE"] = 1] = "NONE";
})(Display || (Display = {}));

3
doric-js/lib/src/widget/layouts.d.ts vendored
View File

@@ -25,4 +25,7 @@ export declare class HLayout extends LinearLayout implements IHLayout {
export declare function stack(views: View[], config?: IStack): Stack;
export declare function hlayout(views: View[], config?: IHLayout): HLayout;
export declare function vlayout(views: View[], config?: IVLayout): VLayout;
export declare class FlexLayout extends Group {
}
export declare function flexlayout(views: View[], config: IView): FlexLayout;
export {};

14
doric-js/lib/src/widget/layouts.js
View File

@@ -82,3 +82,17 @@ export function vlayout(views, config) {
}
return ret;
}
export class FlexLayout extends Group {
}
export function flexlayout(views, config) {
const ret = new FlexLayout;
for (let v of views) {
ret.addChild(v);
}
if (config) {
for (let key in config) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret);
}
}
return ret;
}

30
doric-js/src/util/flexbox.ts
View File

@@ -16,27 +16,28 @@
import { Modeling } from "./types";
enum ValueType {
Point = 0,
Percent = 1,
Auto = 2,
Undefined = 0,
Point = 1,
Percent = 2,
Auto = 3,
}
export class FlexValue implements Modeling {
export class FlexTypedValue implements Modeling {
type = ValueType.Auto
value = 0
static Auto = new FlexValue
static Auto = new FlexTypedValue
static percent(v: number) {
const ret = new FlexValue
const ret = new FlexTypedValue
ret.type = ValueType.Percent
ret.value = v
return ret
}
static point(v: number) {
const ret = new FlexValue
const ret = new FlexTypedValue
ret.type = ValueType.Point
ret.value = v
return ret
@@ -102,6 +103,7 @@ export enum Display {
FLEX = 0,
NONE = 1,
}
export type FlexValue = FlexTypedValue | number
export interface FlexConfig {
direction?: Direction
@@ -140,13 +142,13 @@ export interface FlexConfig {
padding?: FlexValue
borderWidthLeft?: FlexValue
borderWidthRight?: FlexValue
borderWidthTop?: FlexValue
borderWidthBottom?: FlexValue
borderWidthStart?: FlexValue
borderWidthEnd?: FlexValue
borderWidth?: FlexValue
borderLeftWidth?: number
borderRightWidth?: number
borderTopWidth?: number
borderBottomWidth?: number
borderStartWidth?: number
borderEndWidth?: number
borderWidth?: number
left?: FlexValue
right?: FlexValue

1
doric-js/src/widget/layouts.ts
View File

@@ -108,4 +108,5 @@ export function flexlayout(views: View[], config: IView) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret)
}
}
return ret
}