Merge pull request #2006 from jansule/drag-drop-card-style

feat: add Drag and Drop for rules and symbolizers to CardStyle

package.json

@@ -80,6 +80,8 @@
     "moment": "^2.29.4",
     "monaco-editor": "^0.34.1",
     "react-color": "^2.19.3",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
     "react-rnd": "^10.3.7",
     "typescript-json-schema": "^0.55.0"
   },

src/Component/DragDroppable/DragDroppable.example.md

@@ -0,0 +1,83 @@
+<!--
+ * Released under the BSD 2-Clause License
+ *
+ * Copyright © 2022-present, terrestris GmbH & Co. KG and GeoStyler contributors
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * * Redistributions of source code must retain the above copyright notice,
+ *   this list of conditions and the following disclaimer.
+ *
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ *   this list of conditions and the following disclaimer in the documentation
+ *   and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ *
+-->
+
+This demonstrates the usage of the `DragDroppable` component.
+
+```jsx
+import * as React from 'react';
+import { DragDroppable } from 'geostyler';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { ItemType } from '../../Util/DndUtil';
+
+class DragDroppableExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      info: ''
+    };
+  }
+
+  render () {
+    const {
+      info
+    } = this.state;
+
+    return (
+      <div style={{height: '300px'}}>
+        <DndProvider backend={HTML5Backend}>
+          <DragDroppable
+            dragOrientation={'vertical'}
+            dependencies={[]}
+            itemType={ItemType.RULE}
+            position={0}
+            onMove={(item, target) => {this.setState({info: `Dragged item ${item} on item ${target}`});}}
+          >
+            <div style={{width: '100px', height: '100px', border: 'solid 1px'}}>Item 0</div>
+          </DragDroppable>
+          <DragDroppable
+            dragOrientation={'vertical'}
+            dependencies={[]}
+            itemType={ItemType.RULE}
+            position={1}
+            onMove={(item, target) => {this.setState({info: `Dragged item ${item} on item ${target}`});}}
+          >
+            <div style={{width: '100px', height: '100px', border: 'solid 1px'}}>Item 1</div>
+          </DragDroppable>
+        </DndProvider>
+        {info}
+      </div>
+    );
+  }
+}
+
+<DragDroppableExample />
+```

src/Component/DragDroppable/DragDroppable.less

@@ -0,0 +1,38 @@
+/* Released under the BSD 2-Clause License
+ *
+ * Copyright © 2022-present, terrestris GmbH & Co. KG and GeoStyler contributors
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * * Redistributions of source code must retain the above copyright notice,
+ *   this list of conditions and the following disclaimer.
+ *
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ *   this list of conditions and the following disclaimer in the documentation
+ *   and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ */
+.gs-drag-droppable {
+  display: flex;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+
+  &.vertical {
+    flex-direction: column;
+  }
+}