feat(vscode): import SVG to calm json file - #3003
Open
byrash wants to merge 1 commit into
Open
Conversation
Member
|
Is this related to a specific issue? |
Contributor
Author
Sorry no, was part of new capability to migrate to CALM. Thank You |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds SVG-to-CALM import support to the VS Code extension, supporting Draw.io metadata and generic SVG diagrams.
Changes:
- Adds import commands and canvas toolbar integration.
- Parses SVG nodes, relationships, containment, geometry, and styles.
- Generates CALM 1.2 JSON with parser and builder tests.
Reviewed changes
Copilot reviewed 19 out of 24 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
package-lock.json |
Locks SVG/XML dependencies. |
calm-plugins/vscode/package.json |
Registers the command and dependencies. |
calm-plugins/vscode/src/svg-parser.d.ts |
Declares SVG parser types. |
calm-plugins/vscode/src/extension/extension.ts |
Registers the import command. |
calm-plugins/vscode/src/extension/types/messages.ts |
Adds the import message type. |
calm-plugins/vscode/src/extension/webview/canvas-panel.ts |
Handles canvas import requests. |
calm-plugins/vscode/src/webview/App.tsx |
Adds the Import SVG button. |
calm-plugins/vscode/src/webview/stores/sync-bridge.ts |
Sends import requests. |
calm-plugins/vscode/src/extension/services/svg-import/index.ts |
Exports import APIs. |
calm-plugins/vscode/src/extension/services/svg-import/types.ts |
Defines import graph types. |
calm-plugins/vscode/src/extension/services/svg-import/svg-import-service.ts |
Orchestrates file selection and output. |
calm-plugins/vscode/src/extension/services/svg-import/format-detector.ts |
Detects SVG formats. |
calm-plugins/vscode/src/extension/services/svg-import/format-detector.test.ts |
Tests format detection. |
calm-plugins/vscode/src/extension/services/svg-import/drawio-parser.ts |
Parses Draw.io metadata. |
calm-plugins/vscode/src/extension/services/svg-import/drawio-parser.test.ts |
Tests Draw.io parsing. |
calm-plugins/vscode/src/extension/services/svg-import/generic-svg-parser.ts |
Parses generic SVG geometry. |
calm-plugins/vscode/src/extension/services/svg-import/generic-svg-parser.test.ts |
Tests generic parsing. |
calm-plugins/vscode/src/extension/services/svg-import/shape-mapper.ts |
Maps shapes to CALM types. |
calm-plugins/vscode/src/extension/services/svg-import/shape-mapper.test.ts |
Tests shape mapping. |
calm-plugins/vscode/src/extension/services/svg-import/calm-builder.ts |
Builds CALM JSON. |
calm-plugins/vscode/src/extension/services/svg-import/calm-builder.test.ts |
Tests CALM generation. |
calm-plugins/vscode/src/extension/services/svg-import/__fixtures__/generic-simple.svg |
Provides a generic SVG fixture. |
calm-plugins/vscode/src/extension/services/svg-import/__fixtures__/drawio-simple.svg |
Provides a Draw.io fixture. |
calm-plugins/vscode/src/extension/services/svg-import/__fixtures__/drawio-nested.svg |
Provides a nested Draw.io fixture. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+41
to
+45
| const node = tryExtractNodeFromGroup(child, nodes.length); | ||
| if (node) { | ||
| nodes.push(node); | ||
| } else { | ||
| extractNodesFromElement(child, nodes); |
Comment on lines
+5
to
+13
| const warnings: string[] = []; | ||
| const nodeIdMap = new Map<string, string>(); | ||
|
|
||
| const nodes = graph.nodes.map((n, i) => { | ||
| const { name, description } = splitLabel(n.label); | ||
| const isContainer = isContainerNode(n); | ||
| const nodeType = isContainer ? 'network' : mapShapeToNodeType(n.shapeHint, name); | ||
| const calmId = generateCalmId(nodeType, name, i); | ||
| nodeIdMap.set(n.id, calmId); |
| const byArea = [...nodes].sort((a, b) => { | ||
| const aArea = a.geometry.width * a.geometry.height; | ||
| const bArea = b.geometry.width * b.geometry.height; | ||
| return bArea - aArea; |
Comment on lines
+101
to
+105
| layout[calmId] = { | ||
| x: Math.round(n.geometry.x), | ||
| y: Math.round(n.geometry.y), | ||
| w: Math.round(n.geometry.width), | ||
| h: Math.round(n.geometry.height), |
| currentDocument.positionAt(currentDocument.getText().length) | ||
| ); | ||
| edit.replace(currentDocument.uri, fullRange, result.json); | ||
| await vscode.workspace.applyEdit(edit); |
| this.log = outputChannel; | ||
| } | ||
|
|
||
| async importSvgIntoDocument(currentDocument: vscode.TextDocument | undefined): Promise<string | null> { |
Comment on lines
+83
to
+85
| if ((tag === 'rect' || tag === 'ellipse' || tag === 'circle') && !shapeGeo) { | ||
| shapeGeo = getShapeGeometry(tag, child.properties); | ||
| shapeHint = classifyTag(tag, child.properties); |
Member
Can we add one? I think this is a significant enough feature proposal that we should have a record of what was intended. |
Contributor
Author
My Apologies @rocketstack-matt has been very busy. Here is the issue #3025 . Please do the needful. Thank You. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Iteration 1 of importing SVG into VS Code Plugin that converts to CALM JSON file to boot strap migration form other Diagram as code tools like Drawio ( more to be added )
Type of Change
Affected Components
cli/)calm/)calm-ai/)calm-hub/)calm-hub-ui/)calm-server/)calm-widgets/)docs/)shared/)calm-plugins/vscode/)Commit Message Format ✅
Testing
Checklist