zuljaman-banner-components 1.0.22 → 1.0.24
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/README.md +228 -131
- package/dist/components/BannerRenderer/BannerRenderer.d.ts +8 -0
- package/dist/components/BannerRenderer/BannerRenderer.d.ts.map +1 -0
- package/dist/components/BannerRenderer/BannerRenderer.js +325 -0
- package/dist/components/BannerRenderer/components/CopyElement.d.ts +62 -0
- package/dist/components/BannerRenderer/components/CopyElement.d.ts.map +1 -0
- package/dist/components/BannerRenderer/components/CopyElement.js +220 -0
- package/dist/components/BannerRenderer/components/InteractiveLines.d.ts +26 -0
- package/dist/components/BannerRenderer/components/InteractiveLines.d.ts.map +1 -0
- package/dist/components/BannerRenderer/components/InteractiveLines.js +172 -0
- package/dist/components/BannerRenderer/components/LogoElement.d.ts +55 -0
- package/dist/components/BannerRenderer/components/LogoElement.d.ts.map +1 -0
- package/dist/components/BannerRenderer/components/LogoElement.js +53 -0
- package/dist/components/BannerRenderer/components/VisualGuides.d.ts +43 -0
- package/dist/components/BannerRenderer/components/VisualGuides.d.ts.map +1 -0
- package/dist/components/BannerRenderer/components/VisualGuides.js +110 -0
- package/dist/components/BannerRenderer/components/index.d.ts +12 -0
- package/dist/components/BannerRenderer/components/index.d.ts.map +1 -0
- package/dist/components/BannerRenderer/components/index.js +14 -0
- package/dist/components/BannerRenderer/constants.d.ts +15 -0
- package/dist/components/BannerRenderer/constants.d.ts.map +1 -0
- package/dist/components/BannerRenderer/constants.js +36 -0
- package/dist/components/BannerRenderer/hooks/index.d.ts +14 -0
- package/dist/components/BannerRenderer/hooks/index.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/index.js +16 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/debugPositions.d.ts +30 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/debugPositions.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/debugPositions.js +87 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/index.d.ts +13 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/index.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/index.js +21 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useAnchorEdgeLocking.d.ts +71 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useAnchorEdgeLocking.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useAnchorEdgeLocking.js +151 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useAutoPositioningMain.d.ts +66 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useAutoPositioningMain.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useAutoPositioningMain.js +332 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useChainPositioning.d.ts +61 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useChainPositioning.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useChainPositioning.js +180 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useHeightCompensation.d.ts +60 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useHeightCompensation.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning/useHeightCompensation.js +178 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning.d.ts +8 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useAutoPositioning.js +12 -0
- package/dist/components/BannerRenderer/hooks/useDragSnap.d.ts +30 -0
- package/dist/components/BannerRenderer/hooks/useDragSnap.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useDragSnap.js +90 -0
- package/dist/components/BannerRenderer/hooks/useElementRefs.d.ts +22 -0
- package/dist/components/BannerRenderer/hooks/useElementRefs.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useElementRefs.js +70 -0
- package/dist/components/BannerRenderer/hooks/useLineDrawing.d.ts +40 -0
- package/dist/components/BannerRenderer/hooks/useLineDrawing.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useLineDrawing.js +198 -0
- package/dist/components/BannerRenderer/hooks/useProximityDetection.d.ts +43 -0
- package/dist/components/BannerRenderer/hooks/useProximityDetection.d.ts.map +1 -0
- package/dist/components/BannerRenderer/hooks/useProximityDetection.js +491 -0
- package/dist/components/BannerRenderer/index.d.ts +6 -0
- package/dist/components/BannerRenderer/index.d.ts.map +1 -0
- package/dist/components/BannerRenderer/index.js +8 -0
- package/dist/components/{BannerRenderer.d.ts → BannerRenderer/types.d.ts} +29 -8
- package/dist/components/BannerRenderer/types.d.ts.map +1 -0
- package/dist/components/BannerRenderer/types.js +5 -0
- package/dist/components/BannerRenderer/utils/alignmentUtils.d.ts +38 -0
- package/dist/components/BannerRenderer/utils/alignmentUtils.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/alignmentUtils.js +138 -0
- package/dist/components/BannerRenderer/utils/elementCheckUtils.d.ts +22 -0
- package/dist/components/BannerRenderer/utils/elementCheckUtils.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/elementCheckUtils.js +37 -0
- package/dist/components/BannerRenderer/utils/elementIdUtils.d.ts +25 -0
- package/dist/components/BannerRenderer/utils/elementIdUtils.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/elementIdUtils.js +56 -0
- package/dist/components/BannerRenderer/utils/fontUtils.d.ts +12 -0
- package/dist/components/BannerRenderer/utils/fontUtils.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/fontUtils.js +26 -0
- package/dist/components/BannerRenderer/utils/graphUtils.d.ts +54 -0
- package/dist/components/BannerRenderer/utils/graphUtils.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/graphUtils.js +138 -0
- package/dist/components/BannerRenderer/utils/index.d.ts +12 -0
- package/dist/components/BannerRenderer/utils/index.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/index.js +27 -0
- package/dist/components/BannerRenderer/utils/snapUtils.d.ts +38 -0
- package/dist/components/BannerRenderer/utils/snapUtils.d.ts.map +1 -0
- package/dist/components/BannerRenderer/utils/snapUtils.js +109 -0
- package/dist/components/BannerVisor.d.ts.map +1 -1
- package/dist/components/BannerVisor.js +8 -1
- package/dist/components/index.js +1 -1
- package/dist/components/shared/DraggableElement.d.ts +11 -0
- package/dist/components/shared/DraggableElement.d.ts.map +1 -1
- package/dist/components/shared/DraggableElement.js +51 -51
- package/dist/components/styles/Style1/substyleConfig.d.ts.map +1 -1
- package/dist/components/styles/Style1/substyleConfig.js +53 -54
- package/dist/components/styles/Style2/substyleConfig.js +78 -78
- package/dist/components/styles/Style3/substyleConfig.d.ts.map +1 -1
- package/dist/components/styles/Style3/substyleConfig.js +40 -37
- package/dist/components/styles/Style4/substyleConfig.js +57 -57
- package/dist/components/styles/types/substyleTypes.d.ts +32 -15
- package/dist/components/styles/types/substyleTypes.d.ts.map +1 -1
- package/dist/components/styles/utils/chainValidation.d.ts +41 -0
- package/dist/components/styles/utils/chainValidation.d.ts.map +1 -0
- package/dist/components/styles/utils/chainValidation.js +148 -0
- package/dist/components/styles/utils/positioningUtils.d.ts +207 -11
- package/dist/components/styles/utils/positioningUtils.d.ts.map +1 -1
- package/dist/components/styles/utils/positioningUtils.js +520 -19
- package/dist/constants/characterLimits.d.ts +4 -16
- package/dist/constants/characterLimits.d.ts.map +1 -1
- package/dist/constants/characterLimits.js +28 -26
- package/dist/constants/styleConfigs.js +6 -6
- package/dist/styleConfig.d.ts +4 -4
- package/dist/styleConfig.d.ts.map +1 -1
- package/dist/styleConfig.js +8 -16
- package/dist/types.d.ts +42 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/components/BannerRenderer.d.ts.map +0 -1
- package/dist/components/BannerRenderer.js +0 -559
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* Chain validation utilities for auto-positioning
|
|
4
|
+
* Provides validation, graph building, and topological sorting for positioning chains
|
|
5
|
+
*/
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.buildDependencyGraph = buildDependencyGraph;
|
|
8
|
+
exports.validateChainConfiguration = validateChainConfiguration;
|
|
9
|
+
exports.topologicalSort = topologicalSort;
|
|
10
|
+
exports.findRootElements = findRootElements;
|
|
11
|
+
exports.findIncomingLink = findIncomingLink;
|
|
12
|
+
exports.findOrphanedElements = findOrphanedElements;
|
|
13
|
+
/**
|
|
14
|
+
* Build a dependency graph from positioning links
|
|
15
|
+
* Returns a Map where key = element ID, value = array of dependent element IDs
|
|
16
|
+
*/
|
|
17
|
+
function buildDependencyGraph(links) {
|
|
18
|
+
const graph = new Map();
|
|
19
|
+
links.forEach(link => {
|
|
20
|
+
// fromElement points to toElement
|
|
21
|
+
if (!graph.has(link.fromElement)) {
|
|
22
|
+
graph.set(link.fromElement, []);
|
|
23
|
+
}
|
|
24
|
+
graph.get(link.fromElement).push(link.toElement);
|
|
25
|
+
// Ensure toElement exists in graph even if it has no children
|
|
26
|
+
if (!graph.has(link.toElement)) {
|
|
27
|
+
graph.set(link.toElement, []);
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return graph;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Detect circular dependencies in the chain using Depth-First Search
|
|
34
|
+
*/
|
|
35
|
+
function hasCycle(graph, node, visited, recursionStack) {
|
|
36
|
+
visited.add(node);
|
|
37
|
+
recursionStack.add(node);
|
|
38
|
+
const neighbors = graph.get(node) || [];
|
|
39
|
+
for (const neighbor of neighbors) {
|
|
40
|
+
if (!visited.has(neighbor)) {
|
|
41
|
+
if (hasCycle(graph, neighbor, visited, recursionStack)) {
|
|
42
|
+
return true;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
else if (recursionStack.has(neighbor)) {
|
|
46
|
+
return true; // Cycle detected
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
recursionStack.delete(node);
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Validate chain configuration for errors
|
|
54
|
+
* Checks for:
|
|
55
|
+
* - Circular dependencies
|
|
56
|
+
* - Empty links array
|
|
57
|
+
* - Duplicate links
|
|
58
|
+
*/
|
|
59
|
+
function validateChainConfiguration(links) {
|
|
60
|
+
// Check for empty links
|
|
61
|
+
if (!links || links.length === 0) {
|
|
62
|
+
return { valid: false, error: 'Auto-positioning links array is empty' };
|
|
63
|
+
}
|
|
64
|
+
// Check for duplicate links
|
|
65
|
+
const linkSet = new Set();
|
|
66
|
+
for (const link of links) {
|
|
67
|
+
const linkKey = `${link.fromElement}->${link.toElement}`;
|
|
68
|
+
if (linkSet.has(linkKey)) {
|
|
69
|
+
return {
|
|
70
|
+
valid: false,
|
|
71
|
+
error: `Duplicate link found: ${link.fromElement} → ${link.toElement}`
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
linkSet.add(linkKey);
|
|
75
|
+
}
|
|
76
|
+
// Build graph and detect cycles
|
|
77
|
+
const graph = buildDependencyGraph(links);
|
|
78
|
+
const visited = new Set();
|
|
79
|
+
const recursionStack = new Set();
|
|
80
|
+
for (const node of graph.keys()) {
|
|
81
|
+
if (!visited.has(node)) {
|
|
82
|
+
if (hasCycle(graph, node, visited, recursionStack)) {
|
|
83
|
+
return {
|
|
84
|
+
valid: false,
|
|
85
|
+
error: `Circular dependency detected in auto-positioning chain involving element: ${node}`
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
return { valid: true };
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Perform topological sort on the dependency graph
|
|
94
|
+
* Returns elements in calculation order (roots first, then dependencies)
|
|
95
|
+
*/
|
|
96
|
+
function topologicalSort(graph) {
|
|
97
|
+
const visited = new Set();
|
|
98
|
+
const result = [];
|
|
99
|
+
function visit(node) {
|
|
100
|
+
if (visited.has(node))
|
|
101
|
+
return;
|
|
102
|
+
visited.add(node);
|
|
103
|
+
const neighbors = graph.get(node) || [];
|
|
104
|
+
for (const neighbor of neighbors) {
|
|
105
|
+
visit(neighbor);
|
|
106
|
+
}
|
|
107
|
+
// Post-order: add node AFTER visiting all dependencies
|
|
108
|
+
result.push(node);
|
|
109
|
+
}
|
|
110
|
+
// Visit all nodes
|
|
111
|
+
for (const node of graph.keys()) {
|
|
112
|
+
visit(node);
|
|
113
|
+
}
|
|
114
|
+
// Reverse to get correct order (roots first)
|
|
115
|
+
return result.reverse();
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* Find elements that have no incoming links (root/anchor elements)
|
|
119
|
+
*/
|
|
120
|
+
function findRootElements(links) {
|
|
121
|
+
const toElements = new Set(links.map(link => link.toElement));
|
|
122
|
+
const fromElements = new Set(links.map(link => link.fromElement));
|
|
123
|
+
const roots = [];
|
|
124
|
+
for (const element of fromElements) {
|
|
125
|
+
if (!toElements.has(element)) {
|
|
126
|
+
roots.push(element);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
return roots;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* Find the incoming link for a given element (the link where element is the "to")
|
|
133
|
+
*/
|
|
134
|
+
function findIncomingLink(links, elementId) {
|
|
135
|
+
return links.find(link => link.toElement === elementId);
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* Find orphaned elements after links are removed
|
|
139
|
+
* Returns elements that are referenced in remaining copies but not in any link
|
|
140
|
+
*/
|
|
141
|
+
function findOrphanedElements(links, allElementIds) {
|
|
142
|
+
const linkedElements = new Set();
|
|
143
|
+
links.forEach(link => {
|
|
144
|
+
linkedElements.add(link.fromElement);
|
|
145
|
+
linkedElements.add(link.toElement);
|
|
146
|
+
});
|
|
147
|
+
return allElementIds.filter(id => !linkedElements.has(id));
|
|
148
|
+
}
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
* Handles automatic positioning of elements relative to anchor elements
|
|
4
4
|
* Adapted for absolute positioning system (x, y coordinates from center)
|
|
5
5
|
*/
|
|
6
|
-
import { SubstyleConfig,
|
|
6
|
+
import { SubstyleConfig, AutoPositioningLink } from '../types/substyleTypes';
|
|
7
|
+
import { CopyConfig } from '../../../types';
|
|
7
8
|
/**
|
|
8
9
|
* Calculate auto-positioning offset for 'up' direction
|
|
9
10
|
* Target element will be positioned above the anchor with a gap
|
|
@@ -11,9 +12,10 @@ import { SubstyleConfig, AutoPositioningConfig } from '../types/substyleTypes';
|
|
|
11
12
|
* @param anchorHeight - Height of anchor element in pixels
|
|
12
13
|
* @param targetHeight - Height of target element in pixels
|
|
13
14
|
* @param anchorHasCenterOrigin - Whether anchor is positioned from center (true) or top-left (false)
|
|
15
|
+
* @param fixAnchorBottomEdge - If true, anchor's bottom edge position is fixed (grows upward)
|
|
14
16
|
* @returns Offset in pixels (negative value to move up)
|
|
15
17
|
*/
|
|
16
|
-
export declare const calculateUpOffset: (gapRem: number, anchorHeight: number, targetHeight: number, anchorHasCenterOrigin: boolean) => number;
|
|
18
|
+
export declare const calculateUpOffset: (gapRem: number, anchorHeight: number, targetHeight: number, anchorHasCenterOrigin: boolean, fixAnchorBottomEdge?: boolean) => number;
|
|
17
19
|
/**
|
|
18
20
|
* Calculate auto-positioning offset for 'down' direction
|
|
19
21
|
* Target element will be positioned below the anchor with a gap
|
|
@@ -21,18 +23,212 @@ export declare const calculateUpOffset: (gapRem: number, anchorHeight: number, t
|
|
|
21
23
|
* @param anchorHeight - Height of anchor element in pixels
|
|
22
24
|
* @param targetHeight - Height of target element in pixels
|
|
23
25
|
* @param anchorHasCenterOrigin - Whether anchor is positioned from center (true) or top-left (false)
|
|
26
|
+
* @param fixAnchorTopEdge - If true, anchor's top edge position is fixed (grows downward)
|
|
24
27
|
* @returns Offset in pixels (positive value to move down)
|
|
25
28
|
*/
|
|
26
|
-
export declare const calculateDownOffset: (gapRem: number, anchorHeight: number, targetHeight: number, anchorHasCenterOrigin: boolean) => number;
|
|
29
|
+
export declare const calculateDownOffset: (gapRem: number, anchorHeight: number, targetHeight: number, anchorHasCenterOrigin: boolean, fixAnchorTopEdge?: boolean) => number;
|
|
27
30
|
/**
|
|
28
|
-
* Calculate
|
|
29
|
-
|
|
31
|
+
* Calculate offset for a single link in the chain
|
|
32
|
+
*/
|
|
33
|
+
export declare const calculateSingleLinkOffset: (direction: "up" | "down" | "left" | "right", gapRem: number, fromHeight: number, toHeight: number, fromHasCenterOrigin: boolean, fromIsAtBottomEdge: boolean) => number;
|
|
34
|
+
/**
|
|
35
|
+
* Get element ref from element ID
|
|
36
|
+
* Supports both copy-{uuid} and copy-{N} (styleSlot) formats
|
|
37
|
+
*/
|
|
38
|
+
export declare function getElementRef(elementId: string, refs: {
|
|
39
|
+
logo: HTMLDivElement | null;
|
|
40
|
+
copies: (HTMLDivElement | null)[];
|
|
41
|
+
}, copies: CopyConfig[]): HTMLDivElement | null;
|
|
42
|
+
/**
|
|
43
|
+
* Get copy index from element ID
|
|
44
|
+
*/
|
|
45
|
+
export declare function getCopyIndexFromElementId(elementId: string, copies: CopyConfig[]): number | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* Check if element has center origin (all copies do, logo doesn't)
|
|
48
|
+
*/
|
|
49
|
+
export declare function hasElementCenterOrigin(elementId: string): boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Check if element is closest to bottom edge (for compensation)
|
|
52
|
+
*/
|
|
53
|
+
export declare function checkElementEdgeProximity(elementId: string, elementRef: HTMLDivElement, bannerContainerRef: HTMLDivElement | null, sizeMultiplier: number): boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Calculate offsets for all elements in a positioning chain
|
|
56
|
+
* Supports cascading offsets where each element's position depends on its parent
|
|
57
|
+
*
|
|
30
58
|
* @param config - Substyle configuration
|
|
31
|
-
* @param
|
|
32
|
-
* @param
|
|
33
|
-
* @param
|
|
34
|
-
* @param
|
|
35
|
-
* @
|
|
59
|
+
* @param links - Array of positioning links defining the chain
|
|
60
|
+
* @param copies - Array of copy configurations
|
|
61
|
+
* @param refs - Object containing refs to logo and copy elements
|
|
62
|
+
* @param sizeMultiplier - Canvas scaling factor
|
|
63
|
+
* @param elementCompensations - Record of height-based compensations per element
|
|
64
|
+
* @param bannerContainerRef - Ref to banner container for edge detection
|
|
65
|
+
* @returns Record mapping copy index to Y offset in pixels
|
|
66
|
+
*/
|
|
67
|
+
export declare function calculateChainedOffsets(config: SubstyleConfig, links: AutoPositioningLink[], copies: CopyConfig[], refs: {
|
|
68
|
+
logo: HTMLDivElement | null;
|
|
69
|
+
copies: (HTMLDivElement | null)[];
|
|
70
|
+
}, sizeMultiplier: number, elementCompensations: Record<string, number>, bannerContainerRef: HTMLDivElement | null): Record<number, number>;
|
|
71
|
+
export interface ChainConfig {
|
|
72
|
+
anchorId: string;
|
|
73
|
+
anchorEdge: 'top' | 'bottom';
|
|
74
|
+
anchorGapToEdge: number;
|
|
75
|
+
links: {
|
|
76
|
+
from: string;
|
|
77
|
+
to: string;
|
|
78
|
+
gapRem: number;
|
|
79
|
+
}[];
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Detect which edge (top or bottom) the element is closest to
|
|
83
|
+
*/
|
|
84
|
+
export declare function detectNearestEdge(element: HTMLElement, container: HTMLElement, sizeMultiplier: number): 'top' | 'bottom';
|
|
85
|
+
/**
|
|
86
|
+
* Calculate the gap from an element's edge to the container's edge
|
|
87
|
+
*/
|
|
88
|
+
export declare function calculateGapToEdge(element: HTMLElement, edge: 'top' | 'bottom', container: HTMLElement, sizeMultiplier: number): number;
|
|
89
|
+
/**
|
|
90
|
+
* Order targets in chain from anchor to last element
|
|
91
|
+
*/
|
|
92
|
+
export declare function orderChainFromAnchor(anchorId: string, links: {
|
|
93
|
+
from: string;
|
|
94
|
+
to: string;
|
|
95
|
+
gapRem: number;
|
|
96
|
+
}[]): string[];
|
|
97
|
+
/**
|
|
98
|
+
* Get all elements that come AFTER a given element in the chain
|
|
99
|
+
* Useful for determining which elements need to move when an element's height changes
|
|
100
|
+
*/
|
|
101
|
+
export declare function getSubsequentElementsInChain(elementId: string, links: {
|
|
102
|
+
from: string;
|
|
103
|
+
to: string;
|
|
104
|
+
gapRem?: number;
|
|
105
|
+
}[]): string[];
|
|
106
|
+
/**
|
|
107
|
+
* Calculate absolute Y positions for all elements in a chain
|
|
108
|
+
* based on the anchor's fixed edge position
|
|
109
|
+
*/
|
|
110
|
+
export declare function calculateAbsoluteChainPositions(bannerHeight: number, chainConfig: ChainConfig, elementHeights: Record<string, number>): Record<string, number>;
|
|
111
|
+
/**
|
|
112
|
+
* Calculate target positions based on CURRENT anchor position from DOM
|
|
113
|
+
* This avoids the issue where recalculating anchorCenterY from anchorGapToEdge
|
|
114
|
+
* can produce different results than the actual DOM position
|
|
115
|
+
*/
|
|
116
|
+
export declare function calculateTargetPositionsFromAnchor(anchorRef: HTMLElement, bannerContainerRef: HTMLElement, sizeMultiplier: number, links: {
|
|
117
|
+
from: string;
|
|
118
|
+
to: string;
|
|
119
|
+
gapRem: number;
|
|
120
|
+
}[], elementHeights: Record<string, number>, anchorId: string): Record<string, number>;
|
|
121
|
+
/**
|
|
122
|
+
* Get copy/logo data for positioning calculations
|
|
123
|
+
* Extracts position and dimension data from a copy or logo element
|
|
124
|
+
*
|
|
125
|
+
* @param elementName - Element identifier ('logo' or 'copy-N')
|
|
126
|
+
* @param copies - Array of copy configurations
|
|
127
|
+
* @param config - Substyle configuration containing base positions
|
|
128
|
+
* @param logoTranslateX - Logo X translation
|
|
129
|
+
* @param logoTranslateY - Logo Y translation
|
|
130
|
+
* @param logoWidth - Optional logo width
|
|
131
|
+
* @returns Position and dimension data, or null if element not found
|
|
132
|
+
*/
|
|
133
|
+
export declare function getCopyData(elementName: string, copies: CopyConfig[], config: SubstyleConfig, logoTranslateX: number, logoTranslateY: number, logoWidth?: number): {
|
|
134
|
+
x: number;
|
|
135
|
+
y: number;
|
|
136
|
+
width: number;
|
|
137
|
+
alignment?: string;
|
|
138
|
+
element: string;
|
|
139
|
+
} | null;
|
|
140
|
+
/**
|
|
141
|
+
* Calculate compensation needed to keep an anchor's edge fixed when its height changes.
|
|
142
|
+
*
|
|
143
|
+
* With centerOrigin=true, when height increases the element grows equally up and down from center.
|
|
144
|
+
* The center stays fixed by CSS, so we need to move the element to keep the desired edge fixed.
|
|
145
|
+
*
|
|
146
|
+
* @param edge - Which edge should stay fixed ('top' or 'bottom')
|
|
147
|
+
* @param heightDelta - Change in height (positive = grew, negative = shrunk)
|
|
148
|
+
* @returns Compensation in pixels (add to current translateY)
|
|
149
|
+
*
|
|
150
|
+
* @example
|
|
151
|
+
* // If edge is 'bottom' and element grew by 20px:
|
|
152
|
+
* // Bottom edge moved DOWN by 10px, so move center UP (-10px) to keep bottom fixed
|
|
153
|
+
* calculateAnchorHeightCompensation('bottom', 20) // returns -10
|
|
154
|
+
*/
|
|
155
|
+
export declare function calculateAnchorHeightCompensation(edge: 'top' | 'bottom', heightDelta: number): number;
|
|
156
|
+
/**
|
|
157
|
+
* Calculate compensation for target elements when anchor height changes.
|
|
158
|
+
*
|
|
159
|
+
* When anchor grows, its edge toward the target moves, plus the anchor itself moves.
|
|
160
|
+
* Target must move by the full height delta to maintain the gap.
|
|
161
|
+
*
|
|
162
|
+
* @param edge - Anchor's fixed edge ('top' or 'bottom')
|
|
163
|
+
* @param heightDelta - Change in anchor height (positive = grew, negative = shrunk)
|
|
164
|
+
* @returns Compensation in pixels (add to current translateY)
|
|
165
|
+
*
|
|
166
|
+
* @example
|
|
167
|
+
* // If anchor edge is 'bottom' and anchor grew by 20px:
|
|
168
|
+
* // Target (above anchor) must move UP by 20px to maintain gap
|
|
169
|
+
* calculateTargetCompensationForAnchorGrowth('bottom', 20) // returns -20
|
|
170
|
+
*/
|
|
171
|
+
export declare function calculateTargetCompensationForAnchorGrowth(edge: 'top' | 'bottom', heightDelta: number): number;
|
|
172
|
+
/**
|
|
173
|
+
* Calculate self-compensation for a target element when its own height changes.
|
|
174
|
+
*
|
|
175
|
+
* Target uses the same direction as anchor - it keeps the same edge fixed.
|
|
176
|
+
*
|
|
177
|
+
* @param edge - The fixed edge inherited from anchor ('top' or 'bottom')
|
|
178
|
+
* @param heightDelta - Change in target height (positive = grew, negative = shrunk)
|
|
179
|
+
* @returns Compensation in pixels (add to current translateY)
|
|
180
|
+
*/
|
|
181
|
+
export declare function calculateTargetSelfCompensation(edge: 'top' | 'bottom', heightDelta: number): number;
|
|
182
|
+
/**
|
|
183
|
+
* Calculate compensation for subsequent elements when a target's height changes.
|
|
184
|
+
*
|
|
185
|
+
* Elements after the growing target need to move by the full height delta
|
|
186
|
+
* to maintain their gaps with the target.
|
|
187
|
+
*
|
|
188
|
+
* @param edge - The fixed edge inherited from anchor ('top' or 'bottom')
|
|
189
|
+
* @param heightDelta - Change in target height (positive = grew, negative = shrunk)
|
|
190
|
+
* @returns Compensation in pixels (add to current translateY)
|
|
191
|
+
*/
|
|
192
|
+
export declare function calculateSubsequentCompensation(edge: 'top' | 'bottom', heightDelta: number): number;
|
|
193
|
+
export interface AnchorEdgeConfig {
|
|
194
|
+
anchorId: string;
|
|
195
|
+
edge: 'top' | 'bottom';
|
|
196
|
+
gapToEdge: number;
|
|
197
|
+
initialHeight: number;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Capture the initial configuration for edge-locking an anchor element.
|
|
201
|
+
*
|
|
202
|
+
* @param anchorRef - Reference to the anchor DOM element
|
|
203
|
+
* @param bannerContainerRef - Reference to the banner container
|
|
204
|
+
* @param sizeMultiplier - Current size multiplier for scaling
|
|
205
|
+
* @returns Configuration object for edge-locking, or null if refs are invalid
|
|
206
|
+
*/
|
|
207
|
+
export declare function captureAnchorEdgeConfig(anchorId: string, anchorRef: HTMLElement, bannerContainerRef: HTMLElement, sizeMultiplier: number): AnchorEdgeConfig;
|
|
208
|
+
/**
|
|
209
|
+
* Measure the heights of multiple elements.
|
|
210
|
+
*
|
|
211
|
+
* @param elementIds - Set of element IDs to measure
|
|
212
|
+
* @param refs - Object containing logo and copies refs
|
|
213
|
+
* @param copies - Array of copy configurations
|
|
214
|
+
* @param sizeMultiplier - Current size multiplier for scaling
|
|
215
|
+
* @returns Record mapping element ID to scaled height
|
|
216
|
+
*/
|
|
217
|
+
export declare function measureElementHeights(elementIds: Set<string>, refs: {
|
|
218
|
+
logo: HTMLDivElement | null;
|
|
219
|
+
copies: (HTMLDivElement | null)[];
|
|
220
|
+
}, copies: CopyConfig[], sizeMultiplier: number): Record<string, number>;
|
|
221
|
+
/**
|
|
222
|
+
* Compare two Maps for equality.
|
|
223
|
+
*
|
|
224
|
+
* @param map1 - First map to compare
|
|
225
|
+
* @param map2 - Second map to compare
|
|
226
|
+
* @returns True if maps have same keys and values
|
|
227
|
+
*
|
|
228
|
+
* @example
|
|
229
|
+
* const map1 = new Map([['a', '1'], ['b', '2']]);
|
|
230
|
+
* const map2 = new Map([['a', '1'], ['b', '2']]);
|
|
231
|
+
* mapsAreEqual(map1, map2) // returns true
|
|
36
232
|
*/
|
|
37
|
-
export declare
|
|
233
|
+
export declare function mapsAreEqual<K, V>(map1: Map<K, V>, map2: Map<K, V>): boolean;
|
|
38
234
|
//# sourceMappingURL=positioningUtils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"positioningUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/utils/positioningUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"positioningUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/utils/positioningUtils.ts"],"names":[],"mappings":"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"}
|