Merge pull request #211 from kieler/nre/dashoffset

core: implement dash offset for custom line styles
kieler · Jan 7, 2025 · befeffd · befeffd
2 parents 7998691 + 590a221
commit befeffd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/klighd-core/src/views-rendering.tsx b/packages/klighd-core/src/views-rendering.tsx
@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2019-2024 by
+ * Copyright 2019-2025 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -909,6 +909,7 @@ export function renderSingleSVGRect(
                 ...(kShadow ? {} : { 'stroke-linejoin': lineStyles.lineJoin }),
                 ...(kShadow ? {} : { 'stroke-width': lineStyles.lineWidth }),
                 ...(kShadow ? {} : { 'stroke-dasharray': lineStyles.dashArray }),
+                ...(kShadow ? {} : { 'stroke-dashoffset': lineStyles.dashOffset }),
                 ...(kShadow ? {} : { 'stroke-miterlimit': lineStyles.miterLimit }),
                 opacity: kShadow
                     ? colorStyles.opacity
@@ -1110,6 +1111,7 @@ export function renderSingleSVGArc(
                 ...(kShadow ? {} : { 'stroke-linejoin': lineStyles.lineJoin }),
                 ...(kShadow ? {} : { 'stroke-width': lineStyles.lineWidth }),
                 ...(kShadow ? {} : { 'stroke-dasharray': lineStyles.dashArray }),
+                ...(kShadow ? {} : { 'stroke-dashoffset': lineStyles.dashOffset }),
                 ...(kShadow ? {} : { 'stroke-miterlimit': lineStyles.miterLimit }),
                 opacity: kShadow
                     ? colorStyles.opacity
@@ -1186,6 +1188,7 @@ export function renderSingleSVGEllipse(
                 ...(kShadow ? {} : { 'stroke-linejoin': lineStyles.lineJoin }),
                 ...(kShadow ? {} : { 'stroke-width': lineStyles.lineWidth }),
                 ...(kShadow ? {} : { 'stroke-dasharray': lineStyles.dashArray }),
+                ...(kShadow ? {} : { 'stroke-dashoffset': lineStyles.dashOffset }),
                 ...(kShadow ? {} : { 'stroke-miterlimit': lineStyles.miterLimit }),
                 opacity: kShadow
                     ? colorStyles.opacity
@@ -1256,6 +1259,7 @@ export function renderSingleSVGLine(
                 ...(kShadow ? {} : { 'stroke-linejoin': lineStyles.lineJoin }),
                 ...(kShadow ? {} : { 'stroke-width': lineStyles.lineWidth }),
                 ...(kShadow ? {} : { 'stroke-dasharray': lineStyles.dashArray }),
+                ...(kShadow ? {} : { 'stroke-dashoffset': lineStyles.dashOffset }),
                 ...(kShadow ? {} : { 'stroke-miterlimit': lineStyles.miterLimit }),
                 opacity: kShadow
                     ? colorStyles.opacity

diff --git a/packages/klighd-core/src/views-styles.tsx b/packages/klighd-core/src/views-styles.tsx
@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2019-2023 by
+ * Copyright 2019-2025 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -866,6 +866,7 @@ export function getSvgLineStyles(styles: KStyles, target: SKGraphElement, contex
         lineCap: lineCap === DEFAULT_LINE_CAP_SVG ? undefined : lineCap,
         lineJoin: lineJoin === DEFAULT_LINE_JOIN_SVG ? undefined : lineJoin,
         dashArray: styles.kLineStyle === undefined ? undefined : lineStyleText(styles.kLineStyle, lineWidth),
+        dashOffset: styles.kLineStyle === undefined ? undefined : styles.kLineStyle.dashOffset?.toString(),
         // Note: Here the miter limit value is also omitted if the value equals KGraph's default value of 10, because otherwise the resulting SVG would
         // always contain the miterLimit style to be set to 10, even though it is not intended by the creator of the KGraph model and it would not
         // even make any difference in the rendering. Here I cannot distinguish if the model creator really wanted to have the specific miter limit of 10
@@ -941,6 +942,7 @@ export interface LineStyles {
     lineCap: 'butt' | 'round' | 'square' | undefined
     lineJoin: 'bevel' | 'miter' | 'round' | undefined
     dashArray: string | undefined
+    dashOffset: string | undefined
     miterLimit: string | undefined
 }