feat: update text settings
This commit is contained in:
@@ -18,12 +18,7 @@
|
|||||||
fontFamily: "Arial",
|
fontFamily: "Arial",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
textAlign: "center" as "left" | "center" | "right",
|
textAlign: "center" as "left" | "center" | "right",
|
||||||
padding: {
|
paddingX: 10,
|
||||||
top: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
left: 10,
|
|
||||||
},
|
|
||||||
verticalOffset: 0,
|
verticalOffset: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -49,7 +44,7 @@
|
|||||||
fontFamily: commonTextSettings.fontFamily,
|
fontFamily: commonTextSettings.fontFamily,
|
||||||
color: commonTextSettings.color,
|
color: commonTextSettings.color,
|
||||||
textAlign: commonTextSettings.textAlign,
|
textAlign: commonTextSettings.textAlign,
|
||||||
padding: { ...commonTextSettings.padding },
|
paddingX: commonTextSettings.paddingX,
|
||||||
verticalOffset: commonTextSettings.verticalOffset,
|
verticalOffset: commonTextSettings.verticalOffset,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@@ -210,69 +205,19 @@
|
|||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label>
|
<label>
|
||||||
Внутренние отступы:
|
Боковые отступы:
|
||||||
<div class="padding-controls">
|
|
||||||
<div class="padding-input">
|
|
||||||
<span>Верх:</span>
|
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min="0"
|
min="0"
|
||||||
max="50"
|
max="50"
|
||||||
step="1"
|
step="1"
|
||||||
value={commonTextSettings.padding.top}
|
value={commonTextSettings.paddingX}
|
||||||
oninput={(e) => {
|
oninput={(e) => {
|
||||||
commonTextSettings.padding.top = parseInt(e.target.value);
|
commonTextSettings.paddingX = parseInt(e.target.value);
|
||||||
applyCommonSettingsToAll();
|
applyCommonSettingsToAll();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<span class="value-display">{commonTextSettings.padding.top}px</span>
|
<span class="value-display">{commonTextSettings.paddingX}px</span>
|
||||||
</div>
|
|
||||||
<div class="padding-input">
|
|
||||||
<span>Низ:</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="50"
|
|
||||||
step="1"
|
|
||||||
value={commonTextSettings.padding.bottom}
|
|
||||||
oninput={(e) => {
|
|
||||||
commonTextSettings.padding.bottom = parseInt(e.target.value);
|
|
||||||
applyCommonSettingsToAll();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span class="value-display">{commonTextSettings.padding.bottom}px</span>
|
|
||||||
</div>
|
|
||||||
<div class="padding-input">
|
|
||||||
<span>Лево:</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="50"
|
|
||||||
step="1"
|
|
||||||
value={commonTextSettings.padding.left}
|
|
||||||
oninput={(e) => {
|
|
||||||
commonTextSettings.padding.left = parseInt(e.target.value);
|
|
||||||
applyCommonSettingsToAll();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span class="value-display">{commonTextSettings.padding.left}px</span>
|
|
||||||
</div>
|
|
||||||
<div class="padding-input">
|
|
||||||
<span>Право:</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="50"
|
|
||||||
step="1"
|
|
||||||
value={commonTextSettings.padding.right}
|
|
||||||
oninput={(e) => {
|
|
||||||
commonTextSettings.padding.right = parseInt(e.target.value);
|
|
||||||
applyCommonSettingsToAll();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span class="value-display">{commonTextSettings.padding.right}px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -403,24 +348,6 @@
|
|||||||
border-color: #007bff;
|
border-color: #007bff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-input span {
|
|
||||||
min-width: 40px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-text-section {
|
.add-text-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -6,13 +6,8 @@ export interface TextItem {
|
|||||||
color: string;
|
color: string;
|
||||||
// Выравнивание текста: left, center, right
|
// Выравнивание текста: left, center, right
|
||||||
textAlign: "left" | "center" | "right";
|
textAlign: "left" | "center" | "right";
|
||||||
// Внутренние отступы
|
// Боковые отступы (лево/право)
|
||||||
padding: {
|
paddingX: number;
|
||||||
top: number;
|
|
||||||
right: number;
|
|
||||||
bottom: number;
|
|
||||||
left: number;
|
|
||||||
};
|
|
||||||
// Смещение от центра по вертикали (для компенсации визуального центра разных шрифтов)
|
// Смещение от центра по вертикали (для компенсации визуального центра разных шрифтов)
|
||||||
verticalOffset: number;
|
verticalOffset: number;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,12 +31,7 @@ export const addTextToPanel = (panel: Panel, text: string): Panel => {
|
|||||||
fontFamily: "Arial",
|
fontFamily: "Arial",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
textAlign: "center" as const,
|
textAlign: "center" as const,
|
||||||
padding: {
|
paddingX: 10,
|
||||||
top: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
left: 10,
|
|
||||||
},
|
|
||||||
verticalOffset: 0,
|
verticalOffset: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user