@nordcraft/runtime 1.0.91 → 1.0.92
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/custom-element.main.esm.js +1 -1
- package/dist/custom-element.main.esm.js.map +2 -2
- package/dist/page.main.esm.js +3 -3
- package/dist/page.main.esm.js.map +2 -2
- package/dist/src/editor/const.d.ts +3 -0
- package/dist/src/editor/const.js +4 -0
- package/dist/src/editor/const.js.map +1 -0
- package/dist/src/editor/resizeCanvas.d.ts +7 -0
- package/dist/src/editor/resizeCanvas.js +43 -0
- package/dist/src/editor/resizeCanvas.js.map +1 -0
- package/dist/src/editor/types.d.ts +4 -1
- package/dist/src/editor/types.js.map +1 -1
- package/dist/src/editor-preview.main.js +31 -8
- package/dist/src/editor-preview.main.js.map +1 -1
- package/dist/src/styles/CustomPropertyStyleSheet.d.ts +1 -0
- package/dist/src/styles/CustomPropertyStyleSheet.js +6 -2
- package/dist/src/styles/CustomPropertyStyleSheet.js.map +1 -1
- package/dist/src/styles/CustomPropertyStyleSheet.test.js +12 -0
- package/dist/src/styles/CustomPropertyStyleSheet.test.js.map +1 -1
- package/dist/src/styles/style.d.ts +5 -0
- package/dist/src/styles/style.js +11 -1
- package/dist/src/styles/style.js.map +1 -1
- package/dist/src/styles/style.test.js +30 -0
- package/dist/src/styles/style.test.js.map +1 -1
- package/package.json +3 -3
- package/src/editor/const.ts +5 -0
- package/src/editor/resizeCanvas.ts +65 -0
- package/src/editor/types.ts +5 -1
- package/src/editor-preview.main.ts +52 -8
- package/src/styles/CustomPropertyStyleSheet.test.ts +24 -0
- package/src/styles/CustomPropertyStyleSheet.ts +7 -2
- package/src/styles/style.test.ts +37 -0
- package/src/styles/style.ts +14 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/styles/style.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,YAAY,EACZ,gBAAgB,GACjB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAA;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/styles/style.ts"],"names":[],"mappings":"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"}
|
|
@@ -175,5 +175,35 @@ describe('insertStyles() - prefers-reduced-motion', () => {
|
|
|
175
175
|
// max-width should still be present
|
|
176
176
|
expect(styleText).toContain('max-width: 768px');
|
|
177
177
|
});
|
|
178
|
+
test('it converts viewport units to container units', () => {
|
|
179
|
+
const component = {
|
|
180
|
+
name: 'TestComponent',
|
|
181
|
+
nodes: {
|
|
182
|
+
'0': {
|
|
183
|
+
type: 'element',
|
|
184
|
+
tag: 'div',
|
|
185
|
+
style: {},
|
|
186
|
+
variants: [
|
|
187
|
+
{
|
|
188
|
+
style: { height: '100vh' },
|
|
189
|
+
mediaQuery: {
|
|
190
|
+
'prefers-reduced-motion': 'no-preference',
|
|
191
|
+
},
|
|
192
|
+
},
|
|
193
|
+
],
|
|
194
|
+
children: [],
|
|
195
|
+
attrs: {},
|
|
196
|
+
events: {},
|
|
197
|
+
},
|
|
198
|
+
},
|
|
199
|
+
};
|
|
200
|
+
const parent = document.createElement('div');
|
|
201
|
+
insertStyles(parent, component, []);
|
|
202
|
+
const styleElement = parent.querySelector('[data-hash]');
|
|
203
|
+
expect(styleElement).toBeTruthy();
|
|
204
|
+
const styleText = styleElement?.textContent ?? '';
|
|
205
|
+
// Check that viewport units are converted to a scaled version
|
|
206
|
+
expect(styleText).toContain('height:calc(100vh * var(--nc-viewport-height-px, var(--nc-scroll-height-px, 740)) / var(--nc-scroll-height-px, 740));');
|
|
207
|
+
});
|
|
178
208
|
});
|
|
179
209
|
//# sourceMappingURL=style.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.test.js","sourceRoot":"","sources":["../../../src/styles/style.test.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.test.js","sourceRoot":"","sources":["../../../src/styles/style.test.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"directory": "packages/runtime"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@nordcraft/core": "1.0.
|
|
13
|
-
"@nordcraft/std-lib": "1.0.
|
|
12
|
+
"@nordcraft/core": "1.0.92",
|
|
13
|
+
"@nordcraft/std-lib": "1.0.92",
|
|
14
14
|
"fast-deep-equal": "3.1.3",
|
|
15
15
|
"path-to-regexp": "6.3.0"
|
|
16
16
|
},
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"files": ["dist", "src"],
|
|
24
24
|
"main": "dist/page.main.js",
|
|
25
25
|
"types": "dist/page.main.d.ts",
|
|
26
|
-
"version": "1.0.
|
|
26
|
+
"version": "1.0.92"
|
|
27
27
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { CSS_VAR_SCROLL_HEIGHT } from './const'
|
|
2
|
+
import { postMessageToEditor } from './postMessageToEditor'
|
|
3
|
+
|
|
4
|
+
let _lastScrollHeight = 0
|
|
5
|
+
function resizeCanvas({
|
|
6
|
+
force,
|
|
7
|
+
viewport,
|
|
8
|
+
}: {
|
|
9
|
+
force: boolean
|
|
10
|
+
viewport: { height: number }
|
|
11
|
+
}) {
|
|
12
|
+
const domNode = document.getElementById('App')!
|
|
13
|
+
|
|
14
|
+
// First pass: Set base height to resolve relative units the same way each render
|
|
15
|
+
domNode.style.maxHeight = `${viewport.height}px`
|
|
16
|
+
|
|
17
|
+
// Force reflow
|
|
18
|
+
void domNode.offsetHeight
|
|
19
|
+
|
|
20
|
+
// Measure the actual content size
|
|
21
|
+
const scrollHeight = Math.max(domNode.scrollHeight, viewport.height)
|
|
22
|
+
|
|
23
|
+
// Update viewport height ratio for vh to work inside the canvas
|
|
24
|
+
domNode.style.setProperty(CSS_VAR_SCROLL_HEIGHT, String(scrollHeight))
|
|
25
|
+
|
|
26
|
+
// Restore original styles
|
|
27
|
+
domNode.style.removeProperty('max-height')
|
|
28
|
+
|
|
29
|
+
if (!force && scrollHeight === _lastScrollHeight) {
|
|
30
|
+
return
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
_lastScrollHeight = scrollHeight
|
|
34
|
+
postMessageToEditor({
|
|
35
|
+
type: 'documentScrollSize',
|
|
36
|
+
scrollHeight,
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
let cancelRequestResizeCanvas: number | null = null
|
|
41
|
+
export const requestResizeCanvas = (
|
|
42
|
+
options: {
|
|
43
|
+
enabled?: boolean
|
|
44
|
+
force?: boolean
|
|
45
|
+
viewport?: { height: number | null }
|
|
46
|
+
} = {},
|
|
47
|
+
) => {
|
|
48
|
+
if (cancelRequestResizeCanvas) {
|
|
49
|
+
cancelAnimationFrame(cancelRequestResizeCanvas)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (options.enabled === false) {
|
|
53
|
+
return
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
requestAnimationFrame(() => {
|
|
57
|
+
resizeCanvas({
|
|
58
|
+
force: options.force ?? false,
|
|
59
|
+
viewport: {
|
|
60
|
+
height: options.viewport?.height ?? 740,
|
|
61
|
+
},
|
|
62
|
+
})
|
|
63
|
+
cancelRequestResizeCanvas = null
|
|
64
|
+
})
|
|
65
|
+
}
|
package/src/editor/types.ts
CHANGED
|
@@ -114,6 +114,11 @@ export type NordcraftPreviewEvent =
|
|
|
114
114
|
type: 'preview_theme'
|
|
115
115
|
theme: string | null
|
|
116
116
|
}
|
|
117
|
+
| {
|
|
118
|
+
type: 'viewport_size'
|
|
119
|
+
height: number
|
|
120
|
+
enabled: boolean
|
|
121
|
+
}
|
|
117
122
|
|
|
118
123
|
export type EditorPostMessageType =
|
|
119
124
|
| {
|
|
@@ -135,7 +140,6 @@ export type EditorPostMessageType =
|
|
|
135
140
|
| {
|
|
136
141
|
type: 'documentScrollSize'
|
|
137
142
|
scrollHeight: number
|
|
138
|
-
scrollWidth: number
|
|
139
143
|
}
|
|
140
144
|
| {
|
|
141
145
|
type: 'nodeMoved'
|
|
@@ -55,6 +55,10 @@ import { createNode } from './components/createNode'
|
|
|
55
55
|
import { isContextProvider } from './context/isContextProvider'
|
|
56
56
|
import { createPanicScreen } from './debug/panicScreen'
|
|
57
57
|
import { sendEditorToast } from './debug/sendEditorToast'
|
|
58
|
+
import {
|
|
59
|
+
CSS_VAR_VIEWPORT_HEIGHT,
|
|
60
|
+
DATA_ATTR_VIEWPORT_HEIGHT,
|
|
61
|
+
} from './editor/const'
|
|
58
62
|
import { dragEnded } from './editor/drag-drop/dragEnded'
|
|
59
63
|
import { dragMove } from './editor/drag-drop/dragMove'
|
|
60
64
|
import { dragReorder } from './editor/drag-drop/dragReorder'
|
|
@@ -64,6 +68,7 @@ import { isInputTarget } from './editor/input'
|
|
|
64
68
|
import { updateComponentLinks } from './editor/links'
|
|
65
69
|
import { getRectData } from './editor/overlay'
|
|
66
70
|
import { postMessageToEditor } from './editor/postMessageToEditor'
|
|
71
|
+
import { requestResizeCanvas } from './editor/resizeCanvas'
|
|
67
72
|
import {
|
|
68
73
|
TextNodeComputedStyles,
|
|
69
74
|
type DragState,
|
|
@@ -72,7 +77,11 @@ import {
|
|
|
72
77
|
import { handleAction } from './events/handleAction'
|
|
73
78
|
import type { Signal } from './signal/signal'
|
|
74
79
|
import { signal } from './signal/signal'
|
|
75
|
-
import {
|
|
80
|
+
import {
|
|
81
|
+
convertViewportUnitsToEmulatedViewportUnits,
|
|
82
|
+
insertStyles,
|
|
83
|
+
styleToCss,
|
|
84
|
+
} from './styles/style'
|
|
76
85
|
import type {
|
|
77
86
|
ComponentContext,
|
|
78
87
|
ContextApiV2,
|
|
@@ -221,6 +230,10 @@ export const createRoot = (
|
|
|
221
230
|
testMode: false,
|
|
222
231
|
})
|
|
223
232
|
const themeSignal = signal<string | null>(null)
|
|
233
|
+
const resizeCanvasOptions: {
|
|
234
|
+
viewport?: { height: number | null }
|
|
235
|
+
enabled?: boolean
|
|
236
|
+
} = {}
|
|
224
237
|
window.toddle._preview = { showSignal }
|
|
225
238
|
document.body.setAttribute('data-mode', 'design')
|
|
226
239
|
let components: Component[] | null = null
|
|
@@ -636,15 +649,31 @@ export const createRoot = (
|
|
|
636
649
|
const { variantIndex } = message.data
|
|
637
650
|
updateSelectedStyleVariant(variantIndex)
|
|
638
651
|
break
|
|
639
|
-
// We request manually instead of automatic to avoid mutation observer spam.
|
|
640
|
-
// Also, reporting automatically proved unreliable when elements' height was in %
|
|
641
652
|
case 'report_document_scroll_size':
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
scrollHeight: domNode.scrollHeight,
|
|
645
|
-
scrollWidth: domNode.scrollWidth,
|
|
653
|
+
requestResizeCanvas({
|
|
654
|
+
force: true,
|
|
646
655
|
})
|
|
647
656
|
break
|
|
657
|
+
case 'viewport_size': {
|
|
658
|
+
if (message.data.enabled) {
|
|
659
|
+
resizeCanvasOptions.enabled = true
|
|
660
|
+
resizeCanvasOptions.viewport = { height: message.data.height }
|
|
661
|
+
document.body.setAttribute(
|
|
662
|
+
DATA_ATTR_VIEWPORT_HEIGHT,
|
|
663
|
+
String(Math.round(Number(resizeCanvasOptions.viewport.height))),
|
|
664
|
+
)
|
|
665
|
+
domNode.style.setProperty(
|
|
666
|
+
CSS_VAR_VIEWPORT_HEIGHT,
|
|
667
|
+
String(Math.round(Number(resizeCanvasOptions.viewport.height))),
|
|
668
|
+
)
|
|
669
|
+
requestResizeCanvas(resizeCanvasOptions)
|
|
670
|
+
} else {
|
|
671
|
+
resizeCanvasOptions.enabled = false
|
|
672
|
+
domNode.style.removeProperty(CSS_VAR_VIEWPORT_HEIGHT)
|
|
673
|
+
document.body.removeAttribute(DATA_ATTR_VIEWPORT_HEIGHT)
|
|
674
|
+
}
|
|
675
|
+
break
|
|
676
|
+
}
|
|
648
677
|
case 'reload':
|
|
649
678
|
window.location.reload()
|
|
650
679
|
break
|
|
@@ -1014,13 +1043,17 @@ body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[d
|
|
|
1014
1043
|
styleElement.innerHTML = cssBlocks.join('\n')
|
|
1015
1044
|
} else {
|
|
1016
1045
|
const previewStyles = Object.entries(previewStyleStyles)
|
|
1017
|
-
.map(
|
|
1046
|
+
.map(
|
|
1047
|
+
([key, value]) =>
|
|
1048
|
+
`${key}: ${convertViewportUnitsToEmulatedViewportUnits(value)} !important;`,
|
|
1049
|
+
)
|
|
1018
1050
|
.join('\n')
|
|
1019
1051
|
styleElement.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
|
|
1020
1052
|
${previewStyles}
|
|
1021
1053
|
transition: none !important;
|
|
1022
1054
|
}`
|
|
1023
1055
|
}
|
|
1056
|
+
requestResizeCanvas(resizeCanvasOptions)
|
|
1024
1057
|
})
|
|
1025
1058
|
break
|
|
1026
1059
|
case 'preview_resources': {
|
|
@@ -1052,6 +1085,7 @@ body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[d
|
|
|
1052
1085
|
resourceElement.href = resource.href
|
|
1053
1086
|
document.head.appendChild(resourceElement)
|
|
1054
1087
|
})
|
|
1088
|
+
requestResizeCanvas(resizeCanvasOptions)
|
|
1055
1089
|
break
|
|
1056
1090
|
}
|
|
1057
1091
|
case 'preview_theme': {
|
|
@@ -1061,13 +1095,22 @@ body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[d
|
|
|
1061
1095
|
} else {
|
|
1062
1096
|
document.body.removeAttribute(THEME_DATA_ATTRIBUTE)
|
|
1063
1097
|
}
|
|
1098
|
+
requestResizeCanvas(resizeCanvasOptions)
|
|
1099
|
+
break
|
|
1064
1100
|
}
|
|
1065
1101
|
}
|
|
1066
1102
|
},
|
|
1067
1103
|
)
|
|
1068
1104
|
|
|
1105
|
+
const resizeObserver = new ResizeObserver(() =>
|
|
1106
|
+
requestResizeCanvas(resizeCanvasOptions),
|
|
1107
|
+
)
|
|
1108
|
+
resizeObserver.observe(domNode)
|
|
1109
|
+
requestResizeCanvas(resizeCanvasOptions)
|
|
1110
|
+
|
|
1069
1111
|
window.addEventListener('beforeunload', () => {
|
|
1070
1112
|
storeScrollState(component?.name)
|
|
1113
|
+
resizeObserver.disconnect()
|
|
1071
1114
|
})
|
|
1072
1115
|
|
|
1073
1116
|
const updateStyle = (component: Component | null) => {
|
|
@@ -1548,6 +1591,7 @@ body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[d
|
|
|
1548
1591
|
document.querySelector(`[data-id="${nodeId}"]`),
|
|
1549
1592
|
)
|
|
1550
1593
|
markSelectedElement(getDOMNodeFromNodeId(selectedNodeId))
|
|
1594
|
+
requestResizeCanvas(resizeCanvasOptions)
|
|
1551
1595
|
}
|
|
1552
1596
|
|
|
1553
1597
|
const createContext = (
|
|
@@ -151,4 +151,28 @@ describe('CustomPropertyStyleSheet', () => {
|
|
|
151
151
|
)
|
|
152
152
|
expect(instance.getStyleSheet().cssRules).toBeEmpty()
|
|
153
153
|
})
|
|
154
|
+
|
|
155
|
+
test('it escapes backslashes in selectors', () => {
|
|
156
|
+
const instance = new CustomPropertyStyleSheet(document)
|
|
157
|
+
instance.registerProperty(
|
|
158
|
+
'[data-id].my-package/my-component:hover',
|
|
159
|
+
'--my-property',
|
|
160
|
+
)('value')
|
|
161
|
+
expect(instance.getStyleSheet().cssRules.length).toBe(1)
|
|
162
|
+
expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
|
|
163
|
+
'[data-id].my-package\\/my-component:hover { --my-property: value; }',
|
|
164
|
+
)
|
|
165
|
+
})
|
|
166
|
+
|
|
167
|
+
test('it does not escape backslashes that are already escaped in selectors', () => {
|
|
168
|
+
const instance = new CustomPropertyStyleSheet(document)
|
|
169
|
+
instance.registerProperty(
|
|
170
|
+
'[data-id].my-package\\/my-component:hover',
|
|
171
|
+
'--my-property',
|
|
172
|
+
)('value')
|
|
173
|
+
expect(instance.getStyleSheet().cssRules.length).toBe(1)
|
|
174
|
+
expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
|
|
175
|
+
'[data-id].my-package\\/my-component:hover { --my-property: value; }',
|
|
176
|
+
)
|
|
177
|
+
})
|
|
154
178
|
})
|
|
@@ -41,7 +41,7 @@ export class CustomPropertyStyleSheet {
|
|
|
41
41
|
): (newValue: string) => void {
|
|
42
42
|
this.ruleMap ??= this.hydrateFromBase()
|
|
43
43
|
const fullSelector = CustomPropertyStyleSheet.getFullSelector(
|
|
44
|
-
selector,
|
|
44
|
+
CustomPropertyStyleSheet.escapeSelector(selector),
|
|
45
45
|
options,
|
|
46
46
|
)
|
|
47
47
|
|
|
@@ -83,7 +83,7 @@ export class CustomPropertyStyleSheet {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
const fullSelector = CustomPropertyStyleSheet.getFullSelector(
|
|
86
|
-
selector,
|
|
86
|
+
CustomPropertyStyleSheet.escapeSelector(selector),
|
|
87
87
|
options,
|
|
88
88
|
)
|
|
89
89
|
|
|
@@ -180,4 +180,9 @@ export class CustomPropertyStyleSheet {
|
|
|
180
180
|
|
|
181
181
|
return result
|
|
182
182
|
}
|
|
183
|
+
|
|
184
|
+
private static escapeSelector(selector: string): string {
|
|
185
|
+
// Prefix forward slashes with double backslashes (if not already prefixed) to escape them in CSS selectors
|
|
186
|
+
return selector.replace(/(^|[^\\])\//g, '$1\\/') // Escape forward slashes
|
|
187
|
+
}
|
|
183
188
|
}
|
package/src/styles/style.test.ts
CHANGED
|
@@ -211,4 +211,41 @@ describe('insertStyles() - prefers-reduced-motion', () => {
|
|
|
211
211
|
// max-width should still be present
|
|
212
212
|
expect(styleText).toContain('max-width: 768px')
|
|
213
213
|
})
|
|
214
|
+
|
|
215
|
+
test('it converts viewport units to container units', () => {
|
|
216
|
+
const component: Component = {
|
|
217
|
+
name: 'TestComponent',
|
|
218
|
+
nodes: {
|
|
219
|
+
'0': {
|
|
220
|
+
type: 'element',
|
|
221
|
+
tag: 'div',
|
|
222
|
+
style: {},
|
|
223
|
+
variants: [
|
|
224
|
+
{
|
|
225
|
+
style: { height: '100vh' },
|
|
226
|
+
mediaQuery: {
|
|
227
|
+
'prefers-reduced-motion': 'no-preference',
|
|
228
|
+
},
|
|
229
|
+
},
|
|
230
|
+
],
|
|
231
|
+
children: [],
|
|
232
|
+
attrs: {},
|
|
233
|
+
events: {},
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
const parent = document.createElement('div')
|
|
239
|
+
insertStyles(parent, component, [])
|
|
240
|
+
|
|
241
|
+
const styleElement = parent.querySelector('[data-hash]')
|
|
242
|
+
expect(styleElement).toBeTruthy()
|
|
243
|
+
|
|
244
|
+
const styleText = styleElement?.textContent ?? ''
|
|
245
|
+
|
|
246
|
+
// Check that viewport units are converted to a scaled version
|
|
247
|
+
expect(styleText).toContain(
|
|
248
|
+
'height:calc(100vh * var(--nc-viewport-height-px, var(--nc-scroll-height-px, 740)) / var(--nc-scroll-height-px, 740));',
|
|
249
|
+
)
|
|
250
|
+
})
|
|
214
251
|
})
|
package/src/styles/style.ts
CHANGED
|
@@ -12,6 +12,7 @@ import { kebabCase } from '@nordcraft/core/dist/styling/style.css'
|
|
|
12
12
|
import { variantSelector } from '@nordcraft/core/dist/styling/variantSelector'
|
|
13
13
|
import { omitKeys } from '@nordcraft/core/dist/utils/collections'
|
|
14
14
|
import { isDefined } from '@nordcraft/core/dist/utils/util'
|
|
15
|
+
import { CSS_VAR_SCROLL_HEIGHT, CSS_VAR_VIEWPORT_HEIGHT } from '../editor/const'
|
|
15
16
|
|
|
16
17
|
const LEGACY_BREAKPOINTS = {
|
|
17
18
|
large: 1440,
|
|
@@ -248,7 +249,19 @@ export const styleToCss = (style: NodeStyleModel) => {
|
|
|
248
249
|
SIZE_PROPERTIES.has(propertyName)
|
|
249
250
|
? `${Number(value) * 4}px`
|
|
250
251
|
: value
|
|
251
|
-
return `${propertyName}:${propertyValue};`
|
|
252
|
+
return `${propertyName}:${convertViewportUnitsToEmulatedViewportUnits(propertyValue)};`
|
|
252
253
|
})
|
|
253
254
|
.join('\n')
|
|
254
255
|
}
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Converts viewport units (vh) to emulated viewport units so the canvas can override
|
|
259
|
+
* the viewport size independent from the canvas iframe size.
|
|
260
|
+
*/
|
|
261
|
+
export const convertViewportUnitsToEmulatedViewportUnits = (
|
|
262
|
+
value: string | number | undefined,
|
|
263
|
+
) => {
|
|
264
|
+
return value?.toString().replace(/([\d.]+)vh/g, (_, num) => {
|
|
265
|
+
return `calc(${Number(num)}vh * var(${CSS_VAR_VIEWPORT_HEIGHT}, var(${CSS_VAR_SCROLL_HEIGHT}, 740)) / var(${CSS_VAR_SCROLL_HEIGHT}, 740))`
|
|
266
|
+
})
|
|
267
|
+
}
|