@1urso/generic-editor 0.1.48 → 0.1.49
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/generic-editor.js +1 -1
- package/dist/generic-editor.umd.cjs +120 -221
- package/package.json +1 -1
package/dist/generic-editor.js
CHANGED
|
@@ -18546,5 +18546,5 @@ const GenericEditor = (n) => /* @__PURE__ */ jsx(EditorProvider, {
|
|
|
18546
18546
|
availableProps: n.layout.props,
|
|
18547
18547
|
theme: n.theme,
|
|
18548
18548
|
children: /* @__PURE__ */ jsx(EditorContent, { ...n })
|
|
18549
|
-
}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n const { isList, listSettings, canvasHeight } = options;\n\n const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n if (!text) return 0;\n try {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n if (!context) return 0;\n context.font = `${fontSize}px ${fontFamily}`;\n const words = String(text).split(' ');\n let line = '';\n let lineCount = 1;\n for (let i = 0; i < words.length; i++) {\n const testLine = line + words[i] + ' ';\n const metrics = context.measureText(testLine);\n const testWidth = metrics.width;\n if (testWidth > width && i > 0) {\n line = words[i] + ' ';\n lineCount++;\n } else {\n line = testLine;\n }\n }\n const explicitLines = String(text).split('\\n').length - 1;\n lineCount += explicitLines;\n return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n } catch (_) {\n return 0;\n }\n };\n\n const computeLayout = (elements, itemData) => {\n const layoutElements = JSON.parse(JSON.stringify(elements));\n \n const isInside = (inner, outer) => {\n const eps = 0.1;\n return (\n inner.x >= outer.x - eps &&\n inner.x + inner.width <= outer.x + outer.width + eps &&\n inner.y >= outer.y - eps &&\n inner.y + inner.height <= outer.y + outer.height + eps\n );\n };\n\n const autoGrowElements = layoutElements\n .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n .sort((a, b) => a.y - b.y);\n\n autoGrowElements.forEach(textEl => {\n let content = textEl.content;\n content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n const val = itemData[key.trim()];\n return val !== undefined && val !== null ? String(val) : match;\n });\n \n const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n \n const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n \n if (isHorizontal) {\n // Horizontal expansion: Update width only\n // Requires canvas context which is available in measureTextHeight scope or we create new one\n // For simplicity, we can't easily access the measure logic here if it's not exposed, \n // but measureTextHeight is available in this scope.\n // However measureTextHeight calculates HEIGHT. We need WIDTH.\n \n try {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n if (context) {\n context.font = `${fontSize}px ${fontFamily}`;\n const metrics = context.measureText(content);\n const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n const newWidth = Math.ceil(metrics.width + padding);\n if (newWidth > textEl.width) {\n textEl.width = newWidth;\n }\n }\n } catch(e) {}\n } else {\n // Vertical Expansion\n const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n const designHeight = textEl.height;\n const delta = measuredHeight - designHeight;\n \n if (delta > 0) {\n const originalBottom = textEl.y + designHeight;\n const originalTextRect = {\n x: textEl.x,\n y: textEl.y,\n width: textEl.width,\n height: designHeight\n };\n \n textEl.height = measuredHeight;\n \n layoutElements.forEach(other => {\n if (other.id === textEl.id) return;\n \n if (isInside(originalTextRect, other)) {\n other.height += delta;\n }\n \n if (other.y >= originalBottom) {\n other.y += delta;\n }\n });\n }\n }\n });\n \n let maxY = 0;\n layoutElements.forEach(el => {\n const bottom = el.y + el.height;\n if (bottom > maxY) maxY = bottom;\n });\n \n return { layoutElements, maxY };\n };\n\n const computeItemHeight = (elements, itemData, fallbackHeight) => {\n const { maxY } = computeLayout(elements, itemData);\n return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n };\n\n const formatValue = (value, formatting) => {\n if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n if (value === undefined || value === null) return '';\n\n if (formatting.type === 'boolean') {\n const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n }\n\n if (formatting.type === 'date') {\n try {\n const date = new Date(value);\n if (isNaN(date.getTime())) return String(value);\n \n if (formatting.dateFormat) {\n const d = date.getDate().toString().padStart(2, '0');\n const m = (date.getMonth() + 1).toString().padStart(2, '0');\n const y = date.getFullYear();\n const H = date.getHours().toString().padStart(2, '0');\n const M = date.getMinutes().toString().padStart(2, '0');\n const S = date.getSeconds().toString().padStart(2, '0');\n \n return formatting.dateFormat\n .replace('DD', d)\n .replace('MM', m)\n .replace('YYYY', String(y))\n .replace('HH', H)\n .replace('mm', M)\n .replace('ss', S);\n }\n return date.toLocaleDateString();\n } catch (e) { return String(value); }\n }\n\n if (formatting.type === 'number') {\n const num = parseFloat(value);\n if (isNaN(num)) return String(value);\n \n if (formatting.numberFormat === 'currency') {\n return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n }\n if (formatting.numberFormat === 'percent') {\n return num.toFixed(formatting.decimalPlaces || 0) + '%';\n }\n if (formatting.decimalPlaces !== undefined) {\n return num.toFixed(formatting.decimalPlaces);\n }\n return num.toFixed(formatting.decimalPlaces || 0);\n }\n \n return String(value);\n };\n\n const checkCondition = (propValue, operator, ruleValue) => {\n const val = String(propValue).toLowerCase();\n const target = String(ruleValue).toLowerCase();\n \n switch (operator) {\n case 'equals': return val === target;\n case 'notEquals': return val !== target;\n case 'contains': return val.includes(target);\n case 'greaterThan': return parseFloat(val) > parseFloat(target);\n case 'lessThan': return parseFloat(val) < parseFloat(target);\n case 'truthy': return !!propValue;\n case 'falsy': return !propValue;\n default: return false;\n }\n };\n\n const camelToKebab = (string) => {\n return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n };\n\n const hex8ToRgba = (hex) => {\n const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n if (!m) return hex;\n const h = m[1];\n const r = parseInt(h.slice(0, 2), 16);\n const g = parseInt(h.slice(2, 4), 16);\n const b = parseInt(h.slice(4, 6), 16);\n const a = parseInt(h.slice(6, 8), 16) / 255;\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n };\n\n const styleObjectToString = (style) => {\n if (!style) return '';\n const pxProps = [\n 'width', 'height', 'top', 'left', 'right', 'bottom', \n 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n ];\n \n return Object.entries(style)\n .map(([key, value]) => {\n if (value === undefined || value === null) return '';\n const cssKey = camelToKebab(key);\n let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n if (typeof cssValue === 'string') {\n if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n cssValue = hex8ToRgba(cssValue);\n }\n }\n return `${cssKey}: ${cssValue}`;\n })\n .filter(Boolean)\n .join('; ');\n };\n\n const getAnimationStyles = (anim) => {\n if (!anim || anim.type === 'none') return {};\n return {\n animationName: anim.type,\n animationDuration: (anim.duration || 1) + 's',\n animationDelay: (anim.delay || 0) + 's',\n animationIterationCount: anim.iterationCount || 1,\n animationTimingFunction: anim.timingFunction || 'ease',\n animationFillMode: 'both'\n };\n };\n\n const keyframesCss = `\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn { \n from { opacity: 0; } \n to { opacity: 1; } \n }\n @keyframes slideInLeft { \n from { opacity: 0; transform: translateX(-50px); } \n to { opacity: 1; transform: translateX(0); } \n }\n @keyframes slideInRight { \n from { opacity: 0; transform: translateX(50px); } \n to { opacity: 1; transform: translateX(0); } \n }\n @keyframes slideInUp { \n from { opacity: 0; transform: translateY(50px); } \n to { opacity: 1; transform: translateY(0); } \n }\n @keyframes slideInDown { \n from { opacity: 0; transform: translateY(-50px); } \n to { opacity: 1; transform: translateY(0); } \n }\n @keyframes zoomIn { \n from { opacity: 0; transform: scale(0.5); } \n to { opacity: 1; transform: scale(1); } \n }\n @keyframes bounceIn {\n 0% { opacity: 0; transform: scale(0.3); }\n 50% { opacity: 1; transform: scale(1.05); }\n 70% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n }\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n }\n @keyframes spin { \n from { transform: rotate(0deg); } \n to { transform: rotate(360deg); } \n }\n \n /* Improved / Smoother Animations */\n @keyframes smoothSlideUp {\n 0% { opacity: 0; transform: translateY(30px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n @keyframes popIn {\n 0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n 100% { opacity: 1; transform: scale(1) translateY(0); }\n }\n @keyframes blurIn {\n 0% { opacity: 0; filter: blur(10px); }\n 100% { opacity: 1; filter: blur(0); }\n }\n `;\n\n const renderItem = (itemData, index = 0, offsetY = 0) => {\n const { layoutElements } = computeLayout(elements, itemData);\n \n // Split into Static (absolute) and Flow (relative/dynamic) elements\n const staticElements = [];\n const flowElements = [];\n \n layoutElements.forEach(el => {\n if ((el.type === 'text' || el.type === 'text-container') && el.autoGrow) {\n flowElements.push(el);\n } else {\n staticElements.push(el);\n }\n });\n\n // 1. Render Static Elements (Absolute Positioning)\n // They form the \"base layer\" and don't affect the flow\n const staticHtml = staticElements.map(element => renderSingleElement(element, itemData, false)).join('\\n');\n\n // 2. Render Flow Elements (Relative Positioning)\n // Group them into \"Visual Lines\" based on Y position\n flowElements.sort((a, b) => a.y - b.y);\n \n const flowLines = [];\n let currentLine = null;\n \n flowElements.forEach(el => {\n if (!currentLine) {\n currentLine = { y: el.y, elements: [el] };\n flowLines.push(currentLine);\n } else {\n // If element is within 10px vertically, consider it same line\n if (Math.abs(el.y - currentLine.y) <= 10) {\n currentLine.elements.push(el);\n } else {\n currentLine = { y: el.y, elements: [el] };\n flowLines.push(currentLine);\n }\n }\n });\n\n // Render Flow Lines\n let previousLineBottomDesign = 0; // Track where the previous line ended in DESIGN coordinates\n\n const flowHtml = flowLines.map((line, lineIndex) => {\n // Sort elements in line by X\n line.elements.sort((a, b) => a.x - b.x);\n\n // Calculate margin-top for the line container\n // If it's the first line, margin is its Y position.\n // If subsequent line, margin is the gap between this line's design Y and previous line's design bottom.\n let marginTop = 0;\n if (lineIndex === 0) {\n marginTop = line.y;\n } else {\n marginTop = Math.max(0, line.y - previousLineBottomDesign);\n }\n\n // Update previousLineBottomDesign for the NEXT iteration\n // We use the MAX bottom of elements in this line\n let maxLineHeight = 0;\n line.elements.forEach(el => {\n if (el.height > maxLineHeight) maxLineHeight = el.height;\n });\n previousLineBottomDesign = line.y + maxLineHeight;\n\n const lineStyle = styleObjectToString({\n position: 'relative',\n width: '100%',\n marginTop: marginTop,\n // We don't set height, let it grow\n display: 'block', // Ensure it breaks to new line\n whiteSpace: 'nowrap' // Keep inline-block children on same line\n });\n\n const childrenHtml = line.elements.map(element => {\n // Calculate margin-left relative to previous element in line\n const elemIndex = line.elements.indexOf(element);\n let marginLeft = 0;\n if (elemIndex === 0) {\n marginLeft = element.x;\n } else {\n const prev = line.elements[elemIndex - 1];\n const prevEnd = prev.x + prev.width;\n marginLeft = Math.max(0, element.x - prevEnd);\n }\n\n // Pass computed margin to render function\n return renderSingleElement(element, itemData, true, { marginLeft, marginTop: 0 }); // marginTop handled by line container\n }).join('\\n');\n\n return `<div class=\"flow-line\" style=\"${lineStyle}\">${childrenHtml}</div>`;\n }).join('\\n');\n\n return staticHtml + '\\n' + flowHtml;\n };\n\n const renderSingleElement = (element, itemData, isFlow, flowStyles = {}) => {\n let content = element.content;\n let imgSrc = '';\n\n // Resolve Content & Formatting\n if (element.type === 'text' || element.type === 'text-container') {\n content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n const val = itemData[key.trim()];\n if (val === undefined || val === null) return match;\n if (element.formatting) {\n return formatValue(val, element.formatting);\n }\n return String(val);\n });\n } else if (element.type === 'image') {\n if (element.dataBinding) {\n const val = itemData[element.dataBinding];\n if (val !== undefined && val !== null) {\n imgSrc = String(val);\n } else {\n imgSrc = content;\n }\n } else {\n imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n const val = itemData[key.trim()];\n return val !== undefined && val !== null ? String(val) : match;\n });\n }\n }\n\n // Resolve Conditional Styles\n let conditionalStyles = {};\n if (element.conditions) {\n element.conditions.forEach(rule => {\n const propVal = itemData[rule.property];\n if (checkCondition(propVal, rule.operator, rule.value)) {\n conditionalStyles = { ...conditionalStyles, ...rule.style };\n }\n });\n }\n\n // Resolve Style Bindings\n let bindingStyles = {};\n if (element.styleBindings) {\n Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n const val = itemData[variableName];\n if (val !== undefined && val !== null) {\n bindingStyles[styleProp] = String(val);\n }\n });\n }\n\n const baseStyle = {\n position: isFlow ? 'relative' : 'absolute',\n left: isFlow ? undefined : element.x,\n top: isFlow ? undefined : element.y,\n marginLeft: isFlow ? flowStyles.marginLeft : undefined,\n marginTop: isFlow ? flowStyles.marginTop : undefined,\n width: element.width,\n height: element.autoGrow ? 'auto' : element.height,\n transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n overflow: element.autoGrow ? 'visible' : 'hidden',\n whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n wordBreak: element.autoGrow ? 'break-word' : undefined,\n display: isFlow ? 'inline-block' : undefined,\n verticalAlign: isFlow ? 'top' : undefined,\n boxSizing: 'border-box',\n ...element.style,\n ...conditionalStyles,\n ...bindingStyles\n };\n \n const styleString = styleObjectToString(baseStyle);\n\n if (element.type === 'text' || element.type === 'text-container') {\n return `<div style=\"${styleString}\">${content}</div>`;\n } else if (element.type === 'image') {\n const imgStyle = styleObjectToString({\n width: '100%',\n height: '100%',\n objectFit: element.style?.objectFit || 'cover',\n display: 'block'\n });\n return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n } else if (element.type === 'box') {\n return `<div style=\"${styleString}\"></div>`;\n } else if (element.type === 'checkbox') {\n let isChecked = false;\n if (element.dataBinding) {\n const val = itemData[element.dataBinding];\n isChecked = val === true || String(val) === 'true';\n }\n const checkboxStyle = styleObjectToString({\n ...baseStyle,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n });\n return `<div style=\"${checkboxStyle}\"><input type=\"checkbox\" ${isChecked ? 'checked' : ''} disabled style=\"width:100%;height:100%;margin:0;\" /></div>`;\n }\n return '';\n };\n };\n\nif (isList && Array.isArray(data)) {\n // Calculate per-item height respecting autoGrow\n // Sort data\n let listData = [...data];\n if (listSettings && listSettings.sortProp) {\n const prop = listSettings.sortProp;\n const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n listData.sort((a, b) => {\n const valA = a[prop];\n const valB = b[prop];\n if (valA < valB) return -1 * order;\n if (valA > valB) return 1 * order;\n return 0;\n });\n }\n\n // Handle newest position\n if (listSettings && listSettings.newestPosition === 'top') {\n listData.reverse();\n }\n\n // Generate HTML for all items\n const itemsHtml = listData.map((item, index) => {\n const itemHtml = renderItem(item, index, 0);\n const itemContainerStyle = styleObjectToString({\n position: 'relative',\n minHeight: canvasHeight + 'px',\n width: '100%'\n });\n\n return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n }).join('\\n');\n\n // Animation Styles based on settings\n const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n \n const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n // Entry Animation from settings\n const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n const entryAnimDuration = entryAnim.duration + 's';\n const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n const animationCss = `\n ${keyframesCss}\n\n .list-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: ${justify};\n height: ${containerHeight};\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n padding: 10px;\n }\n .list-item {\n flex-shrink: 0;\n animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n margin-bottom: 10px;\n width: 100%;\n position: relative;\n }\n `;\n \n const scrollScript = scrollDirection === 'up' \n ? `<script>\n document.addEventListener('DOMContentLoaded', () => {\n const wrapper = document.querySelector('.list-wrapper');\n if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n });\n <\/script>`\n : '';\n\n // Inject Smart Script for Dynamic Updates\n const injectionScript = `\n <script>\n (function() {\n try {\n const elements = ${JSON.stringify(elements)};\n const formatValue = ${formatValue.toString()};\n const checkCondition = ${checkCondition.toString()};\n const camelToKebab = ${camelToKebab.toString()};\n const hex8ToRgba = ${hex8ToRgba.toString()};\n const styleObjectToString = ${styleObjectToString.toString()};\n const getAnimationStyles = ${getAnimationStyles.toString()};\n const renderItem = ${renderItem.toString()};\n\n const measureTextHeight = ${measureTextHeight.toString()};\n const computeLayout = ${computeLayout.toString()};\n const computeItemHeight = ${computeItemHeight.toString()};\n const itemHeightFallback = ${canvasHeight || 0};\n const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n window.addItem = function(data) {\n const wrapper = document.querySelector('.list-wrapper');\n if (!wrapper) return;\n\n const itemHtml = renderItem(data, 0, 0);\n const itemContainerStyle = styleObjectToString({\n position: 'relative',\n minHeight: itemHeightFallback + 'px',\n width: '100%'\n });\n\n const div = document.createElement('div');\n div.className = 'list-item';\n div.setAttribute('style', itemContainerStyle);\n div.innerHTML = itemHtml;\n\n if (newestPosition === 'top') {\n wrapper.insertBefore(div, wrapper.firstChild);\n } else {\n wrapper.appendChild(div);\n }\n \n if (scrollDirection === 'up') {\n wrapper.scrollTop = wrapper.scrollHeight;\n }\n };\n } catch(e) { console.error(\"Smart List Init Error\", e); }\n })();\n <\/script>\n `;\n\n return `\n <style>${animationCss}</style>\n <div class=\"list-wrapper\">\n ${itemsHtml}\n </div>\n ${scrollScript}\n ${injectionScript}\n `;\n }\n\n // Single Item\n const contentHtml = renderItem(data);\n return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
|
|
18549
|
+
}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n const { isList, listSettings, canvasHeight } = options;\n\n const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n if (!text) return 0;\n try {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n if (!context) return 0;\n context.font = `${fontSize}px ${fontFamily}`;\n const words = String(text).split(' ');\n let line = '';\n let lineCount = 1;\n for (let i = 0; i < words.length; i++) {\n const testLine = line + words[i] + ' ';\n const metrics = context.measureText(testLine);\n const testWidth = metrics.width;\n if (testWidth > width && i > 0) {\n line = words[i] + ' ';\n lineCount++;\n } else {\n line = testLine;\n }\n }\n const explicitLines = String(text).split('\\n').length - 1;\n lineCount += explicitLines;\n return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n } catch (_) {\n return 0;\n }\n };\n\n const computeLayout = (elements, itemData) => {\n const layoutElements = JSON.parse(JSON.stringify(elements));\n \n const isInside = (inner, outer) => {\n const eps = 0.1;\n return (\n inner.x >= outer.x - eps &&\n inner.x + inner.width <= outer.x + outer.width + eps &&\n inner.y >= outer.y - eps &&\n inner.y + inner.height <= outer.y + outer.height + eps\n );\n };\n\n const autoGrowElements = layoutElements\n .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n .sort((a, b) => a.y - b.y);\n\n autoGrowElements.forEach(textEl => {\n let content = textEl.content;\n content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n const val = itemData[key.trim()];\n return val !== undefined && val !== null ? String(val) : match;\n });\n \n const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n \n const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n \n if (isHorizontal) {\n try {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n if (context) {\n context.font = `${fontSize}px ${fontFamily}`;\n const metrics = context.measureText(content);\n const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n const newWidth = Math.ceil(metrics.width + padding);\n if (newWidth > textEl.width) {\n textEl.width = newWidth;\n }\n }\n } catch(e) {}\n } else {\n const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n const designHeight = textEl.height;\n const delta = measuredHeight - designHeight;\n \n if (delta > 0) {\n const originalBottom = textEl.y + designHeight;\n const originalTextRect = {\n x: textEl.x,\n y: textEl.y,\n width: textEl.width,\n height: designHeight\n };\n \n textEl.height = measuredHeight;\n \n layoutElements.forEach(other => {\n if (other.id === textEl.id) return;\n \n if (isInside(originalTextRect, other)) {\n other.height += delta;\n }\n \n if (other.y >= originalBottom) {\n other.y += delta;\n }\n });\n }\n }\n });\n \n let maxY = 0;\n layoutElements.forEach(el => {\n const bottom = el.y + el.height;\n if (bottom > maxY) maxY = bottom;\n });\n \n return { layoutElements, maxY };\n };\n\n const computeItemHeight = (elements, itemData, fallbackHeight) => {\n const { maxY } = computeLayout(elements, itemData);\n return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n };\n\n const formatValue = (value, formatting) => {\n if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n if (value === undefined || value === null) return '';\n\n if (formatting.type === 'boolean') {\n const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n }\n\n if (formatting.type === 'date') {\n try {\n const date = new Date(value);\n if (isNaN(date.getTime())) return String(value);\n \n if (formatting.dateFormat) {\n const d = date.getDate().toString().padStart(2, '0');\n const m = (date.getMonth() + 1).toString().padStart(2, '0');\n const y = date.getFullYear();\n const H = date.getHours().toString().padStart(2, '0');\n const M = date.getMinutes().toString().padStart(2, '0');\n const S = date.getSeconds().toString().padStart(2, '0');\n \n return formatting.dateFormat\n .replace('DD', d)\n .replace('MM', m)\n .replace('YYYY', String(y))\n .replace('HH', H)\n .replace('mm', M)\n .replace('ss', S);\n }\n return date.toLocaleDateString();\n } catch (e) { return String(value); }\n }\n\n if (formatting.type === 'number') {\n const num = parseFloat(value);\n if (isNaN(num)) return String(value);\n \n if (formatting.numberFormat === 'currency') {\n return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n }\n if (formatting.numberFormat === 'percent') {\n return num.toFixed(formatting.decimalPlaces || 0) + '%';\n }\n if (formatting.decimalPlaces !== undefined) {\n return num.toFixed(formatting.decimalPlaces);\n }\n return num.toFixed(formatting.decimalPlaces || 0);\n }\n \n return String(value);\n };\n\n const checkCondition = (propValue, operator, ruleValue) => {\n const val = String(propValue).toLowerCase();\n const target = String(ruleValue).toLowerCase();\n \n switch (operator) {\n case 'equals': return val === target;\n case 'notEquals': return val !== target;\n case 'contains': return val.includes(target);\n case 'greaterThan': return parseFloat(val) > parseFloat(target);\n case 'lessThan': return parseFloat(val) < parseFloat(target);\n case 'truthy': return !!propValue;\n case 'falsy': return !propValue;\n default: return false;\n }\n };\n\n const camelToKebab = (string) => {\n return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n };\n\n const hex8ToRgba = (hex) => {\n const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n if (!m) return hex;\n const h = m[1];\n const r = parseInt(h.slice(0, 2), 16);\n const g = parseInt(h.slice(2, 4), 16);\n const b = parseInt(h.slice(4, 6), 16);\n const a = parseInt(h.slice(6, 8), 16) / 255;\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n };\n\n const styleObjectToString = (style) => {\n if (!style) return '';\n const pxProps = [\n 'width', 'height', 'top', 'left', 'right', 'bottom', \n 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n ];\n \n return Object.entries(style)\n .map(([key, value]) => {\n if (value === undefined || value === null) return '';\n const cssKey = camelToKebab(key);\n let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n if (typeof cssValue === 'string') {\n if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n cssValue = hex8ToRgba(cssValue);\n }\n }\n return `${cssKey}: ${cssValue}`;\n })\n .filter(Boolean)\n .join('; ');\n };\n\n const getAnimationStyles = (anim) => {\n if (!anim || anim.type === 'none') return {};\n return {\n animationName: anim.type,\n animationDuration: (anim.duration || 1) + 's',\n animationDelay: (anim.delay || 0) + 's',\n animationIterationCount: anim.iterationCount || 1,\n animationTimingFunction: anim.timingFunction || 'ease',\n animationFillMode: 'both'\n };\n };\n\n const keyframesCss = `\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn { \n from { opacity: 0; } \n to { opacity: 1; } \n }\n @keyframes slideInLeft { \n from { opacity: 0; transform: translateX(-50px); } \n to { opacity: 1; transform: translateX(0); } \n }\n @keyframes slideInRight { \n from { opacity: 0; transform: translateX(50px); } \n to { opacity: 1; transform: translateX(0); } \n }\n @keyframes slideInUp { \n from { opacity: 0; transform: translateY(50px); } \n to { opacity: 1; transform: translateY(0); } \n }\n @keyframes slideInDown { \n from { opacity: 0; transform: translateY(-50px); } \n to { opacity: 1; transform: translateY(0); } \n }\n @keyframes zoomIn { \n from { opacity: 0; transform: scale(0.5); } \n to { opacity: 1; transform: scale(1); } \n }\n @keyframes bounceIn {\n 0% { opacity: 0; transform: scale(0.3); }\n 50% { opacity: 1; transform: scale(1.05); }\n 70% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n }\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n }\n @keyframes spin { \n from { transform: rotate(0deg); } \n to { transform: rotate(360deg); } \n }\n \n /* Improved / Smoother Animations */\n @keyframes smoothSlideUp {\n 0% { opacity: 0; transform: translateY(30px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n @keyframes popIn {\n 0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n 100% { opacity: 1; transform: scale(1) translateY(0); }\n }\n @keyframes blurIn {\n 0% { opacity: 0; filter: blur(10px); }\n 100% { opacity: 1; filter: blur(0); }\n }\n `;\n\n const renderItem = (itemData, index = 0, offsetY = 0) => {\n const { layoutElements } = computeLayout(elements, itemData);\n return layoutElements.map(element => {\n let content = element.content;\n let imgSrc = '';\n\n // Resolve Content & Formatting\n if (element.type === 'text' || element.type === 'text-container') {\n content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n const val = itemData[key.trim()];\n if (val === undefined || val === null) return match;\n if (element.formatting) {\n return formatValue(val, element.formatting);\n }\n return String(val);\n });\n } else if (element.type === 'image') {\n if (element.dataBinding) {\n const val = itemData[element.dataBinding];\n if (val !== undefined && val !== null) {\n imgSrc = String(val);\n } else {\n imgSrc = content;\n }\n } else {\n imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n const val = itemData[key.trim()];\n return val !== undefined && val !== null ? String(val) : match;\n });\n }\n }\n\n // Resolve Conditional Styles\n let conditionalStyles = {};\n if (element.conditions) {\n element.conditions.forEach(rule => {\n const propVal = itemData[rule.property];\n if (checkCondition(propVal, rule.operator, rule.value)) {\n conditionalStyles = { ...conditionalStyles, ...rule.style };\n }\n });\n }\n\n // Resolve Style Bindings\n let bindingStyles = {};\n if (element.styleBindings) {\n Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n const val = itemData[variableName];\n if (val !== undefined && val !== null) {\n bindingStyles[styleProp] = String(val);\n }\n });\n }\n\n const baseStyle = {\n position: 'absolute',\n left: element.x,\n top: element.y + offsetY,\n width: element.width,\n height: element.autoGrow ? 'auto' : element.height,\n transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n overflow: element.autoGrow ? 'visible' : 'hidden',\n whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n wordBreak: element.autoGrow ? 'break-word' : undefined,\n ...element.style,\n ...conditionalStyles,\n ...bindingStyles\n };\n \n if (element.type === 'text' && !baseStyle.padding) {\n // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n }\n \n const styleString = styleObjectToString(baseStyle);\n\n if (element.type === 'text' || element.type === 'text-container') {\n return `<div style=\"${styleString}\">${content}</div>`;\n } else if (element.type === 'image') {\n const imgStyle = styleObjectToString({\n width: '100%',\n height: '100%',\n objectFit: element.style?.objectFit || 'cover',\n display: 'block'\n });\n return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n } else if (element.type === 'box') {\n return `<div style=\"${styleString}\"></div>`;\n } else if (element.type === 'checkbox') {\n let isChecked = false;\n if (element.dataBinding) {\n const val = itemData[element.dataBinding];\n isChecked = val === true || String(val) === 'true';\n }\n const checkboxStyle = styleObjectToString({\n ...baseStyle,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n });\n return `<div style=\"${checkboxStyle}\"><input type=\"checkbox\" ${isChecked ? 'checked' : ''} disabled style=\"width:100%;height:100%;margin:0;\" /></div>`;\n }\n return '';\n }).join('\\n');\n };\n\n if (isList && Array.isArray(data)) {\n // Calculate per-item height respecting autoGrow\n // Sort data\n let listData = [...data];\n if (listSettings && listSettings.sortProp) {\n const prop = listSettings.sortProp;\n const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n listData.sort((a, b) => {\n const valA = a[prop];\n const valB = b[prop];\n if (valA < valB) return -1 * order;\n if (valA > valB) return 1 * order;\n return 0;\n });\n }\n\n // Handle newest position\n if (listSettings && listSettings.newestPosition === 'top') {\n listData.reverse();\n }\n\n // Generate HTML for all items\n const itemsHtml = listData.map((item, index) => {\n const itemHtml = renderItem(item, index, 0);\n const itemHeight = computeItemHeight(elements, item, canvasHeight);\n const itemContainerStyle = styleObjectToString({\n position: 'relative',\n height: itemHeight,\n width: '100%'\n });\n\n return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n }).join('\\n');\n\n // Animation Styles based on settings\n const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n \n const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n // Entry Animation from settings\n const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n const entryAnimDuration = entryAnim.duration + 's';\n const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n const animationCss = `\n ${keyframesCss}\n\n .list-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: ${justify};\n height: ${containerHeight};\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n padding: 10px;\n }\n .list-item {\n flex-shrink: 0;\n animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n margin-bottom: 10px;\n width: 100%;\n position: relative;\n }\n `;\n \n const scrollScript = scrollDirection === 'up' \n ? `<script>\n document.addEventListener('DOMContentLoaded', () => {\n const wrapper = document.querySelector('.list-wrapper');\n if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n });\n <\/script>`\n : '';\n\n // Inject Smart Script for Dynamic Updates\n const injectionScript = `\n <script>\n (function() {\n try {\n const elements = ${JSON.stringify(elements)};\n const formatValue = ${formatValue.toString()};\n const checkCondition = ${checkCondition.toString()};\n const camelToKebab = ${camelToKebab.toString()};\n const hex8ToRgba = ${hex8ToRgba.toString()};\n const styleObjectToString = ${styleObjectToString.toString()};\n const getAnimationStyles = ${getAnimationStyles.toString()};\n const renderItem = ${renderItem.toString()};\n\n const measureTextHeight = ${measureTextHeight.toString()};\n const computeLayout = ${computeLayout.toString()};\n const computeItemHeight = ${computeItemHeight.toString()};\n const itemHeightFallback = ${canvasHeight || 0};\n const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n window.addItem = function(data) {\n const wrapper = document.querySelector('.list-wrapper');\n if (!wrapper) return;\n\n const itemHtml = renderItem(data, 0, 0);\n const itemHeight = computeItemHeight(elements, data, itemHeightFallback);\n const itemContainerStyle = styleObjectToString({\n position: 'relative',\n height: itemHeight,\n width: '100%'\n });\n\n const div = document.createElement('div');\n div.className = 'list-item';\n div.setAttribute('style', itemContainerStyle);\n div.innerHTML = itemHtml;\n\n if (newestPosition === 'top') {\n wrapper.insertBefore(div, wrapper.firstChild);\n } else {\n wrapper.appendChild(div);\n }\n \n if (scrollDirection === 'up') {\n wrapper.scrollTop = wrapper.scrollHeight;\n }\n };\n } catch(e) { console.error(\"Smart List Init Error\", e); }\n })();\n <\/script>\n `;\n\n return `\n <style>${animationCss}</style>\n <div class=\"list-wrapper\">\n ${itemsHtml}\n </div>\n ${scrollScript}\n ${injectionScript}\n `;\n }\n\n // Single Item\n const contentHtml = renderItem(data);\n return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
|
|
18550
18550
|
export { GenericEditor as EditorContent, generateHTML };
|
|
@@ -125,12 +125,6 @@ function renderTemplate(elements, data, options = {}) {
|
|
|
125
125
|
const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';
|
|
126
126
|
|
|
127
127
|
if (isHorizontal) {
|
|
128
|
-
// Horizontal expansion: Update width only
|
|
129
|
-
// Requires canvas context which is available in measureTextHeight scope or we create new one
|
|
130
|
-
// For simplicity, we can't easily access the measure logic here if it's not exposed,
|
|
131
|
-
// but measureTextHeight is available in this scope.
|
|
132
|
-
// However measureTextHeight calculates HEIGHT. We need WIDTH.
|
|
133
|
-
|
|
134
128
|
try {
|
|
135
129
|
const canvas = document.createElement('canvas');
|
|
136
130
|
const context = canvas.getContext('2d');
|
|
@@ -145,7 +139,6 @@ function renderTemplate(elements, data, options = {}) {
|
|
|
145
139
|
}
|
|
146
140
|
} catch(e) {}
|
|
147
141
|
} else {
|
|
148
|
-
// Vertical Expansion
|
|
149
142
|
const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);
|
|
150
143
|
const designHeight = textEl.height;
|
|
151
144
|
const delta = measuredHeight - designHeight;
|
|
@@ -377,236 +370,141 @@ function renderTemplate(elements, data, options = {}) {
|
|
|
377
370
|
|
|
378
371
|
const renderItem = (itemData, index = 0, offsetY = 0) => {
|
|
379
372
|
const { layoutElements } = computeLayout(elements, itemData);
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
const flowElements = [];
|
|
384
|
-
|
|
385
|
-
layoutElements.forEach(el => {
|
|
386
|
-
if ((el.type === 'text' || el.type === 'text-container') && el.autoGrow) {
|
|
387
|
-
flowElements.push(el);
|
|
388
|
-
} else {
|
|
389
|
-
staticElements.push(el);
|
|
390
|
-
}
|
|
391
|
-
});
|
|
392
|
-
|
|
393
|
-
// 1. Render Static Elements (Absolute Positioning)
|
|
394
|
-
// They form the "base layer" and don't affect the flow
|
|
395
|
-
const staticHtml = staticElements.map(element => renderSingleElement(element, itemData, false)).join('\\n');
|
|
373
|
+
return layoutElements.map(element => {
|
|
374
|
+
let content = element.content;
|
|
375
|
+
let imgSrc = '';
|
|
396
376
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
377
|
+
// Resolve Content & Formatting
|
|
378
|
+
if (element.type === 'text' || element.type === 'text-container') {
|
|
379
|
+
content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
|
|
380
|
+
const val = itemData[key.trim()];
|
|
381
|
+
if (val === undefined || val === null) return match;
|
|
382
|
+
if (element.formatting) {
|
|
383
|
+
return formatValue(val, element.formatting);
|
|
384
|
+
}
|
|
385
|
+
return String(val);
|
|
386
|
+
});
|
|
387
|
+
} else if (element.type === 'image') {
|
|
388
|
+
if (element.dataBinding) {
|
|
389
|
+
const val = itemData[element.dataBinding];
|
|
390
|
+
if (val !== undefined && val !== null) {
|
|
391
|
+
imgSrc = String(val);
|
|
392
|
+
} else {
|
|
393
|
+
imgSrc = content;
|
|
394
|
+
}
|
|
395
|
+
} else {
|
|
396
|
+
imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
|
|
397
|
+
const val = itemData[key.trim()];
|
|
398
|
+
return val !== undefined && val !== null ? String(val) : match;
|
|
399
|
+
});
|
|
400
|
+
}
|
|
416
401
|
}
|
|
417
|
-
});
|
|
418
|
-
|
|
419
|
-
// Render Flow Lines
|
|
420
|
-
let previousLineBottomDesign = 0; // Track where the previous line ended in DESIGN coordinates
|
|
421
402
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
marginTop = line.y;
|
|
432
|
-
} else {
|
|
433
|
-
marginTop = Math.max(0, line.y - previousLineBottomDesign);
|
|
403
|
+
// Resolve Conditional Styles
|
|
404
|
+
let conditionalStyles = {};
|
|
405
|
+
if (element.conditions) {
|
|
406
|
+
element.conditions.forEach(rule => {
|
|
407
|
+
const propVal = itemData[rule.property];
|
|
408
|
+
if (checkCondition(propVal, rule.operator, rule.value)) {
|
|
409
|
+
conditionalStyles = { ...conditionalStyles, ...rule.style };
|
|
410
|
+
}
|
|
411
|
+
});
|
|
434
412
|
}
|
|
435
413
|
|
|
436
|
-
//
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
width: '100%',
|
|
447
|
-
marginTop: marginTop,
|
|
448
|
-
// We don't set height, let it grow
|
|
449
|
-
display: 'block', // Ensure it breaks to new line
|
|
450
|
-
whiteSpace: 'nowrap' // Keep inline-block children on same line
|
|
451
|
-
});
|
|
452
|
-
|
|
453
|
-
const childrenHtml = line.elements.map(element => {
|
|
454
|
-
// Calculate margin-left relative to previous element in line
|
|
455
|
-
const elemIndex = line.elements.indexOf(element);
|
|
456
|
-
let marginLeft = 0;
|
|
457
|
-
if (elemIndex === 0) {
|
|
458
|
-
marginLeft = element.x;
|
|
459
|
-
} else {
|
|
460
|
-
const prev = line.elements[elemIndex - 1];
|
|
461
|
-
const prevEnd = prev.x + prev.width;
|
|
462
|
-
marginLeft = Math.max(0, element.x - prevEnd);
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
// Pass computed margin to render function
|
|
466
|
-
return renderSingleElement(element, itemData, true, { marginLeft, marginTop: 0 }); // marginTop handled by line container
|
|
467
|
-
}).join('\\n');
|
|
468
|
-
|
|
469
|
-
return \`<div class="flow-line" style="\${lineStyle}">\${childrenHtml}</div>\`;
|
|
470
|
-
}).join('\\n');
|
|
471
|
-
|
|
472
|
-
return staticHtml + '\\n' + flowHtml;
|
|
473
|
-
};
|
|
474
|
-
|
|
475
|
-
const renderSingleElement = (element, itemData, isFlow, flowStyles = {}) => {
|
|
476
|
-
let content = element.content;
|
|
477
|
-
let imgSrc = '';
|
|
414
|
+
// Resolve Style Bindings
|
|
415
|
+
let bindingStyles = {};
|
|
416
|
+
if (element.styleBindings) {
|
|
417
|
+
Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {
|
|
418
|
+
const val = itemData[variableName];
|
|
419
|
+
if (val !== undefined && val !== null) {
|
|
420
|
+
bindingStyles[styleProp] = String(val);
|
|
421
|
+
}
|
|
422
|
+
});
|
|
423
|
+
}
|
|
478
424
|
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
425
|
+
const baseStyle = {
|
|
426
|
+
position: 'absolute',
|
|
427
|
+
left: element.x,
|
|
428
|
+
top: element.y + offsetY,
|
|
429
|
+
width: element.width,
|
|
430
|
+
height: element.autoGrow ? 'auto' : element.height,
|
|
431
|
+
transform: element.rotation ? \`rotate(\${element.rotation}deg)\` : undefined,
|
|
432
|
+
overflow: element.autoGrow ? 'visible' : 'hidden',
|
|
433
|
+
whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),
|
|
434
|
+
wordBreak: element.autoGrow ? 'break-word' : undefined,
|
|
435
|
+
...element.style,
|
|
436
|
+
...conditionalStyles,
|
|
437
|
+
...bindingStyles
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
if (element.type === 'text' && !baseStyle.padding) {
|
|
441
|
+
// baseStyle.padding = '8px'; // Removed default padding to respect resize box
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
const styleString = styleObjectToString(baseStyle);
|
|
445
|
+
|
|
446
|
+
if (element.type === 'text' || element.type === 'text-container') {
|
|
447
|
+
return \`<div style="\${styleString}">\${content}</div>\`;
|
|
448
|
+
} else if (element.type === 'image') {
|
|
449
|
+
const imgStyle = styleObjectToString({
|
|
450
|
+
width: '100%',
|
|
451
|
+
height: '100%',
|
|
452
|
+
objectFit: element.style?.objectFit || 'cover',
|
|
453
|
+
display: 'block'
|
|
454
|
+
});
|
|
455
|
+
return \`<div style="\${styleString}"><img src="\${imgSrc}" alt="Element" style="\${imgStyle}" /></div>\`;
|
|
456
|
+
} else if (element.type === 'box') {
|
|
457
|
+
return \`<div style="\${styleString}"></div>\`;
|
|
458
|
+
} else if (element.type === 'checkbox') {
|
|
459
|
+
let isChecked = false;
|
|
490
460
|
if (element.dataBinding) {
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
imgSrc = String(val);
|
|
494
|
-
} else {
|
|
495
|
-
imgSrc = content;
|
|
461
|
+
const val = itemData[element.dataBinding];
|
|
462
|
+
isChecked = val === true || String(val) === 'true';
|
|
496
463
|
}
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
464
|
+
const checkboxStyle = styleObjectToString({
|
|
465
|
+
...baseStyle,
|
|
466
|
+
display: 'flex',
|
|
467
|
+
alignItems: 'center',
|
|
468
|
+
justifyContent: 'center'
|
|
501
469
|
});
|
|
502
|
-
}
|
|
503
|
-
|
|
470
|
+
return \`<div style="\${checkboxStyle}"><input type="checkbox" \${isChecked ? 'checked' : ''} disabled style="width:100%;height:100%;margin:0;" /></div>\`;
|
|
471
|
+
}
|
|
472
|
+
return '';
|
|
473
|
+
}).join('\\n');
|
|
474
|
+
};
|
|
504
475
|
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
476
|
+
if (isList && Array.isArray(data)) {
|
|
477
|
+
// Calculate per-item height respecting autoGrow
|
|
478
|
+
// Sort data
|
|
479
|
+
let listData = [...data];
|
|
480
|
+
if (listSettings && listSettings.sortProp) {
|
|
481
|
+
const prop = listSettings.sortProp;
|
|
482
|
+
const order = listSettings.sortOrder === 'asc' ? 1 : -1;
|
|
483
|
+
listData.sort((a, b) => {
|
|
484
|
+
const valA = a[prop];
|
|
485
|
+
const valB = b[prop];
|
|
486
|
+
if (valA < valB) return -1 * order;
|
|
487
|
+
if (valA > valB) return 1 * order;
|
|
488
|
+
return 0;
|
|
513
489
|
});
|
|
514
490
|
}
|
|
515
491
|
|
|
516
|
-
//
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {
|
|
520
|
-
const val = itemData[variableName];
|
|
521
|
-
if (val !== undefined && val !== null) {
|
|
522
|
-
bindingStyles[styleProp] = String(val);
|
|
523
|
-
}
|
|
524
|
-
});
|
|
492
|
+
// Handle newest position
|
|
493
|
+
if (listSettings && listSettings.newestPosition === 'top') {
|
|
494
|
+
listData.reverse();
|
|
525
495
|
}
|
|
526
496
|
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
transform: element.rotation ? \`rotate(\${element.rotation}deg)\` : undefined,
|
|
536
|
-
overflow: element.autoGrow ? 'visible' : 'hidden',
|
|
537
|
-
whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),
|
|
538
|
-
wordBreak: element.autoGrow ? 'break-word' : undefined,
|
|
539
|
-
display: isFlow ? 'inline-block' : undefined,
|
|
540
|
-
verticalAlign: isFlow ? 'top' : undefined,
|
|
541
|
-
boxSizing: 'border-box',
|
|
542
|
-
...element.style,
|
|
543
|
-
...conditionalStyles,
|
|
544
|
-
...bindingStyles
|
|
545
|
-
};
|
|
546
|
-
|
|
547
|
-
const styleString = styleObjectToString(baseStyle);
|
|
548
|
-
|
|
549
|
-
if (element.type === 'text' || element.type === 'text-container') {
|
|
550
|
-
return \`<div style="\${styleString}">\${content}</div>\`;
|
|
551
|
-
} else if (element.type === 'image') {
|
|
552
|
-
const imgStyle = styleObjectToString({
|
|
553
|
-
width: '100%',
|
|
554
|
-
height: '100%',
|
|
555
|
-
objectFit: element.style?.objectFit || 'cover',
|
|
556
|
-
display: 'block'
|
|
557
|
-
});
|
|
558
|
-
return \`<div style="\${styleString}"><img src="\${imgSrc}" alt="Element" style="\${imgStyle}" /></div>\`;
|
|
559
|
-
} else if (element.type === 'box') {
|
|
560
|
-
return \`<div style="\${styleString}"></div>\`;
|
|
561
|
-
} else if (element.type === 'checkbox') {
|
|
562
|
-
let isChecked = false;
|
|
563
|
-
if (element.dataBinding) {
|
|
564
|
-
const val = itemData[element.dataBinding];
|
|
565
|
-
isChecked = val === true || String(val) === 'true';
|
|
566
|
-
}
|
|
567
|
-
const checkboxStyle = styleObjectToString({
|
|
568
|
-
...baseStyle,
|
|
569
|
-
display: 'flex',
|
|
570
|
-
alignItems: 'center',
|
|
571
|
-
justifyContent: 'center'
|
|
497
|
+
// Generate HTML for all items
|
|
498
|
+
const itemsHtml = listData.map((item, index) => {
|
|
499
|
+
const itemHtml = renderItem(item, index, 0);
|
|
500
|
+
const itemHeight = computeItemHeight(elements, item, canvasHeight);
|
|
501
|
+
const itemContainerStyle = styleObjectToString({
|
|
502
|
+
position: 'relative',
|
|
503
|
+
height: itemHeight,
|
|
504
|
+
width: '100%'
|
|
572
505
|
});
|
|
573
|
-
return \`<div style="\${checkboxStyle}"><input type="checkbox" \${isChecked ? 'checked' : ''} disabled style="width:100%;height:100%;margin:0;" /></div>\`;
|
|
574
|
-
}
|
|
575
|
-
return '';
|
|
576
|
-
};
|
|
577
|
-
};
|
|
578
|
-
|
|
579
|
-
if (isList && Array.isArray(data)) {
|
|
580
|
-
// Calculate per-item height respecting autoGrow
|
|
581
|
-
// Sort data
|
|
582
|
-
let listData = [...data];
|
|
583
|
-
if (listSettings && listSettings.sortProp) {
|
|
584
|
-
const prop = listSettings.sortProp;
|
|
585
|
-
const order = listSettings.sortOrder === 'asc' ? 1 : -1;
|
|
586
|
-
listData.sort((a, b) => {
|
|
587
|
-
const valA = a[prop];
|
|
588
|
-
const valB = b[prop];
|
|
589
|
-
if (valA < valB) return -1 * order;
|
|
590
|
-
if (valA > valB) return 1 * order;
|
|
591
|
-
return 0;
|
|
592
|
-
});
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
// Handle newest position
|
|
596
|
-
if (listSettings && listSettings.newestPosition === 'top') {
|
|
597
|
-
listData.reverse();
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
// Generate HTML for all items
|
|
601
|
-
const itemsHtml = listData.map((item, index) => {
|
|
602
|
-
const itemHtml = renderItem(item, index, 0);
|
|
603
|
-
const itemContainerStyle = styleObjectToString({
|
|
604
|
-
position: 'relative',
|
|
605
|
-
minHeight: canvasHeight + 'px',
|
|
606
|
-
width: '100%'
|
|
607
|
-
});
|
|
608
506
|
|
|
609
|
-
|
|
507
|
+
return \`<div class="list-item" style="\${itemContainerStyle}">\${itemHtml}</div>\`;
|
|
610
508
|
}).join('\\n');
|
|
611
509
|
|
|
612
510
|
// Animation Styles based on settings
|
|
@@ -679,9 +577,10 @@ if (isList && Array.isArray(data)) {
|
|
|
679
577
|
if (!wrapper) return;
|
|
680
578
|
|
|
681
579
|
const itemHtml = renderItem(data, 0, 0);
|
|
580
|
+
const itemHeight = computeItemHeight(elements, data, itemHeightFallback);
|
|
682
581
|
const itemContainerStyle = styleObjectToString({
|
|
683
582
|
position: 'relative',
|
|
684
|
-
|
|
583
|
+
height: itemHeight,
|
|
685
584
|
width: '100%'
|
|
686
585
|
});
|
|
687
586
|
|