robin/ptouch-api
1
0
Fork 0
mirror of https://codeberg.org/icewind/ptouch-api.git synced 2026-06-03 10:54:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

position base

Browse source
This commit is contained in:
Robin Appelman 2025-10-06 21:54:21 +02:00
commit ddaa60d214
1 changed files with 28 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

31
web/label.js
View file

@ -89,6 +89,15 @@ const addElementControls = (row) => {
tag: 'td', tag: 'td',
classes: ['pos'], classes: ['pos'],
children: ['Position', { children: ['Position', {
tag: 'select',
events: {change: render},
classes: ['pos_base'],
children: [
{tag: 'option', props: {value: 'left'}, children: ['Left']},
{tag: 'option', props: {value: 'center'}, children: ['Center']},
{tag: 'option', props: {value: 'right'}, children: ['Right']},
],
}, {
tag: 'input', tag: 'input',
events: {input: render}, events: {input: render},
classes: ['pos_x'], classes: ['pos_x'],
@ -135,7 +144,6 @@ const addTextElement = () => {
events: {input: render}, events: {input: render},
props: { props: {
type: 'text', type: 'text',
focus: 'focused',
} }
}] }]
}] }]
@ -143,6 +151,7 @@ const addTextElement = () => {
addElementControls(row); addElementControls(row);
elementsTableBody.appendChild(row); elementsTableBody.appendChild(row);
row.querySelector('input').focus();
}; };
const loadImage = (event) => { const loadImage = (event) => {
@ -213,6 +222,7 @@ const getElements = () => {
size: parseInt(row.querySelector('.size input').value, 10), size: parseInt(row.querySelector('.size input').value, 10),
x: parseInt(row.querySelector('.pos_x').value, 10), x: parseInt(row.querySelector('.pos_x').value, 10),
y: parseInt(row.querySelector('.pos_y').value, 10), y: parseInt(row.querySelector('.pos_y').value, 10),
base: row.querySelector('.pos_base').value,
}); });
} else if (row.dataset.type === 'image') { } else if (row.dataset.type === 'image') {
elements.push({ elements.push({
@ -221,6 +231,7 @@ const getElements = () => {
size: parseInt(row.querySelector('.size input').value, 10), size: parseInt(row.querySelector('.size input').value, 10),
x: parseInt(row.querySelector('.pos_x').value, 10), x: parseInt(row.querySelector('.pos_x').value, 10),
y: parseInt(row.querySelector('.pos_y').value, 10), y: parseInt(row.querySelector('.pos_y').value, 10),
base: row.querySelector('.pos_base').value,
}); });
} }
} }
@ -242,18 +253,32 @@ const render = () => {
renderCtx.font = `${element.size}px serif`; renderCtx.font = `${element.size}px serif`;
let textSize = renderCtx.measureText(element.text); let textSize = renderCtx.measureText(element.text);
let textHeight = textSize.fontBoundingBoxAscent - textSize.emHeightDescent; let textHeight = textSize.fontBoundingBoxAscent - textSize.emHeightDescent;
renderCtx.fillText(element.text, element.x, element.y + textHeight); renderCtx.fillText(element.text, calcX(element.base, element.x, textSize.width), element.y + textHeight);
} else if (element.type === 'image' && element.image.naturalWidth > 0) { } else if (element.type === 'image' && element.image.naturalWidth > 0) {
renderCtx.filter = 'grayscale() saturate(0%) brightness(70%) contrast(1000%)'; renderCtx.filter = 'grayscale() saturate(0%) brightness(70%) contrast(1000%)';
if (textColor === 'white') { if (textColor === 'white') {
renderCtx.filter = renderCtx.filter + ' invert()'; renderCtx.filter = renderCtx.filter + ' invert()';
} }
let ratio = element.image.naturalWidth / element.image.naturalHeight; let ratio = element.image.naturalWidth / element.image.naturalHeight;
renderCtx.drawImage(element.image, element.x, element.y, element.size * ratio, element.size); let width = element.size * ratio;
renderCtx.drawImage(element.image, calcX(element.base, element.x, width), element.y, width, element.size);
} }
} }
} }
const calcX = (base, x, width) => {
let imageWidth = preview.width;
console.log(base, x, width, imageWidth);
switch (base) {
case 'left':
return x;
case 'right':
return (imageWidth - width) + x;
case 'center':
return ((imageWidth - width) / 2) + x;
}
}
const resize = () => { const resize = () => {
let width = parseInt(widthInput.value, 10); let width = parseInt(widthInput.value, 10);
const pxPerMM = preview.height / tapeWidthMM; const pxPerMM = preview.height / tapeWidthMM;