iOS:add FlexLayoutNode
This commit is contained in:
parent
404b4b594f
commit
6f09341723
78
doric-demo/src/FlexDemo.ts
Normal file
78
doric-demo/src/FlexDemo.ts
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
@ -20,7 +20,7 @@
|
|||||||
#import <YogaKit/UIView+Yoga.h>
|
#import <YogaKit/UIView+Yoga.h>
|
||||||
#import "DoricFlexNode.h"
|
#import "DoricFlexNode.h"
|
||||||
#import "DoricExtensions.h"
|
#import "DoricExtensions.h"
|
||||||
#import "YGLayout.h"
|
#import "UIView+Yoga.h"
|
||||||
|
|
||||||
@interface DoricFlexView : UIView
|
@interface DoricFlexView : UIView
|
||||||
@end
|
@end
|
||||||
@ -34,22 +34,25 @@ - (CGSize)sizeThatFits:(CGSize)size {
|
|||||||
@implementation DoricFlexNode
|
@implementation DoricFlexNode
|
||||||
- (UIView *)build {
|
- (UIView *)build {
|
||||||
return [[DoricFlexView new] also:^(DoricFlexView *it) {
|
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 {
|
- (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop {
|
||||||
if ([name isEqualToString:@"flexConfig"]) {
|
if ([name isEqualToString:@"flexConfig"]) {
|
||||||
if ([prop isKindOfClass:[NSDictionary class]]) {
|
[self blendYoga:view.yoga from:prop];
|
||||||
[((DoricFlexNode *) self.superNode) blendSubNode:self flexConfig:prop];
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
[super blendView:view forPropName:name propValue:prop];
|
[super blendView:view forPropName:name propValue:prop];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
- (void)blendSubNode:(DoricViewNode *)subNode flexConfig:(NSDictionary *)flexConfig {
|
- (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 {
|
- (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];
|
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
||||||
} else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"justifyContent"]) {
|
||||||
yoga.justifyContent = (YGJustify) [(NSNumber *) value integerValue];
|
yoga.justifyContent = (YGJustify) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"alignContent"]) {
|
} else if ([name isEqualToString:@"alignContent"]) {
|
||||||
yoga.alignContent = (YGAlign) [(NSNumber *) value integerValue];
|
yoga.alignContent = (YGAlign) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"alignItems"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.alignItems = (YGAlign) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"alignSelf"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.alignSelf = (YGAlign) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"positionType"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.position = (YGPositionType) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"flexWrap"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.flexWrap = (YGWrap) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"overFlow"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.overflow = (YGOverflow) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"display"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.display = (YGDisplay) [(NSNumber *) value integerValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"flex"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.flex = [(NSNumber *) value floatValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"flexGrow"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.flexGrow = [(NSNumber *) value floatValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"flexShrink"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.flexShrink = [(NSNumber *) value floatValue];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"flexBasis"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.flexBasis = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginLeft"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginLeft = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginRight"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginRight = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginTop"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginTop = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginBottom"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginBottom = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginStart"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginStart = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginEnd"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginEnd = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginHorizontal"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginHorizontal = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"marginVertical"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.marginVertical = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"margin"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
yoga.margin = [self translateYGValueFromProperty:value];
|
||||||
}else if ([name isEqualToString:@"justifyContent"]) {
|
} else if ([name isEqualToString:@"paddingLeft"]) {
|
||||||
yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
|
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 {
|
- (void)requestLayout {
|
||||||
[super requestLayout];
|
[super requestLayout];
|
||||||
|
for (UIView *view in self.view.subviews) {
|
||||||
|
[view.doricLayout apply];
|
||||||
|
}
|
||||||
[self.view.yoga applyLayoutPreservingOrigin:NO];
|
[self.view.yoga applyLayoutPreservingOrigin:NO];
|
||||||
}
|
}
|
||||||
@end
|
@end
|
@ -376,7 +376,6 @@ var View = /** @class */ (function () {
|
|||||||
View.prototype.getLocationOnScreen = function (context) {
|
View.prototype.getLocationOnScreen = function (context) {
|
||||||
return this.nativeChannel(context, "getLocationOnScreen")();
|
return this.nativeChannel(context, "getLocationOnScreen")();
|
||||||
};
|
};
|
||||||
/**----------transform----------*/
|
|
||||||
View.prototype.doAnimation = function (context, animation) {
|
View.prototype.doAnimation = function (context, animation) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then(function (args) {
|
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then(function (args) {
|
||||||
@ -466,6 +465,10 @@ var View = /** @class */ (function () {
|
|||||||
Property,
|
Property,
|
||||||
__metadata("design:type", Number)
|
__metadata("design:type", Number)
|
||||||
], View.prototype, "rotation", void 0);
|
], View.prototype, "rotation", void 0);
|
||||||
|
__decorate([
|
||||||
|
Property,
|
||||||
|
__metadata("design:type", Object)
|
||||||
|
], View.prototype, "flexConfig", void 0);
|
||||||
return View;
|
return View;
|
||||||
}());
|
}());
|
||||||
var Superview = /** @class */ (function (_super) {
|
var Superview = /** @class */ (function (_super) {
|
||||||
@ -865,6 +868,36 @@ function vlayout(views, config) {
|
|||||||
}
|
}
|
||||||
return ret;
|
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 __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;
|
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.CENTER_Y = CENTER_Y;
|
||||||
exports.Color = Color;
|
exports.Color = Color;
|
||||||
exports.Draggable = Draggable;
|
exports.Draggable = Draggable;
|
||||||
|
exports.FlexLayout = FlexLayout;
|
||||||
exports.FlowLayout = FlowLayout;
|
exports.FlowLayout = FlowLayout;
|
||||||
exports.FlowLayoutItem = FlowLayoutItem;
|
exports.FlowLayoutItem = FlowLayoutItem;
|
||||||
exports.Gravity = Gravity;
|
exports.Gravity = Gravity;
|
||||||
@ -3225,6 +3259,7 @@ exports.ViewModel = ViewModel;
|
|||||||
exports.animate = animate;
|
exports.animate = animate;
|
||||||
exports.coordinator = coordinator;
|
exports.coordinator = coordinator;
|
||||||
exports.draggable = draggable;
|
exports.draggable = draggable;
|
||||||
|
exports.flexlayout = flexlayout;
|
||||||
exports.flowItem = flowItem;
|
exports.flowItem = flowItem;
|
||||||
exports.flowlayout = flowlayout;
|
exports.flowlayout = flowlayout;
|
||||||
exports.gravity = gravity;
|
exports.gravity = gravity;
|
||||||
|
@ -292,7 +292,6 @@ class View {
|
|||||||
getLocationOnScreen(context) {
|
getLocationOnScreen(context) {
|
||||||
return this.nativeChannel(context, "getLocationOnScreen")();
|
return this.nativeChannel(context, "getLocationOnScreen")();
|
||||||
}
|
}
|
||||||
/**----------transform----------*/
|
|
||||||
doAnimation(context, animation) {
|
doAnimation(context, animation) {
|
||||||
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
||||||
for (let key in args) {
|
for (let key in args) {
|
||||||
@ -382,6 +381,10 @@ __decorate([
|
|||||||
Property,
|
Property,
|
||||||
__metadata("design:type", Number)
|
__metadata("design:type", Number)
|
||||||
], View.prototype, "rotation", void 0);
|
], View.prototype, "rotation", void 0);
|
||||||
|
__decorate([
|
||||||
|
Property,
|
||||||
|
__metadata("design:type", Object)
|
||||||
|
], View.prototype, "flexConfig", void 0);
|
||||||
class Superview extends View {
|
class Superview extends View {
|
||||||
subviewById(id) {
|
subviewById(id) {
|
||||||
for (let v of this.allSubviews()) {
|
for (let v of this.allSubviews()) {
|
||||||
@ -647,6 +650,20 @@ function vlayout(views, config) {
|
|||||||
}
|
}
|
||||||
return ret;
|
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 __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;
|
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.CENTER_Y = CENTER_Y;
|
||||||
exports.Color = Color;
|
exports.Color = Color;
|
||||||
exports.Draggable = Draggable;
|
exports.Draggable = Draggable;
|
||||||
|
exports.FlexLayout = FlexLayout;
|
||||||
exports.FlowLayout = FlowLayout;
|
exports.FlowLayout = FlowLayout;
|
||||||
exports.FlowLayoutItem = FlowLayoutItem;
|
exports.FlowLayoutItem = FlowLayoutItem;
|
||||||
exports.Gravity = Gravity;
|
exports.Gravity = Gravity;
|
||||||
@ -2453,6 +2471,7 @@ exports.ViewModel = ViewModel;
|
|||||||
exports.animate = animate;
|
exports.animate = animate;
|
||||||
exports.coordinator = coordinator;
|
exports.coordinator = coordinator;
|
||||||
exports.draggable = draggable;
|
exports.draggable = draggable;
|
||||||
|
exports.flexlayout = flexlayout;
|
||||||
exports.flowItem = flowItem;
|
exports.flowItem = flowItem;
|
||||||
exports.flowlayout = flowlayout;
|
exports.flowlayout = flowlayout;
|
||||||
exports.gravity = gravity;
|
exports.gravity = gravity;
|
||||||
|
@ -1751,7 +1751,6 @@ class View {
|
|||||||
getLocationOnScreen(context) {
|
getLocationOnScreen(context) {
|
||||||
return this.nativeChannel(context, "getLocationOnScreen")();
|
return this.nativeChannel(context, "getLocationOnScreen")();
|
||||||
}
|
}
|
||||||
/**----------transform----------*/
|
|
||||||
doAnimation(context, animation) {
|
doAnimation(context, animation) {
|
||||||
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
||||||
for (let key in args) {
|
for (let key in args) {
|
||||||
@ -1841,6 +1840,10 @@ __decorate([
|
|||||||
Property,
|
Property,
|
||||||
__metadata("design:type", Number)
|
__metadata("design:type", Number)
|
||||||
], View.prototype, "rotation", void 0);
|
], View.prototype, "rotation", void 0);
|
||||||
|
__decorate([
|
||||||
|
Property,
|
||||||
|
__metadata("design:type", Object)
|
||||||
|
], View.prototype, "flexConfig", void 0);
|
||||||
class Superview extends View {
|
class Superview extends View {
|
||||||
subviewById(id) {
|
subviewById(id) {
|
||||||
for (let v of this.allSubviews()) {
|
for (let v of this.allSubviews()) {
|
||||||
@ -2106,6 +2109,20 @@ function vlayout(views, config) {
|
|||||||
}
|
}
|
||||||
return ret;
|
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 __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;
|
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.CENTER_Y = CENTER_Y;
|
||||||
exports.Color = Color;
|
exports.Color = Color;
|
||||||
exports.Draggable = Draggable;
|
exports.Draggable = Draggable;
|
||||||
|
exports.FlexLayout = FlexLayout;
|
||||||
exports.FlowLayout = FlowLayout;
|
exports.FlowLayout = FlowLayout;
|
||||||
exports.FlowLayoutItem = FlowLayoutItem;
|
exports.FlowLayoutItem = FlowLayoutItem;
|
||||||
exports.Gravity = Gravity;
|
exports.Gravity = Gravity;
|
||||||
@ -4047,6 +4065,7 @@ exports.ViewModel = ViewModel;
|
|||||||
exports.animate = animate;
|
exports.animate = animate;
|
||||||
exports.coordinator = coordinator;
|
exports.coordinator = coordinator;
|
||||||
exports.draggable = draggable;
|
exports.draggable = draggable;
|
||||||
|
exports.flexlayout = flexlayout;
|
||||||
exports.flowItem = flowItem;
|
exports.flowItem = flowItem;
|
||||||
exports.flowlayout = flowlayout;
|
exports.flowlayout = flowlayout;
|
||||||
exports.gravity = gravity;
|
exports.gravity = gravity;
|
||||||
|
133
doric-js/index.d.ts
vendored
133
doric-js/index.d.ts
vendored
@ -125,6 +125,7 @@ declare module 'doric/lib/src/ui/view' {
|
|||||||
import { BridgeContext } from "doric/lib/src/runtime/global";
|
import { BridgeContext } from "doric/lib/src/runtime/global";
|
||||||
import { LayoutConfig } from 'doric/lib/src/util/layoutconfig';
|
import { LayoutConfig } from 'doric/lib/src/util/layoutconfig';
|
||||||
import { IAnimation } from "doric/lib/src/ui/animation";
|
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 function Property(target: Object, propKey: string): void;
|
||||||
export interface IView {
|
export interface IView {
|
||||||
width?: number;
|
width?: number;
|
||||||
@ -178,6 +179,10 @@ declare module 'doric/lib/src/ui/view' {
|
|||||||
* rotation*PI
|
* rotation*PI
|
||||||
*/
|
*/
|
||||||
rotation?: number;
|
rotation?: number;
|
||||||
|
/**
|
||||||
|
* Only affected when its superview or itself is FlexLayout.
|
||||||
|
*/
|
||||||
|
flexConfig?: FlexConfig;
|
||||||
}
|
}
|
||||||
export type NativeViewModel = {
|
export type NativeViewModel = {
|
||||||
id: string;
|
id: string;
|
||||||
@ -267,6 +272,7 @@ declare module 'doric/lib/src/ui/view' {
|
|||||||
pivotY?: number;
|
pivotY?: number;
|
||||||
rotation?: number;
|
rotation?: number;
|
||||||
/**----------transform----------*/
|
/**----------transform----------*/
|
||||||
|
flexConfig?: FlexConfig;
|
||||||
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
|
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
|
||||||
}
|
}
|
||||||
export abstract class Superview extends View {
|
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 stack(views: View[], config?: IStack): Stack;
|
||||||
export function hlayout(views: View[], config?: IHLayout): HLayout;
|
export function hlayout(views: View[], config?: IHLayout): HLayout;
|
||||||
export function vlayout(views: View[], config?: IVLayout): VLayout;
|
export function vlayout(views: View[], config?: IVLayout): VLayout;
|
||||||
|
export class FlexLayout extends Group {
|
||||||
|
}
|
||||||
|
export function flexlayout(views: View[], config: IView): FlexLayout;
|
||||||
export {};
|
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
7
doric-js/lib/src/ui/view.d.ts
vendored
@ -3,6 +3,7 @@ import { Modeling, Model } from "../util/types";
|
|||||||
import { BridgeContext } from "../runtime/global";
|
import { BridgeContext } from "../runtime/global";
|
||||||
import { LayoutConfig } from '../util/layoutconfig';
|
import { LayoutConfig } from '../util/layoutconfig';
|
||||||
import { IAnimation } from "./animation";
|
import { IAnimation } from "./animation";
|
||||||
|
import { FlexConfig } from "../util/flexbox";
|
||||||
export declare function Property(target: Object, propKey: string): void;
|
export declare function Property(target: Object, propKey: string): void;
|
||||||
export interface IView {
|
export interface IView {
|
||||||
width?: number;
|
width?: number;
|
||||||
@ -56,6 +57,11 @@ export interface IView {
|
|||||||
* rotation*PI
|
* rotation*PI
|
||||||
*/
|
*/
|
||||||
rotation?: number;
|
rotation?: number;
|
||||||
|
/**----------transform----------*/
|
||||||
|
/**
|
||||||
|
* Only affected when its superview or itself is FlexLayout.
|
||||||
|
*/
|
||||||
|
flexConfig?: FlexConfig;
|
||||||
}
|
}
|
||||||
export declare type NativeViewModel = {
|
export declare type NativeViewModel = {
|
||||||
id: string;
|
id: string;
|
||||||
@ -149,6 +155,7 @@ export declare abstract class View implements Modeling, IView {
|
|||||||
pivotY?: number;
|
pivotY?: number;
|
||||||
rotation?: number;
|
rotation?: number;
|
||||||
/**----------transform----------*/
|
/**----------transform----------*/
|
||||||
|
flexConfig?: FlexConfig;
|
||||||
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
|
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
|
||||||
}
|
}
|
||||||
export declare abstract class Superview extends View {
|
export declare abstract class Superview extends View {
|
||||||
|
@ -177,7 +177,6 @@ export class View {
|
|||||||
getLocationOnScreen(context) {
|
getLocationOnScreen(context) {
|
||||||
return this.nativeChannel(context, "getLocationOnScreen")();
|
return this.nativeChannel(context, "getLocationOnScreen")();
|
||||||
}
|
}
|
||||||
/**----------transform----------*/
|
|
||||||
doAnimation(context, animation) {
|
doAnimation(context, animation) {
|
||||||
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
||||||
for (let key in args) {
|
for (let key in args) {
|
||||||
@ -267,6 +266,10 @@ __decorate([
|
|||||||
Property,
|
Property,
|
||||||
__metadata("design:type", Number)
|
__metadata("design:type", Number)
|
||||||
], View.prototype, "rotation", void 0);
|
], View.prototype, "rotation", void 0);
|
||||||
|
__decorate([
|
||||||
|
Property,
|
||||||
|
__metadata("design:type", Object)
|
||||||
|
], View.prototype, "flexConfig", void 0);
|
||||||
export class Superview extends View {
|
export class Superview extends View {
|
||||||
subviewById(id) {
|
subviewById(id) {
|
||||||
for (let v of this.allSubviews()) {
|
for (let v of this.allSubviews()) {
|
||||||
|
121
doric-js/lib/src/util/flexbox.d.ts
vendored
Normal file
121
doric-js/lib/src/util/flexbox.d.ts
vendored
Normal 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
87
doric-js/lib/src/util/flexbox.js
Normal 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
3
doric-js/lib/src/widget/layouts.d.ts
vendored
@ -25,4 +25,7 @@ export declare class HLayout extends LinearLayout implements IHLayout {
|
|||||||
export declare function stack(views: View[], config?: IStack): Stack;
|
export declare function stack(views: View[], config?: IStack): Stack;
|
||||||
export declare function hlayout(views: View[], config?: IHLayout): HLayout;
|
export declare function hlayout(views: View[], config?: IHLayout): HLayout;
|
||||||
export declare function vlayout(views: View[], config?: IVLayout): VLayout;
|
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 {};
|
export {};
|
||||||
|
@ -82,3 +82,17 @@ export function vlayout(views, config) {
|
|||||||
}
|
}
|
||||||
return ret;
|
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;
|
||||||
|
}
|
||||||
|
@ -16,27 +16,28 @@
|
|||||||
import { Modeling } from "./types";
|
import { Modeling } from "./types";
|
||||||
|
|
||||||
enum ValueType {
|
enum ValueType {
|
||||||
Point = 0,
|
Undefined = 0,
|
||||||
Percent = 1,
|
Point = 1,
|
||||||
Auto = 2,
|
Percent = 2,
|
||||||
|
Auto = 3,
|
||||||
}
|
}
|
||||||
|
|
||||||
export class FlexValue implements Modeling {
|
export class FlexTypedValue implements Modeling {
|
||||||
|
|
||||||
type = ValueType.Auto
|
type = ValueType.Auto
|
||||||
value = 0
|
value = 0
|
||||||
|
|
||||||
static Auto = new FlexValue
|
static Auto = new FlexTypedValue
|
||||||
|
|
||||||
static percent(v: number) {
|
static percent(v: number) {
|
||||||
const ret = new FlexValue
|
const ret = new FlexTypedValue
|
||||||
ret.type = ValueType.Percent
|
ret.type = ValueType.Percent
|
||||||
ret.value = v
|
ret.value = v
|
||||||
return ret
|
return ret
|
||||||
}
|
}
|
||||||
|
|
||||||
static point(v: number) {
|
static point(v: number) {
|
||||||
const ret = new FlexValue
|
const ret = new FlexTypedValue
|
||||||
ret.type = ValueType.Point
|
ret.type = ValueType.Point
|
||||||
ret.value = v
|
ret.value = v
|
||||||
return ret
|
return ret
|
||||||
@ -102,6 +103,7 @@ export enum Display {
|
|||||||
FLEX = 0,
|
FLEX = 0,
|
||||||
NONE = 1,
|
NONE = 1,
|
||||||
}
|
}
|
||||||
|
export type FlexValue = FlexTypedValue | number
|
||||||
|
|
||||||
export interface FlexConfig {
|
export interface FlexConfig {
|
||||||
direction?: Direction
|
direction?: Direction
|
||||||
@ -140,13 +142,13 @@ export interface FlexConfig {
|
|||||||
padding?: FlexValue
|
padding?: FlexValue
|
||||||
|
|
||||||
|
|
||||||
borderWidthLeft?: FlexValue
|
borderLeftWidth?: number
|
||||||
borderWidthRight?: FlexValue
|
borderRightWidth?: number
|
||||||
borderWidthTop?: FlexValue
|
borderTopWidth?: number
|
||||||
borderWidthBottom?: FlexValue
|
borderBottomWidth?: number
|
||||||
borderWidthStart?: FlexValue
|
borderStartWidth?: number
|
||||||
borderWidthEnd?: FlexValue
|
borderEndWidth?: number
|
||||||
borderWidth?: FlexValue
|
borderWidth?: number
|
||||||
|
|
||||||
left?: FlexValue
|
left?: FlexValue
|
||||||
right?: FlexValue
|
right?: FlexValue
|
||||||
|
@ -108,4 +108,5 @@ export function flexlayout(views: View[], config: IView) {
|
|||||||
Reflect.set(ret, key, Reflect.get(config, key, config), ret)
|
Reflect.set(ret, key, Reflect.get(config, key, config), ret)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return ret
|
||||||
}
|
}
|
21
doric-web/dist/index.js
vendored
21
doric-web/dist/index.js
vendored
@ -1809,7 +1809,6 @@ class View {
|
|||||||
getLocationOnScreen(context) {
|
getLocationOnScreen(context) {
|
||||||
return this.nativeChannel(context, "getLocationOnScreen")();
|
return this.nativeChannel(context, "getLocationOnScreen")();
|
||||||
}
|
}
|
||||||
/**----------transform----------*/
|
|
||||||
doAnimation(context, animation) {
|
doAnimation(context, animation) {
|
||||||
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
|
||||||
for (let key in args) {
|
for (let key in args) {
|
||||||
@ -1899,6 +1898,10 @@ __decorate([
|
|||||||
Property,
|
Property,
|
||||||
__metadata("design:type", Number)
|
__metadata("design:type", Number)
|
||||||
], View.prototype, "rotation", void 0);
|
], View.prototype, "rotation", void 0);
|
||||||
|
__decorate([
|
||||||
|
Property,
|
||||||
|
__metadata("design:type", Object)
|
||||||
|
], View.prototype, "flexConfig", void 0);
|
||||||
class Superview extends View {
|
class Superview extends View {
|
||||||
subviewById(id) {
|
subviewById(id) {
|
||||||
for (let v of this.allSubviews()) {
|
for (let v of this.allSubviews()) {
|
||||||
@ -2164,6 +2167,20 @@ function vlayout(views, config) {
|
|||||||
}
|
}
|
||||||
return ret;
|
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 __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;
|
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.CENTER_Y = CENTER_Y;
|
||||||
exports.Color = Color;
|
exports.Color = Color;
|
||||||
exports.Draggable = Draggable;
|
exports.Draggable = Draggable;
|
||||||
|
exports.FlexLayout = FlexLayout;
|
||||||
exports.FlowLayout = FlowLayout;
|
exports.FlowLayout = FlowLayout;
|
||||||
exports.FlowLayoutItem = FlowLayoutItem;
|
exports.FlowLayoutItem = FlowLayoutItem;
|
||||||
exports.Gravity = Gravity;
|
exports.Gravity = Gravity;
|
||||||
@ -3970,6 +3988,7 @@ exports.ViewModel = ViewModel;
|
|||||||
exports.animate = animate;
|
exports.animate = animate;
|
||||||
exports.coordinator = coordinator;
|
exports.coordinator = coordinator;
|
||||||
exports.draggable = draggable;
|
exports.draggable = draggable;
|
||||||
|
exports.flexlayout = flexlayout;
|
||||||
exports.flowItem = flowItem;
|
exports.flowItem = flowItem;
|
||||||
exports.flowlayout = flowlayout;
|
exports.flowlayout = flowlayout;
|
||||||
exports.gravity = gravity;
|
exports.gravity = gravity;
|
||||||
|
4
doric-web/dist/index.js.map
vendored
4
doric-web/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user