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,88 @@
|
||||
import { state } from '../../state.js';
|
||||
import { logger } from '../../utils/logger.js';
|
||||
|
||||
/**
|
||||
* handleEdgeUpdate - Synchronizes property sidebar changes to the X6 Edge cell.
|
||||
* Ensures data, attributes (markers, colors), anchors, and routers are all updated.
|
||||
*/
|
||||
export async function handleEdgeUpdate(cell, data) {
|
||||
if (cell.isNode()) return;
|
||||
|
||||
const updates = {
|
||||
id: cell.id,
|
||||
source: cell.getSource().cell,
|
||||
target: cell.getTarget().cell,
|
||||
source_port: cell.getSource().port,
|
||||
target_port: cell.getTarget().port,
|
||||
|
||||
// Priority: DOM Element > Provided Data (Format Painter) > Default/Old Data
|
||||
color: document.getElementById('prop-color')?.value || data?.color,
|
||||
style: document.getElementById('prop-style')?.value || data?.style,
|
||||
routing: document.getElementById('prop-routing')?.value || data?.routing,
|
||||
source_anchor: document.getElementById('prop-src-anchor')?.value || data?.source_anchor || 'orth',
|
||||
target_anchor: document.getElementById('prop-dst-anchor')?.value || data?.target_anchor || 'orth',
|
||||
direction: document.getElementById('prop-direction')?.value || data?.direction || 'none',
|
||||
is_tunnel: document.getElementById('prop-is-tunnel') ? !!document.getElementById('prop-is-tunnel').checked : !!data?.is_tunnel,
|
||||
width: document.getElementById('prop-width') ? parseFloat(document.getElementById('prop-width').value) : (parseFloat(data?.width) || 2),
|
||||
routing_offset: document.getElementById('prop-routing-offset') ? parseInt(document.getElementById('prop-routing-offset').value) : (parseInt(data?.routing_offset) || 20),
|
||||
description: document.getElementById('prop-description') ? document.getElementById('prop-description').value : data?.description,
|
||||
tags: document.getElementById('prop-tags') ? document.getElementById('prop-tags').value.split(',').map(t => t.trim()).filter(t => t) : (data?.tags || []),
|
||||
label: document.getElementById('prop-label') ? document.getElementById('prop-label').value : data?.label,
|
||||
locked: document.getElementById('prop-locked') ? !!document.getElementById('prop-locked').checked : !!data?.locked
|
||||
};
|
||||
|
||||
// 1. Update Cell Data (Single Source of Truth)
|
||||
const currentData = cell.getData() || {};
|
||||
cell.setData({ ...currentData, ...updates });
|
||||
|
||||
// 2. Sync Visual Attributes (Arrows, Colors, Styles)
|
||||
// We reuse the central mapping logic from styles.js for consistency
|
||||
const { getX6EdgeConfig } = await import('/static/js/modules/graph/styles.js');
|
||||
const edgeConfig = getX6EdgeConfig(updates);
|
||||
|
||||
// Apply Attributes (Markers, Stroke, Dasharray)
|
||||
// Note: setAttrs merges by default, but we use it to apply the calculated style object
|
||||
if (edgeConfig.attrs) {
|
||||
cell.setAttrs(edgeConfig.attrs);
|
||||
}
|
||||
|
||||
// Apply Labels
|
||||
if (edgeConfig.labels) {
|
||||
cell.setLabels(edgeConfig.labels);
|
||||
}
|
||||
|
||||
// 3. Anchor & Router Updates (Physical Pathing)
|
||||
if (edgeConfig.source) cell.setSource(edgeConfig.source);
|
||||
if (edgeConfig.target) cell.setTarget(edgeConfig.target);
|
||||
|
||||
// Apply Router and Connector (Physical Pathing)
|
||||
// Clear everything first to prevent old state persistence
|
||||
cell.setVertices([]);
|
||||
cell.setRouter(null);
|
||||
cell.setConnector('normal');
|
||||
|
||||
if (edgeConfig.router) {
|
||||
cell.setRouter(edgeConfig.router);
|
||||
}
|
||||
|
||||
if (edgeConfig.connector) {
|
||||
cell.setConnector(edgeConfig.connector);
|
||||
}
|
||||
|
||||
// 4. Mark Project as Dirty and Apply Locking/Selection Tools
|
||||
cell.setProp('movable', !updates.locked);
|
||||
cell.setProp('deletable', !updates.locked);
|
||||
|
||||
// Selection Tool Preservation: If currently selected, ensure vertices are visible
|
||||
const isSelected = state.graph.isSelected(cell);
|
||||
if (updates.locked) {
|
||||
cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]);
|
||||
} else {
|
||||
cell.removeTools();
|
||||
if (isSelected) {
|
||||
cell.addTools(['vertices']);
|
||||
}
|
||||
}
|
||||
|
||||
import('/static/js/modules/persistence.js').then(m => m.markDirty());
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { state } from '../../state.js';
|
||||
import { logger } from '../../utils/logger.js';
|
||||
|
||||
export async function handleNodeUpdate(cell, data) {
|
||||
const isNode = cell.isNode();
|
||||
if (!isNode) return;
|
||||
|
||||
const updates = {
|
||||
// Priority: DOM Element > Provided Data (Format Painter) > Default/Old Data
|
||||
type: document.getElementById('prop-type')?.value || data?.type,
|
||||
label: document.getElementById('prop-label') ? document.getElementById('prop-label').value : data?.label,
|
||||
is_group: document.getElementById('prop-is-group') ? !!document.getElementById('prop-is-group').checked : !!data?.is_group,
|
||||
padding: document.getElementById('prop-padding') ? parseInt(document.getElementById('prop-padding').value) : (data?.padding || undefined),
|
||||
slots: document.getElementById('prop-slots') ? parseInt(document.getElementById('prop-slots').value) : (data?.slots || undefined),
|
||||
color: document.getElementById('prop-label-color')?.value || data?.color,
|
||||
fill: document.getElementById('prop-fill-color')?.value || data?.fill,
|
||||
border: document.getElementById('prop-border-color')?.value || data?.border,
|
||||
label_pos: document.getElementById('prop-label-pos')?.value || data?.label_pos,
|
||||
// PM Standard Attributes
|
||||
vendor: document.getElementById('prop-vendor') ? document.getElementById('prop-vendor').value : data?.vendor,
|
||||
model: document.getElementById('prop-model') ? document.getElementById('prop-model').value : data?.model,
|
||||
ip: document.getElementById('prop-ip') ? document.getElementById('prop-ip').value : data?.ip,
|
||||
status: document.getElementById('prop-status')?.value || data?.status,
|
||||
project: document.getElementById('prop-project') ? document.getElementById('prop-project').value : data?.project,
|
||||
env: document.getElementById('prop-env')?.value || data?.env,
|
||||
asset_tag: document.getElementById('prop-asset-tag') ? document.getElementById('prop-asset-tag').value : data?.asset_tag,
|
||||
tags: document.getElementById('prop-tags') ? document.getElementById('prop-tags').value.split(',').map(t => t.trim()).filter(t => t) : (data?.tags || []),
|
||||
description: document.getElementById('prop-description') ? document.getElementById('prop-description').value : data?.description,
|
||||
locked: document.getElementById('prop-locked') ? !!document.getElementById('prop-locked').checked : !!data?.locked
|
||||
};
|
||||
const pureLabel = updates.label || '';
|
||||
cell.attr('label/text', pureLabel);
|
||||
|
||||
if (updates.color) cell.attr('label/fill', updates.color);
|
||||
|
||||
// Apply Fill and Border to body (for primitives and groups)
|
||||
if (updates.fill) {
|
||||
cell.attr('body/fill', updates.fill);
|
||||
if (updates.is_group) updates.background = updates.fill; // Sync for group logic
|
||||
}
|
||||
if (updates.border) {
|
||||
cell.attr('body/stroke', updates.border);
|
||||
if (updates.is_group) updates['border-color'] = updates.border; // Sync for group logic
|
||||
}
|
||||
|
||||
if (updates.label_pos) {
|
||||
const { getLabelAttributes } = await import('/static/js/modules/graph/styles.js');
|
||||
const labelAttrs = getLabelAttributes(updates.label_pos, updates.type, updates.is_group);
|
||||
Object.keys(labelAttrs).forEach(key => {
|
||||
cell.attr(`label/${key}`, labelAttrs[key]);
|
||||
});
|
||||
}
|
||||
|
||||
// Handle group membership via selection (parentId is now a UUID)
|
||||
const parentId = document.getElementById('prop-parent')?.value;
|
||||
const currentParent = cell.getParent();
|
||||
|
||||
// Case 1: Parent added or changed
|
||||
if (parentId && (!currentParent || currentParent.id !== parentId)) {
|
||||
const parent = state.graph.getCellById(parentId);
|
||||
if (parent) {
|
||||
parent.addChild(cell);
|
||||
updates.parent = parentId;
|
||||
saveUpdates();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Case 2: Parent removed (Ungrouping)
|
||||
if (!parentId && currentParent) {
|
||||
// 부모 해제 시 경고 설정 확인
|
||||
const triggerUngroup = async () => {
|
||||
const { getSettings } = await import('../../settings/store.js');
|
||||
const settings = getSettings();
|
||||
|
||||
if (settings.confirmUngroup !== false) {
|
||||
const { showConfirmModal } = await import('../../ui/utils.js');
|
||||
const { t } = await import('../../i18n.js');
|
||||
|
||||
showConfirmModal({
|
||||
title: t('confirm_ungroup_title') || 'Disconnect from Group',
|
||||
message: t('confirm_ungroup_msg') || 'Are you sure you want to remove this object from its parent group?',
|
||||
showDontAskAgain: true,
|
||||
checkboxKey: 'confirmUngroup',
|
||||
onConfirm: () => {
|
||||
currentParent.removeChild(cell);
|
||||
updates.parent = null;
|
||||
saveUpdates();
|
||||
},
|
||||
onCancel: () => {
|
||||
import('../index.js').then(m => m.renderProperties());
|
||||
}
|
||||
});
|
||||
} else {
|
||||
currentParent.removeChild(cell);
|
||||
updates.parent = null;
|
||||
saveUpdates();
|
||||
}
|
||||
};
|
||||
triggerUngroup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Case 3: Parent unchanged or no parent (Regular update)
|
||||
saveUpdates();
|
||||
|
||||
function saveUpdates() {
|
||||
// 최종 데이터 병합 및 저장 (id, layerId 등 기존 메타데이터 보존)
|
||||
const currentData = cell.getData() || {};
|
||||
const finalData = { ...currentData, ...updates };
|
||||
|
||||
cell.setData(finalData);
|
||||
|
||||
// [Instance #2245] Recursive Propagation:
|
||||
// If this is a group, "poke" all descendants to trigger their change events,
|
||||
// ensuring the sidebar for any selected child reflects the new parent name.
|
||||
if (updates.is_group) {
|
||||
const descendants = cell.getDescendants();
|
||||
descendants.forEach(child => {
|
||||
const childData = child.getData() || {};
|
||||
const syncTime = Date.now();
|
||||
// We add a timestamp to child data to force X6 to fire 'change:data'
|
||||
child.setData({ ...childData, _parent_updated: syncTime }, { silent: false });
|
||||
});
|
||||
}
|
||||
// Apply Locking Constraints
|
||||
cell.setProp('movable', !updates.locked);
|
||||
cell.setProp('deletable', !updates.locked);
|
||||
cell.setProp('rotatable', !updates.locked);
|
||||
if (updates.locked) {
|
||||
cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]);
|
||||
} else {
|
||||
cell.removeTools();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { state } from '../../state.js';
|
||||
import { renderRichContent } from '../../graph/styles/utils.js';
|
||||
|
||||
export async function handleRichCardUpdate(cell, data) {
|
||||
const isNode = cell.isNode();
|
||||
if (!isNode) return;
|
||||
|
||||
const updates = {
|
||||
headerText: document.getElementById('prop-header-text')?.value,
|
||||
headerColor: document.getElementById('prop-header-color')?.value,
|
||||
headerAlign: document.getElementById('prop-header-align')?.value || 'left',
|
||||
cardType: document.getElementById('prop-card-type')?.value,
|
||||
contentAlign: document.getElementById('prop-content-align')?.value || 'left',
|
||||
content: document.getElementById('prop-card-content')?.value,
|
||||
locked: !!document.getElementById('prop-locked')?.checked
|
||||
};
|
||||
|
||||
// 1. Sync to X6 Attributes
|
||||
cell.attr('headerLabel/text', updates.headerText);
|
||||
cell.attr('header/fill', updates.headerColor);
|
||||
cell.attr('body/stroke', updates.headerColor);
|
||||
|
||||
// Apply header alignment
|
||||
const anchor = updates.headerAlign === 'center' ? 'middle' : (updates.headerAlign === 'right' ? 'end' : 'start');
|
||||
const x = updates.headerAlign === 'center' ? 0.5 : (updates.headerAlign === 'right' ? '100%' : 10);
|
||||
const x2 = updates.headerAlign === 'right' ? -10 : 0;
|
||||
|
||||
cell.attr('headerLabel/textAnchor', anchor);
|
||||
cell.attr('headerLabel/refX', x);
|
||||
cell.attr('headerLabel/refX2', x2);
|
||||
|
||||
// 2. Render Content via HTML inside ForeignObject
|
||||
renderRichContent(cell, updates);
|
||||
|
||||
// 3. Update Cell Data
|
||||
const currentData = cell.getData() || {};
|
||||
cell.setData({ ...currentData, ...updates });
|
||||
|
||||
// 4. Handle Lock State
|
||||
cell.setProp('movable', !updates.locked);
|
||||
cell.setProp('deletable', !updates.locked);
|
||||
|
||||
if (updates.locked) {
|
||||
cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]);
|
||||
} else {
|
||||
cell.removeTools();
|
||||
}
|
||||
|
||||
import('/static/js/modules/persistence.js').then(m => m.markDirty());
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
import { state } from '../state.js';
|
||||
import { logger } from '../utils/logger.js';
|
||||
import { getNodeTemplate, getEdgeTemplate, getMultiSelectTemplate } from './templates.js';
|
||||
import { getRichCardTemplate } from './templates/rich_card.js';
|
||||
import { handleNodeUpdate } from './handlers/node.js';
|
||||
import { handleEdgeUpdate } from './handlers/edge.js';
|
||||
import { handleRichCardUpdate } from './handlers/rich_card.js';
|
||||
|
||||
// --- Utility: Simple Debounce to prevent excessive updates ---
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return (...args) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func(...args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
let sidebarElement = null;
|
||||
|
||||
export function initPropertiesSidebar() {
|
||||
sidebarElement = document.getElementById('properties-sidebar');
|
||||
if (!sidebarElement) return;
|
||||
|
||||
const closeBtn = sidebarElement.querySelector('.close-sidebar');
|
||||
const footerBtn = sidebarElement.querySelector('#sidebar-apply');
|
||||
const content = sidebarElement.querySelector('.sidebar-content');
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
unhighlight();
|
||||
toggleSidebar(false);
|
||||
});
|
||||
}
|
||||
if (footerBtn) {
|
||||
footerBtn.addEventListener('click', () => {
|
||||
unhighlight();
|
||||
applyChangesGlobal();
|
||||
toggleSidebar(false);
|
||||
});
|
||||
}
|
||||
|
||||
// Event Delegation: Register once at initialization to prevent memory leaks and redundant listeners
|
||||
if (content) {
|
||||
content.addEventListener('input', (e) => {
|
||||
const input = e.target;
|
||||
if (!input.classList.contains('prop-input')) return;
|
||||
});
|
||||
|
||||
content.addEventListener('change', (e) => {
|
||||
const input = e.target;
|
||||
if (!input.classList.contains('prop-input')) return;
|
||||
|
||||
const isText = (input.type === 'text' || input.tagName === 'TEXTAREA' || input.type === 'number');
|
||||
if (!isText) {
|
||||
applyChangesGlobal();
|
||||
}
|
||||
});
|
||||
|
||||
content.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
|
||||
applyChangesGlobal();
|
||||
toggleSidebar(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (state.graph) {
|
||||
state.graph.on('selection:changed', ({ selected }) => {
|
||||
unhighlight();
|
||||
renderProperties();
|
||||
if (selected && selected.length > 0) toggleSidebar(true);
|
||||
});
|
||||
|
||||
const safeRender = () => {
|
||||
const active = document.activeElement;
|
||||
const isEditing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA');
|
||||
|
||||
if (sidebarElement && sidebarElement.contains(active) && isEditing) {
|
||||
return;
|
||||
}
|
||||
// Use setTimeout to ensure X6 data sync is complete before re-rendering
|
||||
setTimeout(() => renderProperties(), 0);
|
||||
};
|
||||
|
||||
state.graph.on('cell:change:data', ({ options }) => {
|
||||
if (options && options.silent) return;
|
||||
safeRender();
|
||||
});
|
||||
state.graph.on('cell:change:attrs', ({ options }) => {
|
||||
if (options && options.silent) return;
|
||||
safeRender();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const applyChangesGlobal = async () => {
|
||||
if (!state.graph) return;
|
||||
const selected = state.graph.getSelectedCells();
|
||||
if (selected.length !== 1) return;
|
||||
|
||||
const cell = selected[0];
|
||||
const data = cell.getData() || {};
|
||||
|
||||
if (cell.shape === 'drawnet-rich-card') {
|
||||
await handleRichCardUpdate(cell, data);
|
||||
} else if (cell.isNode()) {
|
||||
await handleNodeUpdate(cell, data);
|
||||
} else {
|
||||
await handleEdgeUpdate(cell, data);
|
||||
}
|
||||
|
||||
import('/static/js/modules/persistence.js').then(m => m.markDirty());
|
||||
};
|
||||
|
||||
const debouncedApplyGlobal = debounce(applyChangesGlobal, 300);
|
||||
|
||||
export function toggleSidebar(open) {
|
||||
if (!sidebarElement) return;
|
||||
if (open === undefined) {
|
||||
sidebarElement.classList.toggle('open');
|
||||
} else if (open) {
|
||||
sidebarElement.classList.add('open');
|
||||
} else {
|
||||
sidebarElement.classList.remove('open');
|
||||
}
|
||||
}
|
||||
|
||||
export function renderProperties() {
|
||||
if (!state.graph || !sidebarElement) return;
|
||||
|
||||
const selected = state.graph.getSelectedCells();
|
||||
const content = sidebarElement.querySelector('.sidebar-content');
|
||||
if (!content) return;
|
||||
|
||||
logger.info(`[Sidebar] renderProperties start`, {
|
||||
selectedCount: selected.length,
|
||||
firstId: selected[0]?.id
|
||||
});
|
||||
|
||||
if (!selected || selected.length === 0) {
|
||||
content.innerHTML = `<div style="color: #64748b; text-align: center; margin-top: 40px;">Select an object to edit properties</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (selected.length > 1) {
|
||||
content.innerHTML = getMultiSelectTemplate(selected.length);
|
||||
|
||||
content.querySelectorAll('.align-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const action = btn.getAttribute('data-action');
|
||||
if (action) import('/static/js/modules/ui/context_menu/handlers.js').then(m => m.handleMenuAction(action));
|
||||
});
|
||||
});
|
||||
|
||||
const lockToggle = content.querySelector('#prop-locked');
|
||||
if (lockToggle) {
|
||||
lockToggle.addEventListener('change', () => {
|
||||
const isLocked = lockToggle.checked;
|
||||
selected.forEach(cell => {
|
||||
const data = cell.getData() || {};
|
||||
cell.setData({ ...data, locked: isLocked });
|
||||
cell.setProp('movable', !isLocked);
|
||||
cell.setProp('deletable', !isLocked);
|
||||
if (cell.isNode()) cell.setProp('rotatable', !isLocked);
|
||||
|
||||
if (isLocked) {
|
||||
cell.addTools([{ name: 'boundary', args: { attrs: { stroke: '#ef4444', 'stroke-dasharray': '5,5' } } }]);
|
||||
} else {
|
||||
cell.removeTools();
|
||||
}
|
||||
});
|
||||
import('/static/js/modules/persistence.js').then(m => m.markDirty());
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const cell = selected[0];
|
||||
const data = cell.getData() || {};
|
||||
const isNode = cell.isNode();
|
||||
|
||||
if (isNode) {
|
||||
const allGroups = state.graph.getNodes().filter(n => n.getData()?.is_group && n.id !== cell.id);
|
||||
const liveParent = cell.getParent();
|
||||
const uiData = { ...data, id: cell.id, parent: liveParent ? liveParent.id : null };
|
||||
|
||||
if (cell.shape === 'drawnet-rich-card') {
|
||||
content.innerHTML = getRichCardTemplate(cell);
|
||||
} else {
|
||||
content.innerHTML = getNodeTemplate(uiData, allGroups);
|
||||
}
|
||||
} else {
|
||||
content.innerHTML = getEdgeTemplate({ ...data, id: cell.id });
|
||||
}
|
||||
|
||||
if (!isNode) {
|
||||
initAnchorHighlighting(cell, content);
|
||||
}
|
||||
}
|
||||
|
||||
function unhighlight() {
|
||||
if (!state.graph) return;
|
||||
state.graph.getNodes().forEach(node => {
|
||||
const data = node.getData() || {};
|
||||
if (data._isHighlighting) {
|
||||
node.attr('body/stroke', data._oldStroke, { silent: true });
|
||||
node.attr('body/strokeWidth', data._oldWidth, { silent: true });
|
||||
node.setData({ ...data, _isHighlighting: false }, { silent: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initAnchorHighlighting(cell, container) {
|
||||
const srcSelect = container.querySelector('#prop-src-anchor');
|
||||
const dstSelect = container.querySelector('#prop-dst-anchor');
|
||||
|
||||
const highlight = (isSource) => {
|
||||
const endpoint = isSource ? cell.getSource() : cell.getTarget();
|
||||
if (endpoint && endpoint.cell) {
|
||||
const targetCell = state.graph.getCellById(endpoint.cell);
|
||||
if (targetCell && !targetCell.getData()?._isHighlighting) {
|
||||
targetCell.setData({
|
||||
_oldStroke: targetCell.attr('body/stroke'),
|
||||
_oldWidth: targetCell.attr('body/strokeWidth'),
|
||||
_isHighlighting: true
|
||||
}, { silent: true });
|
||||
targetCell.attr('body/stroke', isSource ? '#10b981' : '#ef4444', { silent: true });
|
||||
targetCell.attr('body/strokeWidth', 6, { silent: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
srcSelect?.addEventListener('mouseenter', () => highlight(true));
|
||||
srcSelect?.addEventListener('mouseleave', unhighlight);
|
||||
dstSelect?.addEventListener('mouseenter', () => highlight(false));
|
||||
dstSelect?.addEventListener('mouseleave', unhighlight);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Synchronizes the changes made in the properties sidebar back to the DSL in the editor.
|
||||
*/
|
||||
export async function syncToDSL(ele, oldLabel) {
|
||||
const editor = document.getElementById('editor');
|
||||
if (!editor) return;
|
||||
|
||||
let dsl = editor.value;
|
||||
const data = ele.getData() || {};
|
||||
const isNode = ele.isNode();
|
||||
|
||||
if (isNode) {
|
||||
if (data.is_group) {
|
||||
// Update group definition: group Name { attrs }
|
||||
const regex = new RegExp(`^group\\s+${oldLabel}(\\s*\\{.*?\\})?`, 'mi');
|
||||
let attrParts = [];
|
||||
if (data.background) attrParts.push(`background: ${data.background}`);
|
||||
if (data.padding) attrParts.push(`padding: ${data.padding}`);
|
||||
const attrs = attrParts.length > 0 ? `{ ${attrParts.join(', ')} }` : '';
|
||||
|
||||
if (regex.test(dsl)) {
|
||||
dsl = dsl.replace(regex, `group ${data.label} ${attrs}`);
|
||||
} else {
|
||||
dsl += `\ngroup ${data.label} ${attrs}\n`;
|
||||
}
|
||||
|
||||
// If label changed, update all 'in' lines
|
||||
if (oldLabel !== data.label) {
|
||||
const memberRegex = new RegExp(`\\s+in\\s+${oldLabel}\\b`, 'gi');
|
||||
dsl = dsl.replace(memberRegex, ` in ${data.label}`);
|
||||
}
|
||||
} else {
|
||||
// Update node definition: Label [Type] { attrs }
|
||||
const regex = new RegExp(`^\\s*${oldLabel}(\\s*\\[.*?\\])?(\\s*\\{.*?\\})?\\s*(?!->)$`, 'm');
|
||||
const typeStr = data.type && data.type !== 'default' ? ` [${data.type}]` : '';
|
||||
const parentStr = data.parent ? ` { parent: ${data.parent} }` : '';
|
||||
|
||||
if (regex.test(dsl)) {
|
||||
dsl = dsl.replace(regex, `${data.label}${typeStr}${parentStr}`);
|
||||
} else {
|
||||
dsl += `\n${data.label}${typeStr}${parentStr}\n`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Update edge definition: Source -> Target { attrs }
|
||||
const sourceNode = ele.getSourceNode();
|
||||
const targetNode = ele.getTargetNode();
|
||||
const sourceLabel = sourceNode?.getData()?.label || sourceNode?.id;
|
||||
const targetLabel = targetNode?.getData()?.label || targetNode?.id;
|
||||
|
||||
if (sourceLabel && targetLabel) {
|
||||
const escSrc = sourceLabel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
const escDst = targetLabel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
|
||||
// Match the whole line for the edge
|
||||
const edgeRegex = new RegExp(`^\\s*${escSrc}(?:\\s*\\[.*?\\])?(?:\\s*:[a-z]+)?\\s*->\\s*${escDst}(?:\\s*\\[.*?\\])?(?:\\s*:[a-z]+)?\\s*(\\{.*?\\})?\\s*$`, 'mi');
|
||||
|
||||
let attrParts = [];
|
||||
if (data.color) attrParts.push(`color: ${data.color}`);
|
||||
if (data.style) attrParts.push(`style: ${data.style}`);
|
||||
if (data.source_anchor) attrParts.push(`source_anchor: ${data.source_anchor}`);
|
||||
if (data.target_anchor) attrParts.push(`target_anchor: ${data.target_anchor}`);
|
||||
if (data.direction && data.direction !== 'forward') attrParts.push(`direction: ${data.direction}`);
|
||||
if (data.is_tunnel) attrParts.push(`is_tunnel: true`);
|
||||
if (data.label) attrParts.push(`label: ${data.label}`);
|
||||
|
||||
const attrs = attrParts.length > 0 ? ` { ${attrParts.join(', ')} }` : '';
|
||||
|
||||
if (edgeRegex.test(dsl)) {
|
||||
dsl = dsl.replace(edgeRegex, (match) => {
|
||||
const baseMatch = match.split('{')[0].trim();
|
||||
return `${baseMatch}${attrs}`;
|
||||
});
|
||||
} else {
|
||||
dsl += `\n${sourceLabel} -> ${targetLabel}${attrs}\n`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
editor.value = dsl;
|
||||
// Trigger analyze with force=true to avoid race
|
||||
const editorModule = await import('../editor.js');
|
||||
editorModule.analyzeTopology(true);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { getNodeTemplate } from './templates/node.js';
|
||||
import { getEdgeTemplate } from './templates/edge.js';
|
||||
import { getMultiSelectTemplate } from './templates/multi.js';
|
||||
|
||||
export { getNodeTemplate, getEdgeTemplate, getMultiSelectTemplate };
|
||||
@@ -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