sjva/drawNET_test
1
0
Fork 0
mirror of https://github.com/sotam0316/drawNET_test.git synced 2026-04-25 03:58:38 +09:00
Code Issues Packages Projects Releases Wiki Activity

static 폴더 및 하위 파일 업로드

Browse Source
This commit is contained in:
sotam0316
2026-04-22 12:05:03 +09:00
commit 514b209a5a
203 changed files with 29494 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/modules/settings/tabs/workspace.js
+220
View File
@@ -0,0 +1,220 @@
/**
* settings/tabs/workspace.js - Workspace (Canvas/Grid) Settings Tab
*/
import { updateSetting } from '../store.js';
import { t } from '../../i18n.js';
export function renderWorkspace(container, settings) {
container.innerHTML = `
<h3>${t('canvas_background') || 'Workspace'}</h3>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('grid_style')}</span>
<span class="desc">${t('grid_style_desc')}</span>
</div>
<div class="setting-ctrl">
<select id="grid-style-select">
<option value="none" ${settings.gridStyle === 'none' ? 'selected' : ''}>${t('grid_none')}</option>
<option value="solid" ${settings.gridStyle === 'solid' ? 'selected' : ''}>${t('grid_solid')}</option>
<option value="dashed" ${settings.gridStyle === 'dashed' ? 'selected' : ''}>${t('grid_dashed')}</option>
</select>
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('grid_spacing')}</span>
<span class="desc">${t('grid_spacing_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="number" id="grid-spacing-input" value="${settings.gridSpacing || 20}" min="10" max="100" step="5">
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('bg_color')}</span>
<span class="desc">${t('bg_color_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="color" id="bg-color-picker" value="${settings.bgColor || '#f8fafc'}">
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('grid_color')}</span>
<span class="desc">${t('grid_color_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="color" id="grid-color-picker" value="${settings.gridColor || '#e2e8f0'}">
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('grid_thickness')}</span>
<span class="desc">${t('grid_thickness_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="number" id="grid-thickness-input" value="${settings.gridThickness || 1}" min="0.5" max="5" step="0.5">
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('show_major_grid')}</span>
<span class="desc">${t('show_major_grid_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="checkbox" id="major-grid-toggle" ${settings.showMajorGrid ? 'checked' : ''}>
</div>
</div>
<div id="major-grid-options" style="display: ${settings.showMajorGrid ? 'block' : 'none'}">
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('major_grid_color')}</span>
<span class="desc">${t('major_grid_color_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="color" id="major-grid-color-picker" value="${settings.majorGridColor || '#cbd5e1'}">
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('major_grid_interval')}</span>
<span class="desc">${t('major_grid_interval_desc')}</span>
</div>
<div class="setting-ctrl">
<input type="number" id="major-grid-interval-input" value="${settings.majorGridInterval || 5}" min="2" max="20">
</div>
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<span class="label">${t('canvas_preset')}</span>
<span class="desc">${t('canvas_preset_desc')}</span>
</div>
<div class="setting-ctrl">
<select id="canvas-preset">
<option value="full" ${settings.canvasPreset === 'full' ? 'selected' : ''}>${t('canvas_full')}</option>
<option value="A4" ${settings.canvasPreset === 'A4' ? 'selected' : ''}>A4</option>
<option value="A3" ${settings.canvasPreset === 'A3' ? 'selected' : ''}>A3</option>
<option value="custom" ${settings.canvasPreset === 'custom' ? 'selected' : ''}>Custom</option>
</select>
</div>
</div>
<div id="orientation-container" class="setting-row" style="display: ${settings.canvasPreset === 'full' ? 'none' : 'flex'}">
<div class="setting-info">
<span class="label">${t('orientation')}</span>
<span class="desc">${t('orientation_desc')}</span>
</div>
<div class="setting-ctrl">
<select id="canvas-orientation">
<option value="portrait" ${settings.canvasOrientation === 'portrait' ? 'selected' : ''}>${t('portrait')}</option>
<option value="landscape" ${settings.canvasOrientation === 'landscape' ? 'selected' : ''}>${t('landscape')}</option>
</select>
</div>
</div>
<div id="custom-size-inputs" class="setting-row" style="display: ${settings.canvasPreset === 'custom' ? 'flex' : 'none'}; gap: 10px;">
<input type="number" id="canvas-width" value="${settings.canvasWidth || 800}" placeholder="W" style="width: 70px;">
<input type="number" id="canvas-height" value="${settings.canvasHeight || 600}" placeholder="H" style="width: 70px;">
<button id="apply-custom-size" class="footer-btn mini">${t('apply')}</button>
</div>
`;
}
export function bindWorkspaceEvents(container) {
const getGridParams = () => ({
style: container.querySelector('#grid-style-select').value,
color: container.querySelector('#grid-color-picker').value,
thickness: parseFloat(container.querySelector('#grid-thickness-input').value) || 1,
showMajor: container.querySelector('#major-grid-toggle').checked,
majorColor: container.querySelector('#major-grid-color-picker').value,
majorInterval: parseInt(container.querySelector('#major-grid-interval-input').value) || 5
});
const dispatchGridUpdate = () => {
const params = getGridParams();
updateSetting('gridStyle', params.style);
updateSetting('gridColor', params.color);
updateSetting('gridThickness', params.thickness);
updateSetting('showMajorGrid', params.showMajor);
updateSetting('majorGridColor', params.majorColor);
updateSetting('majorGridInterval', params.majorInterval);
const majorOpts = container.querySelector('#major-grid-options');
if (majorOpts) majorOpts.style.display = params.showMajor ? 'block' : 'none';
window.dispatchEvent(new CustomEvent('gridChanged', { detail: params }));
};
const gridStyleSelect = container.querySelector('#grid-style-select');
gridStyleSelect.addEventListener('change', dispatchGridUpdate);
const gridColorPicker = container.querySelector('#grid-color-picker');
gridColorPicker.addEventListener('input', dispatchGridUpdate);
const gridThicknessInput = container.querySelector('#grid-thickness-input');
gridThicknessInput.addEventListener('input', dispatchGridUpdate);
const majorGridToggle = container.querySelector('#major-grid-toggle');
majorGridToggle.addEventListener('change', dispatchGridUpdate);
const majorGridColorPicker = container.querySelector('#major-grid-color-picker');
majorGridColorPicker.addEventListener('input', dispatchGridUpdate);
const majorGridIntervalInput = container.querySelector('#major-grid-interval-input');
majorGridIntervalInput.addEventListener('input', dispatchGridUpdate);
const gridSpacingInput = container.querySelector('#grid-spacing-input');
gridSpacingInput.addEventListener('input', (e) => {
const val = parseInt(e.target.value) || 20;
updateSetting('gridSpacing', val);
document.documentElement.style.setProperty('--grid-size', `${val}px`);
window.dispatchEvent(new CustomEvent('gridSpacingChanged', { detail: { spacing: val } }));
});
const bgColorPicker = container.querySelector('#bg-color-picker');
bgColorPicker.addEventListener('input', (e) => {
updateSetting('bgColor', e.target.value);
document.documentElement.style.setProperty('--bg-color', e.target.value);
});
const canvasPreset = container.querySelector('#canvas-preset');
const orientationContainer = container.querySelector('#orientation-container');
const customSizeDiv = container.querySelector('#custom-size-inputs');
const updateCanvas = () => {
const val = canvasPreset.value;
const orientationSelect = container.querySelector('#canvas-orientation');
const orient = orientationSelect ? orientationSelect.value : 'portrait';
updateSetting('canvasPreset', val);
updateSetting('canvasOrientation', orient);
if (customSizeDiv) customSizeDiv.style.display = val === 'custom' ? 'flex' : 'none';
if (orientationContainer) orientationContainer.style.display = val === 'full' ? 'none' : 'flex';
let w = '100%', h = '100%';
if (val === 'A4') {
w = orient === 'portrait' ? 794 : 1123;
h = orient === 'portrait' ? 1123 : 794;
} else if (val === 'A3') {
w = orient === 'portrait' ? 1123 : 1587;
h = orient === 'portrait' ? 1587 : 1123;
} else if (val === 'custom') {
w = parseInt(container.querySelector('#canvas-width').value) || 800;
h = parseInt(container.querySelector('#canvas-height').value) || 600;
updateSetting('canvasWidth', w);
updateSetting('canvasHeight', h);
}
window.dispatchEvent(new CustomEvent('canvasResize', {
detail: { width: w, height: h }
}));
};
canvasPreset.addEventListener('change', updateCanvas);
const orientationSelect = container.querySelector('#canvas-orientation');
if (orientationSelect) orientationSelect.addEventListener('change', updateCanvas);
const applyCustomBtn = container.querySelector('#apply-custom-size');
if (applyCustomBtn) applyCustomBtn.addEventListener('click', updateCanvas);
}