\n \n {singleLineMode ? 'Logo Text' : 'Top Line'}\n \n

\n setTopLine(e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n placeholder={singleLineMode ? \"LOGO TEXT\" : \"TOP LINE\"}\n />\n

\n \n setIsBoldTop(!isBoldTop)}\n className=\"mr-1\"\n />\n B\n \n \n setIsItalicTop(!isItalicTop)}\n className=\"mr-1\"\n />\n I\n \n

\n \n {!singleLineMode && (\n <>\n \n Bottom Line\n \n

\n setBottomLine(e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n placeholder=\"BOTTOM LINE\"\n />\n

\n \n setIsBoldBottom(!isBoldBottom)}\n className=\"mr-1\"\n />\n B\n \n \n setIsItalicBottom(!isItalicBottom)}\n className=\"mr-1\"\n />\n I\n \n

\n \n )}\n \n

Font sizes adjusted for equal visual width:

Top: {topFontSize}px (Y: {Math.round(topY)})
Bottom: {bottomFontSize}px (Y: {Math.round(bottomY)})
Ratio: {formattedRatio}
Width: ~{Math.round(calculatedWidth)}px
Spacing: {bottomY && topY ? Math.round(bottomY - topY) : 'N/A'}px

\n );\n};\n\n// Component for toggling between single and double line modes\nexport const ModeToggle = ({\n singleLineMode,\n toggleSingleLineMode\n}) => {\n return (\n

\n \n toggleSingleLineMode()}\n className=\"mr-2\"\n />\n Two Lines\n \n

\n \n toggleSingleLineMode()}\n className=\"mr-2\"\n />\n Single Line (changes color at space)\n \n

\n );\n};\n\n// Advanced options panel component\nexport const AdvancedOptions = ({\n showAdvancedOptions,\n customMaxWidth,\n setCustomMaxWidth,\n textXPosition,\n setTextXPosition,\n yPosition,\n setYPosition,\n showGuideLines,\n setShowGuideLines,\n verticalSpacingFactor = DEFAULT_VERTICAL_SPACING_FACTOR,\n setVerticalSpacingFactor\n}) => {\n return (\n

Layout Tuning

\n \n

\n \n Max Text Width (px): {customMaxWidth}\n \n

\n setCustomMaxWidth(parseInt(e.target.value))}\n className=\"w-full\"\n />\n setCustomMaxWidth(parseInt(e.target.value))}\n className=\"w-16 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n \n

\n \n Text X Position: Fixed at 112px (as required)\n \n

\n This value is fixed at 112px per requirement and cannot be changed.\n

\n \n {/* Vertical Spacing Factor Slider - updated to allow negative values */}\n

\n \n Vertical Spacing Factor: {verticalSpacingFactor.toFixed(2)} \n (Default: 0.20)\n \n

\n setVerticalSpacingFactor(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n setVerticalSpacingFactor(parseFloat(e.target.value))}\n className=\"w-16 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n Adjusts the spacing between text lines (can be negative for tighter spacing)\n

\n \n

\n \n Text Y Offset (px): {yPosition}\n \n

\n setYPosition(parseInt(e.target.value))}\n className=\"w-full\"\n />\n setYPosition(parseInt(e.target.value))}\n className=\"w-16 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n Moves text up (-) or down (+)\n

\n \n

\n setShowGuideLines(!showGuideLines)}\n className=\"mr-2\"\n />\n \n Show guide lines\n \n

\n );\n};\n\n// Font selector with text alignment component\nexport const FontSelector = ({\n fontFamily,\n setFontFamily,\n fontOptions,\n centerText,\n setCenterText,\n showAdvancedOptions,\n toggleAdvancedOptions\n}) => {\n return (\n

\n \n Font\n \n setFontFamily(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n style={{ fontFamily: fontFamily }}\n >\n {fontOptions.map((font) => (\n \n ))}\n \n \n {/* Text alignment option is now hidden since it's always centered at 112px */}\n

\n \n Text Alignment:\n \n

\n \n \n Center (fixed at 112px)\n \n

\n \n {/* Advanced layout options toggle */}\n

\n \n {showAdvancedOptions ? 'Hide Advanced Options' : 'Show Advanced Options'}\n \n

\n );\n};","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/logoWorkshopOpenMoji/code/TextEditor.tsx","extension","actionData","errors"]