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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
doric-demo/src/FlexDemo.ts Normal file
View File

@ -0,0 +1,78 @@
import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity, flexlayout } from "doric";
import { FlexDirection, Wrap, Justify, Align } from "doric/lib/src/util/flexbox";
const colors = [
"#f0932b",
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
]
function box(idx = 0) {
return stack([], {
flexConfig: {
width: 20,
height: 20,
},
backgroundColor: Color.parse(colors[idx || 0])
})
}
function boxStr(str: string, idx = 0) {
return text({
width: 20,
height: 20,
text: str,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
backgroundColor: Color.parse(colors[idx || 0])
})
}
function label(str: string) {
return text({
text: str,
textSize: 16,
})
}
@Entry
class LayoutDemo extends Panel {
build(root: Group) {
flexlayout(
[
box(0),
box(1),
box(2),
box(3),
box(4),
box(0),
box(1),
box(2),
box(3),
box(4),
box(0),
box(1),
box(2),
box(3),
box(4),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.GRAY,
flexConfig: {
flexDirection: FlexDirection.ROW,
width: 200,
height: 200,
justifyContent: Justify.CENTER,
alignContent: Align.CENTER,
flexWrap: Wrap.WRAP,
}
}
)
.in(root)
}
}

179
doric-iOS/Pod/Classes/Shader/DoricFlexNode.m
View File

@ -20,7 +20,7 @@
#import <YogaKit/UIView+Yoga.h>
#import "DoricFlexNode.h"
#import "DoricExtensions.h"
#import "YGLayout.h"
#import "UIView+Yoga.h"
@interface DoricFlexView : UIView
@end
@ -34,22 +34,25 @@ - (CGSize)sizeThatFits:(CGSize)size {
@implementation DoricFlexNode
- (UIView *)build {
return [[DoricFlexView new] also:^(DoricFlexView *it) {
it.yoga.isEnabled = YES;
[it configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
layout.isEnabled = YES;
}];
}];
}
- (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop {
if ([name isEqualToString:@"flexConfig"]) {
if ([prop isKindOfClass:[NSDictionary class]]) {
[((DoricFlexNode *) self.superNode) blendSubNode:self flexConfig:prop];
}
[self blendYoga:view.yoga from:prop];
} else {
[super blendView:view forPropName:name propValue:prop];
}
}
- (void)blendSubNode:(DoricViewNode *)subNode flexConfig:(NSDictionary *)flexConfig {
[subNode.view configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
layout.isEnabled = YES;
}];
[self blendYoga:subNode.view.yoga from:flexConfig];
}
- (void)blendYoga:(YGLayout *)yoga from:(NSDictionary *)flexConfig {
@ -65,55 +68,135 @@ - (void)blendYoga:(YGLayout *)yoga name:(NSString *)name value:(id)value {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"justifyContent"]) {
yoga.justifyContent = (YGJustify) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"alignContent"]) {
} else if ([name isEqualToString:@"alignContent"]) {
yoga.alignContent = (YGAlign) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
}else if ([name isEqualToString:@"justifyContent"]) {
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"alignItems"]) {
yoga.alignItems = (YGAlign) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"alignSelf"]) {
yoga.alignSelf = (YGAlign) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"positionType"]) {
yoga.position = (YGPositionType) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"flexWrap"]) {
yoga.flexWrap = (YGWrap) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"overFlow"]) {
yoga.overflow = (YGOverflow) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"display"]) {
yoga.display = (YGDisplay) [(NSNumber *) value integerValue];
} else if ([name isEqualToString:@"flex"]) {
yoga.flex = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"flexGrow"]) {
yoga.flexGrow = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"flexShrink"]) {
yoga.flexShrink = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"flexBasis"]) {
yoga.flexBasis = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginLeft"]) {
yoga.marginLeft = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginRight"]) {
yoga.marginRight = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginTop"]) {
yoga.marginTop = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginBottom"]) {
yoga.marginBottom = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginStart"]) {
yoga.marginStart = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginEnd"]) {
yoga.marginEnd = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginHorizontal"]) {
yoga.marginHorizontal = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"marginVertical"]) {
yoga.marginVertical = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"margin"]) {
yoga.margin = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingLeft"]) {
yoga.paddingLeft = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingRight"]) {
yoga.paddingRight = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingTop"]) {
yoga.paddingTop = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingBottom"]) {
yoga.paddingBottom = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingStart"]) {
yoga.paddingStart = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingEnd"]) {
yoga.paddingEnd = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingHorizontal"]) {
yoga.paddingHorizontal = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"paddingVertical"]) {
yoga.paddingVertical = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"padding"]) {
yoga.padding = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"borderLeftWidth"]) {
yoga.borderLeftWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"borderRightWidth"]) {
yoga.borderRightWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"borderTopWidth"]) {
yoga.borderTopWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"borderBottomWidth"]) {
yoga.borderBottomWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"borderStartWidth"]) {
yoga.borderStartWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"borderEndWidth"]) {
yoga.borderEndWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"borderWidth"]) {
yoga.borderWidth = [(NSNumber *) value floatValue];
} else if ([name isEqualToString:@"left"]) {
yoga.left = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"right"]) {
yoga.right = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"top"]) {
yoga.top = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"bottom"]) {
yoga.bottom = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"start"]) {
yoga.start = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"end"]) {
yoga.end = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"width"]) {
yoga.width = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"height"]) {
yoga.height = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"minWidth"]) {
yoga.minWidth = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"minHeight"]) {
yoga.minHeight = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"maxWidth"]) {
yoga.maxWidth = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"maxHeight"]) {
yoga.maxHeight = [self translateYGValueFromProperty:value];
} else if ([name isEqualToString:@"aspectRatio"]) {
yoga.aspectRatio = [(NSNumber *) value floatValue];
} else {
NSLog(@"Should not exists in flex box:%@,%@", name, value);
}
}
- (YGValue)translateYGValueFromProperty:(id)prop {
if ([prop isKindOfClass:[NSDictionary class]]) {
NSNumber *type = prop[@"type"];
NSNumber *value = prop[@"value"];
switch (type.integerValue) {
case YGUnitPoint:
return YGPointValue(value.floatValue);
case YGUnitPercent:
return YGPercentValue(value.floatValue);
case YGUnitUndefined:
return YGValueUndefined;
default:
return YGValueAuto;
}
} else if ([prop isKindOfClass:[NSNumber class]]) {
return YGPointValue([prop floatValue]);
} else {
return YGValueAuto;
}
}
- (void)requestLayout {
[super requestLayout];
for (UIView *view in self.view.subviews) {
[view.doricLayout apply];
}
[self.view.yoga applyLayoutPreservingOrigin:NO];
}
@end

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
}

21
doric-web/dist/index.js vendored
View File

@ -1809,7 +1809,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) {
@ -1899,6 +1898,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()) {
@ -2164,6 +2167,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;
@ -3930,6 +3947,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;
@ -3970,6 +3988,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;

4
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long