From d2f00ac20240c704b2c746d8c7a205288b7cf861 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Thu, 26 Jan 2023 12:07:42 +0100 Subject: [PATCH 01/18] feat: adds drawer with basic functionality --- .../ToolMenu/Draw/Attributions/index.less | 6 + .../ToolMenu/Draw/Attributions/index.tsx | 154 ++++++++ src/components/ToolMenu/Draw/index.tsx | 350 ++++++++++-------- 3 files changed, 350 insertions(+), 160 deletions(-) create mode 100644 src/components/ToolMenu/Draw/Attributions/index.less create mode 100644 src/components/ToolMenu/Draw/Attributions/index.tsx diff --git a/src/components/ToolMenu/Draw/Attributions/index.less b/src/components/ToolMenu/Draw/Attributions/index.less new file mode 100644 index 000000000..364cc602c --- /dev/null +++ b/src/components/ToolMenu/Draw/Attributions/index.less @@ -0,0 +1,6 @@ +.attribution-drawer { + position: absolute; + top: var(--headerHeight); + bottom: var(--footerHeight); + z-index: 499; +} diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx new file mode 100644 index 000000000..3b83f7f77 --- /dev/null +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -0,0 +1,154 @@ +import React from 'react'; + +import { + MinusCircleOutlined, PlusOutlined +} from '@ant-design/icons'; +import { + Button, Drawer, Form, Input, Space, Divider, List, Row, Typography +} from 'antd'; +import OlLayerVector from 'ol/layer/Vector'; + +import VectorSource from 'ol/source/Vector'; + +import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; + +import { + useMap +} from '@terrestris/react-geo/dist/Hook/useMap'; + +import './index.less'; + +export type AttributionDrawerProps = { + openAttributeDrawer: boolean; + onClose: (open: boolean) => void; +}; + +const AttributionDrawer: React.FC = ({ + openAttributeDrawer, + onClose +}) => { + + const map = useMap(); + + const handleClose = () => { + onClose(false); + }; + + const onFinish = (values: any) => { + console.log('Received values of form:', values); + }; + + // Get the created Layer + // let drawVectorLayer = MapUtil.getLayerByName(map!, 'react-geo_digitize') as OlLayerVector; + // let features = drawVectorLayer.getSource()?.getFeatures(); + + + + + // method to call + // features[0].set() + + let attributions = [ + 'Racing car sprays burning fuel into crowd.', + 'Japanese princess to wed commoner.', + 'Australian walks 100km after outback crash.', + 'Man charged over missing wedding girl.', + 'Los Angeles battles huge wildfires.' + ]; + + return ( + <> + + + ( + + {item} + + )} + /> + + + +
+ + {(fields, { + add, remove + }) => ( + <> + {fields.map(({ + key, name, ...restField + }) => ( + + + + + + + + remove(name)} /> + + ))} + + + + + )} + + + + +
+ + + + ); +}; + +export default AttributionDrawer; diff --git a/src/components/ToolMenu/Draw/index.tsx b/src/components/ToolMenu/Draw/index.tsx index 8780a8f17..f6bc016ef 100644 --- a/src/components/ToolMenu/Draw/index.tsx +++ b/src/components/ToolMenu/Draw/index.tsx @@ -1,5 +1,7 @@ import React, { - ChangeEvent + ChangeEvent, + useEffect, + useState } from 'react'; import { @@ -42,6 +44,7 @@ import { import './index.less'; +import AttributionDrawer from './Attributions'; import StylingDrawer from './StylingDrawer'; interface DefaultDrawProps { @@ -71,6 +74,9 @@ export const Draw: React.FC = ({ showDownloadFeatures, showDeleteFeatures }): JSX.Element => { + const [openAttributeDrawer, setopenAttributeDrawer] = useState(false); + const [selectedButton, setSelectedButton] = useState(); + const { t } = useTranslation(); @@ -144,183 +150,207 @@ export const Draw: React.FC = ({ return <>; } + const onToggleChange = (childProps: any) => { + setSelectedButton(childProps.name); + }; + + const attributeDrawer = (active: any) => { + if (openAttributeDrawer === false && active === true) { + setopenAttributeDrawer(true); + } + if (openAttributeDrawer === true && active === false && selectedButton === 'draw-modify') { + setopenAttributeDrawer(false); + } + }; + return ( - - - {showDrawPoint ? ( - - - + + + {showDrawPoint ? ( + - {t('Draw.point')} - - - ) : <>} - - {showDrawLine ? ( - - - + + {t('Draw.point')} + + + ) : <>} + + {showDrawLine ? ( + + + + {t('Draw.line')} + + + ) : <>} + + {showDrawPolygon ? ( + - {t('Draw.line')} - - - ) : <>} - - {showDrawPolygon ? ( - - - + + {t('Draw.polygon')} + + + ) : <>} + + {showDrawCircle ? ( + - {t('Draw.polygon')} - - - ) : <>} - - {showDrawCircle ? ( - - - + + {t('Draw.circle')} + + + ) : <>} + + {showDrawRectangle ? ( + - {t('Draw.circle')} - - - ) : <>} - - {showDrawRectangle ? ( - - - + + {t('Draw.rectangle')} + + + ) : <>} + + {showDrawAnnotation ? ( + - {t('Draw.rectangle')} - - - ) : <>} - - {showDrawAnnotation ? ( - - - + + {t('Draw.text')} + + + ) : <>} + + {showModifyFeatures ? ( + attributeDrawer(evt)} > - {t('Draw.text')} - - - ) : <>} - - {showModifyFeatures ? ( - - - + + {t('Draw.modify')} + + + + ) : <>} + + {showUploadFeatures ? ( + - {t('Draw.modify')} - - - ) : <>} - - {showUploadFeatures ? ( - + + + + {t('Draw.upload')} + + + + ) : <>} + + {showDownloadFeatures ? ( - {t('Draw.upload')} + {t('Draw.export')} - - ) : <>} - - {showDownloadFeatures ? ( - - - - {t('Draw.export')} - - - ) : <>} - - {showDeleteFeatures ? ( - - - } + + {showDeleteFeatures ? ( + - {t('Draw.delete')} - - - ) : <>} - - + + + {t('Draw.delete')} + + + ) : <>} + + + setopenAttributeDrawer(false)} + /> + ); }; From 79095ccb272bc498432b9b56e47cd03d6b0e9ebb Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Mon, 27 Feb 2023 13:03:36 +0100 Subject: [PATCH 02/18] feat: zwischenschritt --- .../ToolMenu/Draw/Attributions/index.less | 5 + .../ToolMenu/Draw/Attributions/index.tsx | 145 ++++++++++++------ 2 files changed, 102 insertions(+), 48 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.less b/src/components/ToolMenu/Draw/Attributions/index.less index 364cc602c..f2f6c290b 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.less +++ b/src/components/ToolMenu/Draw/Attributions/index.less @@ -3,4 +3,9 @@ top: var(--headerHeight); bottom: var(--footerHeight); z-index: 499; + + .attribute-row { + display: flex; + } } + diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 3b83f7f77..5c2450dd3 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { MinusCircleOutlined, PlusOutlined @@ -6,10 +6,13 @@ import { import { Button, Drawer, Form, Input, Space, Divider, List, Row, Typography } from 'antd'; +import OlFeature from 'ol/Feature'; import OlLayerVector from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; +import Geometry from 'ol/geom/Geometry.js'; + import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; import { @@ -17,6 +20,7 @@ import { } from '@terrestris/react-geo/dist/Hook/useMap'; import './index.less'; +import useAppSelector from '../../../../hooks/useAppSelector'; export type AttributionDrawerProps = { openAttributeDrawer: boolean; @@ -28,33 +32,58 @@ const AttributionDrawer: React.FC = ({ onClose }) => { + const [attributions, setAttributions] = useState([]); + const [selectedFeature, setSelectedFeature] = useState(); + + + // ToDo: will be used in future once react-geo library triggeres selected events + // const selectedFeatures: OlFeature[] = useAppSelector(state => state.selectedFeatures); + const map = useMap(); + // ToDo: will be removed in future once react-geo library triggeres selected events + const selectInteraction: any = map?.getInteractions().getArray().filter(interaction => { + if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { + return true; + } else { + return false; + } + })[0]; + + if (selectInteraction) { + selectInteraction.on('select', () => { + setSelectedFeature(selectInteraction.getFeatures().getArray()[0]); + }); + + } + const handleClose = () => { onClose(false); }; const onFinish = (values: any) => { - console.log('Received values of form:', values); - }; - - // Get the created Layer - // let drawVectorLayer = MapUtil.getLayerByName(map!, 'react-geo_digitize') as OlLayerVector; - // let features = drawVectorLayer.getSource()?.getFeatures(); + // set input as property + let key = (`${values.attributions[0].first}`); + let value = (`${values.attributions[0].last}`); + selectedFeature?.setProperties({ + [key]: value + }); + console.log(selectedFeature?.getProperties()); + }; + // List all Properties of the selected layer as [] + if (selectedFeature) { + let allProperties = Object.entries(selectedFeature?.getProperties()); + let geometryType = selectedFeature?.getGeometry()?.getType(); + console.log(allProperties); + // console.log(geometryType === 'Circle'); + // console.log(allProperties.indexOf('geometry')) + } - // method to call - // features[0].set() + // set new Properties - let attributions = [ - 'Racing car sprays burning fuel into crowd.', - 'Japanese princess to wed commoner.', - 'Australian walks 100km after outback crash.', - 'Man charged over missing wedding girl.', - 'Los Angeles battles huge wildfires.' - ]; return ( <> @@ -67,17 +96,24 @@ const AttributionDrawer: React.FC = ({ onClose={handleClose} open={openAttributeDrawer} > - + <> + {!selectedFeature && + <> + Please select a feature + + } + + {/* ( + renderItem={(item: string) => ( {item} )} /> - + */}
= ({ style={{ maxWidth: 600 }} autoComplete="off" > - + {(fields, { add, remove }) => ( @@ -94,35 +130,48 @@ const AttributionDrawer: React.FC = ({ {fields.map(({ key, name, ...restField }) => ( - - - - - + + <> + {/* {selectedFeature && selectedFeature.getProperties().map(() => { + debugger + return ( */} +
- - - remove(name)} /> - + + + + + + + remove(name)} /> +
+ {/* ) + })} */} + + // ))} - - - )} - + { + getFormItems() + } + + + - From 4d9fcd2669213f5208631355383d11d5775f582c Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Thu, 20 Jul 2023 09:38:39 +0200 Subject: [PATCH 05/18] fix: wip --- .../ToolMenu/Draw/Attributions/index.tsx | 47 +++++++++---------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index a1611bcad..b4439258f 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -1,29 +1,22 @@ -import React, { useEffect, useState } from 'react'; +import React, { + useEffect, useState +} from 'react'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { - Button, Drawer, Form, Input, Space, Divider, List, Row, Typography + Button, Drawer, Form, Divider, Row } from 'antd'; -import OlFeature from 'ol/Feature'; -import Geometry from 'ol/geom/Geometry.js'; -import OlLayerVector from 'ol/layer/Vector'; - import _cloneDeep from 'lodash/cloneDeep'; - -import VectorSource from 'ol/source/Vector'; - -import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; +import OlFeature from 'ol/Feature'; import { useMap } from '@terrestris/react-geo/dist/Hook/useMap'; import './index.less'; -import useAppSelector from '../../../../hooks/useAppSelector'; import AttributionRow from './AttributionRow'; -import { FieldData } from 'rc-field-form/es/interface'; export type AttributionDrawerProps = { openAttributeDrawer: boolean; @@ -34,8 +27,6 @@ const AttributionDrawer: React.FC = ({ openAttributeDrawer, onClose }) => { - - const [attributions, setAttributions] = useState([]); const [selectedFeature, setSelectedFeature] = useState(); const [render, setRender] = useState(true); const [isFormValid, setIsFormIsValid] = useState(true); @@ -50,21 +41,21 @@ const AttributionDrawer: React.FC = ({ useEffect(() => { const properties = selectedFeature?.getProperties(); - console.log('selectedFeature CHNAGE'); - - if (!properties) { - return; - } + console.log('selectedFeature CHANGE'); + console.log(properties); // TODO filter out geometry const fs: any = {}; - Object.entries(properties).forEach(([key, value]) => { - fs[key] = { - name: key, - value: value - }; - }); + if (properties) { + Object.entries(properties).forEach(([key, value]) => { + fs[key] = { + name: key, + value: value + }; + }); + } + form.setFieldValue('fields', {}); form.setFieldsValue({ fields: fs }); @@ -83,7 +74,6 @@ const AttributionDrawer: React.FC = ({ selectInteraction.on('select', () => { setSelectedFeature(selectInteraction.getFeatures().getArray()[0]); }); - } const handleClose = () => { @@ -138,7 +128,12 @@ const AttributionDrawer: React.FC = ({ // Get all values of the form const fields = form.getFieldsValue(true); + console.log(fields.fields); + + if (!fields.fields) { + console.log("hallo"); + return; } From 37c5a8e9bbd151a2835edca7e53791aab0a79dc7 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 5 Sep 2023 10:41:08 +0200 Subject: [PATCH 06/18] fix: fix lifecycle problem --- .../ToolMenu/Draw/Attributions/index.tsx | 40 +++++++------------ 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index b4439258f..12958e046 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -30,6 +30,8 @@ const AttributionDrawer: React.FC = ({ const [selectedFeature, setSelectedFeature] = useState(); const [render, setRender] = useState(true); const [isFormValid, setIsFormIsValid] = useState(true); + const [fields, setFields] = useState({}); + const [currentProperties, setCurrentProperties] = useState({}); const [form] = Form.useForm(); @@ -38,11 +40,14 @@ const AttributionDrawer: React.FC = ({ const map = useMap(); + useEffect(() => { + setFields(selectedFeature?.getProperties()); + }, [selectedFeature]); + useEffect(() => { const properties = selectedFeature?.getProperties(); - console.log('selectedFeature CHANGE'); - console.log(properties); + setCurrentProperties({...properties}); // TODO filter out geometry const fs: any = {}; @@ -80,27 +85,20 @@ const AttributionDrawer: React.FC = ({ onClose(false); }; - const onFinish = (fields: any) => { + const onFinish = (input: any) => { if (!selectedFeature) { return; } - Object.entries(fields.fields).forEach(([key, value]) => { + Object.entries(input.fields).forEach(([key, value]) => { selectedFeature.set(value.name, value.value); }); }; const onPropertyAdd = () => { - const existingFields = _cloneDeep(form.getFieldValue('fields')); - - existingFields[Math.random()] = { - name: '', - value: '' - }; - - form.setFieldValue('fields', existingFields); - - setRender(!render); + const newProps = {...currentProperties}; + newProps[''] = ''; + setCurrentProperties(newProps); }; const remove = (keyToRemove: string) => { @@ -125,19 +123,8 @@ const AttributionDrawer: React.FC = ({ }; const getFormItems = () => { - // Get all values of the form - const fields = form.getFieldsValue(true); - - console.log(fields.fields); - - - if (!fields.fields) { - console.log("hallo"); - - return; - } - return Object.entries(fields.fields).map(([key, value]) => { + return Object.entries(currentProperties).map(([key, value]) => { return (
= ({ type="primary" htmlType="submit" disabled={!isFormValid} + // onClick={} > Submit From 6ab6748be7a7ac85108c79cf594964c6d0d422a3 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 5 Sep 2023 14:11:10 +0200 Subject: [PATCH 07/18] feat: attribution drawer --- .../ToolMenu/Draw/Attributions/index.less | 5 ++ .../ToolMenu/Draw/Attributions/index.tsx | 50 +++++++++++-------- src/i18n/translations.ts | 12 +++++ 3 files changed, 46 insertions(+), 21 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.less b/src/components/ToolMenu/Draw/Attributions/index.less index 68f9b76d6..58d4b3186 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.less +++ b/src/components/ToolMenu/Draw/Attributions/index.less @@ -3,5 +3,10 @@ top: var(--headerHeight); bottom: var(--footerHeight); z-index: 499; + + .anticon.anticon-minus-circle { + padding-bottom: 25px; + padding-left: 5px; + } } diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 12958e046..363c71ec0 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -11,12 +11,15 @@ import { import _cloneDeep from 'lodash/cloneDeep'; import OlFeature from 'ol/Feature'; +import { useTranslation } from 'react-i18next'; + import { useMap } from '@terrestris/react-geo/dist/Hook/useMap'; import './index.less'; import AttributionRow from './AttributionRow'; +import Geometry from 'ol/geom/Geometry'; export type AttributionDrawerProps = { openAttributeDrawer: boolean; @@ -30,7 +33,6 @@ const AttributionDrawer: React.FC = ({ const [selectedFeature, setSelectedFeature] = useState(); const [render, setRender] = useState(true); const [isFormValid, setIsFormIsValid] = useState(true); - const [fields, setFields] = useState({}); const [currentProperties, setCurrentProperties] = useState({}); const [form] = Form.useForm(); @@ -40,16 +42,15 @@ const AttributionDrawer: React.FC = ({ const map = useMap(); - useEffect(() => { - setFields(selectedFeature?.getProperties()); - }, [selectedFeature]); + const { + t + } = useTranslation(); useEffect(() => { const properties = selectedFeature?.getProperties(); - setCurrentProperties({...properties}); + setCurrentProperties({ ...properties }); - // TODO filter out geometry const fs: any = {}; if (properties) { Object.entries(properties).forEach(([key, value]) => { @@ -91,12 +92,13 @@ const AttributionDrawer: React.FC = ({ } Object.entries(input.fields).forEach(([key, value]) => { + // @ts-ignore selectedFeature.set(value.name, value.value); }); }; const onPropertyAdd = () => { - const newProps = {...currentProperties}; + const newProps = { ...currentProperties }; newProps[''] = ''; setCurrentProperties(newProps); }; @@ -124,7 +126,13 @@ const AttributionDrawer: React.FC = ({ const getFormItems = () => { - return Object.entries(currentProperties).map(([key, value]) => { + const filteredProperties = currentProperties; + + if (filteredProperties.geometry) { + delete filteredProperties.geometry; + } + + return Object.entries(filteredProperties).map(([key, value]) => { return (
= ({ return ( <> = ({ <> {!selectedFeature && <> - Please select a feature + {t('Attribution.select')} } - = ({ getFormItems() } - + {selectedFeature ? + : + <>} diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index a54af203a..c8b7e9cc1 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -199,6 +199,12 @@ export default { undo: 'Rückgängig', redo: 'Wiederherstellen' }, + Attribution: { + title: 'Attribute', + add: 'Attribut hinzufügen', + select: 'Wählen Sie zunächst eine Geometrie aus.', + submit: 'Speichern' + }, ResetButton: { title: 'Zurücksetzen' }, @@ -425,6 +431,12 @@ export default { undo: 'Undo', redo: 'Redo' }, + Attribution: { + title: 'Attributes', + add: 'Add Attribution', + select: 'Please select a geometry first.', + submit: 'Submit' + }, ResetButton: { title: 'Reset' }, From 98805d855e12ca83baa4425476437e695d80f493 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 5 Sep 2023 14:18:13 +0200 Subject: [PATCH 08/18] fix: remove unneeded import --- src/components/ToolMenu/Draw/Attributions/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 363c71ec0..643ad5dd3 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -19,7 +19,6 @@ import { import './index.less'; import AttributionRow from './AttributionRow'; -import Geometry from 'ol/geom/Geometry'; export type AttributionDrawerProps = { openAttributeDrawer: boolean; From a30801b2112c81d6a697e90ddd2b562698197f8c Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 5 Sep 2023 15:39:02 +0200 Subject: [PATCH 09/18] feat: adds delete property functionality --- .../ToolMenu/Draw/Attributions/index.tsx | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 643ad5dd3..619ae3562 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -90,10 +90,15 @@ const AttributionDrawer: React.FC = ({ return; } - Object.entries(input.fields).forEach(([key, value]) => { - // @ts-ignore - selectedFeature.set(value.name, value.value); - }); + if (Object.keys(currentProperties).length > 0) { + Object.entries(input.fields).forEach(([key, value]) => { + // @ts-ignore + selectedFeature.set(value.name, value.value); + }); + } else { + selectedFeature.set('', ''); + } + }; const onPropertyAdd = () => { @@ -103,13 +108,14 @@ const AttributionDrawer: React.FC = ({ }; const remove = (keyToRemove: string) => { - const existingFields = form.getFieldValue('fields'); - delete existingFields[keyToRemove]; + const updatedProperties = currentProperties; - form.setFieldsValue({ - fields: existingFields - }); + delete updatedProperties[keyToRemove]; + + selectedFeature?.unset(keyToRemove); + + setCurrentProperties(updatedProperties); setRender(!render); }; From 820a818cb62f2a41dc427377ec67edbed551d35a Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 5 Sep 2023 15:48:11 +0200 Subject: [PATCH 10/18] fix: adds ts-ingore --- .../ToolMenu/Draw/Attributions/AttributionRow/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx b/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx index 35d3d0964..c255c1cd3 100644 --- a/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx @@ -26,6 +26,7 @@ const AttributionRow: React.FC = ({ }, ({ getFieldsValue }) => ({ validator(_, value) { const fields = getFieldsValue(true); + // @ts-ignore const filtered = Object.entries(fields.fields).filter(([key, val]) => val.name === value); if (filtered.length > 1) { From 0bc2eac8c181476a2ea670b536556708cc96e0ab Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 5 Sep 2023 16:36:58 +0200 Subject: [PATCH 11/18] fix: lint --- .../ToolMenu/Draw/Attributions/AttributionRow/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx b/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx index c255c1cd3..dd6f5db2b 100644 --- a/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx @@ -24,7 +24,7 @@ const AttributionRow: React.FC = ({ required: true, message: 'Missing Key' }, ({ getFieldsValue }) => ({ - validator(_, value) { + validator(_, value: string) { const fields = getFieldsValue(true); // @ts-ignore const filtered = Object.entries(fields.fields).filter(([key, val]) => val.name === value); From 5afa63eaa301de1024c59e6b5f42e065d686f9d9 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Wed, 6 Sep 2023 12:38:50 +0200 Subject: [PATCH 12/18] feat: adds translation and ts-types --- .../Attributions/AttributionRow/index.tsx | 25 +++++++++++++------ .../ToolMenu/Draw/Attributions/index.tsx | 14 +++-------- src/i18n/translations.ts | 7 ++++++ 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx b/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx index dd6f5db2b..40e49d7a7 100644 --- a/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/AttributionRow/index.tsx @@ -5,32 +5,43 @@ import { } from 'antd'; import './index.less'; +import { useTranslation } from 'react-i18next'; export type AttributionRowProps = { keyName: string; onChange: (evt: React.ChangeEvent) => void; }; +export type InputFields = { + [fields: string]: { + name: string; + value: any; + }; +}; + const AttributionRow: React.FC = ({ keyName, onChange }) => { + const { + t + } = useTranslation(); + return ( <> ({ validator(_, value: string) { - const fields = getFieldsValue(true); - // @ts-ignore + const fields: InputFields = getFieldsValue(true); const filtered = Object.entries(fields.fields).filter(([key, val]) => val.name === value); if (filtered.length > 1) { - return Promise.reject(new Error('key already exists!')); + return Promise.reject(new Error(t('AttributionRow.keyInUse'))); } return Promise.resolve(); @@ -38,7 +49,7 @@ const AttributionRow: React.FC = ({ })]} > @@ -46,11 +57,11 @@ const AttributionRow: React.FC = ({ name={['fields', keyName, 'value']} rules={[{ required: true, - message: 'Missing Value' + message: t('AttributionRow.missingValue') }]} > diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 619ae3562..f33fee926 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -18,7 +18,7 @@ import { } from '@terrestris/react-geo/dist/Hook/useMap'; import './index.less'; -import AttributionRow from './AttributionRow'; +import AttributionRow, { InputFields } from './AttributionRow'; export type AttributionDrawerProps = { openAttributeDrawer: boolean; @@ -32,13 +32,10 @@ const AttributionDrawer: React.FC = ({ const [selectedFeature, setSelectedFeature] = useState(); const [render, setRender] = useState(true); const [isFormValid, setIsFormIsValid] = useState(true); - const [currentProperties, setCurrentProperties] = useState({}); + const [currentProperties, setCurrentProperties] = useState>({}); const [form] = Form.useForm(); - // ToDo: will be used in future once react-geo library triggeres selected events - // const selectedFeatures: OlFeature[] = useAppSelector(state => state.selectedFeatures); - const map = useMap(); const { @@ -66,7 +63,6 @@ const AttributionDrawer: React.FC = ({ }); }, [selectedFeature, form]); - // ToDo: will be removed in future once react-geo library triggeres selected events const selectInteraction: any = map?.getInteractions().getArray().filter(interaction => { if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { return true; @@ -85,20 +81,18 @@ const AttributionDrawer: React.FC = ({ onClose(false); }; - const onFinish = (input: any) => { + const onFinish = (input: InputFields) => { if (!selectedFeature) { return; } if (Object.keys(currentProperties).length > 0) { Object.entries(input.fields).forEach(([key, value]) => { - // @ts-ignore selectedFeature.set(value.name, value.value); }); } else { selectedFeature.set('', ''); } - }; const onPropertyAdd = () => { @@ -108,7 +102,6 @@ const AttributionDrawer: React.FC = ({ }; const remove = (keyToRemove: string) => { - const updatedProperties = currentProperties; delete updatedProperties[keyToRemove]; @@ -130,7 +123,6 @@ const AttributionDrawer: React.FC = ({ }; const getFormItems = () => { - const filteredProperties = currentProperties; if (filteredProperties.geometry) { diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index c8b7e9cc1..59ee738b9 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -437,6 +437,13 @@ export default { select: 'Please select a geometry first.', submit: 'Submit' }, + AttributionRow: { + missingKey: 'Missing Key', + missingValue: 'Missing Value', + keyPlaceholder: 'Key', + valuePlaceholder: 'Value', + keyInUse: 'Key already exists!' + }, ResetButton: { title: 'Reset' }, From 3f4880ad4355c462e39556501aa83952aa7175b3 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Tue, 12 Dec 2023 15:59:16 +0100 Subject: [PATCH 13/18] fix: fix property handling --- .../ToolMenu/Draw/Attributions/index.tsx | 23 ++++++++++--------- src/components/ToolMenu/Draw/index.tsx | 10 ++++---- src/i18n/translations.ts | 4 ++-- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index f33fee926..677107bd0 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -6,10 +6,11 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { - Button, Drawer, Form, Divider, Row + Button, Drawer, DrawerProps, Form, Row } from 'antd'; import _cloneDeep from 'lodash/cloneDeep'; import OlFeature from 'ol/Feature'; +import Select from 'ol/interaction/Select'; import { useTranslation } from 'react-i18next'; @@ -20,14 +21,14 @@ import { import './index.less'; import AttributionRow, { InputFields } from './AttributionRow'; -export type AttributionDrawerProps = { - openAttributeDrawer: boolean; - onClose: (open: boolean) => void; -}; +export interface AttributionDrawerProps extends DrawerProps { + onCustomClose: (open: boolean) => void; +} const AttributionDrawer: React.FC = ({ - openAttributeDrawer, - onClose + onCustomClose, + onClose, + ...passThroughProps }) => { const [selectedFeature, setSelectedFeature] = useState(); const [render, setRender] = useState(true); @@ -63,13 +64,13 @@ const AttributionDrawer: React.FC = ({ }); }, [selectedFeature, form]); - const selectInteraction: any = map?.getInteractions().getArray().filter(interaction => { + const selectInteraction = map?.getInteractions().getArray().filter(interaction => { if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { return true; } else { return false; } - })[0]; + })[0] as Select; if (selectInteraction) { selectInteraction.on('select', () => { @@ -78,7 +79,7 @@ const AttributionDrawer: React.FC = ({ } const handleClose = () => { - onClose(false); + onCustomClose(false); }; const onFinish = (input: InputFields) => { @@ -157,7 +158,7 @@ const AttributionDrawer: React.FC = ({ mask={false} maskClosable={false} onClose={handleClose} - open={openAttributeDrawer} + {...passThroughProps} > <> {!selectedFeature && diff --git a/src/components/ToolMenu/Draw/index.tsx b/src/components/ToolMenu/Draw/index.tsx index 3f85ac8c6..0e25fa986 100644 --- a/src/components/ToolMenu/Draw/index.tsx +++ b/src/components/ToolMenu/Draw/index.tsx @@ -74,7 +74,7 @@ export const Draw: React.FC = ({ showDownloadFeatures, showDeleteFeatures }): JSX.Element => { - const [openAttributeDrawer, setopenAttributeDrawer] = useState(false); + const [openAttributeDrawer, setOpenAttributeDrawer] = useState(false); const [selectedButton, setSelectedButton] = useState(); const { @@ -158,10 +158,10 @@ export const Draw: React.FC = ({ const attributeDrawer = (active: any) => { if (openAttributeDrawer === false && active === true) { - setopenAttributeDrawer(true); + setOpenAttributeDrawer(true); } if (openAttributeDrawer === true && active === false && selectedButton === 'draw-modify') { - setopenAttributeDrawer(false); + setOpenAttributeDrawer(false); } }; @@ -349,8 +349,8 @@ export const Draw: React.FC = ({ setopenAttributeDrawer(false)} + open={openAttributeDrawer} + onCustomClose={() => setOpenAttributeDrawer(false)} /> ); diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 59ee738b9..5db8f7701 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -432,8 +432,8 @@ export default { redo: 'Redo' }, Attribution: { - title: 'Attributes', - add: 'Add Attribution', + title: 'Properties', + add: 'Add Properties', select: 'Please select a geometry first.', submit: 'Submit' }, From 1bbe30056e181b71182428dabda51a2ea8419bdd Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Fri, 26 Jan 2024 11:28:24 +0100 Subject: [PATCH 14/18] fix: adds translation and linting --- .../ToolMenu/Draw/Attributions/index.tsx | 6 ++++-- src/components/ToolMenu/Draw/index.tsx | 16 ++++++++-------- src/i18n/translations.ts | 7 +++++++ 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 677107bd0..c0d2d58c4 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -22,7 +22,7 @@ import './index.less'; import AttributionRow, { InputFields } from './AttributionRow'; export interface AttributionDrawerProps extends DrawerProps { - onCustomClose: (open: boolean) => void; + onCustomClose?: (open: boolean) => void; } const AttributionDrawer: React.FC = ({ @@ -79,7 +79,9 @@ const AttributionDrawer: React.FC = ({ } const handleClose = () => { - onCustomClose(false); + if (onCustomClose) { + onCustomClose(false); + } }; const onFinish = (input: InputFields) => { diff --git a/src/components/ToolMenu/Draw/index.tsx b/src/components/ToolMenu/Draw/index.tsx index 72af5616f..99ba5574e 100644 --- a/src/components/ToolMenu/Draw/index.tsx +++ b/src/components/ToolMenu/Draw/index.tsx @@ -1,6 +1,7 @@ import React, { ChangeEvent, - useEffect, + ReactElement, + ReactNode, useState } from 'react'; @@ -46,8 +47,7 @@ import { import './index.less'; import AttributionDrawer from './Attributions'; -import StylingDrawer, { StylingButton } from './StylingDrawerButton'; - +import StylingDrawer from './StylingDrawerButton'; interface DefaultDrawProps { showDrawPoint?: boolean; @@ -74,9 +74,7 @@ export const Draw: React.FC = ({ showDrawAnnotation, showModifyFeatures, showUploadFeatures, - showDownloadFeatures, - showDeleteFeatures, - showStyleFeatures + showDeleteFeatures }): JSX.Element => { const [openAttributeDrawer, setOpenAttributeDrawer] = useState(false); const [selectedButton, setSelectedButton] = useState(); @@ -160,10 +158,12 @@ export const Draw: React.FC = ({ } const onToggleChange = (childProps: any) => { - setSelectedButton(childProps.name); + if (childProps) { + setSelectedButton(childProps.name); + } }; - const attributeDrawer = (active: any) => { + const attributeDrawer = (active: boolean) => { if (openAttributeDrawer === false && active === true) { setOpenAttributeDrawer(true); } diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index e0590e3f1..a89ab50d5 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -222,6 +222,13 @@ export default { select: 'Wählen Sie zunächst eine Geometrie aus.', submit: 'Speichern' }, + AttributionRow: { + missingKey: 'Fehlender Schlüssel', + missingValue: 'Fehlender Wert', + keyPlaceholder: 'Schlüssel', + valuePlaceholder: 'Wert', + keyInUse: 'Dieser Schlüssel exisitiert bereits!' + }, ResetButton: { title: 'Zurücksetzen' }, From 9d3dc18e607f2c8e199695bddf4c14a9eeeb6c34 Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Fri, 26 Jan 2024 15:27:27 +0100 Subject: [PATCH 15/18] fix: rename interaction --- src/components/ToolMenu/Draw/Attributions/index.tsx | 2 +- src/components/ToolMenu/Draw/index.tsx | 13 +++++++++++-- src/i18n/translations.ts | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index c0d2d58c4..8627cad80 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -65,7 +65,7 @@ const AttributionDrawer: React.FC = ({ }, [selectedFeature, form]); const selectInteraction = map?.getInteractions().getArray().filter(interaction => { - if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { + if (interaction.get('active') === true && interaction.get('name') === 'edit-selection') { return true; } else { return false; diff --git a/src/components/ToolMenu/Draw/index.tsx b/src/components/ToolMenu/Draw/index.tsx index 99ba5574e..e1556ddef 100644 --- a/src/components/ToolMenu/Draw/index.tsx +++ b/src/components/ToolMenu/Draw/index.tsx @@ -1,7 +1,5 @@ import React, { ChangeEvent, - ReactElement, - ReactNode, useState } from 'react'; @@ -158,6 +156,17 @@ export const Draw: React.FC = ({ } const onToggleChange = (childProps: any) => { + + const myInteraction = map?.getInteractions().getArray().filter(interaction => { + if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { + return interaction; + } + })[0]; + + if (myInteraction) { + myInteraction.set('name', 'edit-selection'); + } + if (childProps) { setSelectedButton(childProps.name); } diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index a89ab50d5..06fab6e99 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -223,11 +223,11 @@ export default { submit: 'Speichern' }, AttributionRow: { - missingKey: 'Fehlender Schlüssel', + missingKey: 'Fehlender Name', missingValue: 'Fehlender Wert', - keyPlaceholder: 'Schlüssel', + keyPlaceholder: 'Name', valuePlaceholder: 'Wert', - keyInUse: 'Dieser Schlüssel exisitiert bereits!' + keyInUse: 'Dieser Name existiert bereits!' }, ResetButton: { title: 'Zurücksetzen' From 9f129636fd18059e2f877544b0af8c03c70e819e Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Fri, 26 Jan 2024 15:36:50 +0100 Subject: [PATCH 16/18] fix: undo select-interaction changes --- src/components/ToolMenu/Draw/Attributions/index.tsx | 3 ++- src/components/ToolMenu/Draw/index.tsx | 11 +---------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index 8627cad80..dec036bc3 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -64,8 +64,9 @@ const AttributionDrawer: React.FC = ({ }); }, [selectedFeature, form]); + // todo revisit react-geo to make name of the slect-interaction configurable const selectInteraction = map?.getInteractions().getArray().filter(interaction => { - if (interaction.get('active') === true && interaction.get('name') === 'edit-selection') { + if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { return true; } else { return false; diff --git a/src/components/ToolMenu/Draw/index.tsx b/src/components/ToolMenu/Draw/index.tsx index e1556ddef..734712dd8 100644 --- a/src/components/ToolMenu/Draw/index.tsx +++ b/src/components/ToolMenu/Draw/index.tsx @@ -1,5 +1,6 @@ import React, { ChangeEvent, + useEffect, useState } from 'react'; @@ -157,16 +158,6 @@ export const Draw: React.FC = ({ const onToggleChange = (childProps: any) => { - const myInteraction = map?.getInteractions().getArray().filter(interaction => { - if (interaction.get('active') === true && interaction.get('name') === 'react-geo-select-interaction') { - return interaction; - } - })[0]; - - if (myInteraction) { - myInteraction.set('name', 'edit-selection'); - } - if (childProps) { setSelectedButton(childProps.name); } From a4db5e370effd701ce16c89a53db12e9169f2c2f Mon Sep 17 00:00:00 2001 From: Fritz Hoeing Date: Fri, 26 Jan 2024 15:46:26 +0100 Subject: [PATCH 17/18] fix: improve code --- src/components/ToolMenu/Draw/Attributions/index.tsx | 7 ++----- src/components/ToolMenu/Draw/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/ToolMenu/Draw/Attributions/index.tsx b/src/components/ToolMenu/Draw/Attributions/index.tsx index dec036bc3..17b7570b5 100644 --- a/src/components/ToolMenu/Draw/Attributions/index.tsx +++ b/src/components/ToolMenu/Draw/Attributions/index.tsx @@ -31,7 +31,6 @@ const AttributionDrawer: React.FC = ({ ...passThroughProps }) => { const [selectedFeature, setSelectedFeature] = useState(); - const [render, setRender] = useState(true); const [isFormValid, setIsFormIsValid] = useState(true); const [currentProperties, setCurrentProperties] = useState>({}); @@ -100,21 +99,19 @@ const AttributionDrawer: React.FC = ({ }; const onPropertyAdd = () => { - const newProps = { ...currentProperties }; + const newProps = {...currentProperties}; newProps[''] = ''; setCurrentProperties(newProps); }; const remove = (keyToRemove: string) => { - const updatedProperties = currentProperties; + const updatedProperties = {...currentProperties}; delete updatedProperties[keyToRemove]; selectedFeature?.unset(keyToRemove); setCurrentProperties(updatedProperties); - - setRender(!render); }; const onKeyChange = async () => { diff --git a/src/components/ToolMenu/Draw/index.tsx b/src/components/ToolMenu/Draw/index.tsx index 734712dd8..125fea132 100644 --- a/src/components/ToolMenu/Draw/index.tsx +++ b/src/components/ToolMenu/Draw/index.tsx @@ -163,7 +163,7 @@ export const Draw: React.FC = ({ } }; - const attributeDrawer = (active: boolean) => { + const onModifyButtonToggle = (active: boolean) => { if (openAttributeDrawer === false && active === true) { setOpenAttributeDrawer(true); } @@ -286,7 +286,7 @@ export const Draw: React.FC = ({ attributeDrawer(evt)} + onToggle={onModifyButtonToggle} > Date: Fri, 26 Jan 2024 15:48:44 +0100 Subject: [PATCH 18/18] fix: improve translation --- src/i18n/translations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 06fab6e99..7e9c4f5ea 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -481,9 +481,9 @@ export default { }, Attribution: { title: 'Properties', - add: 'Add Properties', + add: 'Add Property', select: 'Please select a geometry first.', - submit: 'Submit' + submit: 'Apply' }, AttributionRow: { missingKey: 'Missing Key',