Skip to content

Commit f738649

Browse files
AmoebeLabsAmoebeLabs
authored
Fix tool style map in render (#222)
1 parent f9ba4e9 commit f738649

18 files changed

+11663
-732
lines changed

Diff for: ‎dist/swiss-army-knife-card.js

+11,575-716
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎rollup.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import serve from 'rollup-plugin-serve';
44
import commonjs from '@rollup/plugin-commonjs';
55
import terser from '@rollup/plugin-terser';
66

7-
const dev = process.env.ROLLUP_WATCH;
7+
const dev = process.env.ROLLUP_WATCH || process.env.DEV;
88

99
const serveopts = {
1010
contentBase: ['dist'],

Diff for: ‎src/badge-tool.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export default class BadgeTool extends BaseTool {
3838
},
3939
},
4040
styles: {
41+
tool: {
42+
},
4143
left: {
4244
},
4345
right: {
@@ -58,8 +60,11 @@ export default class BadgeTool extends BaseTool {
5860
this.svg.rightYpos = this.svg.y;
5961
this.svg.rightWidth = ((100 - this.config.position.ratio) / 100) * this.svg.width;
6062

63+
this.classes.tool = {};
6164
this.classes.left = {};
6265
this.classes.right = {};
66+
67+
this.styles.tool = {};
6368
this.styles.left = {};
6469
this.styles.right = {};
6570
if (this.dev.debug) console.log('BadgeTool constructor coords, dimensions', this.svg, this.config);
@@ -125,7 +130,8 @@ export default class BadgeTool extends BaseTool {
125130
*/
126131
render() {
127132
return svg`
128-
<g id="badge-${this.toolId}" class="${classMap(this.classes.tool)}"
133+
<g id="badge-${this.toolId}"
134+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
129135
@click=${(e) => this.handleTapEvent(e, this.config)}>
130136
${this._renderBadge()}
131137
</g>

Diff for: ‎src/circle-tool.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ export default class CircleTool extends BaseTool {
4343

4444
this.svg.radius = Utils.calculateSvgDimension(argConfig.position.radius);
4545

46+
this.classes.tool = {};
4647
this.classes.circle = {};
48+
49+
this.styles.tool = {};
4750
this.styles.circle = {};
4851
if (this.dev.debug) console.log('CircleTool constructor config, svg', this.toolId, this.config, this.svg);
4952
}
@@ -91,8 +94,12 @@ export default class CircleTool extends BaseTool {
9194
*/
9295

9396
render() {
97+
this.styles.tool.overflow = 'visible';
98+
this.styles['transform-origin'] = `${this.svg.cx} ${this.svg.cy}`;
99+
94100
return svg`
95-
<g "" id="circle-${this.toolId}" class="${classMap(this.classes.tool)}" overflow="visible" transform-origin="${this.svg.cx} ${this.svg.cy}"
101+
<g "" id="circle-${this.toolId}"
102+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
96103
@click=${(e) => this.handleTapEvent(e, this.config)}>
97104
${this._renderCircle()}
98105
</g>

Diff for: ‎src/ellipse-tool.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export default class EllipseTool extends BaseTool {
3232
},
3333
},
3434
styles: {
35+
tool: {
36+
},
3537
ellipse: {
3638
},
3739
},
@@ -42,7 +44,10 @@ export default class EllipseTool extends BaseTool {
4244
this.svg.radiusx = Utils.calculateSvgDimension(argConfig.position.radiusx);
4345
this.svg.radiusy = Utils.calculateSvgDimension(argConfig.position.radiusy);
4446

47+
this.classes.tool = {};
4548
this.classes.ellipse = {};
49+
50+
this.styles.tool = {};
4651
this.styles.ellipse = {};
4752

4853
if (this.dev.debug) console.log('EllipseTool constructor coords, dimensions', this.coords, this.dimensions, this.svg, this.config);
@@ -81,7 +86,8 @@ export default class EllipseTool extends BaseTool {
8186
*/
8287
render() {
8388
return svg`
84-
<g id="ellipse-${this.toolId}" class="${classMap(this.classes.tool)}"
89+
<g id="ellipse-${this.toolId}"
90+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
8591
@click=${(e) => this.handleTapEvent(e, this.config)}>
8692
${this._renderEllipse()}
8793
</g>

Diff for: ‎src/entity-area-tool.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ export default class EntityAreaTool extends BaseTool {
3434
super(argToolset, Merge.mergeDeep(DEFAULT_AREA_CONFIG, argConfig), argPos);
3535

3636
// Text is rendered in its own context. No need for SVG coordinates.
37+
this.classes.tool = {};
3738
this.classes.area = {};
39+
40+
this.styles.tool = {};
3841
this.styles.area = {};
3942
if (this.dev.debug) console.log('EntityAreaTool constructor coords, dimensions', this.coords, this.dimensions, this.svg, this.config);
4043
}
@@ -93,7 +96,8 @@ export default class EntityAreaTool extends BaseTool {
9396
*/
9497
render() {
9598
return svg`
96-
<g id="area-${this.toolId}" class="${classMap(this.classes.tool)}"
99+
<g id="area-${this.toolId}"
100+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
97101
@click=${(e) => this.handleTapEvent(e, this.config)}>
98102
${this._renderEntityArea()}
99103
</g>

Diff for: ‎src/entity-icon-tool.js

+5
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export default class EntityIconTool extends BaseTool {
2828
},
2929
},
3030
styles: {
31+
tool: {
32+
},
3133
icon: {
3234
},
3335
},
@@ -69,7 +71,10 @@ export default class EntityIconTool extends BaseTool {
6971
this.svg.xpx -= (this.svg.iconPixels * adjust);
7072
this.svg.ypx = this.svg.ypx - (this.svg.iconPixels * 0.5) - (this.svg.iconPixels * 0.25);
7173
}
74+
this.classes.tool = {};
7275
this.classes.icon = {};
76+
77+
this.styles.tool = {};
7378
this.styles.icon = {};
7479

7580
if (this.dev.debug) console.log('EntityIconTool constructor coords, dimensions, config', this.coords, this.dimensions, this.config);

Diff for: ‎src/entity-name-tool.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default class EntityNameTool extends BaseTool {
4040
this.classes.name = {};
4141

4242
// Init styles
43+
this.styles.tool = {};
4344
this.styles.name = {};
4445
if (this.dev.debug) console.log('EntityName constructor coords, dimensions', this.coords, this.dimensions, this.svg, this.config);
4546
}
@@ -98,7 +99,8 @@ export default class EntityNameTool extends BaseTool {
9899
*/
99100
render() {
100101
return svg`
101-
<g id="name-${this.toolId}" class="${classMap(this.classes.tool)}"
102+
<g id="name-${this.toolId}"
103+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
102104
@click=${(e) => this.handleTapEvent(e, this.config)}>
103105
${this._renderEntityName()}
104106
</g>

Diff for: ‎src/entity-state-tool.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export default class EntityStateTool extends BaseTool {
2929
},
3030
},
3131
styles: {
32+
tool: {
33+
},
3234
state: {
3335
},
3436
uom: {
@@ -37,9 +39,11 @@ export default class EntityStateTool extends BaseTool {
3739
};
3840
super(argToolset, Merge.mergeDeep(DEFAULT_STATE_CONFIG, argConfig), argPos);
3941

42+
this.classes.tool = {};
4043
this.classes.state = {};
4144
this.classes.uom = {};
4245

46+
this.styles.tool = {};
4347
this.styles.state = {};
4448
this.styles.uom = {};
4549
if (this.dev.debug) console.log('EntityStateTool constructor coords, dimensions', this.coords, this.dimensions, this.svg, this.config);
@@ -87,6 +91,7 @@ export default class EntityStateTool extends BaseTool {
8791
if (this.config.show.uom === 'none') {
8892
return svg``;
8993
} else {
94+
this.MergeAnimationClassIfChanged();
9095
this.MergeAnimationStyleIfChanged();
9196
this.MergeColorFromState(this.styles.uom);
9297

@@ -102,7 +107,7 @@ export default class EntityStateTool extends BaseTool {
102107

103108
fsuomStr = { 'font-size': fsuomValue + fsuomType };
104109

105-
this.styles.uom = Merge.mergeDeep(this.config.styles.uom, fsuomStr);
110+
this.styles.uom = Merge.mergeDeep(this.config.styles.uom, this.styles.uom, fsuomStr);
106111

107112
const uom = this._card._buildUom(this.derivedEntity, this._card.entities[this.defaultEntityIndex()], this._card.config.entities[this.defaultEntityIndex()]);
108113

@@ -143,7 +148,8 @@ export default class EntityStateTool extends BaseTool {
143148
// eslint-disable-next-line no-constant-condition
144149
if (true || (this._card._computeDomain(this._card.entities[this.defaultEntityIndex()].entity_id) === 'sensor')) {
145150
return svg`
146-
<svg overflow="visible" id="state-${this.toolId}" class="${classMap(this.classes.tool)}">
151+
<svg overflow="visible" id="state-${this.toolId}"
152+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}">
147153
<text @click=${(e) => this.handleTapEvent(e, this.config)}>
148154
${this._renderState()}
149155
${this._renderUom()}

Diff for: ‎src/line-tool.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@ export default class LineTool extends BaseTool {
108108
*/
109109
render() {
110110
return svg`
111-
<g id="line-${this.toolId}" class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
111+
<g id="line-${this.toolId}"
112+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
112113
@click=${(e) => this.handleTapEvent(e, this.config)}>
113114
${this._renderLine()}
114115
</g>

Diff for: ‎src/rectangle-ex-tool.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,18 @@ export default class RectangleToolEx extends BaseTool {
3535
},
3636
},
3737
styles: {
38+
tool: {
39+
},
3840
rectex: {
3941
},
4042
},
4143
};
4244
super(argToolset, Merge.mergeDeep(DEFAULT_RECTANGLEEX_CONFIG, argConfig), argPos);
4345

46+
this.classes.tool = {};
4447
this.classes.rectex = {};
48+
49+
this.styles.tool = {};
4550
this.styles.rectex = {};
4651

4752
// #TODO:
@@ -133,7 +138,8 @@ export default class RectangleToolEx extends BaseTool {
133138
*/
134139
render() {
135140
return svg`
136-
<g id="rectex-${this.toolId}" class="${classMap(this.classes.tool)}"
141+
<g id="rectex-${this.toolId}"
142+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
137143
@click=${(e) => this.handleTapEvent(e, this.config)}>
138144
${this._renderRectangleEx()}
139145
</g>

Diff for: ‎src/rectangle-tool.js

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export default class RectangleTool extends BaseTool {
8989
render() {
9090
return svg`
9191
<g id="rectangle-${this.toolId}" class="${classMap(this.classes.tool)}" transform-origin="${this.svg.cx}px ${this.svg.cy}px"
92+
style="${styleMap(this.styles.tool)}"
9293
@click=${(e) => this.handleTapEvent(e, this.config)}>
9394
${this._renderRectangle()}
9495
</g>

Diff for: ‎src/regular-polygon-tool.js

+1
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export default class RegPolyTool extends BaseTool {
123123
render() {
124124
return svg`
125125
<g "" id="regpoly-${this.toolId}" class="${classMap(this.classes.tool)}" transform-origin="${this.svg.cx} ${this.svg.cy}"
126+
style="${styleMap(this.styles.tool)}"
126127
@click=${(e) => this.handleTapEvent(e, this.config)}>
127128
${this._renderRegPoly()}
128129
</g>

Diff for: ‎src/segmented-arc-tool.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { svg } from 'lit-element';
22
import { styleMap } from 'lit-html/directives/style-map.js';
3+
import { classMap } from 'lit-html/directives/class-map.js';
34

45
import Merge from './merge';
56
import BaseTool from './base-tool';
@@ -27,13 +28,16 @@ export default class SegmentedArcTool extends BaseTool {
2728
color: 'var(--primary-color)',
2829
classes: {
2930
tool: {
31+
'sak-segarc': true,
3032
},
3133
foreground: {
3234
},
3335
background: {
3436
},
3537
},
3638
styles: {
39+
tool: {
40+
},
3741
foreground: {
3842
},
3943
background: {
@@ -315,7 +319,9 @@ export default class SegmentedArcTool extends BaseTool {
315319
render() {
316320
if (this.dev.debug) console.log('SegmentedArcTool RENDERNEW - Render IN');
317321
return svg`
318-
<g "" id="arc-${this.toolId}" class="arc">
322+
<g "" id="arc-${this.toolId}"
323+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
324+
>
319325
<g >
320326
${this._renderSegments()}
321327
</g>

Diff for: ‎src/sparkline-barchart-tool.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default class SparklineBarChartTool extends BaseTool {
6262
this._scale = {};
6363
this._needsRendering = false;
6464

65+
this.classes.tool = {};
6566
this.classes.bar = {};
6667

6768
this.styles.tool = {};
@@ -226,7 +227,8 @@ export default class SparklineBarChartTool extends BaseTool {
226227
*/
227228
render() {
228229
return svg`
229-
<g id="barchart-${this.toolId}" class="${classMap(this.classes.tool)}"
230+
<g id="barchart-${this.toolId}"
231+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
230232
@click=${(e) => this.handleTapEvent(e, this.config)}>
231233
${this._renderBars()}
232234
</g>

Diff for: ‎src/switch-tool.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default class SwitchTool extends BaseTool {
5858
},
5959
styles: {
6060
tool: {
61+
overflow: 'visible',
6162
},
6263
track: {
6364
},
@@ -242,7 +243,8 @@ export default class SwitchTool extends BaseTool {
242243

243244
render() {
244245
return svg`
245-
<g id="switch-${this.toolId}" class="${classMap(this.classes.tool)}" overflow="visible" transform-origin="${this.svg.cx} ${this.svg.cy}"
246+
<g id="switch-${this.toolId}" transform-origin="${this.svg.cx} ${this.svg.cy}"
247+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
246248
@click=${(e) => this.handleTapEvent(e, this.config)}>
247249
${this._renderSwitch()}
248250
</g>

Diff for: ‎src/text-tool.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ export default class TextTool extends BaseTool {
3636

3737
this.EnableHoverForInteraction();
3838
this.text = this.config.text;
39+
40+
this.classes.tool = {};
41+
this.classes.text = {};
42+
43+
this.styles.tool = {};
3944
this.styles.text = {};
4045
if (this.dev.debug) console.log('TextTool constructor coords, dimensions', this.coords, this.dimensions, this.svg, this.config);
4146
}
@@ -70,7 +75,8 @@ export default class TextTool extends BaseTool {
7075
*/
7176
render() {
7277
return svg`
73-
<g id="text-${this.toolId}" class="${classMap(this.classes.tool)}"
78+
<g id="text-${this.toolId}"
79+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
7480
@click=${(e) => this.handleTapEvent(e, this.config)}>
7581
${this._renderText()}
7682
</g>

Diff for: ‎src/user-svg-tool.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { svg } from 'lit-element';
2-
import { styleMap } from 'lit-html/directives/style-map.js';
2+
import { classMap } from 'lit-html/directives/class-map';
3+
import { styleMap } from 'lit-html/directives/style-map';
34
import { SVGInjector } from '@tanem/svg-injector';
45

56
import Merge from './merge';
@@ -47,6 +48,16 @@ export default class UserSvgTool extends BaseTool {
4748
this.imageCur = 'none';
4849
this.imagePrev = 'none';
4950

51+
this.classes = {};
52+
this.classes.tool = {};
53+
this.classes.usersvg = {};
54+
this.classes.mask = {};
55+
56+
this.styles = {};
57+
this.styles.tool = {};
58+
this.styles.usersvg = {};
59+
this.styles.mask = {};
60+
5061
this.injector = {};
5162
this.injector.svg = null;
5263
this.injector.cache = [];
@@ -241,7 +252,7 @@ export default class UserSvgTool extends BaseTool {
241252
render() {
242253
return svg`
243254
<g id="usersvg-${this.toolId}" overflow="visible" transform-origin="${this.svg.cx} ${this.svg.cy}"
244-
style="${styleMap(this.styles.tool)}"
255+
class="${classMap(this.classes.tool)}" style="${styleMap(this.styles.tool)}"
245256
@click=${(e) => this.handleTapEvent(e, this.config)}>
246257
${this._renderUserSvg()}
247258
</g>

0 commit comments

Comments
 (0)