Update: Add propertyMapping option

Respect also global config

Configuration/Settings.yaml

@@ -8,3 +8,16 @@ Neos:
         stylesheets:
           Carbon.DirectionEditor:Plugin:
             resource: resource://Carbon.DirectionEditor/Public/Plugin.css
+      frontendConfiguration:
+        Carbon.RangeEditor:
+          propertyMapping: false
+          north: true
+          east: true
+          south: true
+          west: true
+          northEast: true
+          northWest: true
+          southEast: true
+          southWest: true
+          center: true
+          disabled: false

README.md

@@ -17,6 +17,7 @@ Example:
         inspector:
           editor: 'Carbon.DirectionEditor/Editor'
           editorOptions:
+            propertyMapping: false
             north: true
             east: true
             south: true
@@ -27,9 +28,26 @@ Example:
             southWest: true
             center: 'If it is a string, it used as label'
             disabled: false
+```
+
+You can change the saved values if you alter the `propertyMapping`:
 
+```yaml
+'Foo.Bar:Element':
+  properties:
+    direction:
+      type: string
+      ui:
+        inspector:
+          editor: 'Carbon.DirectionEditor/Editor'
+          editorOptions:
+            propertyMapping:
+              north: top
+              south: bottom
 ```
 
+In the example above, `north` will get saved as `top` and `south` as `bottom`
+
 [packagist]: https://packagist.org/packages/carbon/directioneditor
 [latest stable version]: https://poser.pugx.org/carbon/directioneditor/v/stable
 [total downloads]: https://poser.pugx.org/carbon/directioneditor/downloads

Resources/Private/DirectionEditor/Editor/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { neos } from "@neos-project/neos-ui-decorators";
 import { Icon } from "@neos-project/react-ui-components";
 import style from "./style.module.css";
@@ -9,38 +9,58 @@ const neosifier = neos((globalRegistry) => ({
     config: globalRegistry.get("frontendConfiguration").get("Carbon.RangeEditor"),
 }));
 
-const defaultProps = {
-    options: {
-        north: true,
-        east: true,
-        south: true,
-        west: true,
-        northEast: true,
-        northWest: true,
-        southEast: true,
-        southWest: true,
-        center: true,
-        disabled: false,
-    },
+const defaultOptions = {
+    propertyMapping: false,
+    north: true,
+    east: true,
+    south: true,
+    west: true,
+    northEast: true,
+    northWest: true,
+    southEast: true,
+    southWest: true,
+    center: true,
+    disabled: false,
 };
 
 function Editor(props) {
-    const changeValue = (value) => {
+    const options = { ...defaultOptions, ...props.config, ...props.options };
+    const { value, highlight, i18nRegistry } = props;
+    const { disabled } = options;
+    const [state, setState] = useState(value);
+
+    useEffect(() => {
+        setState(getValueFromPropertyMapping(value));
+    }, [value]);
+
+    function getValueFromPropertyMapping(value) {
+        if (options.propertyMapping) {
+            const key = Object.keys(options.propertyMapping).find((key) => options.propertyMapping[key] === value);
+            if (key) {
+                return key;
+            }
+        }
+        return value;
+    }
+
+    function setValueFromPropertyMapping(value) {
+        return options?.propertyMapping?.[value] || value;
+    }
+
+    function changeValue(value) {
+        setState(value);
+        value = setValueFromPropertyMapping(value);
         if (value === "center") {
             value = "";
         }
         props.commit(value);
-    };
-
-    const options = { ...defaultProps.options, ...props.options };
-    const { value, highlight, i18nRegistry } = props;
-    const { disabled } = options;
+    }
 
     return (
         <div className={clsx(style.editor, disabled && style.editorDisabled)}>
             {Object.entries(options).map(([key, enabled]) => {
-                if (!enabled || key === "disabled") {
-                    return;
+                if (!enabled || key === "disabled" || key === "propertyMapping") {
+                    return null;
                 }
                 const title = typeof enabled == "string" ? i18nRegistry.translate(enabled) : null;
                 if (key === "center") {
@@ -50,9 +70,9 @@ function Editor(props) {
                             className={clsx(
                                 style.button,
                                 style[key],
-                                !value && (highlight ? style.highlight : style.active),
+                                (!state || state == "center") && (highlight ? style.highlight : style.active),
                             )}
-                            onClick={() => changeValue("")}
+                            onClick={() => changeValue("center")}
                             disabled={disabled}
                             title={title}
                         >
@@ -66,7 +86,7 @@ function Editor(props) {
                         className={clsx(
                             style.button,
                             style[key],
-                            value === key && (highlight ? style.highlight : style.active),
+                            state === key && (highlight ? style.highlight : style.active),
                         )}
                         onClick={() => changeValue(key)}
                         disabled={disabled}