tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Refactroing

pull/11206/head
Artem Dzhereleiko 2 years ago
parent
078c5be6d4
commit
c044d8ea5d
1 changed files with 183 additions and 126 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 309
      ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts

309
ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
View File

@ -228,6 +228,21 @@ export const powerButtonShapeSize = 110;
const cx = powerButtonShapeSize / 2;
const cy = powerButtonShapeSize / 2;
const powerCircle = 'M13 4.67063C13 3.65748 12.0377 2.91866 11.0946 3.28889C4.59815 5.83928 0 12.1545 0 19.5412C0 29.1835 ' +
'7.83502 37.0001 17.5 37.0001C27.165 37.0001 35 29.1835 35 19.5412C35 12.1545 30.4019 5.83928 23.9054 3.28889C22.9623 2.91866 22 ' +
'3.65748 22 4.67063C22 5.33931 22.434 5.92434 23.0519 6.17991C28.3077 8.35375 32 13.5209 32 19.5412C32 27.52 25.5148 34.0001 17.5 ' +
'34.0001C9.48521 34.0001 3 27.52 3 19.5412C3 13.5209 6.69234 8.35374 11.9481 6.17991C12.566 5.92434 13 5.33931 13 4.67063Z';
const powerLine = 'M16.5 1C16.5 0.447716 16.9477 0 17.5 0C18.0523 0 18.5 0.447715 18.5 1V17C18.5 ' +
'17.5523 18.0523 18 17.5 18C16.9477 18 16.5 17.5523 16.5 17V1Z';
const powerCircleStroke = 'M12 2.95698C12 1.45236 10.4775 0.438524 9.19424 1.22416C3.68417 4.59764 0 10.7283 0 17.7316C0 ' +
'28.3732 8.50659 37 19 37C29.4934 37 38 28.3732 38 17.7316C38 10.7283 34.3158 4.59764 28.8058 1.22416C27.5225 ' +
'0.438524 26 1.45236 26 2.95698C26 3.73878 26.4365 4.44718 27.0911 4.87461C31.2354 7.58066 34 12.3083 34 ' +
'17.7316C34 26.2172 27.2316 33 19 33C10.7684 33 4 26.2172 4 17.7316C4 12.3084 6.76462 7.58066 10.9089 ' +
'4.87461C11.5635 4.44718 12 3.73878 12 2.95698Z';
const powerLineStroke = 'M0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5V15.5C5 16.8807 3.88071 18 ' +
'2.5 18C1.11929 18 0 16.8807 0 15.5V2.5Z';
const powerButtonAnimation = (element: Element): Runner => element.animate(200, 0, 'now');
export abstract class PowerButtonShape {
@ -252,11 +267,11 @@ export abstract class PowerButtonShape {
case PowerButtonLayout.outlined_volume:
return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
case PowerButtonLayout.default_power:
return new DefaultVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
return new DefaultPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
case PowerButtonLayout.simplified_power:
return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
return new SimplifiedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
case PowerButtonLayout.outlined_power:
return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
return new OutlinedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
}
}
@ -264,13 +279,6 @@ export abstract class PowerButtonShape {
protected readonly onLabel: string;
protected readonly offLabel: string;
protected powerCircle = 'M13 4.67063C13 3.65748 12.0377 2.91866 11.0946 3.28889C4.59815 5.83928 0 12.1545 0 19.5412C0 29.1835 ' +
'7.83502 37.0001 17.5 37.0001C27.165 37.0001 35 29.1835 35 19.5412C35 12.1545 30.4019 5.83928 23.9054 3.28889C22.9623 2.91866 22 ' +
'3.65748 22 4.67063C22 5.33931 22.434 5.92434 23.0519 6.17991C28.3077 8.35375 32 13.5209 32 19.5412C32 27.52 25.5148 34.0001 17.5 ' +
'34.0001C9.48521 34.0001 3 27.52 3 19.5412C3 13.5209 6.69234 8.35374 11.9481 6.17991C12.566 5.92434 13 5.33931 13 4.67063Z';
protected powerLine = 'M16.5 1C16.5 0.447716 16.9477 0 17.5 0C18.0523 0 18.5 0.447715 18.5 1V17C18.5 ' +
'17.5523 18.0523 18 17.5 18C16.9477 18 16.5 17.5523 16.5 17V1Z';
protected backgroundShape: Circle;
protected hoverShape: Circle;
protected hovered = false;
@ -282,8 +290,7 @@ export abstract class PowerButtonShape {
protected settings: PowerButtonWidgetSettings,
protected value: boolean,
protected disabled: boolean,
protected onClick: () => void,
protected iconMode: boolean = false) {
protected onClick: () => void) {
this.colors = createPowerButtonShapeColors(this.settings);
this.onLabel = this.widgetContext.translate.instant('widgets.power-button.on-label').toUpperCase();
this.offLabel = this.widgetContext.translate.instant('widgets.power-button.off-label').toUpperCase();
@ -725,13 +732,34 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
private offLabelShape: Text;
private onCircleShape: Circle;
private onLabelShape: Text;
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
private pressedTimeline: Timeline;
private centerGroup: G;
protected drawOffCenter(centerGroup: G) {
this.offLabelShape = this.createOffLabel('400').addTo(centerGroup);
}
protected drawOnCenter() {
this.onLabelShape = this.createOnLabel('400');
}
protected addMask(onCircleShape: Circle) {
this.createMask(onCircleShape,[this.onLabelShape]);
}
protected addTimeLine(pressedTimeline: Timeline) {
this.onLabelShape.timeline(pressedTimeline);
}
protected drawColor(mainColor: PowerButtonColor) {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
protected animation(scale: number) {
powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}});
}
protected drawShape() {
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy)
.fill({opacity: 0}).stroke({width: 0});
@ -750,30 +778,15 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
add.stop(1, '#FFFFFF', 1);
}).from(0.832, 0.1188).to(0.268, 0.92);
this.centerGroup = this.svgShape.group();
if (this.iconMode) {
this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
} else {
this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup);
}
this.drawOffCenter(this.centerGroup);
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy);
if (this.iconMode) {
this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy);
this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12);
} else {
this.onLabelShape = this.createOnLabel('400');
}
this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]);
this.drawOnCenter();
this.addMask(this.onCircleShape);
this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3);
this.pressedTimeline = new Timeline();
this.centerGroup.timeline(this.pressedTimeline);
if (this.iconMode) {
this.onPowerSymbolCircle.timeline(this.pressedTimeline);
this.onPowerSymbolLine.timeline(this.pressedTimeline);
} else {
this.onLabelShape.timeline(this.pressedTimeline);
}
this.addTimeLine(this.pressedTimeline);
this.innerShadow.timeline(this.pressedTimeline);
}
@ -793,12 +806,7 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
this.innerBorder.fill(this.innerBorderGradient);
this.innerBorder.attr({ 'fill-opacity': 1 });
}
if (this.iconMode) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
} else {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
this.drawColor(mainColor);
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
@ -823,24 +831,14 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
this.innerShadow.show();
const pressedScale = 0.75;
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale, origin: {x: cx, y: cy}});
}
this.animation(pressedScale);
this.innerShadow.animate(6, 0.6);
}
protected onPressEnd() {
this.pressedTimeline.finish();
powerButtonAnimation(this.centerGroup).transform({scale: 1});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
}
this.animation(1);
this.innerShadow.animateRestore().after(() => {
if (this.disabled) {
this.innerShadow.hide();
@ -850,22 +848,58 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
}
class DefaultPowerPowerButtonShape extends DefaultVolumePowerButtonShape {
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
protected drawOffCenter(centerGroup: G) {
this.offPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(centerGroup);
this.offPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(centerGroup);
}
protected drawOnCenter() {
this.onPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy);
this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12);
}
protected addMask(onCircleShape: Circle) {
this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]);
}
protected addTimeLine(pressedTimeline: Timeline) {
this.onPowerSymbolCircle.timeline(pressedTimeline);
this.onPowerSymbolLine.timeline(pressedTimeline);
}
protected drawColor(mainColor: PowerButtonColor) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
protected animation(scale: number) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}});
}
}
class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
private outerBorder: Circle;
private outerBorderMask: Circle;
private offLabelShape: Text;
private onLabelShape: Text;
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
private innerShadow: InnerShadowCircle;
private pressedShadow: InnerShadowCircle;
private pressedTimeline: Timeline;
private centerGroup: G;
private onCenterGroup: G;
protected drawCenterGroup(centerGroup: G, onCenterGroup: G) {
this.offLabelShape = this.createOffLabel().addTo(centerGroup);
this.onLabelShape = this.createOnLabel().addTo(onCenterGroup);
}
protected drawShape() {
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy)
@ -874,16 +908,7 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
this.createMask(this.outerBorder, [this.outerBorderMask]);
this.centerGroup = this.svgShape.group();
this.onCenterGroup = this.svgShape.group();
if (this.iconMode) {
this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.onCenterGroup);
this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.onCenterGroup);
} else {
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup);
this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup);
}
this.drawCenterGroup(this.centerGroup, this.onCenterGroup);
this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 3, 0.3);
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 0, 0);
this.pressedTimeline = new Timeline();
@ -893,15 +918,8 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
}
protected drawColorState(mainColor: PowerButtonColor){
if (this.iconMode) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
} else {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
protected drawOff() {
@ -943,7 +961,28 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
}
}
class OutlinedVolumePowerButtonShape extends PowerButtonShape {
class SimplifiedPowerPowerButtonShape extends SimplifiedVolumePowerButtonShape {
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
protected drawCenterGroup(centerGroup: G, onCenterGroup: G) {
this.offPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(centerGroup);
this.offPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(centerGroup);
this.onPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(onCenterGroup);
this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(onCenterGroup);
}
protected drawColorState(mainColor: PowerButtonColor) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
}
class OutlinedVolumePowerButtonShape extends PowerButtonShape {
private outerBorder: Circle;
private outerBorderMask: Circle;
private outerBorderGradient: Gradient;
@ -952,15 +991,35 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
private offLabelShape: Text;
private onCircleShape: Circle;
private onLabelShape: Text;
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
private pressedShadow: InnerShadowCircle;
private pressedTimeline: Timeline;
private centerGroup: G;
private onCenterGroup: G;
protected drawOffCenter(centerGroup: G) {
this.offLabelShape = this.createOffLabel('800').addTo(centerGroup);
}
protected drawOnCenter() {
this.onLabelShape = this.createOnLabel('800');
}
protected addMask(onCircleShape: Circle) {
this.createMask(onCircleShape,[this.onLabelShape]);
}
protected addTimeLine(pressedTimeline: Timeline) {
this.onLabelShape.timeline(pressedTimeline);
}
protected drawColor(mainColor: PowerButtonColor) {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
protected animation(scale: number) {
powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}});
}
protected drawShape() {
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy)
.fill({opacity: 0}).stroke({width: 0});
@ -975,42 +1034,19 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy);
this.createMask(this.innerBorder, [this.innerBorderMask]);
this.centerGroup = this.svgShape.group();
if (this.iconMode) {
this.powerCircle = 'M12 2.95698C12 1.45236 10.4775 0.438524 9.19424 1.22416C3.68417 4.59764 0 10.7283 0 17.7316C0 ' +
'28.3732 8.50659 37 19 37C29.4934 37 38 28.3732 38 17.7316C38 10.7283 34.3158 4.59764 28.8058 1.22416C27.5225 ' +
'0.438524 26 1.45236 26 2.95698C26 3.73878 26.4365 4.44718 27.0911 4.87461C31.2354 7.58066 34 12.3083 34 ' +
'17.7316C34 26.2172 27.2316 33 19 33C10.7684 33 4 26.2172 4 17.7316C4 12.3084 6.76462 7.58066 10.9089 ' +
'4.87461C11.5635 4.44718 12 3.73878 12 2.95698Z';
this.powerLine = 'M0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5V15.5C5 16.8807 3.88071 18 ' +
'2.5 18C1.11929 18 0 16.8807 0 15.5V2.5Z';
this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
} else {
this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup);
}
this.drawOffCenter(this.centerGroup);
this.onCenterGroup = this.svgShape.group();
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy)
.addTo(this.onCenterGroup);
if (this.iconMode) {
this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy);
this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12);
} else {
this.onLabelShape = this.createOnLabel('800');
}
this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]);
this.drawOnCenter();
this.addMask(this.onCircleShape);
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 30, cx, cy, 0, 0);
this.backgroundShape.addClass('tb-small-shadow');
this.pressedTimeline = new Timeline();
this.centerGroup.timeline(this.pressedTimeline);
this.onCenterGroup.timeline(this.pressedTimeline);
if (this.iconMode) {
this.onPowerSymbolCircle.timeline(this.pressedTimeline);
this.onPowerSymbolLine.timeline(this.pressedTimeline);
} else {
this.onLabelShape.timeline(this.pressedTimeline);
}
this.addTimeLine(this.pressedTimeline);
this.pressedShadow.timeline(this.pressedTimeline);
}
@ -1022,12 +1058,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
this.outerBorder.attr({ 'fill-opacity': 1 });
}
this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
if (this.iconMode) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
} else {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
this.drawColor(mainColor);
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
@ -1048,12 +1079,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
const pressedScale = 0.75;
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale});
powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
}
this.animation(pressedScale / 0.98);
this.pressedShadow.animate(6, 0.6);
}
@ -1061,13 +1087,44 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
this.pressedTimeline.finish();
powerButtonAnimation(this.centerGroup).transform({scale: 1});
powerButtonAnimation(this.onCenterGroup).transform({scale: 1});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
}
this.animation(1);
this.pressedShadow.animateRestore();
}
}
class OutlinedPowerPowerButtonShape extends OutlinedVolumePowerButtonShape {
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
protected drawOffCenter(centerGroup: G) {
this.offPowerSymbolCircle = this.svgShape.path(powerCircleStroke).center(cx, cy).addTo(centerGroup);
this.offPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12).addTo(centerGroup);
}
protected drawOnCenter() {
this.onPowerSymbolCircle = this.svgShape.path(powerCircleStroke).center(cx, cy);
this.onPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12);
}
protected addMask(onCircleShape: Circle) {
this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]);
}
protected addTimeLine(pressedTimeline: Timeline) {
this.onPowerSymbolCircle.timeline(pressedTimeline);
this.onPowerSymbolLine.timeline(pressedTimeline);
}
protected drawColor(mainColor: PowerButtonColor) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
protected animation(scale: number) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}});
}
}

Write Preview
Loading…
Cancel
Save