mirror of
https://github.com/sotam0316/drawNET.git
synced 2026-04-25 03:58:37 +09:00
Initial commit: drawNET Alpha v1.0 - Professional Topology Designer with Full i18n and Performance Optimizations
This commit is contained in:
leeyj
@@ -0,0 +1,116 @@
|
||||
import { t } from '../../i18n.js';
|
||||
|
||||
/**
|
||||
* Generates the HTML for edge properties.
|
||||
*/
|
||||
export function getEdgeTemplate(data) {
|
||||
return `
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_id')}</label>
|
||||
<input type="text" class="prop-input" value="${data.id}" readonly style="opacity: 0.5; font-size: 11px;">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_label')}</label>
|
||||
<input type="text" class="prop-input" id="prop-label" value="${data.label || ''}">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_tags')}</label>
|
||||
<input type="text" class="prop-input" id="prop-tags" value="${(data.tags || []).join(', ')}">
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_color')}</label>
|
||||
<input type="color" class="prop-input" id="prop-color" value="${data.color || '#94a3b8'}" style="height: 34px; padding: 2px;">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_style')}</label>
|
||||
<select class="prop-input" id="prop-style">
|
||||
<option value="solid" ${data.style === 'solid' ? 'selected' : ''}>${t('solid')}</option>
|
||||
<option value="dashed" ${data.style === 'dashed' ? 'selected' : ''}>${t('dashed')}</option>
|
||||
<option value="dotted" ${data.style === 'dotted' ? 'selected' : ''}>${t('dotted')}</option>
|
||||
<option value="double" ${data.style === 'double' ? 'selected' : ''}>${t('double')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_width') || 'Width'}</label>
|
||||
<input type="number" class="prop-input" id="prop-width" value="${data.width || 2}" min="1" max="10" step="0.5">
|
||||
</div>
|
||||
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_routing')}</label>
|
||||
<select class="prop-input" id="prop-routing">
|
||||
<option value="manhattan" ${data.routing === 'manhattan' || !data.routing ? 'selected' : ''}>${t('manhattan')}</option>
|
||||
<option value="u-shape" ${data.routing === 'u-shape' ? 'selected' : ''}>${t('u_shape')}</option>
|
||||
<option value="orthogonal" ${data.routing === 'orthogonal' ? 'selected' : ''}>${t('orthogonal')}</option>
|
||||
<option value="straight" ${data.routing === 'straight' ? 'selected' : ''}>${t('straight')}</option>
|
||||
<option value="metro" ${data.routing === 'metro' ? 'selected' : ''}>${t('metro')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label style="color: #10b981; font-weight: bold;">● START</label>
|
||||
<select class="prop-input" id="prop-src-anchor" style="border-left: 3px solid #10b981;">
|
||||
<option value="orth" ${data.source_anchor === 'orth' || !data.source_anchor ? 'selected' : ''}>${t('orth')}</option>
|
||||
<option value="center" ${data.source_anchor === 'center' ? 'selected' : ''}>${t('center')}</option>
|
||||
<option value="left" ${data.source_anchor === 'left' ? 'selected' : ''}>${t('left')}</option>
|
||||
<option value="right" ${data.source_anchor === 'right' ? 'selected' : ''}>${t('right')}</option>
|
||||
<option value="top" ${data.source_anchor === 'top' ? 'selected' : ''}>${t('top')}</option>
|
||||
<option value="bottom" ${data.source_anchor === 'bottom' ? 'selected' : ''}>${t('bottom')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label style="color: #ef4444; font-weight: bold;">● TARGET</label>
|
||||
<select class="prop-input" id="prop-dst-anchor" style="border-left: 3px solid #ef4444;">
|
||||
<option value="orth" ${data.target_anchor === 'orth' || !data.target_anchor ? 'selected' : ''}>${t('orth')}</option>
|
||||
<option value="center" ${data.target_anchor === 'center' ? 'selected' : ''}>${t('center')}</option>
|
||||
<option value="left" ${data.target_anchor === 'left' ? 'selected' : ''}>${t('left')}</option>
|
||||
<option value="right" ${data.target_anchor === 'right' ? 'selected' : ''}>${t('right')}</option>
|
||||
<option value="top" ${data.target_anchor === 'top' ? 'selected' : ''}>${t('top')}</option>
|
||||
<option value="bottom" ${data.target_anchor === 'bottom' ? 'selected' : ''}>${t('bottom')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_direction')}</label>
|
||||
<select class="prop-input" id="prop-direction">
|
||||
<option value="forward" ${data.direction === 'forward' ? 'selected' : ''}>${t('forward')}</option>
|
||||
<option value="backward" ${data.direction === 'backward' ? 'selected' : ''}>${t('backward')}</option>
|
||||
<option value="both" ${data.direction === 'both' ? 'selected' : ''}>${t('both')}</option>
|
||||
<option value="none" ${data.direction === 'none' || !data.direction ? 'selected' : ''}>${t('none')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="toggle-group" style="margin-bottom: 0; flex: 1;">
|
||||
<label class="toggle-switch" style="padding: 10px;">
|
||||
<span style="font-size: 11px;">TUNNEL</span>
|
||||
<input type="checkbox" id="prop-is-tunnel" class="prop-input" ${data.is_tunnel ? 'checked' : ''}>
|
||||
<div class="switch-slider"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-group" style="margin-bottom: 0; flex: 1;">
|
||||
<label class="toggle-switch danger" style="padding: 10px;">
|
||||
<span style="color: #ef4444; font-size: 11px;"><i class="fas fa-lock"></i> LOCK</span>
|
||||
<input type="checkbox" id="prop-locked" class="prop-input" ${data.locked ? 'checked' : ''}>
|
||||
<div class="switch-slider"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border);">
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_routing_offset')}</label>
|
||||
<input type="number" class="prop-input" id="prop-routing-offset" value="${data.routing_offset || 20}" min="0" max="200" step="5">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_description')}</label>
|
||||
<textarea class="prop-input" id="prop-description" rows="2" style="resize: vertical; min-height: 48px; font-size: 12px;">${data.description || ''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { state } from '../../state.js';
|
||||
import { t } from '../../i18n.js';
|
||||
|
||||
export function getMultiSelectTemplate(count) {
|
||||
const t_title = (state.i18n && state.i18n['multi_select_title']) || 'Multiple Selected';
|
||||
const t_align = (state.i18n && state.i18n['alignment']) || 'Alignment';
|
||||
const t_dist = (state.i18n && state.i18n['distribution']) || 'Distribution';
|
||||
|
||||
return `
|
||||
<div class="multi-select-header">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<span>${count} ${t_title}</span>
|
||||
</div>
|
||||
|
||||
<div class="prop-group">
|
||||
<label>${t_align}</label>
|
||||
<div class="alignment-grid">
|
||||
<button class="align-btn" data-action="alignTop" title="${t('align_top')} (Shift+1)"><i class="fas fa-align-left fa-rotate-90"></i></button>
|
||||
<button class="align-btn" data-action="alignBottom" title="${t('align_bottom')} (Shift+2)"><i class="fas fa-align-right fa-rotate-90"></i></button>
|
||||
<button class="align-btn" data-action="alignLeft" title="${t('align_left')} (Shift+3)"><i class="fas fa-align-left"></i></button>
|
||||
<button class="align-btn" data-action="alignRight" title="${t('align_right')} (Shift+4)"><i class="fas fa-align-right"></i></button>
|
||||
<button class="align-btn" data-action="alignMiddle" title="${t('align_middle')} (Shift+5)"><i class="fas fa-grip-lines"></i></button>
|
||||
<button class="align-btn" data-action="alignCenter" title="${t('align_center')} (Shift+6)"><i class="fas fa-grip-lines-vertical"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-group">
|
||||
<label>${t_dist}</label>
|
||||
<div class="alignment-grid">
|
||||
<button class="align-btn" data-action="distributeHorizontal" title="${t('distribute_horizontal')} (Shift+7)"><i class="fas fa-arrows-alt-h"></i></button>
|
||||
<button class="align-btn" data-action="distributeVertical" title="${t('distribute_vertical')} (Shift+8)"><i class="fas fa-arrows-alt-v"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group" style="margin-top: 16px; border-top: 1px solid var(--panel-border); padding-top: 16px;">
|
||||
<label class="toggle-switch danger">
|
||||
<span style="color: #ef4444; font-weight: 800;"><i class="fas fa-lock"></i> ${t('prop_locked')} (Bulk)</span>
|
||||
<input type="checkbox" id="prop-locked" class="prop-input">
|
||||
<div class="switch-slider"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px; padding: 12px; background: rgba(59, 130, 246, 0.1); border-radius: 8px; border: 1px dashed rgba(59, 130, 246, 0.3);">
|
||||
<p style="font-size: 11px; color: #94a3b8; margin: 0; line-height: 1.4;">
|
||||
<i class="fas fa-lightbulb" style="color: #fbbf24; margin-right: 4px;"></i>
|
||||
Tip: Use <b>Shift + 1~8</b> to quickly <b>align and distribute</b> selected nodes without opening the sidebar.
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { t } from '../../i18n.js';
|
||||
|
||||
/**
|
||||
* Generates the HTML for node properties.
|
||||
*/
|
||||
export function getNodeTemplate(data, allGroups) {
|
||||
return `
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_id')}</label>
|
||||
<input type="text" class="prop-input" value="${data.id}" readonly style="opacity: 0.5; font-size: 11px;">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_label')}</label>
|
||||
<input type="text" class="prop-input" id="prop-label" value="${data.label || ''}">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_type')}</label>
|
||||
<input type="text" class="prop-input" id="prop-type" value="${data.type || ''}">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_parent')}</label>
|
||||
<select class="prop-input" id="prop-parent">
|
||||
<option value="">${t('none')}</option>
|
||||
${allGroups.map(g => {
|
||||
const gData = g.getData() || {};
|
||||
const label = gData.label || g.id;
|
||||
// Debug log to confirm what the template sees
|
||||
// console.log(`[Template:Node] Parent Option: ID=${g.id}, Label=${label}`);
|
||||
return `<option value="${g.id}" ${data.parent === g.id ? 'selected' : ''}>${label}</option>`;
|
||||
}).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row" style="margin-bottom: 8px;">
|
||||
<div class="toggle-group" style="margin-bottom: 0; flex: 1;">
|
||||
<label class="toggle-switch" style="padding: 10px;">
|
||||
<span style="font-size: 11px;">GROUP</span>
|
||||
<input type="checkbox" id="prop-is-group" class="prop-input" ${data.is_group ? 'checked' : ''}>
|
||||
<div class="switch-slider"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-group" style="margin-bottom: 0; flex: 1;">
|
||||
<label class="toggle-switch danger" style="padding: 10px;">
|
||||
<span style="color: #ef4444; font-size: 11px;"><i class="fas fa-lock"></i> LOCK</span>
|
||||
<input type="checkbox" id="prop-locked" class="prop-input" ${data.locked ? 'checked' : ''}>
|
||||
<div class="switch-slider"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_label_color')}</label>
|
||||
<input type="color" class="prop-input" id="prop-label-color" value="${data.color || data['text-color'] || '#64748b'}" style="height: 34px; padding: 2px;">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_label_pos')}</label>
|
||||
<select class="prop-input" id="prop-label-pos">
|
||||
${(() => {
|
||||
const nodeType = (data.type || '').toLowerCase();
|
||||
const defaultPos = data.is_group ? 'top' : (['rect', 'circle', 'rounded-rect', 'text-box', 'label'].includes(nodeType) ? 'center' : 'bottom');
|
||||
const currentPos = data.label_pos || defaultPos;
|
||||
return `
|
||||
<option value="top" ${currentPos === 'top' ? 'selected' : ''}>${t('top')}</option>
|
||||
<option value="bottom" ${currentPos === 'bottom' ? 'selected' : ''}>${t('bottom')}</option>
|
||||
<option value="left" ${currentPos === 'left' ? 'selected' : ''}>${t('left')}</option>
|
||||
<option value="right" ${currentPos === 'right' ? 'selected' : ''}>${t('right')}</option>
|
||||
<option value="center" ${currentPos === 'center' ? 'selected' : ''}>${t('center')}</option>
|
||||
`;
|
||||
})()}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${(() => {
|
||||
const nodeType = (data.type || '').toLowerCase();
|
||||
const primitives = ['rect', 'circle', 'rounded-rect', 'text-box', 'label', 'triangle', 'diamond', 'parallelogram', 'cylinder', 'document', 'manual-input', 'rack'];
|
||||
if (data.is_group || primitives.includes(nodeType)) {
|
||||
return `
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_fill_color')}</label>
|
||||
<input type="color" class="prop-input" id="prop-fill-color" value="${data.fill || data.background || '#ffffff'}" style="height: 34px; padding: 2px;">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_border_color')}</label>
|
||||
<input type="color" class="prop-input" id="prop-border-color" value="${data.border || data['border-color'] || '#94a3b8'}" style="height: 34px; padding: 2px;">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return '';
|
||||
})()}
|
||||
|
||||
<div class="prop-row">
|
||||
${data.is_group ? `
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_padding')}</label>
|
||||
<input type="number" class="prop-input" id="prop-padding" value="${data.padding || 40}" min="0" max="200">
|
||||
</div>
|
||||
` : ''}
|
||||
${data.type === 'rack' ? `
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_slots')}</label>
|
||||
<input type="number" class="prop-input" id="prop-slots" value="${data.slots || 42}" min="1" max="100">
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<!-- PM Standard Attributes Section -->
|
||||
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border);">
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_vendor')}</label>
|
||||
<input type="text" class="prop-input" id="prop-vendor" value="${data.vendor || ''}" placeholder="Cisco">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_model')}</label>
|
||||
<input type="text" class="prop-input" id="prop-model" value="${data.model || ''}" placeholder="C9300">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_ip')}</label>
|
||||
<input type="text" class="prop-input" id="prop-ip" value="${data.ip || ''}" placeholder="192.168.1.1">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_status')}</label>
|
||||
<select class="prop-input" id="prop-status">
|
||||
<option value="planning" ${data.status === 'planning' ? 'selected' : ''}>Plan</option>
|
||||
<option value="installed" ${data.status === 'installed' ? 'selected' : ''}>Live</option>
|
||||
<option value="retired" ${data.status === 'retired' ? 'selected' : ''}>None</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_project')}</label>
|
||||
<input type="text" class="prop-input" id="prop-project" value="${data.project || ''}">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_env')}</label>
|
||||
<select class="prop-input" id="prop-env">
|
||||
<option value="prod" ${data.env === 'prod' ? 'selected' : ''}>PROD</option>
|
||||
<option value="staging" ${data.env === 'staging' ? 'selected' : ''}>STG</option>
|
||||
<option value="dev" ${data.env === 'dev' ? 'selected' : ''}>DEV</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_tags')}</label>
|
||||
<input type="text" class="prop-input" id="prop-tags" value="${(data.tags || []).join(', ')}">
|
||||
</div>
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_description')}</label>
|
||||
<textarea class="prop-input" id="prop-description" rows="2" style="resize: vertical; min-height: 48px; font-size: 12px;">${data.description || ''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { t } from '../../i18n.js';
|
||||
|
||||
export function getRichCardTemplate(cell) {
|
||||
const data = cell.getData() || {};
|
||||
const headerText = data.headerText || 'TITLE';
|
||||
const content = data.content || '';
|
||||
const cardType = data.cardType || 'standard';
|
||||
const headerColor = data.headerColor || '#3b82f6';
|
||||
const headerAlign = data.headerAlign || 'left';
|
||||
const contentAlign = data.contentAlign || 'left';
|
||||
|
||||
return `
|
||||
<div class="prop-section">
|
||||
<h4 class="section-title"><i class="fas fa-file-alt"></i> ${t('rich_card')}</h4>
|
||||
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_header_text')}</label>
|
||||
<div class="input-with-color">
|
||||
<input type="text" id="prop-header-text" class="prop-input" value="${headerText}">
|
||||
<input type="color" id="prop-header-color" class="prop-input" value="${headerColor}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_header_align')}</label>
|
||||
<select id="prop-header-align" class="prop-input">
|
||||
<option value="left" ${headerAlign === 'left' ? 'selected' : ''}>${t('left')}</option>
|
||||
<option value="center" ${headerAlign === 'center' ? 'selected' : ''}>${t('center')}</option>
|
||||
<option value="right" ${headerAlign === 'right' ? 'selected' : ''}>${t('right')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_card_type')}</label>
|
||||
<select id="prop-card-type" class="prop-input">
|
||||
<option value="standard" ${cardType === 'standard' ? 'selected' : ''}>${t('standard')}</option>
|
||||
<option value="numbered" ${cardType === 'numbered' ? 'selected' : ''}>${t('numbered')}</option>
|
||||
<option value="bullet" ${cardType === 'bullet' ? 'selected' : ''}>${t('bullet')}</option>
|
||||
<option value="legend" ${cardType === 'legend' ? 'selected' : ''}>${t('legend')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<div class="prop-group horizontal">
|
||||
<label>${t('prop_content_align')}</label>
|
||||
<select id="prop-content-align" class="prop-input">
|
||||
<option value="left" ${contentAlign === 'left' ? 'selected' : ''}>${t('left')}</option>
|
||||
<option value="center" ${contentAlign === 'center' ? 'selected' : ''}>${t('center')}</option>
|
||||
<option value="right" ${contentAlign === 'right' ? 'selected' : ''}>${t('right')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-group">
|
||||
<label>${t('prop_card_content')}</label>
|
||||
<textarea id="prop-card-content" class="prop-input" rows="8" style="resize: vertical; min-height: 120px; font-size: 13px;" placeholder="Enter list items...">${content}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="prop-row" style="margin-top: 10px;">
|
||||
<div class="toggle-group" style="padding: 0; flex: 1;">
|
||||
<label class="toggle-switch danger" style="padding: 10px 14px;">
|
||||
<span style="font-size: 12px;"><i class="fas fa-lock" style="margin-right: 4px;"></i>${t('prop_locked')}</span>
|
||||
<input type="checkbox" id="prop-locked" class="prop-input" ${data.locked ? 'checked' : ''}>
|
||||
<div class="switch-slider"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user