Upgrade sld-parser, make use of SLD 1.1

geostyler · Mar 11, 2021 · 1d3c474 · 1d3c474
1 parent 90afe8c
commit 1d3c474
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,6 @@
     "@types/color": "^3.0.1",
     "@types/file-saver": "^2.0.1",
     "@types/geojson": "^7946.0.7",
-    "@types/lodash": "^4.14.159",
     "@types/react": "^16.9.46",
     "@types/react-color": "^3.0.4",
     "@types/react-dom": "^16.9.8",
@@ -67,7 +66,7 @@
     "geostyler-data": "^1.0.0",
     "geostyler-geojson-parser": "^1.0.1",
     "geostyler-openlayers-parser": "^2.1.0",
-    "geostyler-sld-parser": "^2.1.0",
+    "geostyler-sld-parser": "^2.2.0",
     "geostyler-style": "^2.1.0",
     "geostyler-wfs-parser": "^1.0.1",
     "lodash": "^4.17.20",
@@ -89,6 +88,7 @@
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.20",
     "@types/jest-diff": "^24.3.0",
+    "@types/lodash": "^4.14.168",
     "@types/node": "^12.12.54",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/eslint-plugin-tslint": "^4.15.0",

diff --git a/src/Component/CodeEditor/CodeEditor.less b/src/Component/CodeEditor/CodeEditor.less
@@ -58,6 +58,10 @@
     justify-content: center;
   }
 
+  .symbolizer-units-label {
+    padding-left: 10px;
+  }
+
   .gs-code-editor-download-button,
   .gs-code-editor-copy-button {
     margin: 0 5px;

diff --git a/src/Component/CodeEditor/CodeEditor.tsx b/src/Component/CodeEditor/CodeEditor.tsx
@@ -59,13 +59,18 @@ import _isEqual from 'lodash/isEqual';
 
 import { localize } from '../LocaleWrapper/LocaleWrapper';
 import en_US from '../../locale/en_US';
+import SldStyleParser from 'geostyler-sld-parser';
 
 // i18n
 export interface CodeEditorLocale {
   downloadButtonLabel: string;
   formatSelectLabel: string;
   copyButtonLabel: string;
   styleCopied: string;
+  symbolizerUnitsLabel: string;
+  symbolizerUnitsPixel: string;
+  symbolizerUnitsMeter: string;
+  symbolizerUnitsFoot: string;
 }
 
 interface CodeEditorDefaultProps {
@@ -96,6 +101,7 @@ interface CodeEditorState {
   value: string;
   invalidMessage?: string;
   activeParser?: StyleParser;
+  symbolizerUnit: string;
   hasError: boolean;
 }
 
@@ -120,7 +126,8 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
     this.editTimeout =  null;
     this.state = {
       value: '',
-      hasError: false
+      hasError: false,
+      symbolizerUnit: 'pixel'
     };
   }
 
@@ -163,7 +170,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
 
   getModeByParser = (): string => {
     const activeParser: any = this.state.activeParser;
-    if (activeParser && activeParser.title === 'SLD Style Parser') {
+    if (activeParser && activeParser.sldVersion) {
       return 'application/xml';
     }
     return 'application/json';
@@ -235,6 +242,23 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
     }
   };
 
+  onUnitSelect = (selection: string) => {
+    const {
+      style
+    } = this.props;
+    const {
+      activeParser,
+    } = this.state;
+    const parser = activeParser as SldStyleParser;
+    parser.symbolizerUnits = selection;
+    this.setState({
+      symbolizerUnit: selection
+    });
+    if (style) {
+      this.updateValueFromStyle(style);
+    }
+  };
+
   handleOnChange = (editor: any, data: any, value: string) => {
     const {
       delay
@@ -326,7 +350,8 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
     const activeParser: any = this.state.activeParser;
     const {
       hasError,
-      value
+      value,
+      symbolizerUnit
     } = this.state;
     if (hasError) {
       return <h1>An error occured in the CodeEditor UI.</h1>;
@@ -343,6 +368,25 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
           >
             {this.getParserOptions()}
           </Select>
+          {activeParser &&
+          activeParser.sldVersion &&
+          activeParser.sldVersion !== '1.0.0' &&
+            <>
+              <span className="symbolizer-units-label">
+                {locale.symbolizerUnitsLabel}:
+              </span>
+              <Select
+                className="gs-code-editor-format-select"
+                style={{ width: 100 }}
+                onSelect={this.onUnitSelect}
+                value={symbolizerUnit}
+              >
+                <Option value="pixel">{locale.symbolizerUnitsPixel}</Option>
+                <Option value="meter">{locale.symbolizerUnitsMeter}</Option>
+                <Option value="foot">{locale.symbolizerUnitsFoot}</Option>
+              </Select>
+            </>
+          }
         </div>
         <CodeMirror
           className="gs-code-editor-codemirror"

diff --git a/src/locale/de_DE.ts b/src/locale/de_DE.ts
@@ -84,7 +84,11 @@ export default {
     downloadButtonLabel: 'Als Datei speichern',
     copyButtonLabel: 'In Zwischenablage kopieren',
     formatSelectLabel: 'Format',
-    styleCopied: 'Style in Zwischenablage kopiert!'
+    styleCopied: 'Style in Zwischenablage kopiert!',
+    symbolizerUnitsLabel: 'Symbolizer Einheiten',
+    symbolizerUnitsPixel: 'Pixel',
+    symbolizerUnitsMeter: 'Meter',
+    symbolizerUnitsFoot: 'Fuß'
   },
   GsWellKnownNameEditor: {
     radiusLabel: 'Radius',

diff --git a/src/locale/en_US.ts b/src/locale/en_US.ts
@@ -85,7 +85,11 @@ export default {
     downloadButtonLabel: 'Save as File',
     copyButtonLabel: 'Copy to Clipboard',
     formatSelectLabel: 'Format',
-    styleCopied: 'Style copied to clipboard!'
+    styleCopied: 'Style copied to clipboard!',
+    symbolizerUnitsLabel: 'Symbolizer units',
+    symbolizerUnitsPixel: 'pixel',
+    symbolizerUnitsMeter: 'meter',
+    symbolizerUnitsFoot: 'foot'
   },
   GsWellKnownNameEditor: {
     radiusLabel: 'Radius',

diff --git a/src/locale/es_ES.ts b/src/locale/es_ES.ts
@@ -85,7 +85,11 @@ export default {
     downloadButtonLabel: 'Guardar archivo',
     copyButtonLabel: 'Copiar al portapapeles',
     formatSelectLabel: 'Formato',
-    styleCopied: 'Estilo copiado al portapapales!'
+    styleCopied: 'Estilo copiado al portapapales!',
+    symbolizerUnitsLabel: 'Unidades simbolizadoras',
+    symbolizerUnitsPixel: 'Pixel',
+    symbolizerUnitsMeter: 'Metro',
+    symbolizerUnitsFoot: 'Escándalo'
   },
   GsWellKnownNameEditor: {
     radiusLabel: 'Radio',

diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts
@@ -85,7 +85,11 @@ export default {
     downloadButtonLabel: '另存为文件',
     copyButtonLabel: '拷贝到剪贴板',
     formatSelectLabel: '格式',
-    styleCopied: '样式已拷贝到剪贴板！'
+    styleCopied: '样式已拷贝到剪贴板！',
+    symbolizerUnitsLabel: '符號單位',
+    symbolizerUnitsPixel: '像素點',
+    symbolizerUnitsMeter: '儀表',
+    symbolizerUnitsFoot: '富斯'
   },
   GsWellKnownNameEditor: {
     radiusLabel: '半径',