svg export with text content is resolved
This commit is contained in:
yashwin-foxy
parent
009ec193c6
commit
2a92668788
@ -355,9 +355,9 @@ graph TD
|
||||
<button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
|
||||
<button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom" style="font-size: 1.2em;">⟲</button>
|
||||
<button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen" style="font-size: 1.2em;">⛶</button>
|
||||
<button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG" style="font-size: 1em;">PNG</button>
|
||||
<button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG" style="font-size: 1em;">JPG</button>
|
||||
<button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG" style="font-size: 1em;">SVG</button>
|
||||
<button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG (Best for Word/PDF - Vector Format)" style="font-size: 1em; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">SVG</button>
|
||||
<button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG (Raster Format)" style="font-size: 1em;">PNG</button>
|
||||
<button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG (Raster Format)" style="font-size: 1em;">JPG</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -638,18 +638,119 @@ graph TD
|
||||
clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
|
||||
|
||||
// Add embedded style for standard fonts
|
||||
const styleElement = document.createElementNS('http://www.w3.org/2000/svg', 'style');
|
||||
styleElement.textContent = `
|
||||
text {
|
||||
font-family: Arial, Helvetica, Verdana, sans-serif !important;
|
||||
font-size: 14px !important;
|
||||
// Convert foreignObject elements to native SVG text (Word doesn't support foreignObject)
|
||||
const foreignObjects = clonedSvg.querySelectorAll('foreignObject');
|
||||
foreignObjects.forEach(fo => {
|
||||
const foText = fo.textContent || '';
|
||||
if (foText.trim()) {
|
||||
const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
|
||||
// Handle multi-line text by splitting into tspan elements
|
||||
const lines = foText.trim().split('\n').filter(line => line.trim());
|
||||
|
||||
// Copy position attributes
|
||||
const x = fo.getAttribute('x') || '0';
|
||||
const y = fo.getAttribute('y') || '0';
|
||||
const width = fo.getAttribute('width') || '100';
|
||||
const height = fo.getAttribute('height') || '20';
|
||||
|
||||
const centerX = parseFloat(x) + parseFloat(width)/2;
|
||||
const centerY = parseFloat(y) + parseFloat(height)/2;
|
||||
|
||||
textElement.setAttribute('x', centerX);
|
||||
textElement.setAttribute('y', centerY);
|
||||
textElement.setAttribute('text-anchor', 'middle');
|
||||
textElement.setAttribute('dominant-baseline', 'middle');
|
||||
textElement.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
|
||||
textElement.setAttribute('font-size', '14px');
|
||||
textElement.setAttribute('fill', 'black');
|
||||
textElement.setAttribute('stroke', 'none');
|
||||
|
||||
if (lines.length === 1) {
|
||||
textElement.textContent = lines[0];
|
||||
} else {
|
||||
// Multi-line text
|
||||
lines.forEach((line, index) => {
|
||||
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
||||
tspan.textContent = line;
|
||||
tspan.setAttribute('x', centerX);
|
||||
tspan.setAttribute('dy', index === 0 ? '0' : '1.2em');
|
||||
textElement.appendChild(tspan);
|
||||
});
|
||||
}
|
||||
.nodeLabel, .edgeLabel {
|
||||
font-family: Arial, Helvetica, Verdana, sans-serif !important;
|
||||
|
||||
// Replace foreignObject with text
|
||||
fo.parentNode.replaceChild(textElement, fo);
|
||||
} else {
|
||||
fo.remove();
|
||||
}
|
||||
`;
|
||||
clonedSvg.insertBefore(styleElement, clonedSvg.firstChild);
|
||||
});
|
||||
|
||||
// ONLY process text elements - leave shapes and paths untouched
|
||||
const allTextElements = clonedSvg.querySelectorAll('text');
|
||||
allTextElements.forEach((textElement, index) => {
|
||||
// Remove contentEditable
|
||||
textElement.removeAttribute('contentEditable');
|
||||
|
||||
// Only add missing font attributes, don't modify existing ones
|
||||
if (!textElement.hasAttribute('font-family')) {
|
||||
textElement.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
|
||||
}
|
||||
if (!textElement.hasAttribute('font-size')) {
|
||||
textElement.setAttribute('font-size', '14px');
|
||||
}
|
||||
if (!textElement.hasAttribute('fill')) {
|
||||
textElement.setAttribute('fill', 'black');
|
||||
}
|
||||
|
||||
// Only clean up pointer-events and user-select from style, keep everything else
|
||||
const styleAttr = textElement.getAttribute('style');
|
||||
if (styleAttr) {
|
||||
const cleanedStyles = styleAttr.split(';')
|
||||
.filter(s => {
|
||||
const trimmed = s.trim();
|
||||
return trimmed &&
|
||||
!trimmed.startsWith('pointer-events') &&
|
||||
!trimmed.startsWith('user-select') &&
|
||||
!trimmed.startsWith('-webkit-user-select') &&
|
||||
!trimmed.startsWith('-moz-user-select');
|
||||
})
|
||||
.join('; ');
|
||||
|
||||
if (cleanedStyles) {
|
||||
textElement.setAttribute('style', cleanedStyles);
|
||||
} else {
|
||||
textElement.removeAttribute('style');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Process tspan elements - minimal changes
|
||||
const allTspanElements = clonedSvg.querySelectorAll('tspan');
|
||||
allTspanElements.forEach(tspan => {
|
||||
tspan.removeAttribute('contentEditable');
|
||||
|
||||
// Only clean up pointer-events and user-select
|
||||
const styleAttr = tspan.getAttribute('style');
|
||||
if (styleAttr) {
|
||||
const cleanedStyles = styleAttr.split(';')
|
||||
.filter(s => {
|
||||
const trimmed = s.trim();
|
||||
return trimmed &&
|
||||
!trimmed.startsWith('pointer-events') &&
|
||||
!trimmed.startsWith('user-select') &&
|
||||
!trimmed.startsWith('-webkit-user-select') &&
|
||||
!trimmed.startsWith('-moz-user-select');
|
||||
})
|
||||
.join('; ');
|
||||
|
||||
if (cleanedStyles) {
|
||||
tspan.setAttribute('style', cleanedStyles);
|
||||
} else {
|
||||
tspan.removeAttribute('style');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Get SVG dimensions
|
||||
const bbox = svg.getBBox();
|
||||
@ -684,7 +785,7 @@ graph TD
|
||||
// Cleanup
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showMessage('✅ Diagram exported as SVG', 'success');
|
||||
showMessage('✅ SVG exported - Optimized for Word/PDF with full text compatibility', 'success');
|
||||
} catch (error) {
|
||||
showMessage('❌ Error: ' + error.message, 'error');
|
||||
console.error('SVG export error:', error);
|
||||
|
||||
Binary file not shown.
BIN
Royal Enfield Documentation_11.pdf
Normal file
BIN
Royal Enfield Documentation_11.pdf
Normal file
Binary file not shown.
@ -1,9 +1,9 @@
|
||||
graph TD
|
||||
|
||||
DDT[DD Team<br/>First point of contact,<br/>Initial processing] --> ZM[ZM<br/>Evaluates and Approves/Rejects]
|
||||
ZM --> RBM[RBM<br/>Reviews ZM-approved applications,<br/>Makes final decisions]
|
||||
RBM --> DDL[DDL<br/>Evaluates RBM-approved applications<br/>and Forwards to Finance]
|
||||
DDL --> FDD[FDD Team<br/>Financial Due Diligence<br/>and Document Submission]
|
||||
FDD --> NBH[NBH<br/>Final Review and Approval]
|
||||
NBH --> Legal[Legal<br/>Handles Legal Documentation<br/>and Compliance]
|
||||
Legal --> SuperAdmin[Super Admin<br/>Full Oversight and Management]
|
||||
DDT[DD Team - First point of contact, Initial processing] --> ZM[ZM - Evaluates and Approves/Rejects]
|
||||
ZM --> RBM[RBM - Reviews ZM-approved applications, Makes final decisions]
|
||||
RBM --> DDL[DDL - Evaluates RBM-approved applications and Forwards to Finance]
|
||||
DDL --> FDD[FDD Team - Financial Due Diligence and Document Submission]
|
||||
FDD --> NBH[NBH - Final Review and Approval]
|
||||
NBH --> Legal[Legal - Handles Legal Documentation and Compliance]
|
||||
Legal --> SuperAdmin[Super Admin - Full Oversight and Management]
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
graph TD
|
||||
|
||||
%% ===== Start =====
|
||||
Start([🟢 Start: Dealer Claim Process]) --> RI[1️⃣ Request Initiation<br/><i>Requestor</i><br/>Submits activity request<br/>with dealer info, type, date, location, and details]
|
||||
Start([🟢 Start: Dealer Claim Process]) --> RI[1️⃣ Request Initiation - <i>Requestor</i> - Submits activity request with dealer info, type, date, location, and details]
|
||||
|
||||
%% ===== Proposal Submission =====
|
||||
RI --> PS[2️⃣ Proposal Submission<br/><i>Dealer</i><br/>Submits proposal with<br/>cost breakup, timeline,<br/>and supporting documents]
|
||||
RI --> PS[2️⃣ Proposal Submission - <i>Dealer</i> - Submits proposal with cost breakup, timeline, and supporting documents]
|
||||
|
||||
%% ===== Request Evaluation =====
|
||||
PS --> RE[3️⃣ Request Evaluation<br/><i>Requestor</i><br/>Reviews dealer proposal<br/>and adds comments]
|
||||
PS --> RE[3️⃣ Request Evaluation - <i>Requestor</i> - Reviews dealer proposal and adds comments]
|
||||
|
||||
RE --> RE_Decision{Proposal Satisfactory?}
|
||||
RE_Decision -->|❌ Needs Clarification| RE_Clarify[Requestor Requests Clarification]
|
||||
@ -15,22 +15,22 @@ graph TD
|
||||
RE_Decision -->|✅ Confirmed to Proceed| DLA
|
||||
|
||||
%% ===== Department Lead Approval =====
|
||||
DLA[4️⃣ Department Lead Approval<br/><i>Dept. Lead</i><br/>Reviews and Approves Request] --> DLA_Decision{Lead Decision}
|
||||
DLA[4️⃣ Department Lead Approval - <i>Dept. Lead</i> - Reviews and Approves Request] --> DLA_Decision{Lead Decision}
|
||||
DLA_Decision -->|❌ Needs Clarification| DLA_Clarify[Lead Requests Clarification]
|
||||
DLA_Clarify --> RE
|
||||
DLA_Decision -->|✅ Approved| BUD
|
||||
|
||||
%% ===== Budgeting =====
|
||||
BUD[5️⃣ Budgeting<br/><i>Finance or System</i><br/>Blocks budget under IO Internal Order] --> AC
|
||||
BUD[5️⃣ Budgeting - <i>Finance or System</i> - Blocks budget under IO Internal Order] --> AC
|
||||
|
||||
%% ===== Activity Creation =====
|
||||
AC[6️⃣ Activity Creation<br/><i>System</i><br/>Creates Activity and Sends Notifications<br/>to Requestor, Dealer and Lead] --> AE
|
||||
AC[6️⃣ Activity Creation - <i>System</i> - Creates Activity and Sends Notifications to Requestor, Dealer and Lead] --> AE
|
||||
|
||||
%% ===== Activity Execution =====
|
||||
AE[7️⃣ Activity Execution<br/><i>Dealer</i><br/>Executes Activity<br/>and Uploads Proof Documents] --> CA
|
||||
AE[7️⃣ Activity Execution - <i>Dealer</i> - Executes Activity and Uploads Proof Documents] --> CA
|
||||
|
||||
%% ===== Claim Approval =====
|
||||
CA[8️⃣ Claim Approval<br/><i>Requestor</i><br/>Reviews submitted documents] --> CA_Decision{Documents OK?}
|
||||
CA[8️⃣ Claim Approval - <i>Requestor</i> - Reviews submitted documents] --> CA_Decision{Documents OK?}
|
||||
CA_Decision -->|❌ Needs More Info| CA_Clarify[Requestor Requests Additional Information]
|
||||
CA_Clarify --> AE
|
||||
CA_Decision -->|✅ Approved| CA_Type{Approval Type}
|
||||
@ -38,7 +38,7 @@ graph TD
|
||||
CA_Type -->|Partial Approval| EI
|
||||
|
||||
%% ===== E-Invoicing =====
|
||||
EI[9️⃣ E-Invoicing<br/><i>Finance or System</i><br/>Generates E-Invoice<br/>and Issues Credit Note] --> End([✅ Claim Settled<br/>Process Completed])
|
||||
EI[9️⃣ E-Invoicing - <i>Finance or System</i> - Generates E-Invoice and Issues Credit Note] --> End([✅ Claim Settled - Process Completed])
|
||||
|
||||
%% ===== Styles =====
|
||||
style RI fill:#e3f2fd,stroke:#2196f3,stroke-width:2px,color:#000
|
||||
|
||||
Binary file not shown.
BIN
~WRL1115.tmp
BIN
~WRL1115.tmp
Binary file not shown.
Loading…
Reference in New Issue
Block a user