Fix/resolve svg issues on artemis

library/lib/apollon-editor.tsx

@@ -186,7 +186,6 @@ export class ApollonEditor {
     options?: Apollon.ExportOptions,
     theme?: DeepPartial<Apollon.Styles>
   ): Promise<Apollon.SVG> {
-    void options
     void theme
     const container = document.createElement("div")
     container.style.display = "flex"
@@ -278,7 +277,7 @@ export class ApollonEditor {
       height: bounds.height + margin * 2,
     }
 
-    const svgString = getSVG(container, clip)
+    const svgString = getSVG(container, clip, options)
 
     // Clean up
     svgRoot.unmount()

library/lib/components/Sidebar.tsx

@@ -3,6 +3,7 @@ import {
   ColorDescriptionConfig,
   DROPS,
   dropElementConfigs,
+  LAYOUT,
   ZINDEX,
 } from "@/constants"
 import { DividerLine } from "./ui/DividerLine"
@@ -17,6 +18,11 @@ import { DraggableGhost } from "./DraggableGhost"
 
 export const Sidebar = () => {
   const diagramType = useMetadataStore(useShallow((state) => state.diagramType))
+  const labelPreviewTypes = new Set([
+    "sfcTransitionBranch",
+    "petriNetPlace",
+    "petriNetTransition",
+  ])
 
   if (dropElementConfigs[diagramType].length === 0) {
     return null
@@ -38,30 +44,40 @@ export const Sidebar = () => {
         flexShrink: 0,
       }}
     >
-      {dropElementConfigs[diagramType].map((config, index) => (
-        <React.Fragment key={`${config.type}_${config.defaultData?.name}`}>
-          <DraggableGhost dropElementConfig={config}>
-            <div
-              className="prevent-select"
-              style={{
-                width: config.width * DROPS.SIDEBAR_PREVIEW_SCALE,
-                height: config.height * DROPS.SIDEBAR_PREVIEW_SCALE,
-                zIndex: ZINDEX.DRAGGABLE_GHOST,
-                marginTop: config.marginTop,
-              }}
-            >
-              {React.createElement(config.svg, {
-                width: config.width,
-                height: config.height,
-                ...config.defaultData,
-                data: config.defaultData,
-                SIDEBAR_PREVIEW_SCALE: DROPS.SIDEBAR_PREVIEW_SCALE,
-                id: `sidebarElement_${index}`,
-              })}
-            </div>
-          </DraggableGhost>
-        </React.Fragment>
-      ))}
+      {dropElementConfigs[diagramType].map((config, index) => {
+        const extraPreviewHeight =
+          labelPreviewTypes.has(config.type)
+            ? LAYOUT.DEFAULT_ATTRIBUTE_HEIGHT
+            : 0
+        const previewScale = DROPS.SIDEBAR_PREVIEW_SCALE
+        const previewWidth = config.width * previewScale
+        const previewHeight = (config.height + extraPreviewHeight) * previewScale
+
+        return (
+          <React.Fragment key={`${config.type}_${config.defaultData?.name}`}>
+            <DraggableGhost dropElementConfig={config}>
+              <div
+                className="prevent-select"
+                style={{
+                  width: previewWidth,
+                  height: previewHeight,
+                  zIndex: ZINDEX.DRAGGABLE_GHOST,
+                  marginTop: config.marginTop,
+                }}
+              >
+                {React.createElement(config.svg, {
+                  width: config.width,
+                  height: config.height,
+                  ...config.defaultData,
+                  data: config.defaultData,
+                  SIDEBAR_PREVIEW_SCALE: previewScale,
+                  id: `sidebarElement_${index}`,
+                })}
+              </div>
+            </DraggableGhost>
+          </React.Fragment>
+        )
+      })}
 
       <DividerLine style={{ margin: "3px 0" }} />
       <DraggableGhost dropElementConfig={ColorDescriptionConfig}>

library/lib/components/svgs/nodes/petriNetDiagram/PetriNetPlaceSVG.tsx

@@ -23,8 +23,13 @@ export const PetriNetPlaceSVG: React.FC<Props> = ({
   const { name, tokens, capacity } = data
   const assessments = useDiagramStore(useShallow((state) => state.assessments))
   const nodeScore = assessments[id]?.score
-  const scaledWidth = width * (SIDEBAR_PREVIEW_SCALE ?? 1)
-  const scaledHeight = height * (SIDEBAR_PREVIEW_SCALE ?? 1)
+  const previewScale = SIDEBAR_PREVIEW_SCALE ?? 1
+  const scaledWidth = width * previewScale
+  const scaledHeight = height * previewScale
+  const labelHeight = LAYOUT.DEFAULT_ATTRIBUTE_HEIGHT
+  const scaledLabelHeight = labelHeight * previewScale
+  const svgHeight = height + labelHeight
+  const scaledSvgHeight = scaledHeight + scaledLabelHeight
 
   const centerX = width / 2
   const centerY = height / 2
@@ -75,8 +80,8 @@ export const PetriNetPlaceSVG: React.FC<Props> = ({
   return (
     <svg
       width={scaledWidth}
-      height={scaledHeight}
-      viewBox={`0 0 ${width} ${height}`}
+      height={scaledSvgHeight}
+      viewBox={`0 0 ${width} ${svgHeight}`}
       overflow="visible"
       {...svgAttributes}
     >
@@ -97,10 +102,10 @@ export const PetriNetPlaceSVG: React.FC<Props> = ({
 
       <CustomText
         x={width / 2}
-        y={height + 10}
+        y={height + labelHeight / 2}
         textAnchor="middle"
         fontWeight="600"
-        dominantBaseline="central"
+        dominantBaseline="middle"
         fill={textColor}
       >
         {name}

library/lib/components/svgs/nodes/petriNetDiagram/PetriNetTransitionSVG.tsx

@@ -5,6 +5,7 @@ import { SVGComponentProps } from "@/types/SVG"
 import { CustomText } from "../CustomText"
 import { StyledRect } from "@/components"
 import { DefaultNodeProps } from "@/types"
+import { LAYOUT } from "@/constants"
 import { getCustomColorsFromData } from "@/utils/layoutUtils"
 
 interface Props extends SVGComponentProps {
@@ -23,15 +24,20 @@ export const PetriNetTransitionSVG: React.FC<Props> = ({
   const { name } = data
   const assessments = useDiagramStore(useShallow((state) => state.assessments))
   const nodeScore = assessments[id]?.score
-  const scaledWidth = width * (SIDEBAR_PREVIEW_SCALE ?? 1)
-  const scaledHeight = height * (SIDEBAR_PREVIEW_SCALE ?? 1)
+  const previewScale = SIDEBAR_PREVIEW_SCALE ?? 1
+  const scaledWidth = width * previewScale
+  const scaledHeight = height * previewScale
+  const labelHeight = LAYOUT.DEFAULT_ATTRIBUTE_HEIGHT
+  const scaledLabelHeight = labelHeight * previewScale
+  const svgHeight = height + labelHeight
+  const scaledSvgHeight = scaledHeight + scaledLabelHeight
 
   const { fillColor, strokeColor, textColor } = getCustomColorsFromData(data)
   return (
     <svg
       width={scaledWidth}
-      height={scaledHeight}
-      viewBox={`0 0 ${width} ${height}`}
+      height={scaledSvgHeight}
+      viewBox={`0 0 ${width} ${svgHeight}`}
       overflow="visible"
       {...svgAttributes}
     >
@@ -46,10 +52,10 @@ export const PetriNetTransitionSVG: React.FC<Props> = ({
 
       <CustomText
         x={width / 2}
-        y={-20}
+        y={height + labelHeight / 2}
         textAnchor="middle"
         fontWeight="600"
-        dominantBaseline="hanging"
+        dominantBaseline="middle"
         fill={textColor}
       >
         {name}

library/lib/components/svgs/nodes/sfcDiagram/SfcTransitionBranchNodeSVG.tsx

@@ -16,8 +16,13 @@ export const SfcTransitionBranchNodeSVG: React.FC<Props> = ({
   SIDEBAR_PREVIEW_SCALE,
 }) => {
   const { name, showHint } = data
-  const scaledWidth = width * (SIDEBAR_PREVIEW_SCALE ?? 1)
-  const scaledHeight = height * (SIDEBAR_PREVIEW_SCALE ?? 1)
+  const previewScale = SIDEBAR_PREVIEW_SCALE ?? 1
+  const scaledWidth = width * previewScale
+  const scaledHeight = height * previewScale
+  const labelHeight = LAYOUT.DEFAULT_ATTRIBUTE_HEIGHT
+  const scaledLabelHeight = labelHeight * previewScale
+  const svgHeight = height + labelHeight
+  const scaledSvgHeight = scaledHeight + scaledLabelHeight
 
   const cx = width / 2
   const cy = height / 2
@@ -28,8 +33,8 @@ export const SfcTransitionBranchNodeSVG: React.FC<Props> = ({
   return (
     <svg
       width={scaledWidth}
-      height={scaledHeight}
-      viewBox={`0 0 ${width} ${height}`}
+      height={scaledSvgHeight}
+      viewBox={`0 0 ${width} ${svgHeight}`}
       overflow="visible"
       {...svgAttributes}
     >
@@ -42,7 +47,12 @@ export const SfcTransitionBranchNodeSVG: React.FC<Props> = ({
         strokeWidth={LAYOUT.LINE_WIDTH}
       />
       {showHint && (
-        <CustomText x={cx} y={height - 2} textAnchor="middle">
+        <CustomText
+          x={cx}
+          y={height + labelHeight / 2}
+          textAnchor="middle"
+          dominantBaseline="middle"
+        >
           {name}
         </CustomText>
       )}

library/lib/typings.ts

@@ -71,6 +71,8 @@ export enum ApollonView {
   Highlight = "Highlight",
 }
 
+export type SvgExportMode = "web" | "compat"
+
 export type ApollonOptions = {
   type?: UMLDiagramType
   mode?: ApollonMode
@@ -110,6 +112,12 @@ export type ExportOptions = {
   keepOriginalSize?: boolean
   include?: string[]
   exclude?: string[]
+  /**
+   * Controls how SVG output is post-processed.
+   * - "web": keep CSS variables for theme-adaptive rendering in browsers
+   * - "compat": resolve CSS variables + inline attributes for PowerPoint/Inkscape
+   */
+  svgMode?: SvgExportMode
 }
 
 export type SVG = {