Merge pull request #2140 from geostyler/replace-rnd-windows

Replace react-rnd windows with modals
geostyler · May 11, 2023 · 988f1eb · 988f1eb
2 parents 346ffad + 6329fff
commit 988f1eb
Show file tree

Hide file tree

Showing 19 changed files with 177 additions and 537 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,7 +80,6 @@
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "react-color": "^2.19.3",
-    "react-rnd": "^10.4.1",
     "typescript-json-schema": "^0.56.0"
   },
   "devDependencies": {

diff --git a/src/Component/Filter/ComparisonFilter/ComparisonFilter.less b/src/Component/Filter/ComparisonFilter/ComparisonFilter.less
@@ -29,6 +29,15 @@
 .gs-comparison-filter-ui {
   padding-left: 5px;
   display: flex;
+  flex: 1;
+
+  .gs-attribute-combo {
+    flex: 1;
+  }
+
+  .gs-text-filter-field {
+    flex: 1;
+  }
 
   &.micro {
     .ant-form-item {

diff --git a/src/Component/Filter/FilterEditorWindow/FilterEditorWindow.less b/src/Component/Filter/FilterEditorWindow/FilterEditorWindow.less
@@ -26,32 +26,11 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-.filter-editor-window {
-  background-color: white;
-  border: 3px solid grey;
-  border-radius: 3px;
-  z-index: 10;
+.filter-editor-modal {
+  .ant-modal-body {
+    padding-top: 15px;
 
-  .header {
-    background-color: lightgrey;
-    padding: 3px;
-    display: flex;
-  }
-
-  .header .title {
-    flex: 1;
-  }
-
-  .filter-editor-window-body {
-    padding: 10px;
-    min-width: 400px;
-  }
-
-  .filter-editor-window-header:hover {
-    cursor: grab;
-  }
-
-  .filter-editor-window-header:active {
-    cursor: grabbing;
+    max-height: calc(100vh - 100px);
+    overflow: auto;
   }
 }
diff --git a/src/Component/Filter/FilterEditorWindow/FilterEditorWindow.tsx b/src/Component/Filter/FilterEditorWindow/FilterEditorWindow.tsx
@@ -27,15 +27,11 @@
  */
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
-import { Rnd } from 'react-rnd';
 import { VectorData } from 'geostyler-data';
 
 import './FilterEditorWindow.less';
-import { Button } from 'antd';
-
-import { CloseOutlined } from '@ant-design/icons';
+import { Modal, ModalProps } from 'antd';
 
 import { localize } from '../../LocaleWrapper/LocaleWrapper';
 import { Filter } from 'geostyler-style';
@@ -44,22 +40,14 @@ import { ComparisonFilterProps } from '../ComparisonFilter/ComparisonFilter';
 import type GeoStylerLocale from '../../../locale/locale';
 import en_US from '../../../locale/en_US';
 
-// default props
-export interface FilterEditorWindowDefaultProps {
-  /** Locale object containing translated text snippets */
-  locale: GeoStylerLocale['FilterEditorWindow'];
-}
-
 // non default props
-export interface FilterEditorWindowProps extends Partial<FilterEditorWindowDefaultProps> {
+export interface FilterEditorWindowProps extends Partial<ModalProps> {
+  /** Locale object containing translated text snippets */
+  locale?: GeoStylerLocale['FilterEditorWindow'];
   /** The filter to edit */
   filter?: Filter;
   /** Layer metadata in the GeoStyler VectorData format */
   internalDataDef?: VectorData;
-  /** Pixel ordinate of the x-axis */
-  x?: number;
-  /** Pixel ordinate of the y-axis */
-  y?: number;
   /** The callback method that is triggered when the filter window closes */
   onClose?: () => void;
   /** The callback method that is triggered when the state changes */
@@ -68,63 +56,33 @@ export interface FilterEditorWindowProps extends Partial<FilterEditorWindowDefau
   filterUiProps?: Partial<ComparisonFilterProps>;
 }
 
-/**
- * Filter Editor Window UI.
- */
 export const FilterEditorWindow: React.FC<FilterEditorWindowProps> = ({
-  x,
-  y,
   internalDataDef,
   onClose,
   filter,
   onFilterChange,
   filterUiProps,
-  locale = en_US.FilterEditorWindow
+  locale = en_US.FilterEditorWindow,
+  ...passThroughProps
 }) => {
 
   return (
-    ReactDOM.createPortal(
-      <Rnd
-        className="filter-editor-window"
-        default={{
-          x: x || window.innerWidth / 2,
-          y: y || window.innerHeight / 2,
-          width: undefined,
-          height: undefined
-        }}
-        enableResizing={{
-          bottom: false,
-          bottomLeft: false,
-          bottomRight: false,
-          left: false,
-          right: false,
-          top: false,
-          topLeft: false,
-          topRight: false
-        }}
-        dragHandleClassName="title"
-      >
-        <div className="header filter-editor-window-header">
-          <span className="title">
-            {locale.filterEditor}
-          </span>
-          <Button
-            icon={<CloseOutlined />}
-            size="small"
-            onClick={onClose}
-          />
-        </div>
-        <div className="filter-editor-window-body">
-          <FilterTree
-            internalDataDef={internalDataDef}
-            filter={filter}
-            onFilterChange={onFilterChange}
-            filterUiProps={filterUiProps}
-          />
-        </div>
-      </Rnd>,
-      document.body
-    )
+    <Modal
+      className="filter-editor-modal"
+      title={locale.filterEditor}
+      onCancel={onClose}
+      width={800}
+      footer={false}
+      centered={true}
+      {...passThroughProps}
+    >
+      <FilterTree
+        internalDataDef={internalDataDef}
+        filter={filter}
+        onFilterChange={onFilterChange}
+        filterUiProps={filterUiProps}
+      />
+    </Modal>
   );
 };
 

diff --git a/src/Component/Filter/FilterTree/FilterTree.less b/src/Component/Filter/FilterTree/FilterTree.less
@@ -42,12 +42,15 @@
     }
 
     .style-filter-node {
+      width: 100%;
+
       &.comparison-filter {
         .ant-tree-switcher {
           display: none;
         }
 
         .ant-tree-node-content-wrapper {
+          width: 100%;
           border: 1px solid #40a9ff;
           border-radius: 4px;
         }

diff --git a/src/Component/Rule/Rule.tsx b/src/Component/Rule/Rule.tsx
@@ -321,16 +321,14 @@ export class Rule extends React.Component<RuleProps, RuleState> {
               {...sldRendererProps}
               {...oLRendererProps}
             />
-            {
-              !editorVisible ? null :
-                <SymbolizerEditorWindow
-                  onClose={this.onEditorWindowClose}
-                  symbolizers={rule.symbolizers}
-                  onSymbolizersChange={this.onSymbolizersChange}
-                  iconLibraries={iconLibraries}
-                  colorRamps={colorRamps}
-                />
-            }
+            <SymbolizerEditorWindow
+              open={editorVisible}
+              onClose={this.onEditorWindowClose}
+              symbolizers={rule.symbolizers}
+              onSymbolizersChange={this.onSymbolizersChange}
+              iconLibraries={iconLibraries}
+              colorRamps={colorRamps}
+            />
           </div>
           <div className="gs-rule-right-fields" >
             <Fieldset