Breaking: Use new GeoMapEditor

CarbonPackages · Nov 5, 2023 · 3df2944 · 3df2944
1 parent 8e51f55
commit 3df2944
Show file tree

Hide file tree

Showing 20 changed files with 228 additions and 296 deletions.
diff --git a/Classes/Migrations/LocationMigration.php b/Classes/Migrations/LocationMigration.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Carbon\GeoMap\Migrations;
+
+use Neos\ContentRepository\Domain\Model\NodeData;
+use Neos\ContentRepository\Migration\Transformations\AbstractTransformation;
+use Neos\Neos\Controller\CreateContentContextTrait;
+
+class LocationMigration extends AbstractTransformation
+{
+    use CreateContentContextTrait;
+
+    /**
+     * @param NodeData $node
+     * @return boolean
+     */
+    public function isTransformable(NodeData $node)
+    {
+        if (!$node->hasProperty('lat') && !$node->hasProperty('lng')) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * @param NodeData $node
+     * @return void
+     */
+    public function execute(NodeData $node)
+    {
+        $lat = (float)$node->getProperty('lat');
+        $lng = (float)$node->getProperty('lng');
+        $node->setProperty('location', [
+            'lat' => $lat,
+            'lng' => $lng,
+        ]);
+        $node->removeProperty('lat');
+        $node->removeProperty('lng');
+    }
+}
diff --git a/Classes/Service/GeocodingService.php b/Classes/Service/GeocodingService.php
@@ -49,8 +49,7 @@ public function nodePropertyChanged(
             return;
         }
 
-        $node->setProperty('lat', '');
-        $node->setProperty('lng', '');
+        $node->setProperty('location', null);
 
         if (empty($value) && $propertyName != 'country') {
             return;
@@ -82,8 +81,7 @@ public function nodePropertyChanged(
         $latLng = $this->geocodeLatLngFromAddress($address);
 
         if ($latLng) {
-            $node->setProperty('lat', $latLng['lat']);
-            $node->setProperty('lng', $latLng['lng']);
+            $node->setProperty('location', $latLng);
         }
     }
 
@@ -104,8 +102,8 @@ public function geocodeLatLngFromAddress(string $address): ?array
             $json = json_decode($jsonContent, true);
             if (isset($json[0]) && isset($json[0]['lat']) && isset($json[0]['lon'])) {
                 return [
-                    'lat' => $json[0]['lat'],
-                    'lng' => $json[0]['lon'],
+                    'lat' => (float)$json[0]['lat'],
+                    'lng' => (float)$json[0]['lon'],
                 ];
             }
         }

diff --git a/Migrations/ContentRepository/Version20231105203142.yaml b/Migrations/ContentRepository/Version20231105203142.yaml
@@ -0,0 +1,15 @@
+up:
+  comments: 'Save lat and lng properties to location property'
+  migration:
+    - filters:
+        - type: 'NodeType'
+          settings:
+            nodeType: 'Carbon.GeoMap:Mixin.Address'
+            withSubTypes: true
+      transformations:
+        - type: 'Carbon\GeoMap\Migrations\LocationMigration'
+          settings: []
+
+
+down:
+  comments: 'No down migration available'
diff --git a/NPM/dist/module.mjs b/NPM/dist/module.mjs
@@ -2,7 +2,7 @@ const DOCUMENT = document;
 
 /*jshint -W030 */
 const globalSettings = JSON.parse(
-    DOCUMENT.currentScript.dataset?.settings || null
+    DOCUMENT.currentScript.dataset?.settings || null,
 );
 /*jshint +W030 */
 
@@ -25,6 +25,7 @@ function getAddresses(canvas) {
                 return null;
             }
             return {
+                element,
                 html: element.outerHTML,
                 popup: !!element.innerHTML,
                 lat: coordinate.lat,
@@ -34,98 +35,16 @@ function getAddresses(canvas) {
         .filter((element) => element !== null);
 }
 
-function getEditor(element, key) {
-    return element.querySelector(
-        `.carbon-geomap-coordinatestable__${key} .neos-inline-editable`
-    )?.firstElementChild;
-}
-
-function getLatLngEditors(element) {
-    const lat = getEditor(element, "lat");
-    const lng = getEditor(element, "lng");
-
-    return lat && lng ? { lat, lng } : null;
-}
-
-function updateEditor(editor, value) {
-    editor.innerText = value.toString();
-}
-
-function updateLatLngEditors(editors, values) {
-    updateEditor(editors.lat, values.lat);
-    updateEditor(editors.lng, values.lng);
-}
-
 function initFrontend({ className, initFunction }) {
     [...DOCUMENT.querySelectorAll(`.carbon-geomap.${className}`)].forEach(
-        (element) => initFunction({ element, live: true })
+        initFunction,
     );
 }
 
-function initBackend({ className, initFunction, nodeType }) {
-    if (
-        typeof className !== "string" ||
-        typeof initFunction !== "function" ||
-        typeof nodeType !== "string"
-    ) {
-        console.error(
-            "Invalid backend edit initialization: You need to set className, initFunction and nodeType correctly",
-            { className, initFunction, nodeType }
-        );
-        return;
-    }
-
-    const liveClassName = `.carbon-geomap--live.${className}`;
-    const editClassName = `.carbon-geomap--edit.${className}`;
-    const liveNodes = [...DOCUMENT.querySelectorAll(liveClassName)];
-    const editContainerNodes = liveNodes.map(
-        (element) => element.nextElementSibling
-    );
-
-    // Init the live maps
-    liveNodes.forEach((element) => initFunction({ element, live: true }));
-
-    // Observer if something inside the edit view changes
-    const observer = new MutationObserver((mutationsList) => {
-        for (const mutation of mutationsList) {
-            const element = mutation.addedNodes[0];
-            if (element && element.matches(editClassName)) {
-                initFunction({ element, live: false });
-                break;
-            }
-        }
-    });
-
-    // Re-initialize the edit map if something inside the edit view changes
-    editContainerNodes.forEach((element) =>
-        observer.observe(element, { childList: true })
-    );
-
-    // If the user clicks to edit, init the edit map and remove the live map
-    DOCUMENT.addEventListener("carbonCBD", (event) => {
-        const { type, mode, element } = event.detail;
-
-        if (!type === nodeType || mode === "live") {
-            return;
-        }
-
-        // Wait for the DOM to be ready
-        setTimeout(() => {
-            // Initialize the edit map
-            [...element.querySelectorAll(editClassName)].forEach((element) =>
-                initFunction({ element, live: false })
-            );
-        }, 10);
-    });
-}
-
 export {
     globalSettings,
     iconSettings,
     getMapCanvas,
     getAddresses,
-    getLatLngEditors,
-    updateLatLngEditors,
-    initBackend,
     initFrontend,
 };
diff --git a/NPM/package.json b/NPM/package.json
@@ -1,7 +1,7 @@
 {
     "name": "carbon-geomap",
     "description": "Dependencies for Carbon.GeoMap",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "main": "dist/module.mjs",
     "module": "dist/module.mjs",
     "exports": {

diff --git a/NodeTypes/Mixin/Address.yaml b/NodeTypes/Mixin/Address.yaml
@@ -1,7 +1,7 @@
 'Carbon.GeoMap:Mixin.Address':
   abstract: true
   superTypes:
-    'Carbon.GeoMap:Mixin.LatLng': true
+    'Carbon.GeoMap:Mixin.Location': true
   ui:
     inspector:
       groups:
@@ -14,29 +14,29 @@
       type: string
       ui:
         label: i18n
-        reloadIfChanged: true
+        reloadPageIfChanged: true
         showInCreationDialog: true
         inspector:
           group: address
           position: 10
       validation:
-        'Neos.Neos/Validation/NotEmptyValidator': []
+        'Neos.Neos/Validation/NotEmptyValidator': {}
     city:
       type: string
       ui:
         label: i18n
-        reloadIfChanged: true
+        reloadPageIfChanged: true
         showInCreationDialog: true
         inspector:
           group: address
           position: 20
       validation:
-        'Neos.Neos/Validation/NotEmptyValidator': []
+        'Neos.Neos/Validation/NotEmptyValidator': {}
     country:
       type: string
       ui:
         label: i18n
-        reloadIfChanged: true
+        reloadPageIfChanged: true
         showInCreationDialog: true
         inspector:
           group: address

diff --git a/NodeTypes/Mixin/AddressElement/AddressElement.fusion b/NodeTypes/Mixin/AddressElement/AddressElement.fusion
@@ -3,43 +3,22 @@ prototype(Carbon.GeoMap:Mixin.AddressElement) < prototype(Neos.Neos:ContentCompo
     street = ${q(node).property('street')}
     city = ${q(node).property('city')}
     country = ${q(node).property('country')}
-    lat = ${q(node).property('lat')}
-    lng = ${q(node).property('lng')}
+    location = ${q(node).property('location')}
     content = ${q(node).property('text')}
     renderPopup = ${q(node).property('renderPopup')}
     renderAddress = ${q(node).property('renderAddress')}
     renderCountry = ${q(node).property('renderCountry')}
     editable = ${node.context.inBackend}
 
 
-    addressType = 'Carbon.GeoMap:Presentation.Address'
-    mapType = ${null}
+    type = 'Carbon.GeoMap:Presentation.Address'
 
-    @if.hasAddressTypeAndMapType = ${this.addressType && this.mapType}
+    @if.hasType = ${this.type}
 
-    renderer = Neos.Fusion:Renderer {
-        type = ${props.addressType}
-        element = Neos.Fusion:DataStructure {
-            @apply.props = ${props}
-        }
-        @process.wrap = Neos.Fusion:Renderer {
-            @if.inCBDModeAndHasCoordinates = ${props.cbd && props.lat && props.lng}
-            type = ${props.mapType}
-            element.mode = 'edit'
-            element.editable = true
-            element.coordinates = ${[{'lat': props.lat, 'lng': props.lng}]}
-            element.showPopup = ${value}
-            element.mapStyle = ${q(node).parent().property('mapStyle')}
-            element.inlineEditor = Carbon.GeoMap:Presentation.CoordinatesTable {
-                lat = Neos.Neos:Editable {
-                    property = 'lat'
-                    block = false
-                }
-                lng = Neos.Neos:Editable {
-                    property = 'lng'
-                    block = false
-                }
-            }
-        }
-    }
+    renderer = afx`
+        <Neos.Fusion:Renderer
+            type={props.type}
+            [email protected]={props}
+        />
+    `
 }
diff --git a/NodeTypes/Mixin/AddressElement/AddressElement.yaml b/NodeTypes/Mixin/AddressElement/AddressElement.yaml
@@ -1,14 +1,15 @@
 'Carbon.GeoMap:Mixin.AddressElement':
   abstract: true
   superTypes:
-    'Carbon.CBD:Mixin.Element.Item': true
+    'Neos.Neos:Content': true
     'Carbon.GeoMap:Mixin.Name': true
     'Carbon.GeoMap:Mixin.Address': true
     'Carbon.GeoMap:Mixin.Text': true
   label: "${Neos.Node.labelForNode(node).properties('title', 'name', 'text')}"
   ui:
     label: i18n
     icon: map-marker
+    inlineEditable: true
     inspector:
       groups:
         settings:
@@ -49,3 +50,9 @@
       ui:
         inspector:
           hidden: 'ClientEval:node.properties.renderPopup == false'
+
+
+'Neos.Neos:ContentCollection':
+  constraints:
+    nodeTypes:
+      'Carbon.GeoMap:Mixin.AddressElement': false
diff --git a/NodeTypes/Mixin/LatLng.yaml b/NodeTypes/Mixin/LatLng.yaml
diff --git a/NodeTypes/Mixin/Location.yaml b/NodeTypes/Mixin/Location.yaml
@@ -0,0 +1,15 @@
+'Carbon.GeoMap:Mixin.Location':
+  abstract: true
+  properties:
+    location:
+      type: array
+      ui:
+        label: i18n
+        reloadPageIfChanged: true
+        inspector:
+          group: address
+          position: end
+          editor: 'Carbon.GeoMapEditor/Editor'
+          hidden: 'ClientEval: node.properties.location && node.properties.location.lat && node.properties.location.lng ? false : true'
+          editorOptions:
+            searchBar: false