export const SVG = {
edit: ``,
move: ``,
alignLeft: ``,
alignCenter: ``,
alignRight: ``,
bold: ``,
italic: ``,
font: ``,
fontSize: ``,
shadow: ``,
outline: ``,
rotate: ``,
reflectX: ``,
reflectY: ``,
frame: ``,
color: ``
};
export const WIDGET_CONFIG = {
text: ["STRING", { multiline: true, default: "", hidden: true }],
font_size: ["INT", { default: 32, min: 8, max: 128, hidden: true }],
text_color: ["STRING", { default: "#FFFFFF", hidden: true }],
text_gradient_start: ["STRING", { default: "", hidden: true }],
text_gradient_end: ["STRING", { default: "", hidden: true }],
text_gradient_angle: ["INT", { default: 0, min: 0, max: 360, hidden: true }],
background_color: ["STRING", { default: "#000000", hidden: true }],
width: ["INT", { hidden: true }],
height: ["INT", { hidden: true }],
position_x: ["FLOAT", { default: 256, min: 0, max: 512, step: 1, precision: 0, label: "X Position", hidden: true }],
position_y: ["FLOAT", { default: 256, min: 0, max: 512, step: 1, precision: 0, label: "Y Position", hidden: true }],
rotation: ["FLOAT", { default: 0.0, min: -360.0, max: 360.0, hidden: true }],
is_bold: ["BOOLEAN", { default: false, hidden: true }],
is_italic: ["BOOLEAN", { default: false, hidden: true }],
text_align: ["STRING", { default: "center", hidden: true }],
font_family: ["STRING", { default: "Arial", hidden: true }],
text_shadow: ["BOOLEAN", { default: false, hidden: true }],
text_outline: ["BOOLEAN", { default: false, hidden: true }],
outline_color: ["STRING", { default: "#000000", hidden: true }],
outline_width: ["INT", { default: 3, min: 1, max: 20, hidden: true }],
opacity: ["FLOAT", { default: 1.0, min: 0.0, max: 1.0, hidden: true }],
background_visible: ["BOOLEAN", { default: true, hidden: true }],
reflect_x: ["BOOLEAN", { default: false, hidden: true }],
reflect_y: ["BOOLEAN", { default: false, hidden: true }],
canvas_image: ["STRING", { default: "", hidden: true }]
};
export const TOOLBAR_TOOLS = [
{
icon: SVG.edit,
tooltip: "Edit Text",
action: 'editText'
},
{ type: 'divider' },
{
icon: SVG.move,
tooltip: "Set Position",
action: 'openMoveDialog'
},
{ type: 'divider' },
{
icon: SVG.alignLeft,
tooltip: "Align Left",
action: 'alignLeft'
},
{
icon: SVG.alignCenter,
tooltip: "Center",
action: 'alignCenter'
},
{
icon: SVG.alignRight,
tooltip: "Align Right",
action: 'alignRight'
},
{ type: 'divider' },
{
icon: SVG.bold,
tooltip: "Bold",
action: 'toggleBold'
},
{
icon: SVG.italic,
tooltip: "Italic",
action: 'toggleItalic'
},
{ type: 'divider' },
{
icon: SVG.fontSize,
tooltip: "Font Size",
action: 'openFontSizeDialog'
},
{
icon: SVG.font,
tooltip: "Font Type",
action: 'openFontDialog'
},
{ type: 'divider' },
{
icon: SVG.color,
tooltip: "Text Color",
action: 'openColorDialog'
},
{
icon: SVG.shadow,
tooltip: "Shadow",
action: 'openShadowDialog'
},
{
icon: SVG.outline,
tooltip: "Outline",
action: 'openOutlineDialog'
},
{ type: 'divider' },
{
icon: SVG.rotate,
tooltip: "Rotate",
action: 'openRotationDialog'
},
{
icon: SVG.reflectX,
tooltip: "Reflect Horizontally",
action: 'reflectX'
},
{
icon: SVG.reflectY,
tooltip: "Reflect Vertically",
action: 'reflectY'
},
{ type: 'divider' },
{
icon: SVG.frame,
tooltip: "Frame Settings",
action: 'openFrameSizeDialog'
}
];
export const STYLES = `
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');
.skb-textbox-dialog {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #1e1e1e;
border: 1px solid #4a9eff;
padding: 20px;
border-radius: 4px;
z-index: 10000;
min-width: 400px;
}
.skb-textbox-dialog h3 {
color: #fff;
margin: 0 0 15px 0;
font-size: 16px;
}
.skb-textbox-position-canvas {
position: relative;
width: 360px;
height: 360px;
background: #2a2a2a;
border-radius: 4px;
overflow: hidden;
margin-bottom: 15px;
}
.skb-textbox-position-canvas canvas {
position: absolute;
top: 0;
left: 0;
}
.skb-textbox-handle {
position: absolute;
background: rgba(74, 158, 255, 0.2);
border: 2px solid #4a9eff;
border-radius: 4px;
transform: translate(-50%, -50%);
cursor: move;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
width: 40px;
height: 40px;
}
.skb-textbox-handle-center {
width: 16px;
height: 16px;
background: #4a9eff;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.skb-textbox-inputs {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.skb-textbox-inputs > div {
flex: 1;
}
.skb-textbox-inputs label {
color: #ccc;
display: block;
margin-bottom: 5px;
}
.skb-textbox-inputs input {
width: 100%;
background: #2a2a2a;
color: #fff;
border: 1px solid #666;
padding: 4px;
border-radius: 3px;
}
.skb-textbox-buttons {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.skb-textbox-buttons button {
flex: 1;
padding: 8px;
background: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
.skb-textbox-buttons button:hover {
background: #444;
}
.skb-textbox-button-group {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #333;
}
.skb-textbox-button-group button {
padding: 6px 15px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: opacity 0.2s;
}
.skb-textbox-button-group button:hover {
opacity: 0.8;
}
.skb-textbox-button-group button.secondary {
background: #333;
color: #fff;
}
.skb-textbox-button-group button.primary {
background: #4a9eff;
color: #fff;
}
.skb-textbox-font-preview {
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s;
}
.skb-textbox-font-preview:hover {
background: #2a2a2a;
}
.skb-textbox-font-preview.selected {
background: #4a9eff;
}
.skb-textbox-font-preview .skb-textbox-font-name {
color: #fff;
}
.skb-textbox-font-preview .skb-textbox-font-sample {
color: #ccc;
}
.skb-textbox-font-preview.selected .skb-textbox-font-name,
.skb-textbox-font-preview.selected .skb-textbox-font-sample {
color: #fff;
}
.skb-textbox-font-list {
max-height: 300px;
overflow-y: auto;
margin: 10px 0;
padding-right: 10px;
}
.skb-textbox-font-list::-webkit-scrollbar {
width: 8px;
}
.skb-textbox-font-list::-webkit-scrollbar-track {
background: #1e1e1e;
border-radius: 4px;
}
.skb-textbox-font-list::-webkit-scrollbar-thumb {
background: #4a9eff;
border-radius: 4px;
}
.skb-textbox-font-family-roboto { font-family: 'Roboto', sans-serif; }
.skb-textbox-font-family-montserrat { font-family: 'Montserrat', sans-serif; }
.skb-textbox-font-family-opensans { font-family: 'Open Sans', sans-serif; }
.skb-textbox-font-family-lato { font-family: 'Lato', sans-serif; }
.skb-textbox-font-family-poppins { font-family: 'Poppins', sans-serif; }
.skb-textbox-font-family-sourcesanspro { font-family: 'Source Sans Pro', sans-serif; }
.skb-textbox-font-family-ubuntu { font-family: 'Ubuntu', sans-serif; }
.skb-textbox-font-family-playfair { font-family: 'Playfair Display', serif; }
/* Styles moved from openMoveDialog */
.skb-textbox-dialog .skb-textbox-position-canvas {
position: relative;
width: 360px;
height: 360px;
margin: 0 auto 15px auto;
background: #181818;
border: 1px solid #333;
}
.skb-textbox-dialog canvas#positionCanvas {
display: block;
}
.skb-textbox-dialog .skb-textbox-handle {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #4a9eff;
border-radius: 50%;
background: rgba(74, 158, 255, 0.3);
cursor: grab;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.skb-textbox-dialog .skb-textbox-handle:active {
cursor: grabbing;
}
.skb-textbox-dialog .skb-textbox-handle-center {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.skb-textbox-dialog .skb-textbox-inputs {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 15px;
}
.skb-textbox-dialog .skb-textbox-inputs div {
flex: 1;
}
.skb-textbox-dialog .skb-textbox-inputs label {
display: block;
color: #ccc;
font-size: 12px;
margin-bottom: 4px;
}
.skb-textbox-dialog .skb-textbox-inputs input {
width: 100%;
box-sizing: border-box;
background: #2a2a2a;
color: #fff;
border: 1px solid #666;
padding: 6px;
border-radius: 3px;
text-align: center;
}
/* Hide number input spinners */
.skb-textbox-dialog .skb-textbox-inputs input::-webkit-outer-spin-button,
.skb-textbox-dialog .skb-textbox-inputs input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.skb-textbox-dialog .skb-textbox-inputs input[type=number] {
-moz-appearance: textfield;
}
.skb-textbox-dialog .skb-textbox-buttons {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
.skb-textbox-dialog .skb-textbox-buttons button {
padding: 6px 15px;
background: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.skb-textbox-dialog .skb-textbox-buttons button:hover {
background: #444;
}
.skb-textbox-dialog .skb-textbox-button-group {
display: flex;
justify-content: flex-end;
gap: 10px;
}
`;