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

Add BackgroundColorAnimation and AlphaAnimation

Browse Source
This commit is contained in:
pengfei.zhou 2021-09-07 18:33:25 +08:00 committed by osborn
parent e51749e644
commit d7d19b17d0
11 changed files with 815 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
doric-android/doric/src/main/java/pub/doric/shader/ViewNode.java
View File

@ -1054,15 +1054,28 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
private ObjectAnimator parseChangeable(JSObject jsObject, JSValue fillMode) { private ObjectAnimator parseChangeable(JSObject jsObject, JSValue fillMode) {
String key = jsObject.getProperty("key").asString().value(); String key = jsObject.getProperty("key").asString().value();
float startVal = jsObject.getProperty("fromValue").asNumber().toFloat(); if ("backgroundColor".equals(key)) {
float endVal = jsObject.getProperty("toValue").asNumber().toFloat(); int startVal = jsObject.getProperty("fromValue").asNumber().toInt();
ObjectAnimator animator = ObjectAnimator.ofFloat(this, int endVal = jsObject.getProperty("toValue").asNumber().toInt();
key, ObjectAnimator animator = ObjectAnimator.ofInt(this,
startVal, key,
endVal startVal,
); endVal
setFillMode(animator, key, startVal, fillMode); );
return animator; animator.setEvaluator(new ArgbEvaluator());
setFillMode(animator, key, startVal, fillMode);
return animator;
} else {
float startVal = jsObject.getProperty("fromValue").asNumber().toFloat();
float endVal = jsObject.getProperty("toValue").asNumber().toFloat();
ObjectAnimator animator = ObjectAnimator.ofFloat(this,
key,
startVal,
endVal
);
setFillMode(animator, key, startVal, fillMode);
return animator;
}
} }
private void setFillMode(ObjectAnimator animator, private void setFillMode(ObjectAnimator animator,
@ -1113,6 +1126,12 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
case "rotation": case "rotation":
setRotation(value); setRotation(value);
break; break;
case "backgroundColor":
setBackgroundColor((int) value);
break;
case "alpha":
setAlpha(value);
break;
default: default:
break; break;
} }

37
doric-iOS/Pod/Classes/Shader/DoricViewNode.m
View File

@ -343,10 +343,10 @@ - (UIImage *)gradientImageFromColors:(NSArray *)colors
if (@available(iOS 10.0, *)) { if (@available(iOS 10.0, *)) {
UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init]; UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init];
format.scale = [UIScreen mainScreen].scale; format.scale = [UIScreen mainScreen].scale;
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc]initWithSize:imgSize format:format]; UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc] initWithSize:imgSize format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) { UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
CGContextRef context = rendererContext.CGContext; CGContextRef context = rendererContext.CGContext;
CGContextSaveGState(context); CGContextSaveGState(context);
CGColorSpaceRef colorSpace = CGColorGetColorSpace((__bridge CGColorRef) colors.lastObject); CGColorSpaceRef colorSpace = CGColorGetColorSpace((__bridge CGColorRef) colors.lastObject);
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations); CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
@ -768,6 +768,29 @@ - (NSNumber *)getAnimatedValue:(NSString *)key {
if ([@"rotationY" isEqualToString:key]) { if ([@"rotationY" isEqualToString:key]) {
return self.rotationY; return self.rotationY;
} }
if ([@"backgroundColor" isEqualToString:key]) {
CGColorRef cgColor = self.view.backgroundColor.CGColor;
if (CGColorGetNumberOfComponents(cgColor) < 4) {
const CGFloat *components = CGColorGetComponents(cgColor);
CGFloat r = components[0];
CGFloat g = components[1];
CGFloat b = components[2];
return @((int) (b * 255) + (((int) (g * 255)) << 8) + (((int) (r * 255)) << 16) + (0xff
<< 24));
}
const CGFloat *components = CGColorGetComponents(cgColor);
CGFloat r = components[0];
CGFloat g = components[1];
CGFloat b = components[2];
CGFloat a = components[3];
return @((int) (b * 255) + (((int) (g * 255)) << 8) + (((int) (r * 255)) << 16) + (
((int) (a * 255))
<< 24));
}
if ([@"alpha" isEqualToString:key]) {
return @(self.view.alpha);
}
return nil; return nil;
} }
@ -786,6 +809,10 @@ - (void)setAnimatedValue:(NSString *)key value:(NSNumber *)value {
self.rotationX = value; self.rotationX = value;
} else if ([@"rotationY" isEqualToString:key]) { } else if ([@"rotationY" isEqualToString:key]) {
self.rotationY = value; self.rotationY = value;
} else if ([@"backgroundColor" isEqualToString:key]) {
self.view.backgroundColor = DoricColor(value);
} else if ([@"alpha" isEqualToString:key]) {
self.view.alpha = value.floatValue;
} }
} }
@ -822,6 +849,10 @@ - (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber
animation.toValue = @([params[@"toValue"] floatValue] * M_PI); animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"backgroundColor" isEqualToString:key]) { } else if ([@"backgroundColor" isEqualToString:key]) {
animation.keyPath = @"backgroundColor"; animation.keyPath = @"backgroundColor";
animation.fromValue = (id)DoricColor(params[@"fromValue"]).CGColor;
animation.toValue = (id)DoricColor(params[@"toValue"]).CGColor;
} else if ([@"alpha" isEqualToString:key]) {
animation.keyPath = @"opacity";
animation.fromValue = params[@"fromValue"]; animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"]; animation.toValue = params[@"toValue"];
} }

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

