@editframe/elements 0.42.2 → 0.42.3
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.
|
@@ -7,31 +7,6 @@ import * as lit_html5 from "lit-html";
|
|
|
7
7
|
declare const EFTextSegment_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
|
|
8
8
|
declare class EFTextSegment extends EFTextSegment_base {
|
|
9
9
|
static styles: lit5.CSSResult[];
|
|
10
|
-
/**
|
|
11
|
-
* Registers animation styles that should be shared across all text segments.
|
|
12
|
-
* This is the correct way to inject animation styles for segments - not via innerHTML.
|
|
13
|
-
*
|
|
14
|
-
* @param id Unique identifier for this stylesheet (e.g., "my-animations")
|
|
15
|
-
* @param cssText The CSS rules to inject
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* EFTextSegment.registerAnimations("bounceIn", `
|
|
19
|
-
* @keyframes bounceIn {
|
|
20
|
-
* from { transform: scale(0); }
|
|
21
|
-
* to { transform: scale(1); }
|
|
22
|
-
* }
|
|
23
|
-
* .bounce-in {
|
|
24
|
-
* animation: bounceIn 0.5s ease-out;
|
|
25
|
-
* }
|
|
26
|
-
* `);
|
|
27
|
-
*/
|
|
28
|
-
static registerAnimations(id: string, cssText: string): void;
|
|
29
|
-
/**
|
|
30
|
-
* Unregisters previously registered animation styles.
|
|
31
|
-
*
|
|
32
|
-
* @param id The identifier of the stylesheet to remove
|
|
33
|
-
*/
|
|
34
|
-
static unregisterAnimations(id: string): void;
|
|
35
10
|
render(): lit_html5.TemplateResult<1>;
|
|
36
11
|
private setCSSVariables;
|
|
37
12
|
protected firstUpdated(): void;
|
|
@@ -4,7 +4,6 @@ import { LitElement, css, html } from "lit";
|
|
|
4
4
|
import { customElement, property } from "lit/decorators.js";
|
|
5
5
|
|
|
6
6
|
//#region src/elements/EFTextSegment.ts
|
|
7
|
-
const globalAnimationSheets = /* @__PURE__ */ new Map();
|
|
8
7
|
let EFTextSegment = class EFTextSegment$1 extends EFTemporal(LitElement) {
|
|
9
8
|
constructor(..._args) {
|
|
10
9
|
super(..._args);
|
|
@@ -31,49 +30,6 @@ let EFTextSegment = class EFTextSegment$1 extends EFTemporal(LitElement) {
|
|
|
31
30
|
}
|
|
32
31
|
`];
|
|
33
32
|
}
|
|
34
|
-
/**
|
|
35
|
-
* Registers animation styles that should be shared across all text segments.
|
|
36
|
-
* This is the correct way to inject animation styles for segments - not via innerHTML.
|
|
37
|
-
*
|
|
38
|
-
* @param id Unique identifier for this stylesheet (e.g., "my-animations")
|
|
39
|
-
* @param cssText The CSS rules to inject
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* EFTextSegment.registerAnimations("bounceIn", `
|
|
43
|
-
* @keyframes bounceIn {
|
|
44
|
-
* from { transform: scale(0); }
|
|
45
|
-
* to { transform: scale(1); }
|
|
46
|
-
* }
|
|
47
|
-
* .bounce-in {
|
|
48
|
-
* animation: bounceIn 0.5s ease-out;
|
|
49
|
-
* }
|
|
50
|
-
* `);
|
|
51
|
-
*/
|
|
52
|
-
static registerAnimations(id, cssText) {
|
|
53
|
-
if (globalAnimationSheets.has(id)) return;
|
|
54
|
-
const sheet = new CSSStyleSheet();
|
|
55
|
-
sheet.replaceSync(cssText);
|
|
56
|
-
globalAnimationSheets.set(id, sheet);
|
|
57
|
-
document.querySelectorAll("ef-text-segment").forEach((segment) => {
|
|
58
|
-
if (segment.shadowRoot) {
|
|
59
|
-
const adoptedSheets = segment.shadowRoot.adoptedStyleSheets;
|
|
60
|
-
if (!adoptedSheets.includes(sheet)) segment.shadowRoot.adoptedStyleSheets = [...adoptedSheets, sheet];
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Unregisters previously registered animation styles.
|
|
66
|
-
*
|
|
67
|
-
* @param id The identifier of the stylesheet to remove
|
|
68
|
-
*/
|
|
69
|
-
static unregisterAnimations(id) {
|
|
70
|
-
const sheet = globalAnimationSheets.get(id);
|
|
71
|
-
if (!sheet) return;
|
|
72
|
-
globalAnimationSheets.delete(id);
|
|
73
|
-
document.querySelectorAll("ef-text-segment").forEach((segment) => {
|
|
74
|
-
if (segment.shadowRoot) segment.shadowRoot.adoptedStyleSheets = segment.shadowRoot.adoptedStyleSheets.filter((s) => s !== sheet);
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
33
|
render() {
|
|
78
34
|
this.setCSSVariables();
|
|
79
35
|
return html`${this.segmentText}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EFTextSegment.js","names":["EFTextSegment"],"sources":["../../src/elements/EFTextSegment.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { EFTemporal } from \"./EFTemporal.ts\";\nimport { EFText } from \"./EFText.js\";\n\n
|
|
1
|
+
{"version":3,"file":"EFTextSegment.js","names":["EFTextSegment"],"sources":["../../src/elements/EFTextSegment.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { EFTemporal } from \"./EFTemporal.ts\";\nimport { EFText } from \"./EFText.js\";\n\n@customElement(\"ef-text-segment\")\nexport class EFTextSegment extends EFTemporal(LitElement) {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n :host([data-whitespace]) {\n display: inline;\n }\n :host([data-line-segment]) {\n display: block;\n }\n :host([hidden]) {\n opacity: 0;\n pointer-events: none;\n }\n `,\n ];\n\n render() {\n // Set CSS variables in render() to ensure they're always set\n // This is necessary because Lit may clear inline styles during updates\n this.setCSSVariables();\n return html`${this.segmentText}`;\n }\n\n private setCSSVariables(): void {\n // Set deterministic --ef-seed value based on segment index\n const seed = (this.segmentIndex * 9007) % 233; // Prime numbers for better distribution\n const seedValue = seed / 233; // Normalize to 0-1 range\n this.style.setProperty(\"--ef-seed\", seedValue.toString());\n\n // Set stagger offset CSS variable\n // staggerOffsetMs is always set (defaults to 0), so we can always set the CSS variable\n const offsetMs = this.staggerOffsetMs ?? 0;\n this.style.setProperty(\"--ef-stagger-offset\", `${offsetMs}ms`);\n\n // Set index CSS variable\n this.style.setProperty(\"--ef-index\", this.segmentIndex.toString());\n }\n\n protected firstUpdated(): void {\n this.setCSSVariables();\n }\n\n protected updated(): void {\n this.setCSSVariables();\n }\n\n @property({ type: String, attribute: false })\n segmentText = \"\";\n\n @property({ type: Number, attribute: false })\n segmentIndex = 0;\n\n @property({ type: Number, attribute: false })\n staggerOffsetMs?: number;\n\n @property({ type: Number, attribute: false })\n segmentStartMs = 0;\n\n @property({ type: Number, attribute: false })\n segmentEndMs = 0;\n\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n get startTimeMs() {\n const parentText = this.closest(\"ef-text\") as EFText;\n const parentStartTime = parentText?.startTimeMs || 0;\n return parentStartTime + (this.segmentStartMs || 0);\n }\n\n get endTimeMs() {\n // Derive from parent's live durationMs rather than the snapshot stored in segmentEndMs.\n // This ensures segments track changes when the parent's duration updates\n // (e.g., a contain-mode timegroup whose duration changes after a video loads).\n const parentText = this.closest(\"ef-text\") as EFText;\n if (parentText) {\n return parentText.startTimeMs + parentText.durationMs;\n }\n return this.segmentEndMs || 0;\n }\n\n get durationMs(): number {\n const parentText = this.closest(\"ef-text\") as EFText;\n if (parentText) {\n return parentText.durationMs;\n }\n return this.segmentEndMs - this.segmentStartMs;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ef-text-segment\": EFTextSegment;\n }\n}\n"],"mappings":";;;;;;AAMO,0BAAMA,wBAAsB,WAAW,WAAW,CAAC;;;qBAkD1C;sBAGC;wBAME;sBAGF;gBAGN;;;gBAhEO,CACd,GAAG;;;;;;;;;;;;;;MAeJ;;CAED,SAAS;AAGP,OAAK,iBAAiB;AACtB,SAAO,IAAI,GAAG,KAAK;;CAGrB,AAAQ,kBAAwB;EAG9B,MAAM,YADQ,KAAK,eAAe,OAAQ,MACjB;AACzB,OAAK,MAAM,YAAY,aAAa,UAAU,UAAU,CAAC;EAIzD,MAAM,WAAW,KAAK,mBAAmB;AACzC,OAAK,MAAM,YAAY,uBAAuB,GAAG,SAAS,IAAI;AAG9D,OAAK,MAAM,YAAY,cAAc,KAAK,aAAa,UAAU,CAAC;;CAGpE,AAAU,eAAqB;AAC7B,OAAK,iBAAiB;;CAGxB,AAAU,UAAgB;AACxB,OAAK,iBAAiB;;CAqBxB,IAAI,cAAc;AAGhB,UAFmB,KAAK,QAAQ,UAAU,EACN,eAAe,MACzB,KAAK,kBAAkB;;CAGnD,IAAI,YAAY;EAId,MAAM,aAAa,KAAK,QAAQ,UAAU;AAC1C,MAAI,WACF,QAAO,WAAW,cAAc,WAAW;AAE7C,SAAO,KAAK,gBAAgB;;CAG9B,IAAI,aAAqB;EACvB,MAAM,aAAa,KAAK,QAAQ,UAAU;AAC1C,MAAI,WACF,QAAO,WAAW;AAEpB,SAAO,KAAK,eAAe,KAAK;;;YAxCjC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;4BAjE5C,cAAc,kBAAkB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@editframe/elements",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"license": "UNLICENSED",
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@bramus/style-observer": "^1.3.0",
|
|
21
|
-
"@editframe/assets": "0.42.
|
|
21
|
+
"@editframe/assets": "0.42.3",
|
|
22
22
|
"@lit/context": "^1.1.6",
|
|
23
23
|
"@opentelemetry/api": "^1.9.0",
|
|
24
24
|
"@opentelemetry/context-zone": "^1.26.0",
|