928 lines
49 KiB
JavaScript
928 lines
49 KiB
JavaScript
|
function updateVariantUi() {
|
|||
|
|
[...ui.fanVariants.querySelectorAll('[data-variant]')].forEach( (button) => {
|
|||
|
|
var active = button.dataset.variant === state.fanVariant;
|
|||
|
|
button.classList.toggle('active', active);
|
|||
|
|
button.setAttribute('aria-pressed', String(active));
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
[...ui.bladeCountOptions.querySelectorAll('[data-blade-count]')].forEach( (button) => {
|
|||
|
|
var active = Number(button.dataset.bladeCount) === state.bladeCount;
|
|||
|
|
button.classList.toggle('active', active);
|
|||
|
|
button.setAttribute('aria-checked', String(active));
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
var spread = (state.bladeCount - 1) * BLADE_ANGLE_STEP;
|
|||
|
|
var bounds = modelBounds();
|
|||
|
|
ui.variantSeal.textContent = FAN.seal;
|
|||
|
|
ui.modelTag.textContent = `实时预览 · ${FAN.name} ${FAN.angles.length} 骨`;
|
|||
|
|
ui.metricSize.textContent = `${Math.round(bounds.xMax - bounds.xMin)} × ${Math.round(bounds.yMax - bounds.yMin)}`;
|
|||
|
|
ui.bladeCountSummary.textContent = `${state.bladeCount}片 · 展开${spread}°`;
|
|||
|
|
ui.bladeOrderHint.textContent = `1 右侧 · ${state.bladeCount} 左侧`;
|
|||
|
|
ui.frameToggleLabel.textContent = `包含「${FAN.name}」${state.bladeCount}片骨架（不含转轴），并将浮雕焊接到扇叶`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadFrameVariant(key) {
|
|||
|
|
var variant = FAN_VARIANTS[key];
|
|||
|
|
if (!variant)
|
|||
|
|
throw new Error('未找到所选扇形');
|
|||
|
|
FAN = variant;
|
|||
|
|
FAN.angles = anglesForBladeCount(state.bladeCount);
|
|||
|
|
state.fanVariant = key;
|
|||
|
|
state.maskLookup = null;
|
|||
|
|
state.frameWelds = null;
|
|||
|
|
updateActiveBounds();
|
|||
|
|
var templateAssets = FRAME_BLADE_STL_BASE64[key];
|
|||
|
|
state.frameTemplates = {
|
|||
|
|
left: parseBinarySTL(templateAssets.left),
|
|||
|
|
inner: parseBinarySTL(templateAssets.inner),
|
|||
|
|
right: parseBinarySTL(templateAssets.right)
|
|||
|
|
};
|
|||
|
|
rebuildFrameFromTemplates();
|
|||
|
|
updateVariantUi();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setFanVariant(key) {
|
|||
|
|
if (key === state.fanVariant || !FAN_VARIANTS[key])
|
|||
|
|
return;
|
|||
|
|
hideEditorPointerPreviews();
|
|||
|
|
showBusy(true, '正在切换扇形骨架');
|
|||
|
|
window.setTimeout( () => {
|
|||
|
|
try {
|
|||
|
|
loadFrameVariant(key);
|
|||
|
|
updatePrecisionGuide();
|
|||
|
|
drawSource();
|
|||
|
|
buildRelief();
|
|||
|
|
ui.status.textContent = `已切换为${FAN.name}（${FAN.shape}），图片和编辑内容已保留。`;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
ui.status.textContent = `扇形切换失败：${error.message}`;
|
|||
|
|
} finally {
|
|||
|
|
showBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
, 20);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderBladeButtons() {
|
|||
|
|
ui.bladeGrid.replaceChildren();
|
|||
|
|
FAN.angles.forEach( (angle, index) => {
|
|||
|
|
var button = document.createElement('button');
|
|||
|
|
button.type = 'button';
|
|||
|
|
button.className = 'blade-button';
|
|||
|
|
button.textContent = String(index + 1);
|
|||
|
|
button.addEventListener('click', () => selectBlade(index));
|
|||
|
|
ui.bladeGrid.appendChild(button);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
updateBladeButtons();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setBladeCount(nextCount) {
|
|||
|
|
var count = Number(nextCount);
|
|||
|
|
if (!SUPPORTED_BLADE_COUNTS.includes(count) || count === state.bladeCount)
|
|||
|
|
return;
|
|||
|
|
hideEditorPointerPreviews();
|
|||
|
|
syncActiveConfig();
|
|||
|
|
var previousAngle = FAN.angles[state.selectedBlade] ?? 0;
|
|||
|
|
showBusy(true, `正在调整为 ${count} 片扇叶`);
|
|||
|
|
window.setTimeout( () => {
|
|||
|
|
try {
|
|||
|
|
state.bladeCount = count;
|
|||
|
|
FAN.angles = anglesForBladeCount(count);
|
|||
|
|
syncActiveBladeConfigs();
|
|||
|
|
state.selectedBlade = FAN.angles.reduce( (best, angle, index) => Math.abs(angle - previousAngle) < Math.abs(FAN.angles[best] - previousAngle) ? index : best, 0);
|
|||
|
|
state.maskLookup = null;
|
|||
|
|
updateActiveBounds();
|
|||
|
|
if (state.frameTemplates)
|
|||
|
|
rebuildFrameFromTemplates();
|
|||
|
|
renderBladeButtons();
|
|||
|
|
updateVariantUi();
|
|||
|
|
updatePrecisionGuide();
|
|||
|
|
applyConfigToControls();
|
|||
|
|
drawSource();
|
|||
|
|
buildRelief();
|
|||
|
|
update3MFStructureHint();
|
|||
|
|
ui.status.textContent = `已切换为 ${count} 片扇叶 · 展开 ${(count - 1) * BLADE_ANGLE_STEP}° · 图片和编辑内容已按中心位置保留。`;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
ui.status.textContent = `扇叶数量切换失败：${error.message}`;
|
|||
|
|
} finally {
|
|||
|
|
showBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
, 20);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function syncActiveConfig() {
|
|||
|
|
var config = activeConfig();
|
|||
|
|
config.scale = Number(ui.imageScale.value);
|
|||
|
|
config.offsetX = Number(ui.offsetX.value);
|
|||
|
|
config.offsetY = Number(ui.offsetY.value);
|
|||
|
|
config.rotation = Number(ui.imageRotation.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderConfig(config, forceEditorLayer=false) {
|
|||
|
|
var canvas = config.canvas;
|
|||
|
|
var ctx = canvas.getContext('2d', {
|
|||
|
|
willReadFrequently: true
|
|||
|
|
});
|
|||
|
|
ctx.save();
|
|||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|||
|
|
ctx.fillStyle = '#fff';
|
|||
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|||
|
|
|
|||
|
|
if (config.image && config.image.complete) {
|
|||
|
|
var img = config.image;
|
|||
|
|
var rotation = ((config.rotation % 360) + 360) % 360;
|
|||
|
|
var radians = deg(rotation);
|
|||
|
|
var iw = Math.abs(img.naturalWidth * Math.cos(radians)) + Math.abs(img.naturalHeight * Math.sin(radians));
|
|||
|
|
var ih = Math.abs(img.naturalWidth * Math.sin(radians)) + Math.abs(img.naturalHeight * Math.cos(radians));
|
|||
|
|
var baseScale = config.fit === 'cover' ? Math.max(canvas.width / iw, canvas.height / ih) : Math.min(canvas.width / iw, canvas.height / ih);
|
|||
|
|
var scale = baseScale * config.scale / 100;
|
|||
|
|
var ox = config.offsetX / 100 * canvas.width;
|
|||
|
|
var oy = config.offsetY / 100 * canvas.height;
|
|||
|
|
ctx.translate(canvas.width / 2 + ox, canvas.height / 2 + oy);
|
|||
|
|
ctx.rotate(deg(rotation));
|
|||
|
|
ctx.filter = `blur(${Number(ui.blur.value)}px)`;
|
|||
|
|
ctx.drawImage(img, -img.naturalWidth * scale / 2, -img.naturalHeight * scale / 2, img.naturalWidth * scale, img.naturalHeight * scale);
|
|||
|
|
}
|
|||
|
|
ctx.restore();
|
|||
|
|
if (config.editDirty || forceEditorLayer)
|
|||
|
|
ctx.drawImage(config.editCanvas, 0, 0, canvas.width, canvas.height);
|
|||
|
|
config.pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function update3MFStructureHint() {
|
|||
|
|
var structure = ui.threeMFStructure.value;
|
|||
|
|
var partCount = FAN.angles.length + (ui.includeFrame.checked ? 1 : 0);
|
|||
|
|
if (structure === 'parts') {
|
|||
|
|
ui.threeMFHint.textContent = `1 个总成内含 ${partCount} 个命名零件，相对位置锁定`;
|
|||
|
|
} else if (structure === 'objects') {
|
|||
|
|
ui.threeMFHint.textContent = `${partCount} 个独立对象，可在切片软件中逐件选择`;
|
|||
|
|
} else {
|
|||
|
|
ui.threeMFHint.textContent = '焊接为 1 个完整网格，适合直接切片';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updatePrecisionGuide() {
|
|||
|
|
var detail = DETAIL[ui.detail.value];
|
|||
|
|
var maxHalf = Math.max(...FAN.profile.map( (point) => point[1])) - currentReliefMargin();
|
|||
|
|
var radialStep = (FAN.rMax - FAN.rMin) / (detail.radial - 1);
|
|||
|
|
var acrossStep = 2 * maxHalf / (detail.across - 1);
|
|||
|
|
ui.precisionHint.textContent = `采样间距约 ${radialStep.toFixed(2)} × ${acrossStep.toFixed(2)} mm`;
|
|||
|
|
ui.precisionGrid.textContent = `${detail.radial} × ${detail.across} / 片`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showBusy(show, label='正在重建浮雕') {
|
|||
|
|
ui.busy.classList.toggle('show', show);
|
|||
|
|
ui.exportBtn.disabled = show;
|
|||
|
|
ui.export3mfBtn.disabled = show;
|
|||
|
|
if (show)
|
|||
|
|
ui.busyText.textContent = label;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scheduleRebuild({redrawImage=false}={}) {
|
|||
|
|
window.clearTimeout(state.rebuildTimer);
|
|||
|
|
if (redrawImage) {
|
|||
|
|
try {
|
|||
|
|
drawSource();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
showBusy(true);
|
|||
|
|
}
|
|||
|
|
state.rebuildTimer = window.setTimeout( () => {
|
|||
|
|
try {
|
|||
|
|
if (redrawImage)
|
|||
|
|
showBusy(true);
|
|||
|
|
buildRelief();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
ui.status.textContent = `生成失败：${error.message}`;
|
|||
|
|
} finally {
|
|||
|
|
showBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
, 90);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateOutput(input, suffix='') {
|
|||
|
|
var output = document.querySelector(`output[for="${input.id}"]`);
|
|||
|
|
if (output)
|
|||
|
|
output.textContent = `${input.value}${suffix}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setImageControl(input, value) {
|
|||
|
|
var min = Number(input.min);
|
|||
|
|
var max = Number(input.max);
|
|||
|
|
input.value = String(clamp(value, min, max));
|
|||
|
|
updateOutput(input, '%');
|
|||
|
|
updateFloatingTransformStatus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function normalizeRotation(value) {
|
|||
|
|
var normalized = ((value + 180) % 360 + 360) % 360 - 180;
|
|||
|
|
return normalized === -180 && value > 0 ? 180 : normalized;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setRotationControl(value) {
|
|||
|
|
var rotation = normalizeRotation(value);
|
|||
|
|
ui.imageRotation.value = String(rotation);
|
|||
|
|
activeConfig().rotation = rotation;
|
|||
|
|
updateOutput(ui.imageRotation, '°');
|
|||
|
|
updateFloatingTransformStatus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resetImageTransform() {
|
|||
|
|
var config = activeConfig();
|
|||
|
|
config.rotation = 0;
|
|||
|
|
config.scale = 100;
|
|||
|
|
config.offsetX = 0;
|
|||
|
|
config.offsetY = 0;
|
|||
|
|
setImageControl(ui.imageScale, 100);
|
|||
|
|
setImageControl(ui.offsetX, 0);
|
|||
|
|
setImageControl(ui.offsetY, 0);
|
|||
|
|
setRotationControl(0);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function bindRange(input, suffix, redrawImage) {
|
|||
|
|
input.addEventListener('input', () => {
|
|||
|
|
updateOutput(input, suffix);
|
|||
|
|
if (redrawImage)
|
|||
|
|
syncActiveConfig();
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setFit(mode) {
|
|||
|
|
activeConfig().fit = mode;
|
|||
|
|
ui.coverBtn.classList.toggle('active', mode === 'cover');
|
|||
|
|
ui.containBtn.classList.toggle('active', mode === 'contain');
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateBladeButtons() {
|
|||
|
|
[...ui.bladeGrid.children].forEach( (button, index) => {
|
|||
|
|
button.classList.toggle('active', index === state.selectedBlade);
|
|||
|
|
button.classList.toggle('assigned', Boolean(state.bladeConfigs[index].image));
|
|||
|
|
var name = state.bladeConfigs[index].name || '尚未设置图片';
|
|||
|
|
button.title = `叶片 ${index + 1}：${name}`;
|
|||
|
|
button.setAttribute('aria-pressed', String(index === state.selectedBlade));
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateImageUi() {
|
|||
|
|
if (state.imageMode === 'whole') {
|
|||
|
|
var config = state.globalConfig;
|
|||
|
|
ui.coverBtn.textContent = '铺满扇面';
|
|||
|
|
ui.containBtn.textContent = '完整图片';
|
|||
|
|
ui.dropTitle.textContent = '选择或拖入一张图片';
|
|||
|
|
ui.dropHint.textContent = '页面全程离线，图片不会上传';
|
|||
|
|
if (config.image && !config.isDemo) {
|
|||
|
|
ui.fileChip.textContent = `${config.name} · ${config.image.naturalWidth} × ${config.image.naturalHeight}px`;
|
|||
|
|
ui.fileChip.classList.add('show');
|
|||
|
|
ui.demoLabel.style.display = 'none';
|
|||
|
|
} else {
|
|||
|
|
ui.fileChip.classList.remove('show');
|
|||
|
|
ui.demoLabel.textContent = '内置示例';
|
|||
|
|
ui.demoLabel.style.display = '';
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var config = activeConfig();
|
|||
|
|
var assigned = state.bladeConfigs.filter( (item) => item.image).length;
|
|||
|
|
ui.coverBtn.textContent = '铺满叶片';
|
|||
|
|
ui.containBtn.textContent = '完整图片';
|
|||
|
|
ui.dropTitle.textContent = `为第 ${state.selectedBlade + 1} 片选择图片`;
|
|||
|
|
ui.dropHint.textContent = '可多选图片，将按叶片顺序自动填入';
|
|||
|
|
ui.fileChip.textContent = config.image ? `叶片 ${state.selectedBlade + 1} · ${config.name} · ${config.image.naturalWidth} × ${config.image.naturalHeight}px` : `叶片 ${state.selectedBlade + 1} 尚未设置 · 已完成 ${assigned} / ${FAN.angles.length} 片`;
|
|||
|
|
ui.fileChip.classList.add('show');
|
|||
|
|
ui.demoLabel.textContent = `叶片 ${state.selectedBlade + 1}`;
|
|||
|
|
ui.demoLabel.style.display = '';
|
|||
|
|
}
|
|||
|
|
updateBladeButtons();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyConfigToControls() {
|
|||
|
|
var config = activeConfig();
|
|||
|
|
setImageControl(ui.imageScale, config.scale);
|
|||
|
|
setImageControl(ui.offsetX, config.offsetX);
|
|||
|
|
setImageControl(ui.offsetY, config.offsetY);
|
|||
|
|
setRotationControl(config.rotation);
|
|||
|
|
ui.coverBtn.classList.toggle('active', config.fit === 'cover');
|
|||
|
|
ui.containBtn.classList.toggle('active', config.fit === 'contain');
|
|||
|
|
updateImageUi();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectBlade(index) {
|
|||
|
|
hideEditorPointerPreviews();
|
|||
|
|
syncActiveConfig();
|
|||
|
|
state.selectedBlade = clamp(index, 0, FAN.angles.length - 1);
|
|||
|
|
applyConfigToControls();
|
|||
|
|
drawSource();
|
|||
|
|
updateSelectionUi();
|
|||
|
|
ui.status.textContent = `正在编辑第 ${state.selectedBlade + 1} 片叶片，可单独缩放、移动和旋转。`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setImageMode(mode) {
|
|||
|
|
if (mode === state.imageMode)
|
|||
|
|
return;
|
|||
|
|
hideEditorPointerPreviews();
|
|||
|
|
syncActiveConfig();
|
|||
|
|
state.imageMode = mode;
|
|||
|
|
ui.wholeModeBtn.classList.toggle('active', mode === 'whole');
|
|||
|
|
ui.bladeModeBtn.classList.toggle('active', mode === 'blade');
|
|||
|
|
ui.bladePanel.hidden = mode === 'whole';
|
|||
|
|
ui.fileInput.multiple = mode === 'blade';
|
|||
|
|
applyConfigToControls();
|
|||
|
|
updateSelectionUi();
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function readImageFile(file) {
|
|||
|
|
return new Promise( (resolve, reject) => {
|
|||
|
|
var reader = new FileReader();
|
|||
|
|
reader.onload = () => {
|
|||
|
|
var img = new Image();
|
|||
|
|
img.onload = () => resolve({
|
|||
|
|
file,
|
|||
|
|
img
|
|||
|
|
});
|
|||
|
|
img.onerror = () => reject(new Error(`${file.name} 无法读取`));
|
|||
|
|
img.src = reader.result;
|
|||
|
|
}
|
|||
|
|
;
|
|||
|
|
reader.onerror = () => reject(new Error(`${file.name} 无法读取`));
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadFiles(fileList) {
|
|||
|
|
var files = [...(fileList || [])].filter( (file) => file.type.startsWith('image/'));
|
|||
|
|
if (!files.length) {
|
|||
|
|
ui.status.textContent = '请选择 JPG、PNG 或 WEBP 图片。';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
showBusy(true);
|
|||
|
|
if (state.imageMode === 'whole') {
|
|||
|
|
var loaded = await readImageFile(files[0]);
|
|||
|
|
state.globalConfig.image = loaded.img;
|
|||
|
|
state.globalConfig.name = loaded.file.name;
|
|||
|
|
state.globalConfig.isDemo = false;
|
|||
|
|
ui.status.textContent = '整扇图片已载入，正在生成浮雕。';
|
|||
|
|
} else {
|
|||
|
|
var available = FAN.angles.length - state.selectedBlade;
|
|||
|
|
var loaded = await Promise.all(files.slice(0, available).map(readImageFile));
|
|||
|
|
loaded.forEach( ({file, img}, offset) => {
|
|||
|
|
var config = state.bladeConfigs[state.selectedBlade + offset];
|
|||
|
|
config.image = img;
|
|||
|
|
config.name = file.name;
|
|||
|
|
config.isDemo = false;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.status.textContent = `已从第 ${state.selectedBlade + 1} 片开始载入 ${loaded.length} 张图片。`;
|
|||
|
|
}
|
|||
|
|
ui.fileInput.value = '';
|
|||
|
|
applyConfigToControls();
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
ui.status.textContent = `图片载入失败：${error.message}`;
|
|||
|
|
showBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resetAll() {
|
|||
|
|
[state.globalConfig, ...state.bladeConfigSlots].forEach( (config) => {
|
|||
|
|
config.fit = 'cover';
|
|||
|
|
config.rotation = 0;
|
|||
|
|
config.scale = 100;
|
|||
|
|
config.offsetX = 0;
|
|||
|
|
config.offsetY = 0;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
var values = {
|
|||
|
|
imageScale: 100,
|
|||
|
|
offsetX: 0,
|
|||
|
|
offsetY: 0,
|
|||
|
|
minThickness: .60,
|
|||
|
|
maxThickness: 2.20,
|
|||
|
|
reliefMargin: 0,
|
|||
|
|
contrast: 135,
|
|||
|
|
reliefGamma: .95,
|
|||
|
|
blur: .5,
|
|||
|
|
detail: 'ultra'
|
|||
|
|
};
|
|||
|
|
Object.entries(values).forEach( ([key,value]) => {
|
|||
|
|
ui[key].value = value;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.invert.checked = false;
|
|||
|
|
ui.includeFrame.checked = true;
|
|||
|
|
ui.threeMFStructure.value = 'merged';
|
|||
|
|
applyConfigToControls();
|
|||
|
|
updateOutput(ui.imageScale, '%');
|
|||
|
|
updateOutput(ui.offsetX, '%');
|
|||
|
|
updateOutput(ui.offsetY, '%');
|
|||
|
|
updateOutput(ui.minThickness);
|
|||
|
|
updateOutput(ui.maxThickness);
|
|||
|
|
updateOutput(ui.contrast, '%');
|
|||
|
|
updateOutput(ui.reliefMargin, ' mm');
|
|||
|
|
updateOutput(ui.reliefGamma);
|
|||
|
|
updateOutput(ui.blur, ' px');
|
|||
|
|
updatePrecisionGuide();
|
|||
|
|
update3MFStructureHint();
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function bindEvents() {
|
|||
|
|
ui.fanVariants.addEventListener('click', (event) => {
|
|||
|
|
var button = event.target.closest('[data-variant]');
|
|||
|
|
if (button)
|
|||
|
|
setFanVariant(button.dataset.variant);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.bladeCountOptions.addEventListener('click', (event) => {
|
|||
|
|
var button = event.target.closest('[data-blade-count]');
|
|||
|
|
if (button)
|
|||
|
|
setBladeCount(button.dataset.bladeCount);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.wholeModeBtn.addEventListener('click', () => setImageMode('whole'));
|
|||
|
|
ui.bladeModeBtn.addEventListener('click', () => setImageMode('blade'));
|
|||
|
|
ui.fileInput.addEventListener('change', () => loadFiles(ui.fileInput.files));
|
|||
|
|
['dragenter', 'dragover'].forEach( (name) => ui.dropzone.addEventListener(name, (event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
ui.dropzone.classList.add('is-dragging');
|
|||
|
|
}
|
|||
|
|
));
|
|||
|
|
['dragleave', 'drop'].forEach( (name) => ui.dropzone.addEventListener(name, (event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
ui.dropzone.classList.remove('is-dragging');
|
|||
|
|
}
|
|||
|
|
));
|
|||
|
|
ui.dropzone.addEventListener('drop', (event) => loadFiles(event.dataTransfer.files));
|
|||
|
|
ui.coverBtn.addEventListener('click', () => setFit('cover'));
|
|||
|
|
ui.containBtn.addEventListener('click', () => setFit('contain'));
|
|||
|
|
ui.rotateLeft.addEventListener('click', () => {
|
|||
|
|
setRotationControl(Number(ui.imageRotation.value) - 90);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.rotateRight.addEventListener('click', () => {
|
|||
|
|
setRotationControl(Number(ui.imageRotation.value) + 90);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.zoomOut.addEventListener('click', () => {
|
|||
|
|
setImageControl(ui.imageScale, Number(ui.imageScale.value) - 10);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.zoomIn.addEventListener('click', () => {
|
|||
|
|
setImageControl(ui.imageScale, Number(ui.imageScale.value) + 10);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.resetImage.addEventListener('click', resetImageTransform);
|
|||
|
|
|
|||
|
|
document.querySelectorAll('[data-editor-tool]').forEach( (button) => {
|
|||
|
|
button.addEventListener('click', () => setEditorTool(button.dataset.editorTool));
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
document.querySelectorAll('[data-shape-ratio]').forEach( (button) => {
|
|||
|
|
button.addEventListener('click', () => setShapeRatioMode(button.dataset.shapeRatio));
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.undoEdit.addEventListener('click', undoEditorChange);
|
|||
|
|
ui.clearEdit.addEventListener('click', clearEditorChanges);
|
|||
|
|
ui.deleteSelected.addEventListener('click', deleteSelectedObject);
|
|||
|
|
ui.brushSize.addEventListener('input', () => {
|
|||
|
|
updateOutput(ui.brushSize, ' px');
|
|||
|
|
ui.floatBrushSize.value = ui.brushSize.value;
|
|||
|
|
ui.floatBrushSizeValue.textContent = ui.brushSize.value;
|
|||
|
|
refreshBrushCursorSize();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.textSize.addEventListener('input', () => {
|
|||
|
|
updateOutput(ui.textSize, ' px');
|
|||
|
|
ui.floatTextSize.value = ui.textSize.value;
|
|||
|
|
ui.floatTextSizeValue.textContent = ui.textSize.value;
|
|||
|
|
applyTextControlsToSelected();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.textValue.addEventListener('input', () => {
|
|||
|
|
ui.floatTextValue.value = ui.textValue.value;
|
|||
|
|
applyTextControlsToSelected();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.textFontChips.querySelectorAll('[data-text-font]').forEach( (button) => {
|
|||
|
|
button.addEventListener('click', () => setTextFont(button.dataset.textFont));
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.textStyle.addEventListener('change', () => setTextStyle(ui.textStyle.value));
|
|||
|
|
ui.textArc.addEventListener('input', () => setTextArc(ui.textArc.value));
|
|||
|
|
ui.polygonSides.addEventListener('input', () => {
|
|||
|
|
updateOutput(ui.polygonSides, ' 边');
|
|||
|
|
ui.floatPolygonSides.value = ui.polygonSides.value;
|
|||
|
|
ui.floatPolygonSidesValue.textContent = ui.polygonSides.value;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.splineTension.addEventListener('input', () => {
|
|||
|
|
updateOutput(ui.splineTension, '%');
|
|||
|
|
ui.floatSplineTension.value = ui.splineTension.value;
|
|||
|
|
ui.floatSplineTensionValue.textContent = `${ui.splineTension.value}%`;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.editorColor.addEventListener('input', () => {
|
|||
|
|
ui.floatEditorColor.value = ui.editorColor.value;
|
|||
|
|
refreshBrushCursorSize();
|
|||
|
|
applyTextControlsToSelected();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatBrushSize.addEventListener('input', () => {
|
|||
|
|
ui.brushSize.value = ui.floatBrushSize.value;
|
|||
|
|
ui.floatBrushSizeValue.textContent = ui.floatBrushSize.value;
|
|||
|
|
updateOutput(ui.brushSize, ' px');
|
|||
|
|
refreshBrushCursorSize();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatTextValue.addEventListener('input', () => {
|
|||
|
|
ui.textValue.value = ui.floatTextValue.value;
|
|||
|
|
applyTextControlsToSelected();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatTextFont.addEventListener('change', () => setTextFont(ui.floatTextFont.value));
|
|||
|
|
ui.floatTextStyle.addEventListener('change', () => setTextStyle(ui.floatTextStyle.value));
|
|||
|
|
ui.floatTextSize.addEventListener('input', () => {
|
|||
|
|
ui.textSize.value = ui.floatTextSize.value;
|
|||
|
|
ui.floatTextSizeValue.textContent = ui.floatTextSize.value;
|
|||
|
|
updateOutput(ui.textSize, ' px');
|
|||
|
|
applyTextControlsToSelected();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatTextArc.addEventListener('input', () => setTextArc(ui.floatTextArc.value));
|
|||
|
|
ui.floatPolygonSides.addEventListener('input', () => {
|
|||
|
|
ui.polygonSides.value = ui.floatPolygonSides.value;
|
|||
|
|
ui.floatPolygonSidesValue.textContent = ui.floatPolygonSides.value;
|
|||
|
|
updateOutput(ui.polygonSides, ' 边');
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatSplineTension.addEventListener('input', () => {
|
|||
|
|
ui.splineTension.value = ui.floatSplineTension.value;
|
|||
|
|
ui.floatSplineTensionValue.textContent = `${ui.floatSplineTension.value}%`;
|
|||
|
|
updateOutput(ui.splineTension, '%');
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatShapeRatio.addEventListener('change', () => setShapeRatioMode(ui.floatShapeRatio.value));
|
|||
|
|
ui.floatEditorColor.addEventListener('input', () => {
|
|||
|
|
ui.editorColor.value = ui.floatEditorColor.value;
|
|||
|
|
refreshBrushCursorSize();
|
|||
|
|
applyTextControlsToSelected();
|
|||
|
|
refreshEditorPointerPreview();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatRotateLeft.addEventListener('click', () => {
|
|||
|
|
setRotationControl(Number(ui.imageRotation.value) - 90);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatRotateRight.addEventListener('click', () => {
|
|||
|
|
setRotationControl(Number(ui.imageRotation.value) + 90);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatImageRotation.addEventListener('input', () => {
|
|||
|
|
setRotationControl(Number(ui.floatImageRotation.value));
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatZoomOut.addEventListener('click', () => {
|
|||
|
|
setImageControl(ui.imageScale, Number(ui.imageScale.value) - 10);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatZoomIn.addEventListener('click', () => {
|
|||
|
|
setImageControl(ui.imageScale, Number(ui.imageScale.value) + 10);
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.floatResetImage.addEventListener('click', resetImageTransform);
|
|||
|
|
ui.floatUndoEdit.addEventListener('click', undoEditorChange);
|
|||
|
|
ui.floatDeleteSelected.addEventListener('click', deleteSelectedObject);
|
|||
|
|
ui.floatClearEdit.addEventListener('click', clearEditorChanges);
|
|||
|
|
ui.expandMask.addEventListener('click', () => setMaskExpanded(!state.maskExpanded));
|
|||
|
|
ui.maskBackdrop.addEventListener('click', () => setMaskExpanded(false));
|
|||
|
|
window.addEventListener('resize', fitExpandedMask);
|
|||
|
|
document.addEventListener('keydown', (event) => {
|
|||
|
|
if (event.key === 'Escape' && state.maskExpanded)
|
|||
|
|
setMaskExpanded(false);
|
|||
|
|
if ((event.key === 'Delete' || event.key === 'Backspace') && state.editorTool === 'select' && !/INPUT|TEXTAREA|SELECT/.test(event.target.tagName)) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
deleteSelectedObject();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
ui.maskCanvas.addEventListener('pointerdown', (event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
updateEditorPointerPreview(event);
|
|||
|
|
if (state.editorTool !== 'move') {
|
|||
|
|
var point = state.editorTool === 'text' ? pointerOnTextEditCanvas(event) : pointerOnActiveEditCanvas(event);
|
|||
|
|
if (!point) {
|
|||
|
|
ui.status.textContent = state.imageMode === 'blade' ? `请在第 ${state.selectedBlade + 1} 片叶片的高亮范围内编辑。` : '请在扇面范围内编辑。';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var config = activeConfig();
|
|||
|
|
if (state.editorTool === 'select') {
|
|||
|
|
clearEditorPreview(false);
|
|||
|
|
var object = hitTestVectorObject(config, point);
|
|||
|
|
config.selectedObjectId = object ? object.id : null;
|
|||
|
|
if (object) {
|
|||
|
|
pushEditHistory(config);
|
|||
|
|
state.editorObjectDragging = true;
|
|||
|
|
state.editorPointerId = event.pointerId;
|
|||
|
|
state.editorObjectDragStart = point;
|
|||
|
|
state.editorObjectOriginal = JSON.parse(JSON.stringify(object));
|
|||
|
|
state.editorObjectMoved = false;
|
|||
|
|
if (object.type === 'text')
|
|||
|
|
syncTextControlsFromSelected(object);
|
|||
|
|
ui.maskCanvas.setPointerCapture(event.pointerId);
|
|||
|
|
}
|
|||
|
|
setEditorTool('select');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
pushEditHistory(config);
|
|||
|
|
if (state.editorTool === 'text') {
|
|||
|
|
if (!placeEditorText(config, point))
|
|||
|
|
config.editHistory.pop();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
state.editorDrawing = true;
|
|||
|
|
state.editorPointerId = event.pointerId;
|
|||
|
|
state.editorLastPoint = point;
|
|||
|
|
if (VECTOR_SHAPE_TOOLS.includes(state.editorTool)) {
|
|||
|
|
state.editorShapeStart = point;
|
|||
|
|
state.editorShapePoints = [point];
|
|||
|
|
var preview = createShapeObject(config, state.editorTool, point, point, state.editorShapePoints);
|
|||
|
|
renderEditorPreview(config, preview);
|
|||
|
|
} else {
|
|||
|
|
paintEditorSegment(config, point, point, state.editorTool === 'eraser');
|
|||
|
|
}
|
|||
|
|
ui.maskCanvas.setPointerCapture(event.pointerId);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
state.imageDragging = true;
|
|||
|
|
state.imagePointerX = event.clientX;
|
|||
|
|
state.imagePointerY = event.clientY;
|
|||
|
|
state.imageStartX = Number(ui.offsetX.value);
|
|||
|
|
state.imageStartY = Number(ui.offsetY.value);
|
|||
|
|
ui.maskWrap.classList.add('is-adjusting');
|
|||
|
|
ui.maskCanvas.setPointerCapture(event.pointerId);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.maskCanvas.addEventListener('pointerenter', updateEditorPointerPreview);
|
|||
|
|
ui.maskCanvas.addEventListener('pointermove', (event) => {
|
|||
|
|
updateEditorPointerPreview(event);
|
|||
|
|
if (state.editorObjectDragging && event.pointerId === state.editorPointerId) {
|
|||
|
|
var point = pointerOnActiveEditCanvas(event);
|
|||
|
|
var config = activeConfig();
|
|||
|
|
var object = selectedVectorObject(config);
|
|||
|
|
if (point && object && state.editorObjectOriginal) {
|
|||
|
|
Object.keys(object).forEach( (key) => delete object[key]);
|
|||
|
|
Object.assign(object, JSON.parse(JSON.stringify(state.editorObjectOriginal)));
|
|||
|
|
var dx = point[0] - state.editorObjectDragStart[0];
|
|||
|
|
var dy = point[1] - state.editorObjectDragStart[1];
|
|||
|
|
translateVectorObject(object, dx, dy);
|
|||
|
|
state.editorObjectMoved = Math.hypot(dx, dy) > .5;
|
|||
|
|
refreshCommittedEditor(config, true);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (state.editorDrawing && event.pointerId === state.editorPointerId) {
|
|||
|
|
var point = pointerOnActiveEditCanvas(event);
|
|||
|
|
if (point) {
|
|||
|
|
var config = activeConfig();
|
|||
|
|
if (VECTOR_SHAPE_TOOLS.includes(state.editorTool)) {
|
|||
|
|
if (state.editorTool === 'spline') {
|
|||
|
|
var last = state.editorShapePoints[state.editorShapePoints.length - 1];
|
|||
|
|
if (!last || Math.hypot(point[0] - last[0], point[1] - last[1]) > 2)
|
|||
|
|
state.editorShapePoints.push(point);
|
|||
|
|
}
|
|||
|
|
var preview = createShapeObject(config, state.editorTool, state.editorShapeStart, point, state.editorShapePoints);
|
|||
|
|
renderEditorPreview(config, preview);
|
|||
|
|
} else
|
|||
|
|
paintEditorSegment(config, state.editorLastPoint || point, point, state.editorTool === 'eraser');
|
|||
|
|
state.editorLastPoint = point;
|
|||
|
|
} else
|
|||
|
|
state.editorLastPoint = null;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!state.imageDragging)
|
|||
|
|
return;
|
|||
|
|
var rect = ui.maskCanvas.getBoundingClientRect();
|
|||
|
|
var pointerDX = event.clientX - state.imagePointerX;
|
|||
|
|
var pointerDY = event.clientY - state.imagePointerY;
|
|||
|
|
var dx;
|
|||
|
|
var dy;
|
|||
|
|
if (state.imageMode === 'blade') {
|
|||
|
|
// Convert the screen drag to the selected blade's own radial/across axes.
|
|||
|
|
// Source X runs from root to tip; source Y runs from upper to lower edge.
|
|||
|
|
var bounds = modelBounds();
|
|||
|
|
var modelDX = pointerDY / rect.height * (bounds.xMax - bounds.xMin);
|
|||
|
|
var modelDY = pointerDX / rect.width * (bounds.yMax - bounds.yMin);
|
|||
|
|
var local = rotatePoint(modelDX, modelDY, -FAN.angles[state.selectedBlade]);
|
|||
|
|
var maxHalf = Math.max(...FAN.profile.map( (point) => point[1]));
|
|||
|
|
dx = -local[0] / (FAN.rMax - FAN.rMin) * 100;
|
|||
|
|
dy = -local[1] / (2 * maxHalf) * 100;
|
|||
|
|
} else {
|
|||
|
|
dx = pointerDX / rect.width * 100;
|
|||
|
|
dy = pointerDY / rect.height * 100;
|
|||
|
|
}
|
|||
|
|
setImageControl(ui.offsetX, Math.round(state.imageStartX + dx));
|
|||
|
|
setImageControl(ui.offsetY, Math.round(state.imageStartY + dy));
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
var stopImageDrag = () => {
|
|||
|
|
var config = activeConfig();
|
|||
|
|
if (state.editorObjectDragging) {
|
|||
|
|
if (!state.editorObjectMoved)
|
|||
|
|
config.editHistory.pop();
|
|||
|
|
state.editorObjectDragging = false;
|
|||
|
|
state.editorPointerId = null;
|
|||
|
|
state.editorObjectDragStart = null;
|
|||
|
|
state.editorObjectOriginal = null;
|
|||
|
|
if (state.editorObjectMoved)
|
|||
|
|
scheduleRebuild();
|
|||
|
|
state.editorObjectMoved = false;
|
|||
|
|
refreshCommittedEditor(config, true);
|
|||
|
|
}
|
|||
|
|
if (state.editorDrawing && VECTOR_SHAPE_TOOLS.includes(state.editorTool)) {
|
|||
|
|
var preview = state.editorPreview?.object;
|
|||
|
|
var start = state.editorShapeStart;
|
|||
|
|
var end = state.editorLastPoint || start;
|
|||
|
|
var valid = preview && (state.editorTool === 'spline' ? (preview.points || []).length > 2 : Math.hypot(end[0] - start[0], end[1] - start[1]) > 3);
|
|||
|
|
state.editorDrawing = false;
|
|||
|
|
state.editorPointerId = null;
|
|||
|
|
state.editorShapeStart = null;
|
|||
|
|
state.editorShapePoints = null;
|
|||
|
|
state.editorLastPoint = null;
|
|||
|
|
if (valid)
|
|||
|
|
commitVectorObject(config, JSON.parse(JSON.stringify(preview)));
|
|||
|
|
else {
|
|||
|
|
config.editHistory.pop();
|
|||
|
|
clearEditorPreview(true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
state.imageDragging = false;
|
|||
|
|
ui.maskWrap.classList.remove('is-adjusting');
|
|||
|
|
finishEditorStroke();
|
|||
|
|
}
|
|||
|
|
;
|
|||
|
|
ui.maskCanvas.addEventListener('pointerup', stopImageDrag);
|
|||
|
|
ui.maskCanvas.addEventListener('pointercancel', stopImageDrag);
|
|||
|
|
ui.maskCanvas.addEventListener('pointerleave', () => {
|
|||
|
|
if (state.editorTool === 'text')
|
|||
|
|
return;
|
|||
|
|
if (!state.editorDrawing && !state.editorObjectDragging && !state.imageDragging)
|
|||
|
|
hideEditorPointerPreviews();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.maskCanvas.addEventListener('wheel', (event) => {
|
|||
|
|
if (state.editorTool !== 'move')
|
|||
|
|
return;
|
|||
|
|
event.preventDefault();
|
|||
|
|
var factor = Math.exp(-event.deltaY * .0015);
|
|||
|
|
setImageControl(ui.imageScale, Math.round(Number(ui.imageScale.value) * factor));
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
, {
|
|||
|
|
passive: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
bindRange(ui.imageScale, '%', true);
|
|||
|
|
bindRange(ui.offsetX, '%', true);
|
|||
|
|
bindRange(ui.offsetY, '%', true);
|
|||
|
|
bindRange(ui.imageRotation, '°', true);
|
|||
|
|
bindRange(ui.blur, ' px', true);
|
|||
|
|
bindRange(ui.contrast, '%', false);
|
|||
|
|
bindRange(ui.minThickness, '', false);
|
|||
|
|
bindRange(ui.maxThickness, '', false);
|
|||
|
|
bindRange(ui.reliefGamma, '', false);
|
|||
|
|
ui.reliefMargin.addEventListener('input', () => {
|
|||
|
|
updateOutput(ui.reliefMargin, ' mm');
|
|||
|
|
updatePrecisionGuide();
|
|||
|
|
scheduleRebuild({
|
|||
|
|
redrawImage: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.invert.addEventListener('change', () => scheduleRebuild());
|
|||
|
|
ui.detail.addEventListener('change', () => {
|
|||
|
|
updatePrecisionGuide();
|
|||
|
|
scheduleRebuild();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.threeMFStructure.addEventListener('change', update3MFStructureHint);
|
|||
|
|
ui.includeFrame.addEventListener('change', () => {
|
|||
|
|
update3MFStructureHint();
|
|||
|
|
updateMeshBuffers();
|
|||
|
|
scheduleRebuild();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.resetAll.addEventListener('click', resetAll);
|
|||
|
|
ui.exportBtn.addEventListener('click', writeSTL);
|
|||
|
|
ui.export3mfBtn.addEventListener('click', write3MF);
|
|||
|
|
|
|||
|
|
ui.glCanvas.addEventListener('pointerdown', (event) => {
|
|||
|
|
state.dragging = true;
|
|||
|
|
state.lastX = event.clientX;
|
|||
|
|
state.lastY = event.clientY;
|
|||
|
|
ui.glCanvas.setPointerCapture(event.pointerId);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.glCanvas.addEventListener('pointermove', (event) => {
|
|||
|
|
if (!state.dragging)
|
|||
|
|
return;
|
|||
|
|
state.camera.yaw += (event.clientX - state.lastX) * .007;
|
|||
|
|
state.camera.pitch = clamp(state.camera.pitch + (event.clientY - state.lastY) * .007, -1.45, 1.45);
|
|||
|
|
state.lastX = event.clientX;
|
|||
|
|
state.lastY = event.clientY;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.glCanvas.addEventListener('pointerup', () => {
|
|||
|
|
state.dragging = false;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.glCanvas.addEventListener('wheel', (event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
state.camera.zoom = clamp(state.camera.zoom * Math.exp(event.deltaY * .001), 260, 880);
|
|||
|
|
}
|
|||
|
|
, {
|
|||
|
|
passive: false
|
|||
|
|
});
|
|||
|
|
ui.topView.addEventListener('click', () => {
|
|||
|
|
state.camera.pitch = 0;
|
|||
|
|
state.camera.yaw = -Math.PI / 2;
|
|||
|
|
state.camera.zoom = 690;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.isoView.addEventListener('click', () => {
|
|||
|
|
state.camera.pitch = .60;
|
|||
|
|
state.camera.yaw = -Math.PI / 2 - .08;
|
|||
|
|
state.camera.zoom = 620;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
ui.fitView.addEventListener('click', () => {
|
|||
|
|
state.camera.zoom = 620;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|