Merge pull request #43 from geostyler/42-provide-radius-as-size-on-ma…

…rkers

fix: provide radius and types on marker

src/badTypes.ts

@@ -1,7 +1,8 @@
+import {WellKnownName} from 'geostyler-style';
+
 export type MarkerPlacement = Record<string, any>;
 export type Stroke = Record<string, any>;
 export type Fill = Record<string, any>;
-export type Marker = Record<string, any>;
 
 export interface Options {
     [key: string]: any;
@@ -32,12 +33,11 @@ export interface Symbolizer {
     haloSize?: number;
     haloOpacity?: number;
     group?: boolean;
-    wellKnownName?: string;
+    wellKnownName?: WellKnownName;
     opacity?: number;
     graphicStroke?: any;
     graphicStrokeInterval?: any;
     graphicStrokeOffset?: any;
     graphicFill?: any;
     graphicFillMargin?: any;
-    Z?: number;
 }

src/index.spec.ts

@@ -127,7 +127,7 @@ describe('LyrxParser should parse feature-layer-point-graduated-colors-renderer.
     expect(symbolizer.fillOpacity).toEqual(1);
     expect(symbolizer.color).toEqual('#f4f400');
     expect(symbolizer.rotate).toEqual(0);
-    // expect(symbolizer.radius).toEqual(2.6666666666666665); // FIXME
+    expect(symbolizer.radius).toEqual(2.6666666666666665); // FIXME
     expect(symbolizer.strokeColor).toEqual('#000000');
     expect(symbolizer.strokeWidth).toEqual(0.9333333333333332);
     expect(symbolizer.strokeOpacity).toEqual(1);

src/processSymbolLayer.ts

@@ -1,4 +1,4 @@
-import { Fill, Marker, Stroke } from './badTypes.ts';
+import { Fill, Stroke, Symbolizer } from './badTypes.ts';
 import { toWKT } from './wktGeometries.ts';
 import { ESRI_SYMBOLS_FONT, OFFSET_FACTOR, ptToPx } from './constants.ts';
 import { processColor, processOpacity } from './processUtils.ts';
@@ -11,6 +11,7 @@ import {
   WARNINGS,
 } from './toGeostylerUtils.ts';
 import { processSymbolReference } from './processSymbolReference.ts';
+import { MarkSymbolizer, WellKnownName } from 'geostyler-style';
 // import { writeFileSync, existsSync, mkdirSync } from 'fs';
 // import uuid from 'uuid';
 // import { tmpdir } from 'os';
@@ -89,18 +90,18 @@ const processSymbolSolidFill = (layer: any): any => {
 const processSymbolCharacterMarker = (
   layer: any,
   options: { [key: string]: any }
-): { [key: string]: any } => {
+): MarkSymbolizer => {
   const replaceesri = !!options.replaceesri;
   const fontFamily = layer.fontFamilyName;
   const charindex = layer.characterIndex;
   const hexcode = toHex(charindex);
   const size = ptToPxProp(layer, 'size', 12);
 
-  let name: string;
+  let name: WellKnownName;
   if (fontFamily === ESRI_SYMBOLS_FONT && replaceesri) {
     name = esriFontToStandardSymbols(charindex);
   } else {
-    name = `ttf://${fontFamily}#${hexcode}`;
+    name = `ttf://${fontFamily}#${hexcode}` as WellKnownName;
   }
 
   let rotate = layer.rotation === undefined ? 0 : layer.rotation;
@@ -139,12 +140,11 @@ const processSymbolCharacterMarker = (
     kind: 'Mark',
     color: fillColor,
     wellKnownName: name,
-    size: size,
-    Z: 0,
+    radius: size / 2,
   };
 };
 
-const processSymbolVectorMarker = (layer: any): Marker => {
+const processSymbolVectorMarker = (layer: any): MarkSymbolizer => {
   if (layer.size) {
     layer.size = ptToPxProp(layer, 'size', 3);
   }
@@ -154,30 +154,30 @@ const processSymbolVectorMarker = (layer: any): Marker => {
   let strokeWidth = 1.0;
   let markerSize = 10;
   let strokeOpacity = 1;
-  let wellKnownName = 'circle';
+  let wellKnownName: WellKnownName = 'circle';
   let maxX: number | null = null;
   let maxY: number | null = null;
 
-  let marker: Marker;
+  let symbol: Symbolizer;
   const markerGraphics =
     layer.markerGraphics !== undefined ? layer.markerGraphics : [];
   if (markerGraphics.length > 0) {
     // TODO: support multiple marker graphics
     const markerGraphic = markerGraphics[0];
-    marker = processSymbolReference(markerGraphic, {})[0];
+    symbol = processSymbolReference(markerGraphic, {})[0];
     const sublayers = markerGraphic.symbol.symbolLayers.filter(
       (sublayer: any) => sublayer.enable
     );
     fillColor = extractFillColor(sublayers);
     [strokeColor, strokeWidth, strokeOpacity] = extractStroke(sublayers);
     markerSize =
-      marker.size !== undefined
-        ? marker.size
+      symbol.size !== undefined
+        ? symbol.size
         : layer.size !== undefined
           ? layer.size
           : 10;
     if (markerGraphic.symbol.type === 'CIMPointSymbol') {
-      wellKnownName = marker.wellKnownName ?? '';
+      wellKnownName = symbol.wellKnownName ?? wellKnownName;
     } else if (
       ['CIMLineSymbol', 'CIMPolygonSymbol'].includes(markerGraphic.symbol.type)
     ) {
@@ -192,18 +192,18 @@ const processSymbolVectorMarker = (layer: any): Marker => {
     }
   }
 
-  marker = {
+  // FIXME marker should support outlineDasharray ?
+  const marker: any = {
     opacity: 1.0,
     rotate: 0.0,
     kind: 'Mark',
     color: fillColor,
     wellKnownName: wellKnownName,
-    size: markerSize,
+    radius: markerSize / 2,
     strokeColor: strokeColor,
     strokeWidth: strokeWidth,
     strokeOpacity: strokeOpacity,
     fillOpacity: 1.0,
-    Z: 0,
   };
   if (maxX !== null) {
     marker.maxX = maxX;
@@ -220,11 +220,11 @@ const processSymbolVectorMarker = (layer: any): Marker => {
   // Conversion of dash arrays is made on a case-by-case basis
   if (JSON.stringify(markerPlacement) === JSON.stringify([12, 3])) {
     marker.outlineDasharray = '4 0 4 7';
-    marker.size = 6;
+    marker.radius = 3;
     marker.perpendicularOffset = -3.5;
   } else if (JSON.stringify(markerPlacement) === JSON.stringify([15])) {
     marker.outlineDasharray = '0 5 9 1';
-    marker.size = 10;
+    marker.radius = 5;
   }
 
   return marker;
@@ -383,12 +383,12 @@ const hatchMarkerForAngle = (angle: number): any => {
   ][quadrant];
 };
 
-const extractOffset = (symbolLayer: any): null | [number, number] => {
+const extractOffset = (symbolLayer: any): undefined | [number, number] => {
   let offsetX = ptToPxProp(symbolLayer, 'offsetX', 0) * OFFSET_FACTOR;
   let offsetY = ptToPxProp(symbolLayer, 'offsetY', 0) * OFFSET_FACTOR * -1;
 
   if (offsetX === 0 && offsetY !== 0) {
-    return null;
+    return undefined;
   }
   return [offsetX, offsetY];
 };

src/processSymbolReference.ts

@@ -83,7 +83,7 @@ const formatLineSymbolizer = (symbolizer: Symbolizer): Symbolizer => {
     graphicStroke: [symbolizer],
     graphicStrokeInterval: ptToPxProp(symbolizer, 'size', 0) * 2, // TODO
     graphicStrokeOffset: 0.0,
-    Z: 0,
+
   };
 };
 
@@ -103,7 +103,6 @@ const formatPolygonSymbolizer = (
       perpendicularOffset: 0.0,
       graphicFill: [symbolizer],
       graphicFillMargin: margin,
-      Z: 0,
     };
   }
   if (markerPlacementType === 'CIMMarkerPlacementAlongLineSameSize') {
@@ -113,7 +112,6 @@ const formatPolygonSymbolizer = (
       size: ptToPxProp(symbolizer, 'size', 10),
       perpendicularOffset: ptToPxProp(symbolizer, 'perpendicularOffset', 0.0),
       graphicStroke: [symbolizer],
-      Z: 0,
     };
   }
   return null;

src/toGeostylerUtils.ts

@@ -1,14 +1,15 @@
-import {ptToPx} from './constants.ts';
-import {processColor, processOpacity} from './processUtils.ts';
+import { ptToPx } from './constants.ts';
+import { processColor, processOpacity } from './processUtils.ts';
+import { WellKnownName } from 'geostyler-style';
 
 export const WARNINGS: string[] = [];
 
 export const toHex = (value: number): string => {
   return `0x${value.toString(16)}`;
 };
 
-export const esriFontToStandardSymbols = (charIndex: number): string => {
-  const mapping: { [index: number]: string } = {
+export const esriFontToStandardSymbols = (charIndex: number): WellKnownName => {
+  const mapping: { [index: number]: WellKnownName } = {
     33: 'circle',
     34: 'square',
     35: 'triangle',

src/wktGeometries.ts

@@ -1,26 +1,28 @@
+import {WellKnownName} from 'geostyler-style';
+
 type Geometry = {
     rings?: number[][][];
     paths?: number[][][];
     curveRings?: { a?: number[][]; c?: number[][] }[][];
 };
 
-export const toWKT = (geometry: Geometry): { wellKnownName: string; maxX?: number; maxY?: number } => {
-  const defaultMarker = {wellKnownName: 'circle'};
+export const toWKT = (geometry: Geometry): { wellKnownName: WellKnownName; maxX?: number; maxY?: number } => {
+  const defaultMarker = {wellKnownName: 'circle' as WellKnownName};
 
   if (geometry.rings) {
     let [rings] = geometry.rings;
     rings = heightNormalized(rings);
     let coordinates = rings.map(j => j.join(' ')).join(', ');
     return {
-      wellKnownName: `wkt://POLYGON((${coordinates}))`,
+      wellKnownName: `wkt://POLYGON((${coordinates}))` as WellKnownName,
       maxX: Math.max(...rings.map(coord => coord[0])),
       maxY: Math.max(...rings.map(coord => coord[1])),
     };
   }
 
   const path = geometry?.paths?.[0];
   if (path && path[0][0] === 2 && path[0][1] === 0 && path[1][0] -2 && path[1][1] === 0) {
-    return {wellKnownName: 'wkt://MULTILINESTRING((0 2, 0 0))'};
+    return {wellKnownName: 'wkt://MULTILINESTRING((0 2, 0 0))' as WellKnownName};
   }
 
   if (geometry.curveRings) {
@@ -33,7 +35,7 @@ export const toWKT = (geometry: Geometry): { wellKnownName: string; maxX?: numbe
     if (endPoint !== startPoint) {return defaultMarker;}
     const radius = distanceBetweenPoints(startPoint as number[], centerPoint);
     return {
-      wellKnownName: 'circle',
+      wellKnownName: 'circle' as WellKnownName,
       maxX: radius,
       maxY: radius,
     };