@ -1487,6 +1487,82 @@ var Panel = /** @class */ (function () {
return Panel; return Panel;
}()); }());
/**
* Store color as format AARRGGBB or RRGGBB
*/
var Color = /** @class */ (function () {
function Color(v) {
this._value = 0;
this._value = v | 0x0;
}
Color.parse = function (str) {
if (!str.startsWith("#")) {
throw new Error("Parse color error with " + str);
}
var val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error("Parse color error with " + str);
}
};
Color.safeParse = function (str, defVal) {
if (defVal === void 0) { defVal = Color.TRANSPARENT; }
var color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
};
Color.prototype.alpha = function (v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
};
Color.prototype.toModel = function () {
return this._value;
};
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
return Color;
}());
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
/* /*
* Copyright [2019] [Doric.Pub] * Copyright [2019] [Doric.Pub]
* *
@ -1736,6 +1812,9 @@ var TranslationAnimation = /** @class */ (function (_super) {
}); });
return TranslationAnimation; return TranslationAnimation;
}(Animation)); }(Animation));
/**
* Rotation range is [0..2]
*/
var RotationAnimation = /** @class */ (function (_super) { var RotationAnimation = /** @class */ (function (_super) {
__extends$e(RotationAnimation, _super); __extends$e(RotationAnimation, _super);
function RotationAnimation() { function RotationAnimation() {
@ -1770,6 +1849,9 @@ var RotationAnimation = /** @class */ (function (_super) {
}); });
return RotationAnimation; return RotationAnimation;
}(Animation)); }(Animation));
/**
* Rotation range is [0..2]
*/
var RotationXAnimation = /** @class */ (function (_super) { var RotationXAnimation = /** @class */ (function (_super) {
__extends$e(RotationXAnimation, _super); __extends$e(RotationXAnimation, _super);
function RotationXAnimation() { function RotationXAnimation() {
@ -1804,6 +1886,9 @@ var RotationXAnimation = /** @class */ (function (_super) {
}); });
return RotationXAnimation; return RotationXAnimation;
}(Animation)); }(Animation));
/**
* Rotation range is [0..2]
*/
var RotationYAnimation = /** @class */ (function (_super) { var RotationYAnimation = /** @class */ (function (_super) {
__extends$e(RotationYAnimation, _super); __extends$e(RotationYAnimation, _super);
function RotationYAnimation() { function RotationYAnimation() {
@ -1838,6 +1923,77 @@ var RotationYAnimation = /** @class */ (function (_super) {
}); });
return RotationYAnimation; return RotationYAnimation;
}(Animation)); }(Animation));
var BackgroundColorAnimation = /** @class */ (function (_super) {
__extends$e(BackgroundColorAnimation, _super);
function BackgroundColorAnimation() {
var _this = _super.call(this) || this;
_this.backgroundColorChangeable = {
key: "backgroundColor",
fromValue: Color.TRANSPARENT._value,
toValue: Color.TRANSPARENT._value,
};
_this.changeables.set("backgroundColor", _this.backgroundColorChangeable);
return _this;
}
Object.defineProperty(BackgroundColorAnimation.prototype, "fromColor", {
get: function () {
return new Color(this.backgroundColorChangeable.fromValue);
},
set: function (color) {
this.backgroundColorChangeable.fromValue = color._value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BackgroundColorAnimation.prototype, "toColor", {
get: function () {
return new Color(this.backgroundColorChangeable.toValue);
},
set: function (v) {
this.backgroundColorChangeable.toValue = v._value;
},
enumerable: false,
configurable: true
});
return BackgroundColorAnimation;
}(Animation));
/**
* Alpha range is [0..1]
*/
var AlphaAnimation = /** @class */ (function (_super) {
__extends$e(AlphaAnimation, _super);
function AlphaAnimation() {
var _this = _super.call(this) || this;
_this.opacityChangeable = {
key: "alpha",
fromValue: 1,
toValue: 1,
};
_this.changeables.set("alpha", _this.opacityChangeable);
return _this;
}
Object.defineProperty(AlphaAnimation.prototype, "from", {
get: function () {
return this.opacityChangeable.fromValue;
},
set: function (v) {
this.opacityChangeable.fromValue = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaAnimation.prototype, "to", {
get: function () {
return this.opacityChangeable.toValue;
},
set: function (v) {
this.opacityChangeable.toValue = v;
},
enumerable: false,
configurable: true
});
return AlphaAnimation;
}(Animation));
var AnimationSet = /** @class */ (function () { var AnimationSet = /** @class */ (function () {
function AnimationSet() { function AnimationSet() {
this.animations = []; this.animations = [];
@ -1978,82 +2134,6 @@ function text(config) {
return ret; return ret;
} }
/**
* Store color as format AARRGGBB or RRGGBB
*/
var Color = /** @class */ (function () {
function Color(v) {
this._value = 0;
this._value = v | 0x0;
}
Color.parse = function (str) {
if (!str.startsWith("#")) {
throw new Error("Parse color error with " + str);
}
var val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error("Parse color error with " + str);
}
};
Color.safeParse = function (str, defVal) {
if (defVal === void 0) { defVal = Color.TRANSPARENT; }
var color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
};
Color.prototype.alpha = function (v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
};
Color.prototype.toModel = function () {
return this._value;
};
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
return Color;
}());
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
var __extends$c = (undefined && undefined.__extends) || (function () { var __extends$c = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) { var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
@ -4086,8 +4166,10 @@ var ModularPanel = /** @class */ (function (_super) {
return ModularPanel; return ModularPanel;
}(Module)); }(Module));
exports.AlphaAnimation = AlphaAnimation;
exports.AnimationSet = AnimationSet; exports.AnimationSet = AnimationSet;
exports.BOTTOM = BOTTOM; exports.BOTTOM = BOTTOM;
exports.BackgroundColorAnimation = BackgroundColorAnimation;
exports.CENTER = CENTER; exports.CENTER = CENTER;
exports.CENTER_X = CENTER_X; exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y; exports.CENTER_Y = CENTER_Y;

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

@ -1127,6 +1127,80 @@ __decorate$b([
__metadata$b("design:returntype", void 0) __metadata$b("design:returntype", void 0)
], Panel.prototype, "__enableSnapshot__", null); ], Panel.prototype, "__enableSnapshot__", null);
/**
* Store color as format AARRGGBB or RRGGBB
*/
class Color {
constructor(v) {
this._value = 0;
this._value = v | 0x0;
}
static parse(str) {
if (!str.startsWith("#")) {
throw new Error(`Parse color error with ${str}`);
}
const val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error(`Parse color error with ${str}`);
}
}
static safeParse(str, defVal = Color.TRANSPARENT) {
let color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
}
alpha(v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
}
toModel() {
return this._value;
}
}
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
/* /*
* Copyright [2019] [Doric.Pub] * Copyright [2019] [Doric.Pub]
* *
@ -1300,6 +1374,9 @@ class TranslationAnimation extends Animation {
return this.translationYChangeable.toValue; return this.translationYChangeable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationAnimation extends Animation { class RotationAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -1323,6 +1400,9 @@ class RotationAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationXAnimation extends Animation { class RotationXAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -1346,6 +1426,9 @@ class RotationXAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationYAnimation extends Animation { class RotationYAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -1369,6 +1452,55 @@ class RotationYAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
class BackgroundColorAnimation extends Animation {
constructor() {
super();
this.backgroundColorChangeable = {
key: "backgroundColor",
fromValue: Color.TRANSPARENT._value,
toValue: Color.TRANSPARENT._value,
};
this.changeables.set("backgroundColor", this.backgroundColorChangeable);
}
set fromColor(color) {
this.backgroundColorChangeable.fromValue = color._value;
}
get fromColor() {
return new Color(this.backgroundColorChangeable.fromValue);
}
set toColor(v) {
this.backgroundColorChangeable.toValue = v._value;
}
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
}
/**
* Alpha range is [0..1]
*/
class AlphaAnimation extends Animation {
constructor() {
super();
this.opacityChangeable = {
key: "alpha",
fromValue: 1,
toValue: 1,
};
this.changeables.set("alpha", this.opacityChangeable);
}
set from(v) {
this.opacityChangeable.fromValue = v;
}
get from() {
return this.opacityChangeable.fromValue;
}
set to(v) {
this.opacityChangeable.toValue = v;
}
get to() {
return this.opacityChangeable.toValue;
}
}
class AnimationSet { class AnimationSet {
constructor() { constructor() {
this.animations = []; this.animations = [];
@ -1480,80 +1612,6 @@ function text(config) {
return ret; return ret;
} }
/**
* Store color as format AARRGGBB or RRGGBB
*/
class Color {
constructor(v) {
this._value = 0;
this._value = v | 0x0;
}
static parse(str) {
if (!str.startsWith("#")) {
throw new Error(`Parse color error with ${str}`);
}
const val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error(`Parse color error with ${str}`);
}
}
static safeParse(str, defVal = Color.TRANSPARENT) {
let color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
}
alpha(v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
}
toModel() {
return this._value;
}
}
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { var __decorate$9 = (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;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@ -3135,8 +3193,10 @@ class ModularPanel extends Module {
} }
} }
exports.AlphaAnimation = AlphaAnimation;
exports.AnimationSet = AnimationSet; exports.AnimationSet = AnimationSet;
exports.BOTTOM = BOTTOM; exports.BOTTOM = BOTTOM;
exports.BackgroundColorAnimation = BackgroundColorAnimation;
exports.CENTER = CENTER; exports.CENTER = CENTER;
exports.CENTER_X = CENTER_X; exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y; exports.CENTER_Y = CENTER_Y;

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

@ -2651,6 +2651,80 @@ __decorate$b([
__metadata$b("design:returntype", void 0) __metadata$b("design:returntype", void 0)
], Panel.prototype, "__enableSnapshot__", null); ], Panel.prototype, "__enableSnapshot__", null);
/**
* Store color as format AARRGGBB or RRGGBB
*/
class Color {
constructor(v) {
this._value = 0;
this._value = v | 0x0;
}
static parse(str) {
if (!str.startsWith("#")) {
throw new Error(`Parse color error with ${str}`);
}
const val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error(`Parse color error with ${str}`);
}
}
static safeParse(str, defVal = Color.TRANSPARENT) {
let color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
}
alpha(v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
}
toModel() {
return this._value;
}
}
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
/* /*
* Copyright [2019] [Doric.Pub] * Copyright [2019] [Doric.Pub]
* *
@ -2824,6 +2898,9 @@ class TranslationAnimation extends Animation {
return this.translationYChangeable.toValue; return this.translationYChangeable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationAnimation extends Animation { class RotationAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -2847,6 +2924,9 @@ class RotationAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationXAnimation extends Animation { class RotationXAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -2870,6 +2950,9 @@ class RotationXAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationYAnimation extends Animation { class RotationYAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -2893,6 +2976,55 @@ class RotationYAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
class BackgroundColorAnimation extends Animation {
constructor() {
super();
this.backgroundColorChangeable = {
key: "backgroundColor",
fromValue: Color.TRANSPARENT._value,
toValue: Color.TRANSPARENT._value,
};
this.changeables.set("backgroundColor", this.backgroundColorChangeable);
}
set fromColor(color) {
this.backgroundColorChangeable.fromValue = color._value;
}
get fromColor() {
return new Color(this.backgroundColorChangeable.fromValue);
}
set toColor(v) {
this.backgroundColorChangeable.toValue = v._value;
}
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
}
/**
* Alpha range is [0..1]
*/
class AlphaAnimation extends Animation {
constructor() {
super();
this.opacityChangeable = {
key: "alpha",
fromValue: 1,
toValue: 1,
};
this.changeables.set("alpha", this.opacityChangeable);
}
set from(v) {
this.opacityChangeable.fromValue = v;
}
get from() {
return this.opacityChangeable.fromValue;
}
set to(v) {
this.opacityChangeable.toValue = v;
}
get to() {
return this.opacityChangeable.toValue;
}
}
class AnimationSet { class AnimationSet {
constructor() { constructor() {
this.animations = []; this.animations = [];
@ -3004,80 +3136,6 @@ function text(config) {
return ret; return ret;
} }
/**
* Store color as format AARRGGBB or RRGGBB
*/
class Color {
constructor(v) {
this._value = 0;
this._value = v | 0x0;
}
static parse(str) {
if (!str.startsWith("#")) {
throw new Error(`Parse color error with ${str}`);
}
const val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error(`Parse color error with ${str}`);
}
}
static safeParse(str, defVal = Color.TRANSPARENT) {
let color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
}
alpha(v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
}
toModel() {
return this._value;
}
}
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { var __decorate$9 = (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;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@ -4900,8 +4958,10 @@ global$1.nativeEmpty = () => {
}, 0); }, 0);
}; };
exports.AlphaAnimation = AlphaAnimation;
exports.AnimationSet = AnimationSet; exports.AnimationSet = AnimationSet;
exports.BOTTOM = BOTTOM; exports.BOTTOM = BOTTOM;
exports.BackgroundColorAnimation = BackgroundColorAnimation;
exports.CENTER = CENTER; exports.CENTER = CENTER;
exports.CENTER_X = CENTER_X; exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y; exports.CENTER_Y = CENTER_Y;

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

@ -336,8 +336,9 @@ declare module 'doric/lib/src/ui/view' {
} }
declare module 'doric/lib/src/ui/animation' { declare module 'doric/lib/src/ui/animation' {
import { Color } from "doric/lib/src/util/color";
import { Modeling, Model } from "doric/lib/src/util/types"; import { Modeling, Model } from "doric/lib/src/util/types";
export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY"; export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" | "backgroundColor" | "alpha";
export enum RepeatMode { export enum RepeatMode {
RESTART = 1, RESTART = 1,
REVERSE = 2 REVERSE = 2
@ -441,6 +442,9 @@ declare module 'doric/lib/src/ui/animation' {
set toTranslationY(v: number); set toTranslationY(v: number);
get toTranslationY(): number; get toTranslationY(): number;
} }
/**
* Rotation range is [0..2]
*/
export class RotationAnimation extends Animation { export class RotationAnimation extends Animation {
constructor(); constructor();
set fromRotation(v: number); set fromRotation(v: number);
@ -448,6 +452,9 @@ declare module 'doric/lib/src/ui/animation' {
set toRotation(v: number); set toRotation(v: number);
get toRotation(): number; get toRotation(): number;
} }
/**
* Rotation range is [0..2]
*/
export class RotationXAnimation extends Animation { export class RotationXAnimation extends Animation {
constructor(); constructor();
set fromRotation(v: number); set fromRotation(v: number);
@ -455,6 +462,9 @@ declare module 'doric/lib/src/ui/animation' {
set toRotation(v: number); set toRotation(v: number);
get toRotation(): number; get toRotation(): number;
} }
/**
* Rotation range is [0..2]
*/
export class RotationYAnimation extends Animation { export class RotationYAnimation extends Animation {
constructor(); constructor();
set fromRotation(v: number); set fromRotation(v: number);
@ -462,6 +472,23 @@ declare module 'doric/lib/src/ui/animation' {
set toRotation(v: number); set toRotation(v: number);
get toRotation(): number; get toRotation(): number;
} }
export class BackgroundColorAnimation extends Animation {
constructor();
set fromColor(color: Color);
get fromColor(): Color;
set toColor(v: Color);
get toColor(): Color;
}
/**
* Alpha range is [0..1]
*/
export class AlphaAnimation extends Animation {
constructor();
set from(v: number);
get from(): number;
set to(v: number);
get to(): number;
}
export class AnimationSet implements IAnimation { export class AnimationSet implements IAnimation {
delay?: number; delay?: number;
id: string; id: string;

31
doric-js/lib/src/ui/animation.d.ts vendored
View File

@ -1,5 +1,6 @@
import { Color } from "../util/color";
import { Modeling, Model } from "../util/types"; import { Modeling, Model } from "../util/types";
export declare type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY"; export declare type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" | "backgroundColor" | "alpha";
export declare enum RepeatMode { export declare enum RepeatMode {
RESTART = 1, RESTART = 1,
REVERSE = 2 REVERSE = 2
@ -107,6 +108,9 @@ export declare class TranslationAnimation extends Animation {
set toTranslationY(v: number); set toTranslationY(v: number);
get toTranslationY(): number; get toTranslationY(): number;
} }
/**
* Rotation range is [0..2]
*/
export declare class RotationAnimation extends Animation { export declare class RotationAnimation extends Animation {
private rotationChaneable; private rotationChaneable;
constructor(); constructor();
@ -115,6 +119,9 @@ export declare class RotationAnimation extends Animation {
set toRotation(v: number); set toRotation(v: number);
get toRotation(): number; get toRotation(): number;
} }
/**
* Rotation range is [0..2]
*/
export declare class RotationXAnimation extends Animation { export declare class RotationXAnimation extends Animation {
private rotationChaneable; private rotationChaneable;
constructor(); constructor();
@ -123,6 +130,9 @@ export declare class RotationXAnimation extends Animation {
set toRotation(v: number); set toRotation(v: number);
get toRotation(): number; get toRotation(): number;
} }
/**
* Rotation range is [0..2]
*/
export declare class RotationYAnimation extends Animation { export declare class RotationYAnimation extends Animation {
private rotationChaneable; private rotationChaneable;
constructor(); constructor();
@ -131,6 +141,25 @@ export declare class RotationYAnimation extends Animation {
set toRotation(v: number); set toRotation(v: number);
get toRotation(): number; get toRotation(): number;
} }
export declare class BackgroundColorAnimation extends Animation {
private backgroundColorChangeable;
constructor();
set fromColor(color: Color);
get fromColor(): Color;
set toColor(v: Color);
get toColor(): Color;
}
/**
* Alpha range is [0..1]
*/
export declare class AlphaAnimation extends Animation {
private opacityChangeable;
constructor();
set from(v: number);
get from(): number;
set to(v: number);
get to(): number;
}
export declare class AnimationSet implements IAnimation { export declare class AnimationSet implements IAnimation {
private animations; private animations;
private _duration; private _duration;

59
doric-js/lib/src/ui/animation.js
View File

@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { Color } from "../util/color";
import { uniqueId } from "../util/uniqueId"; import { uniqueId } from "../util/uniqueId";
export var RepeatMode; export var RepeatMode;
(function (RepeatMode) { (function (RepeatMode) {
@ -172,6 +173,9 @@ export class TranslationAnimation extends Animation {
return this.translationYChangeable.toValue; return this.translationYChangeable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
export class RotationAnimation extends Animation { export class RotationAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -195,6 +199,9 @@ export class RotationAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
export class RotationXAnimation extends Animation { export class RotationXAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -218,6 +225,9 @@ export class RotationXAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
export class RotationYAnimation extends Animation { export class RotationYAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -241,6 +251,55 @@ export class RotationYAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
export class BackgroundColorAnimation extends Animation {
constructor() {
super();
this.backgroundColorChangeable = {
key: "backgroundColor",
fromValue: Color.TRANSPARENT._value,
toValue: Color.TRANSPARENT._value,
};
this.changeables.set("backgroundColor", this.backgroundColorChangeable);
}
set fromColor(color) {
this.backgroundColorChangeable.fromValue = color._value;
}
get fromColor() {
return new Color(this.backgroundColorChangeable.fromValue);
}
set toColor(v) {
this.backgroundColorChangeable.toValue = v._value;
}
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
}
/**
* Alpha range is [0..1]
*/
export class AlphaAnimation extends Animation {
constructor() {
super();
this.opacityChangeable = {
key: "alpha",
fromValue: 1,
toValue: 1,
};
this.changeables.set("alpha", this.opacityChangeable);
}
set from(v) {
this.opacityChangeable.fromValue = v;
}
get from() {
return this.opacityChangeable.fromValue;
}
set to(v) {
this.opacityChangeable.toValue = v;
}
get to() {
return this.opacityChangeable.toValue;
}
}
export class AnimationSet { export class AnimationSet {
constructor() { constructor() {
this.animations = []; this.animations = [];

78
doric-js/src/ui/animation.ts
View File

@ -14,10 +14,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { Color } from "../util/color"
import { Modeling, Model } from "../util/types" import { Modeling, Model } from "../util/types"
import { uniqueId } from "../util/uniqueId" import { uniqueId } from "../util/uniqueId"
export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" | "backgroundColor" | "alpha"
export enum RepeatMode { export enum RepeatMode {
RESTART = 1, RESTART = 1,
@ -209,7 +210,9 @@ export class TranslationAnimation extends Animation {
return this.translationYChangeable.toValue return this.translationYChangeable.toValue
} }
} }
/**
* Rotation range is [0..2]
*/
export class RotationAnimation extends Animation { export class RotationAnimation extends Animation {
private rotationChaneable: Changeable = { private rotationChaneable: Changeable = {
key: "rotation", key: "rotation",
@ -237,7 +240,9 @@ export class RotationAnimation extends Animation {
return this.rotationChaneable.toValue return this.rotationChaneable.toValue
} }
} }
/**
* Rotation range is [0..2]
*/
export class RotationXAnimation extends Animation { export class RotationXAnimation extends Animation {
private rotationChaneable: Changeable = { private rotationChaneable: Changeable = {
key: "rotationX", key: "rotationX",
@ -265,6 +270,9 @@ export class RotationXAnimation extends Animation {
return this.rotationChaneable.toValue return this.rotationChaneable.toValue
} }
} }
/**
* Rotation range is [0..2]
*/
export class RotationYAnimation extends Animation { export class RotationYAnimation extends Animation {
private rotationChaneable: Changeable = { private rotationChaneable: Changeable = {
key: "rotationY", key: "rotationY",
@ -292,6 +300,70 @@ export class RotationYAnimation extends Animation {
return this.rotationChaneable.toValue return this.rotationChaneable.toValue
} }
} }
export class BackgroundColorAnimation extends Animation {
private backgroundColorChangeable: Changeable = {
key: "backgroundColor",
fromValue: Color.TRANSPARENT._value,
toValue: Color.TRANSPARENT._value,
}
constructor() {
super()
this.changeables.set("backgroundColor", this.backgroundColorChangeable)
}
set fromColor(color: Color) {
this.backgroundColorChangeable.fromValue = color._value
}
get fromColor() {
return new Color(this.backgroundColorChangeable.fromValue)
}
set toColor(v: Color) {
this.backgroundColorChangeable.toValue = v._value
}
get toColor() {
return new Color(this.backgroundColorChangeable.toValue)
}
}
/**
* Alpha range is [0..1]
*/
export class AlphaAnimation extends Animation {
private opacityChangeable: Changeable = {
key: "alpha",
fromValue: 1,
toValue: 1,
}
constructor() {
super()
this.changeables.set("alpha", this.opacityChangeable)
}
set from(v: number) {
this.opacityChangeable.fromValue = v
}
get from() {
return this.opacityChangeable.fromValue
}
set to(v: number) {
this.opacityChangeable.toValue = v
}
get to() {
return this.opacityChangeable.toValue
}
}
export class AnimationSet implements IAnimation { export class AnimationSet implements IAnimation {
private animations: IAnimation[] = [] private animations: IAnimation[] = []
private _duration = 0 private _duration = 0

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

@ -2705,6 +2705,80 @@ __decorate$b([
__metadata$b("design:returntype", void 0) __metadata$b("design:returntype", void 0)
], Panel.prototype, "__enableSnapshot__", null); ], Panel.prototype, "__enableSnapshot__", null);
/**
* Store color as format AARRGGBB or RRGGBB
*/
class Color {
constructor(v) {
this._value = 0;
this._value = v | 0x0;
}
static parse(str) {
if (!str.startsWith("#")) {
throw new Error(`Parse color error with ${str}`);
}
const val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error(`Parse color error with ${str}`);
}
}
static safeParse(str, defVal = Color.TRANSPARENT) {
let color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
}
alpha(v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
}
toModel() {
return this._value;
}
}
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
/* /*
* Copyright [2019] [Doric.Pub] * Copyright [2019] [Doric.Pub]
* *
@ -2878,6 +2952,9 @@ class TranslationAnimation extends Animation {
return this.translationYChangeable.toValue; return this.translationYChangeable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationAnimation extends Animation { class RotationAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -2901,6 +2978,9 @@ class RotationAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationXAnimation extends Animation { class RotationXAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -2924,6 +3004,9 @@ class RotationXAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
/**
* Rotation range is [0..2]
*/
class RotationYAnimation extends Animation { class RotationYAnimation extends Animation {
constructor() { constructor() {
super(); super();
@ -2947,6 +3030,55 @@ class RotationYAnimation extends Animation {
return this.rotationChaneable.toValue; return this.rotationChaneable.toValue;
} }
} }
class BackgroundColorAnimation extends Animation {
constructor() {
super();
this.backgroundColorChangeable = {
key: "backgroundColor",
fromValue: Color.TRANSPARENT._value,
toValue: Color.TRANSPARENT._value,
};
this.changeables.set("backgroundColor", this.backgroundColorChangeable);
}
set fromColor(color) {
this.backgroundColorChangeable.fromValue = color._value;
}
get fromColor() {
return new Color(this.backgroundColorChangeable.fromValue);
}
set toColor(v) {
this.backgroundColorChangeable.toValue = v._value;
}
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
}
/**
* Alpha range is [0..1]
*/
class AlphaAnimation extends Animation {
constructor() {
super();
this.opacityChangeable = {
key: "alpha",
fromValue: 1,
toValue: 1,
};
this.changeables.set("alpha", this.opacityChangeable);
}
set from(v) {
this.opacityChangeable.fromValue = v;
}
get from() {
return this.opacityChangeable.fromValue;
}
set to(v) {
this.opacityChangeable.toValue = v;
}
get to() {
return this.opacityChangeable.toValue;
}
}
class AnimationSet { class AnimationSet {
constructor() { constructor() {
this.animations = []; this.animations = [];
@ -3058,80 +3190,6 @@ function text(config) {
return ret; return ret;
} }
/**
* Store color as format AARRGGBB or RRGGBB
*/
class Color {
constructor(v) {
this._value = 0;
this._value = v | 0x0;
}
static parse(str) {
if (!str.startsWith("#")) {
throw new Error(`Parse color error with ${str}`);
}
const val = parseInt(str.substr(1), 16);
if (str.length === 7) {
return new Color(val | 0xff000000);
}
else if (str.length === 9) {
return new Color(val);
}
else {
throw new Error(`Parse color error with ${str}`);
}
}
static safeParse(str, defVal = Color.TRANSPARENT) {
let color = defVal;
try {
color = Color.parse(str);
}
catch (e) {
}
finally {
return color;
}
}
alpha(v) {
v = v * 255;
return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
}
toModel() {
return this._value;
}
}
Color.BLACK = new Color(0xFF000000);
Color.DKGRAY = new Color(0xFF444444);
Color.GRAY = new Color(0xFF888888);
Color.LTGRAY = new Color(0xFFCCCCCC);
Color.WHITE = new Color(0xFFFFFFFF);
Color.RED = new Color(0xFFFF0000);
Color.GREEN = new Color(0xFF00FF00);
Color.BLUE = new Color(0xFF0000FF);
Color.YELLOW = new Color(0xFFFFFF00);
Color.CYAN = new Color(0xFF00FFFF);
Color.MAGENTA = new Color(0xFFFF00FF);
Color.TRANSPARENT = new Color(0);
exports.GradientOrientation = void 0;
(function (GradientOrientation) {
/** draw the gradient from the top to the bottom */
GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
/** draw the gradient from the top-right to the bottom-left */
GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
/** draw the gradient from the right to the left */
GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
/** draw the gradient from the bottom-right to the top-left */
GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
/** draw the gradient from the bottom to the top */
GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
/** draw the gradient from the bottom-left to the top-right */
GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
/** draw the gradient from the left to the right */
GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
/** draw the gradient from the top-left to the bottom-right */
GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
})(exports.GradientOrientation || (exports.GradientOrientation = {}));
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { var __decorate$9 = (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;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@ -4713,8 +4771,10 @@ class ModularPanel extends Module {
} }
} }
exports.AlphaAnimation = AlphaAnimation;
exports.AnimationSet = AnimationSet; exports.AnimationSet = AnimationSet;
exports.BOTTOM = BOTTOM; exports.BOTTOM = BOTTOM;
exports.BackgroundColorAnimation = BackgroundColorAnimation;
exports.CENTER = CENTER; exports.CENTER = CENTER;
exports.CENTER_X = CENTER_X; exports.CENTER_X = CENTER_X;
exports.CENTER_Y = CENTER_Y; exports.CENTER_Y = CENTER_Y;

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

File diff suppressed because one or more lines are too long