@alegendstale/holly-components 0.2.34 → 0.2.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/canvas/canvas-image.d.ts +1 -1
- package/dist/components/canvas/canvas-image.d.ts.map +1 -1
- package/dist/components/canvas/canvas-image.js +4 -0
- package/dist/components/tool-tip/tool-tip.d.ts +2 -2
- package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
- package/dist/components/tool-tip/tool-tip.js +17 -16
- package/dist/utils/generateUtils.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import quantize from 'quantize';
|
|
|
3
3
|
import { CanvasBase } from './canvas-base.js';
|
|
4
4
|
export declare class CanvasImage extends CanvasBase {
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
-
image
|
|
6
|
+
image?: HTMLImageElement;
|
|
7
7
|
imageURL: string;
|
|
8
8
|
smoothing: boolean;
|
|
9
9
|
private loading;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas-image.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,QAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAeX;IAGF,KAAK,
|
|
1
|
+
{"version":3,"file":"canvas-image.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,QAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAeX;IAGF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAGzB,QAAQ,EAAE,MAAM,CAAM;IAGtB,SAAS,EAAE,OAAO,CAAS;IAE3B,OAAO,CAAC,OAAO,CAAiB;IAChC,KAAK,EAAE,MAAM,CAAK;IAClB,MAAM,EAAE,MAAM,CAAK;IAEnB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOhE,MAAM;IAYN;;;;;OAKG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IA6BlE;;;;;OAKG;IACU,UAAU,CAAC,SAAS,SAAI,EAAE,OAAO,SAAK;IAqBnD;;;;;OAKG;IACU,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAuB7C;;OAEG;IACU,YAAY,CAAC,CAAC,SAAI,EAAE,CAAC,SAAI;IAStC;;OAEG;IACH,OAAO,CAAC,cAAc,CAQnB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
|
|
@@ -52,10 +52,14 @@ let CanvasImage = class CanvasImage extends CanvasBase {
|
|
|
52
52
|
* @param height The canvas height
|
|
53
53
|
*/
|
|
54
54
|
updateImage(imageURL, width, height) {
|
|
55
|
+
if (!this.image)
|
|
56
|
+
return;
|
|
55
57
|
// Set URL
|
|
56
58
|
this.image.src = imageURL;
|
|
57
59
|
// Wait for image to load before calculating dimensions & drawing image to canvas
|
|
58
60
|
this.waitForLoading().then(() => {
|
|
61
|
+
if (!this.image)
|
|
62
|
+
return;
|
|
59
63
|
// Calculate the new height based on the aspect ratio
|
|
60
64
|
const aspectRatio = this.image.naturalHeight / this.image.naturalWidth;
|
|
61
65
|
let newWidth = width;
|
|
@@ -4,10 +4,10 @@ export type TriggerTypes = 'hover' | 'click' | 'manual';
|
|
|
4
4
|
export declare const styles: import("lit").CSSResult;
|
|
5
5
|
export declare class ToolTip extends LitElement {
|
|
6
6
|
static styles: import("lit").CSSResult;
|
|
7
|
-
|
|
7
|
+
textEl?: HTMLParagraphElement;
|
|
8
8
|
display: boolean;
|
|
9
|
-
text: string;
|
|
10
9
|
trigger: TriggerTypes;
|
|
10
|
+
text: string;
|
|
11
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
12
|
/**
|
|
13
13
|
* Clamps the tooltip position to within the bounds
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,yBAmDlB,CAAA;AAED,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAAU;IAGvB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAG9B,OAAO,UAAS;IAGhB,OAAO,EAAE,YAAY,CAAY;IAGjC,IAAI,SAAM;IAEV,MAAM;IAYN;;OAEG;IACH,aAAa,GAAI,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,OAAO;;;MAsB7D;IAEK,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAIpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -14,11 +14,15 @@ export const styles = css `
|
|
|
14
14
|
--tooltip-x: 0;
|
|
15
15
|
--tooltip-y: 0;
|
|
16
16
|
}
|
|
17
|
+
|
|
18
|
+
/* Hover determines whether tooltip is displayed */
|
|
19
|
+
:host([trigger="hover"]:hover) p {
|
|
20
|
+
display: flex;
|
|
21
|
+
}
|
|
17
22
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
23
|
+
/* Display determines whether tooltip is displayed */
|
|
24
|
+
:host(:not([trigger="hover"])[display]) p {
|
|
25
|
+
display: flex;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
p {
|
|
@@ -44,7 +48,6 @@ export const styles = css `
|
|
|
44
48
|
top: var(--tooltip-y);
|
|
45
49
|
|
|
46
50
|
/* Obsidian Styling */
|
|
47
|
-
|
|
48
51
|
box-sizing: border-box;
|
|
49
52
|
animation: pop-down 200ms forwards ease-in-out;
|
|
50
53
|
box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
|
|
@@ -60,17 +63,17 @@ let ToolTip = class ToolTip extends LitElement {
|
|
|
60
63
|
constructor() {
|
|
61
64
|
super(...arguments);
|
|
62
65
|
this.display = false;
|
|
63
|
-
this.text = '';
|
|
64
66
|
this.trigger = 'manual';
|
|
67
|
+
this.text = '';
|
|
65
68
|
/**
|
|
66
69
|
* Clamps the tooltip position to within the bounds
|
|
67
70
|
*/
|
|
68
71
|
this.clampPosition = (pos, bounds) => {
|
|
69
|
-
if (!this.
|
|
72
|
+
if (!this.textEl || !bounds)
|
|
70
73
|
return { x: 0, y: 0 };
|
|
71
74
|
// Get tooltip bounds
|
|
72
|
-
let tooltipWidth = this.
|
|
73
|
-
let tooltipHeight = this.
|
|
75
|
+
let tooltipWidth = this.textEl.offsetWidth;
|
|
76
|
+
let tooltipHeight = this.textEl.offsetHeight;
|
|
74
77
|
// Set tooltip position left or right side of mouse based on whether cursor is halfway
|
|
75
78
|
let leftPosition = pos.x - bounds.left > bounds.width / 2 ? pos.x - bounds.left - 56 : pos.x - bounds.left + 64;
|
|
76
79
|
let halfTooltipWidth = tooltipWidth / 2;
|
|
@@ -93,12 +96,10 @@ let ToolTip = class ToolTip extends LitElement {
|
|
|
93
96
|
render() {
|
|
94
97
|
return html `
|
|
95
98
|
<slot
|
|
96
|
-
@pointerover=${() => this.display = this.trigger === 'hover' ? true : this.display}
|
|
97
|
-
@pointerout=${() => this.display = this.trigger === 'hover' ? false : this.display}
|
|
98
99
|
@click=${() => this.trigger === 'click' ? this.display = !this.display : null}
|
|
99
100
|
>
|
|
100
101
|
</slot>
|
|
101
|
-
<p
|
|
102
|
+
<p>
|
|
102
103
|
${this.text}
|
|
103
104
|
</p>
|
|
104
105
|
`;
|
|
@@ -113,17 +114,17 @@ let ToolTip = class ToolTip extends LitElement {
|
|
|
113
114
|
};
|
|
114
115
|
ToolTip.styles = styles;
|
|
115
116
|
__decorate([
|
|
116
|
-
query('
|
|
117
|
-
], ToolTip.prototype, "
|
|
117
|
+
query('p')
|
|
118
|
+
], ToolTip.prototype, "textEl", void 0);
|
|
118
119
|
__decorate([
|
|
119
120
|
property({ type: Boolean, reflect: true })
|
|
120
121
|
], ToolTip.prototype, "display", void 0);
|
|
121
122
|
__decorate([
|
|
122
123
|
property({ type: String })
|
|
123
|
-
], ToolTip.prototype, "
|
|
124
|
+
], ToolTip.prototype, "trigger", void 0);
|
|
124
125
|
__decorate([
|
|
125
126
|
property({ type: String })
|
|
126
|
-
], ToolTip.prototype, "
|
|
127
|
+
], ToolTip.prototype, "text", void 0);
|
|
127
128
|
ToolTip = __decorate([
|
|
128
129
|
condCustomElement('tool-tip')
|
|
129
130
|
], ToolTip);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateUtils.d.ts","sourceRoot":"","sources":["../../src/utils/generateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AAErF,oBAAY,WAAW;
|
|
1
|
+
{"version":3,"file":"generateUtils.d.ts","sourceRoot":"","sources":["../../src/utils/generateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AAErF,oBAAY,WAAW;IACtB,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;CACjB;AAED,KAAK,cAAc,GAAG;IACrB,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAE,cAAiD;;;EAmDnH"}
|