Add support for dashed lines using PolylineDash

- add tests;
- add allowSyntheticDefaultImports to allow loading node assert and test modules.

Author: fredj

.github/workflows/test.yml

@@ -12,12 +12,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: CI
         run: npm ci
       - name: Lint
         run: npm run lint
       - name: Prepare
         run: npm run prepare
+      - name: Test
+        run: npm test
       - name: Build examples
         run: npm run build-examples

CHANGES.md

@@ -1,8 +1,15 @@
 # Changelog
 
+## v 2.19.3
+
+* Changes
+  * Support dashed lines by converting the pattern
+
+
 ## v 2.19.2
 
-* Port to OpenLayers 9
+* Changes
+  * Add OpenLayers 9 support
 
 ## v 2.19.1
 

package-lock.json

@@ -3,6 +3,7 @@
   "version": "2.19.2",
   "description": "OpenLayers Cesium integration and plugin library",
   "scripts": {
+    "test": "node --enable-source-maps --import @swc-node/register/esm-register --test  src/olcs/*.test.ts",
     "build-examples": "rm -rf dist; parcel build; mkdir -p dist/examples/node_modules/ol; mkdir -p dist/examples/node_modules/cesium/Build/; cp examples/inject_ol_cesium.js dist/examples/; cp node_modules/ol/ol.css dist/examples/node_modules/ol/; cp -R node_modules/cesium/Build/CesiumUnminified node_modules/cesium/Build/Cesium dist/examples/node_modules/cesium/Build/; cp -R examples/data dist/examples/",
     "prepare": "tsc --pretty && node buildtools/fix_paths_recast.js; npm run doc",
     "typecheck": "tsc --pretty --noEmit",
@@ -77,6 +78,7 @@
   "devDependencies": {
     "@babel/parser": "7.23.9",
     "@mapbox/geojsonhint": "3.3.0",
+    "@swc-node/register": "^1.8.0",
     "@typescript-eslint/eslint-plugin": "7.0.2",
     "@typescript-eslint/parser": "7.0.2",
     "cesium": "1.114.0",

package.json

@@ -976,12 +976,11 @@ export default class FeatureConverter {
     const olColor = outline ? stroke.getColor() : fill.getColor();
     const color = convertColorToCesium(olColor);
 
-    if (outline && stroke.getLineDash()) {
-      return Cesium.Material.fromType('Stripe', {
-        horizontal: false,
-        repeat: 500, // TODO how to calculate this?
-        evenColor: color,
-        oddColor: new Cesium.Color(0, 0, 0, 0) // transparent
+    const lineDash = stroke.getLineDash();
+    if (outline && lineDash) {
+      return Cesium.Material.fromType('PolylineDash', {
+        dashPattern: dashPattern(lineDash),
+        color
       });
     } else {
       return Cesium.Material.fromType('Color', {
@@ -1230,3 +1229,43 @@ export default class FeatureConverter {
     return primitives;
   }
 }
+
+/**
+ * Transform a canvas line dash pattern to a Cesium dash pattern
+ * See https://cesium.com/learn/cesiumjs/ref-doc/PolylineDashMaterialProperty.html#dashPattern
+ * @param lineDash
+ */
+export function dashPattern(lineDash: number[]): number {
+  if (lineDash.length < 2) {
+    lineDash = [1, 1];
+  }
+  const segments = lineDash.length % 2 === 0 ? lineDash : [...lineDash, ...lineDash];
+  const total = segments.reduce((a, b) => a + b, 0);
+  const div = total / 16;
+  // create a 16 bit binary string
+  let binaryString = segments.map((segment, index) => {
+    // we alternate between 1 and 0
+    const digit = index % 2 === 0 ? '1' : '0';
+    // We scale the segment length to fit 16 slots.
+    let count = Math.round(segment / div);
+    if (index === 0 && count === 0) {
+      // We need to start with a 1
+      count = 1;
+    }
+    return digit.repeat(count);
+  }).join('');
+
+  // We rounded so it might be that the string is too short or too long.
+  // We try to fix it by padding or truncating the string.
+  if (binaryString.length < 16) {
+    binaryString = binaryString.padEnd(16, '0');
+  } else if (binaryString.length > 16) {
+    binaryString = binaryString.substring(0, 16);
+  }
+  if (binaryString[15] === '1') {
+    // We need to really finish with a 0
+    binaryString = binaryString.substring(0, 15) + '0';
+  }
+  console.assert(binaryString.length === 16);
+  return parseInt(binaryString, 2);
+}

src/olcs/FeatureConverter.ts

@@ -0,0 +1,38 @@
+import test from 'node:test';
+import assert from 'node:assert';
+
+import {dashPattern} from './FeatureConverter';
+
+function olPatternAsBinary(pattern: number[]): string {
+  const pattern16 = dashPattern(pattern);
+  return pattern16.toString(2);
+}
+
+test('pattern-100-100', (t) => {
+  // Whatever the scaling, the result should be the same.
+  // Only propoprtion matters.
+  assert.strictEqual(olPatternAsBinary([100, 100]), '1111111100000000');
+  assert.strictEqual(olPatternAsBinary([1, 1]), '1111111100000000');
+  assert.strictEqual(olPatternAsBinary([999999, 999999]), '1111111100000000');
+});
+
+test('pattern-100-100-100-100', (t) => {
+  // We should see 4 dashes of equal length.
+  assert.strictEqual(olPatternAsBinary([100, 100, 100, 100]), '1111000011110000');
+});
+
+test('pattern-too-long', (t) => {
+  // When the pattern is too long, here we have 200 segments
+  // we should still ensure that the pattern is well formed (I guess):
+  // - starts with a 1:
+  // - ends with a 0.
+  assert.strictEqual(olPatternAsBinary(Array.from({length: 200}, _ => 1)), '1000000000000000');
+});
+
+
+test('pattern-uneven', (t) => {
+  // When the pattern is uneven, it is duplicated
+  assert.strictEqual(olPatternAsBinary([6, 1, 2, 6, 1, 2]), '1111101100000100');
+  assert.strictEqual(olPatternAsBinary([6, 1, 2]), '1111101100000100');
+  assert.strictEqual(olPatternAsBinary([12, 2, 4]), '1111101100000100');
+});

src/olcs/dashPatternConversion.test.ts

@@ -13,6 +13,7 @@
       "noImplicitAny": true,
       "declarationMap": true,
       "forceConsistentCasingInFileNames": true,
+      "allowSyntheticDefaultImports": true,
       "paths": {
         "ol/*": ["node_modules/ol/*"]
       },