From cee6cf111b94e80deace3cb7323c2d575923f8ff Mon Sep 17 00:00:00 2001
From: stefano bovio <stefano.bovio@geosolutionsgroup.com>
Date: Fri, 27 Oct 2023 14:37:18 +0200
Subject: [PATCH 1/2] Fix #9624 Point cloud shading options (#9666)

---
 .../TOC/fragments/settings/Display.jsx        |  17 +-
 .../settings/PointCloudShadingSettings.jsx    | 140 ++++++++++++
 .../settings/ThreeDTilesSettings.jsx          |  88 ++++++++
 .../PointCloudShadingSettings-test.jsx        | 205 ++++++++++++++++++
 .../__tests__/ThreeDTilesSettings-test.jsx    | 111 ++++++++++
 .../map/cesium/plugins/ThreeDTilesLayer.js    |  38 +++-
 web/client/components/styleeditor/Fields.jsx  |   3 +-
 .../components/styleeditor/PropertyField.jsx  |   9 +-
 .../components/styleeditor/config/blocks.js   |   3 +-
 .../components/styleeditor/config/property.js |   5 +-
 web/client/themes/default/less/common.less    |  35 +++
 .../themes/default/less/react-select.less     |   4 +
 web/client/themes/default/less/wizard.less    |   1 -
 web/client/translations/data.de-DE.json       |  18 +-
 web/client/translations/data.en-US.json       |  18 +-
 web/client/translations/data.es-ES.json       |  18 +-
 web/client/translations/data.fr-FR.json       |  18 +-
 web/client/translations/data.it-IT.json       |  18 +-
 18 files changed, 721 insertions(+), 28 deletions(-)
 create mode 100644 web/client/components/TOC/fragments/settings/PointCloudShadingSettings.jsx
 create mode 100644 web/client/components/TOC/fragments/settings/ThreeDTilesSettings.jsx
 create mode 100644 web/client/components/TOC/fragments/settings/__tests__/PointCloudShadingSettings-test.jsx
 create mode 100644 web/client/components/TOC/fragments/settings/__tests__/ThreeDTilesSettings-test.jsx

diff --git a/web/client/components/TOC/fragments/settings/Display.jsx b/web/client/components/TOC/fragments/settings/Display.jsx
index d4f93e06e4..acea7b9a83 100644
--- a/web/client/components/TOC/fragments/settings/Display.jsx
+++ b/web/client/components/TOC/fragments/settings/Display.jsx
@@ -21,6 +21,7 @@ import { ServerTypes } from '../../../../utils/LayersUtils';
 import Select from 'react-select';
 import { getSupportedFormat } from '../../../../api/WMS';
 import WMSCacheOptions from './WMSCacheOptions';
+import ThreeDTilesSettings from './ThreeDTilesSettings';
 export default class extends React.Component {
     static propTypes = {
         opacityText: PropTypes.node,
@@ -206,18 +207,10 @@ export default class extends React.Component {
                     </Col>
                 </Row>
 
-                {this.props.element.type === "3dtiles" && <Row>
-                    <Col xs={12}>
-                        <FormGroup>
-                            <ControlLabel><Message msgId="layerProperties.heightOffset"/></ControlLabel>
-                            <IntlNumberFormControl
-                                type="number"
-                                name={"heightOffset"}
-                                value={this.props.element.heightOffset || 0}
-                                onChange={(val)=> this.props.onChange("heightOffset", parseFloat(val))}/>
-                        </FormGroup>
-                    </Col>
-                </Row>}
+                <ThreeDTilesSettings
+                    layer={this.props.element}
+                    onChange={this.props.onChange}
+                />
 
                 {this.props.element.type === "wms" &&
                 <Row>
diff --git a/web/client/components/TOC/fragments/settings/PointCloudShadingSettings.jsx b/web/client/components/TOC/fragments/settings/PointCloudShadingSettings.jsx
new file mode 100644
index 0000000000..20f3673ca2
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/PointCloudShadingSettings.jsx
@@ -0,0 +1,140 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, ControlLabel, InputGroup, Checkbox } from 'react-bootstrap';
+import DebouncedFormControl from '../../../misc/DebouncedFormControl';
+import Message from '../../../I18N/Message';
+import InfoPopover from '../../../widgets/widget/InfoPopover';
+
+/**
+ * PointCloudShadingSettings. This component shows the point cloud shading options available
+ * @prop {object} layer the layer options
+ * @prop {object} onChange callback on every on change event
+ */
+function PointCloudShadingSettings({
+    layer,
+    onChange
+}) {
+    if (!(layer?.type === '3dtiles' && layer?.format === 'pnts')) {
+        return null;
+    }
+    const { pointCloudShading = {} } = layer || {};
+    return (
+        <>
+            <div style={{ fontWeight: 'bold', padding: 8 }}><Message msgId="layerProperties.3dTiles.pointCloudShading.title"/></div>
+            <FormGroup className="form-group-flex">
+                <Checkbox
+                    checked={!!pointCloudShading.attenuation}
+                    onChange={(event) => onChange('pointCloudShading', {
+                        ...pointCloudShading,
+                        attenuation: event?.target?.checked,
+                        maximumAttenuation: pointCloudShading?.maximumAttenuation ?? 4,
+                        eyeDomeLighting: pointCloudShading?.eyeDomeLighting ?? true
+                    })}
+                >
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.attenuation" />
+                    {' '}<InfoPopover text={<Message msgId="layerProperties.3dTiles.pointCloudShading.attenuationInfo" />} />
+                </Checkbox>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel>
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.maximumAttenuation" />
+                </ControlLabel>
+                <InputGroup style={{ maxWidth: 90 }}>
+                    <DebouncedFormControl
+                        disabled={!pointCloudShading.attenuation}
+                        type="number"
+                        value={pointCloudShading.maximumAttenuation !== undefined
+                            ?  pointCloudShading.maximumAttenuation
+                            : 4}
+                        min={0}
+                        fallbackValue={4}
+                        onChange={(value) => {
+                            onChange('pointCloudShading', {
+                                ...pointCloudShading,
+                                maximumAttenuation: value !== undefined ? parseFloat(value) : undefined
+                            });
+                        }}
+                    />
+                    <InputGroup.Addon>
+                        px
+                    </InputGroup.Addon>
+                </InputGroup>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <Checkbox
+                    disabled={!pointCloudShading.attenuation}
+                    checked={!!pointCloudShading.eyeDomeLighting}
+                    onChange={(event) => onChange('pointCloudShading', {
+                        ...pointCloudShading,
+                        eyeDomeLighting: event?.target?.checked
+                    })}
+                >
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLighting" />
+                    {' '}<InfoPopover text={<Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLightingInfo" />} />
+                </Checkbox>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel>
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength" />
+                </ControlLabel>
+                <InputGroup style={{ maxWidth: 90 }}>
+                    <DebouncedFormControl
+                        disabled={!pointCloudShading.eyeDomeLighting || !pointCloudShading.attenuation}
+                        type="number"
+                        value={pointCloudShading.eyeDomeLightingStrength !== undefined
+                            ?  pointCloudShading.eyeDomeLightingStrength
+                            : 1.0}
+                        min={0}
+                        fallbackValue={1.0}
+                        onChange={(value) => onChange('pointCloudShading', {
+                            ...pointCloudShading,
+                            eyeDomeLightingStrength: value !== undefined ? parseFloat(value) : undefined
+                        })}
+                    />
+                </InputGroup>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel>
+                    <Message msgId="layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius" />
+                </ControlLabel>
+                <InputGroup style={{ maxWidth: 90 }}>
+                    <DebouncedFormControl
+                        disabled={!pointCloudShading.eyeDomeLighting || !pointCloudShading.attenuation}
+                        type="number"
+                        value={pointCloudShading.eyeDomeLightingRadius !== undefined
+                            ?  pointCloudShading.eyeDomeLightingRadius
+                            : 1.0}
+                        min={0}
+                        step={1}
+                        fallbackValue={1.0}
+                        onChange={(value) => onChange('pointCloudShading', {
+                            ...pointCloudShading,
+                            eyeDomeLightingRadius: value !== undefined ? parseFloat(value) : undefined
+                        })}
+                    />
+                </InputGroup>
+            </FormGroup>
+        </>
+    );
+}
+
+PointCloudShadingSettings.propTypes = {
+    layer: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+PointCloudShadingSettings.defaultProps = {
+    layer: {},
+    onChange: () => {}
+};
+
+export default PointCloudShadingSettings;
diff --git a/web/client/components/TOC/fragments/settings/ThreeDTilesSettings.jsx b/web/client/components/TOC/fragments/settings/ThreeDTilesSettings.jsx
new file mode 100644
index 0000000000..3f5aa9f99f
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/ThreeDTilesSettings.jsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, ControlLabel, InputGroup } from 'react-bootstrap';
+import DebouncedFormControl from '../../../misc/DebouncedFormControl';
+import Message from '../../../I18N/Message';
+import PointCloudShadingSettings from './PointCloudShadingSettings';
+import Select from 'react-select';
+
+/**
+ * ThreeDTilesSettings. This component shows the 3d tiles options available
+ * @prop {object} layer the layer options
+ * @prop {object} onChange callback on every on change event
+ */
+function ThreeDTilesSettings({
+    layer,
+    onChange
+}) {
+    if (layer?.type !== '3dtiles') {
+        return null;
+    }
+    return (
+        <div style={{ margin: '0 -8px' }}>
+            <FormGroup className="form-group-flex">
+                <ControlLabel><Message msgId="layerProperties.3dTiles.format"/></ControlLabel>
+                <InputGroup>
+                    <Select
+                        value={layer.format === 'pnts' ? 'pnts' : '3dmodel'}
+                        fallbackValue={0}
+                        clearable={false}
+                        options={[
+                            {
+                                value: '3dmodel',
+                                label: <Message msgId="layerProperties.3dTiles.3dModel"/>
+                            },
+                            {
+                                value: 'pnts',
+                                label: <Message msgId="layerProperties.3dTiles.pointCloud"/>
+                            }
+                        ]}
+                        onChange={(option)=> {
+                            onChange('format', option?.value);
+                        }}
+                    />
+                </InputGroup>
+            </FormGroup>
+            <FormGroup className="form-group-flex">
+                <ControlLabel><Message msgId="layerProperties.heightOffset"/></ControlLabel>
+                <InputGroup style={{ maxWidth: 120 }}>
+                    <DebouncedFormControl
+                        type="number"
+                        name={"heightOffset"}
+                        value={layer.heightOffset || 0}
+                        fallbackValue={0}
+                        onChange={(val)=> {
+                            onChange('heightOffset', val !== undefined ? parseFloat(val) : undefined);
+                        }}
+                    />
+                    <InputGroup.Addon>m</InputGroup.Addon>
+                </InputGroup>
+            </FormGroup>
+            <PointCloudShadingSettings
+                layer={layer}
+                onChange={onChange}
+            />
+        </div>
+    );
+}
+
+ThreeDTilesSettings.propTypes = {
+    layer: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+ThreeDTilesSettings.defaultProps = {
+    layer: {},
+    onChange: () => {}
+};
+
+export default ThreeDTilesSettings;
diff --git a/web/client/components/TOC/fragments/settings/__tests__/PointCloudShadingSettings-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/PointCloudShadingSettings-test.jsx
new file mode 100644
index 0000000000..03fd5dec6c
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/__tests__/PointCloudShadingSettings-test.jsx
@@ -0,0 +1,205 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PointCloudShadingSettings from '../PointCloudShadingSettings';
+import { Simulate, act } from 'react-dom/test-utils';
+
+describe('PointCloudShadingSettings', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+    it('should not render with default', () => {
+        ReactDOM.render(<PointCloudShadingSettings />, document.getElementById('container'));
+        expect(document.getElementById('container').children.length).toBe(0);
+    });
+    it('should render point cloud fields', () => {
+        ReactDOM.render(<PointCloudShadingSettings layer={{
+            type: '3dtiles',
+            format: 'pnts'
+        }}/>, document.getElementById('container'));
+        const checkboxNodes = document.querySelectorAll('.checkbox');
+        expect([...checkboxNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.attenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLighting'
+        ]);
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.maximumAttenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius'
+        ]);
+    });
+    it('should trigger on change with attenuation checkbox', (done) => {
+        ReactDOM.render(<PointCloudShadingSettings  layer={{
+            type: '3dtiles',
+            format: 'pnts'
+        }}
+        onChange={(key, value) => {
+            try {
+                expect(key).toBe('pointCloudShading');
+                expect(value).toEqual({
+                    attenuation: true,
+                    maximumAttenuation: 4,
+                    eyeDomeLighting: true
+                });
+            } catch (e) {
+                done(e);
+            }
+            done();
+        }}
+        />, document.getElementById('container'));
+        const checkboxNodes = document.querySelectorAll('.checkbox');
+        expect([...checkboxNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.attenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLighting'
+        ]);
+        const checkboxInputNodes = document.querySelectorAll('input[type=\'checkbox\']');
+        Simulate.change(checkboxInputNodes[0], { target: { checked: true }});
+    });
+    it('should trigger on change with eyeDomeLighting checkbox', (done) => {
+        ReactDOM.render(<PointCloudShadingSettings  layer={{
+            type: '3dtiles',
+            format: 'pnts',
+            pointCloudShading: {
+                attenuation: true
+            }
+        }}
+        onChange={(key, value) => {
+            try {
+                expect(key).toBe('pointCloudShading');
+                expect(value).toEqual({
+                    attenuation: true,
+                    eyeDomeLighting: true
+                });
+            } catch (e) {
+                done(e);
+            }
+            done();
+        }}
+        />, document.getElementById('container'));
+        const checkboxNodes = document.querySelectorAll('.checkbox');
+        expect([...checkboxNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.attenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLighting'
+        ]);
+        const checkboxInputNodes = document.querySelectorAll('input[type=\'checkbox\']');
+        Simulate.change(checkboxInputNodes[1], { target: { checked: true }});
+    });
+    it('should trigger on change with maximumAttenuation input', (done) => {
+        act(() => {
+            ReactDOM.render(<PointCloudShadingSettings  layer={{
+                type: '3dtiles',
+                format: 'pnts',
+                pointCloudShading: {
+                    attenuation: true
+                }
+            }}
+            onChange={(key, value) => {
+                try {
+                    expect(key).toBe('pointCloudShading');
+                    expect(value).toEqual({
+                        attenuation: true,
+                        maximumAttenuation: 3
+                    });
+                } catch (e) {
+                    done(e);
+                }
+                done();
+            }}
+            />, document.getElementById('container'));
+        });
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.maximumAttenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius'
+        ]);
+        const inputNodes = document.querySelectorAll('input[type=\'number\']');
+        Simulate.focus(inputNodes[0]);
+        Simulate.change(inputNodes[0], { target: { value: 3 } });
+    });
+    it('should trigger on change with eyeDomeLightingStrength input', (done) => {
+        act(() => {
+            ReactDOM.render(<PointCloudShadingSettings  layer={{
+                type: '3dtiles',
+                format: 'pnts',
+                pointCloudShading: {
+                    attenuation: true,
+                    eyeDomeLighting: true
+                }
+            }}
+            onChange={(key, value) => {
+                try {
+                    expect(key).toBe('pointCloudShading');
+                    expect(value).toEqual({
+                        attenuation: true,
+                        eyeDomeLighting: true,
+                        eyeDomeLightingStrength: 2
+                    });
+                } catch (e) {
+                    done(e);
+                }
+                done();
+            }}
+            />, document.getElementById('container'));
+        });
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.maximumAttenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius'
+        ]);
+        const inputNodes = document.querySelectorAll('input[type=\'number\']');
+        Simulate.focus(inputNodes[1]);
+        Simulate.change(inputNodes[1], { target: { value: 2 } });
+    });
+    it('should trigger on change with eyeDomeLightingRadius input', (done) => {
+        act(() => {
+            ReactDOM.render(<PointCloudShadingSettings  layer={{
+                type: '3dtiles',
+                format: 'pnts',
+                pointCloudShading: {
+                    attenuation: true,
+                    eyeDomeLighting: true
+                }
+            }}
+            onChange={(key, value) => {
+                try {
+                    expect(key).toBe('pointCloudShading');
+                    expect(value).toEqual({
+                        attenuation: true,
+                        eyeDomeLighting: true,
+                        eyeDomeLightingRadius: 0.5
+                    });
+                } catch (e) {
+                    done(e);
+                }
+                done();
+            }}
+            />, document.getElementById('container'));
+        });
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.maximumAttenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius'
+        ]);
+        const inputNodes = document.querySelectorAll('input[type=\'number\']');
+        Simulate.focus(inputNodes[2]);
+        Simulate.change(inputNodes[2], { target: { value: 0.5 } });
+    });
+});
diff --git a/web/client/components/TOC/fragments/settings/__tests__/ThreeDTilesSettings-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/ThreeDTilesSettings-test.jsx
new file mode 100644
index 0000000000..27553553d6
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/__tests__/ThreeDTilesSettings-test.jsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ThreeDTilesSettings from '../ThreeDTilesSettings';
+import { Simulate, act } from 'react-dom/test-utils';
+
+describe('ThreeDTilesSettings', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+    it('should not render with default', () => {
+        ReactDOM.render(<ThreeDTilesSettings />, document.getElementById('container'));
+        expect(document.getElementById('container').children.length).toBe(0);
+    });
+    it('should render default fields', () => {
+        ReactDOM.render(<ThreeDTilesSettings layer={{
+            type: '3dtiles'
+        }}/>, document.getElementById('container'));
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.format',
+            'layerProperties.heightOffset'
+        ]);
+    });
+    it('should render point cloud fields', () => {
+        ReactDOM.render(<ThreeDTilesSettings layer={{
+            type: '3dtiles',
+            format: 'pnts'
+        }}/>, document.getElementById('container'));
+        const checkboxNodes = document.querySelectorAll('.checkbox');
+        expect([...checkboxNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.pointCloudShading.attenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLighting'
+        ]);
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.format',
+            'layerProperties.heightOffset',
+            'layerProperties.3dTiles.pointCloudShading.maximumAttenuation',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingStrength',
+            'layerProperties.3dTiles.pointCloudShading.eyeDomeLightingRadius'
+        ]);
+    });
+    it('should trigger on change with format input', (done) => {
+        act(() => {
+            ReactDOM.render(<ThreeDTilesSettings layer={{
+                type: '3dtiles'
+            }}
+            onChange={(key, value) => {
+                try {
+                    expect(key).toBe('format');
+                    expect(value).toBe('pnts');
+                } catch (e) {
+                    done(e);
+                }
+                done();
+            }}
+            />, document.getElementById('container'));
+        });
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.format',
+            'layerProperties.heightOffset'
+        ]);
+        const selectFields = document.querySelectorAll('.Select-input > input');
+        expect(selectFields.length).toBe(1);
+        Simulate.focus(selectFields[0]);
+        Simulate.keyDown(selectFields[0], { key: 'ArrowDown', keyCode: 40 }); // select first in menu
+        Simulate.keyDown(selectFields[0], { key: 'ArrowDown', keyCode: 40 }); // select second in menu
+        Simulate.keyDown(selectFields[0], { key: 'Enter', keyCode: 13 });
+    });
+    it('should trigger on change with heightOffset input', (done) => {
+        act(() => {
+            ReactDOM.render(<ThreeDTilesSettings layer={{
+                type: '3dtiles'
+            }}
+            onChange={(key, value) => {
+                try {
+                    expect(key).toBe('heightOffset');
+                    expect(value).toBe(10);
+                } catch (e) {
+                    done(e);
+                }
+                done();
+            }}
+            />, document.getElementById('container'));
+        });
+        const controlLabelsNodes = document.querySelectorAll('.control-label');
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.format',
+            'layerProperties.heightOffset'
+        ]);
+        const inputNodes = document.querySelectorAll('input[type=\'number\']');
+        Simulate.focus(inputNodes[0]);
+        Simulate.change(inputNodes[0], { target: { value: 10 } });
+    });
+});
diff --git a/web/client/components/map/cesium/plugins/ThreeDTilesLayer.js b/web/client/components/map/cesium/plugins/ThreeDTilesLayer.js
index 8e0d750c09..812c0abd5e 100644
--- a/web/client/components/map/cesium/plugins/ThreeDTilesLayer.js
+++ b/web/client/components/map/cesium/plugins/ThreeDTilesLayer.js
@@ -18,17 +18,27 @@ import tinycolor from 'tinycolor2';
 import googleOnWhiteLogo from '../img/google_on_white_hdpi.png';
 import googleOnNonWhiteLogo from '../img/google_on_non_white_hdpi.png';
 
-function getStyle({ style }) {
+const cleanStyle = (style, options) => {
+    if (style && options?.pointCloudShading?.attenuation) {
+        // remove pointSize if attenuation are applied
+        const { pointSize, ...others } = style;
+        return others;
+    }
+    return style;
+};
+
+function getStyle({ style, pointCloudShading = {} }) {
     const { format, body } = style || {};
     if (!format || !body) {
         return Promise.resolve(null);
     }
     if (format === '3dtiles') {
-        return Promise.resolve(body);
+        return Promise.resolve(cleanStyle(body, { pointCloudShading }));
     }
     if (format === 'geostyler') {
         return getStyleParser('3dtiles')
-            .then((parser) => parser.writeStyle(body));
+            .then((parser) => parser.writeStyle(body))
+            .then((parsedStyle) => cleanStyle(parsedStyle, { pointCloudShading }));
     }
     return Promise.all([
         getStyleParser(format),
@@ -38,6 +48,7 @@ function getStyle({ style }) {
             parser
                 .readStyle(body)
                 .then(parsedStyle => threeDTilesParser.writeStyle(parsedStyle))
+                .then((parsedStyle) => cleanStyle(parsedStyle, { pointCloudShading }))
         );
 }
 
@@ -106,6 +117,16 @@ function updateGooglePhotorealistic3DTilesBrandLogo(map, options, tileSet) {
     return null;
 }
 
+function updateShading(tileSet, options, map) {
+    // point cloud
+    tileSet.pointCloudShading.attenuation = !!options?.pointCloudShading?.attenuation;
+    tileSet.pointCloudShading.maximumAttenuation = options?.pointCloudShading?.maximumAttenuation ?? 4;
+    tileSet.pointCloudShading.eyeDomeLighting = !!options?.pointCloudShading?.eyeDomeLighting;
+    tileSet.pointCloudShading.eyeDomeLightingStrength = options?.pointCloudShading?.eyeDomeLightingStrength ?? 1.0;
+    tileSet.pointCloudShading.eyeDomeLightingRadius = options?.pointCloudShading?.eyeDomeLightingRadius ?? 1.0;
+    setTimeout(() => map.scene.requestRender());
+}
+
 Layers.registerType('3dtiles', {
     create: (options, map) => {
         if (options.visibility && options.url) {
@@ -133,6 +154,7 @@ Layers.registerType('3dtiles', {
                 ensureReady(tileSet, () => {
                     updateModelMatrix(tileSet, options);
                     clip3DTiles(tileSet, options, map);
+                    updateShading(tileSet, options, map);
                     getStyle(options)
                         .then((style) => {
                             if (style) {
@@ -184,7 +206,10 @@ Layers.registerType('3dtiles', {
                 clip3DTiles(tileSet, newOptions, map);
             });
         }
-        if (!isEqual(newOptions.style, oldOptions.style) && tileSet) {
+        if ((
+            !isEqual(newOptions.style, oldOptions.style)
+            || newOptions?.pointCloudShading?.attenuation !== oldOptions?.pointCloudShading?.attenuation
+        ) && tileSet) {
             ensureReady(tileSet, () => {
                 getStyle(newOptions)
                     .then((style) => {
@@ -195,6 +220,11 @@ Layers.registerType('3dtiles', {
                     });
             });
         }
+        if (!isEqual(newOptions.pointCloudShading, oldOptions.pointCloudShading) && tileSet) {
+            ensureReady(tileSet, () => {
+                updateShading(tileSet, newOptions, map);
+            });
+        }
         if (tileSet && newOptions.heightOffset !== oldOptions.heightOffset) {
             ensureReady(tileSet, () => {
                 updateModelMatrix(tileSet, newOptions);
diff --git a/web/client/components/styleeditor/Fields.jsx b/web/client/components/styleeditor/Fields.jsx
index f04f075829..8150d3689e 100644
--- a/web/client/components/styleeditor/Fields.jsx
+++ b/web/client/components/styleeditor/Fields.jsx
@@ -113,7 +113,8 @@ export const fields = {
         return (
             <PropertyField
                 label={label}
-                disabled={disabled}>
+                disabled={disabled}
+                infoMessageId={config.infoMessageId}>
                 <FormGroup>
                     <InputGroup style={config?.maxWidth ? { maxWidth: config?.maxWidth } : {}}>
                         <DebouncedFormControl
diff --git a/web/client/components/styleeditor/PropertyField.jsx b/web/client/components/styleeditor/PropertyField.jsx
index 6956b9de4c..4ec972e79e 100644
--- a/web/client/components/styleeditor/PropertyField.jsx
+++ b/web/client/components/styleeditor/PropertyField.jsx
@@ -8,8 +8,9 @@
 
 import React from 'react';
 import Message from '../I18N/Message';
+import InfoPopover from '../widgets/widget/InfoPopover';
 
-function PropertyField({ children, label, tools, divider, invalid, warning, disabled }) {
+function PropertyField({ children, label, tools, divider, invalid, warning, disabled, valueStyle, infoMessageId }) {
 
     if (divider) {
         return <div className="ms-symbolizer-field-divider"></div>;
@@ -20,9 +21,13 @@ function PropertyField({ children, label, tools, divider, invalid, warning, disa
     return (
         <div
             className={'ms-symbolizer-field' + disabledClassName}>
-            <div className="ms-symbolizer-label"><Message msgId={label} /></div>
+            <div className="ms-symbolizer-label">
+                <Message msgId={label} />
+                {infoMessageId ? <>&nbsp;<InfoPopover text={<Message msgId={infoMessageId} />}/></> : null}
+            </div>
             <div
                 className={'ms-symbolizer-value' + validationClassName + warningClassName}
+                style={valueStyle}
                 // prevent drag and drop when interacting with property input
                 onDragStart={(event) => {
                     event.stopPropagation();
diff --git a/web/client/components/styleeditor/config/blocks.js b/web/client/components/styleeditor/config/blocks.js
index 1b1d2ad8ef..02c134b2d2 100644
--- a/web/client/components/styleeditor/config/blocks.js
+++ b/web/client/components/styleeditor/config/blocks.js
@@ -380,7 +380,8 @@ const getBlocks = ({
                     range: {
                         min: 1,
                         max: 10
-                    }
+                    },
+                    infoMessageId: 'styleeditor.pointCloudSizeInfo'
                 })
             },
             defaultProperties: {
diff --git a/web/client/components/styleeditor/config/property.js b/web/client/components/styleeditor/config/property.js
index 2ff391a4a6..8711d5f1f9 100644
--- a/web/client/components/styleeditor/config/property.js
+++ b/web/client/components/styleeditor/config/property.js
@@ -192,7 +192,7 @@ const property = {
         },
         isDisabled
     }),
-    size: ({ key = 'radius', label = 'Radius', range, fallbackValue = 1 }) => ({
+    size: ({ key = 'radius', label = 'Radius', range, fallbackValue = 1, infoMessageId }) => ({
         type: 'input',
         label,
         config: {
@@ -201,7 +201,8 @@ const property = {
             maxWidth: 105,
             uom: 'px',
             min: range?.min ?? 0,
-            max: range?.max
+            max: range?.max,
+            infoMessageId
         },
         setValue: (value = 1) => {
             return value === undefined ? fallbackValue : parseFloat(value);
diff --git a/web/client/themes/default/less/common.less b/web/client/themes/default/less/common.less
index 41a1512f0d..322d285115 100644
--- a/web/client/themes/default/less/common.less
+++ b/web/client/themes/default/less/common.less
@@ -76,6 +76,23 @@
             .background-color-var(@theme-vars[main-bg]);
         }
     }
+    .form-group-flex {
+        &.has-success {
+            .Select-control {
+                .border-color-var(@theme-vars[success], true);
+            }
+        }
+        &.has-error {
+            .Select-control {
+                .border-color-var(@theme-vars[danger], true);
+            }
+        }
+        &.has-warning {
+            .Select-control {
+                .border-color-var(@theme-vars[warning], true);
+            }
+        }
+    }
 }
 
 // **************
@@ -396,3 +413,21 @@ div#sync-popover.popover {
     float: unset;
 
 }
+
+.form-group-flex {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    .checkbox,
+    .control-label {
+        flex: 1;
+        font-weight: normal;
+    }
+    .input-group {
+        flex: 1;
+    }
+    input {
+        z-index: 0;
+    }
+    margin-bottom: 8px;
+}
diff --git a/web/client/themes/default/less/react-select.less b/web/client/themes/default/less/react-select.less
index d1787121d4..c4d1de2c1e 100644
--- a/web/client/themes/default/less/react-select.less
+++ b/web/client/themes/default/less/react-select.less
@@ -195,3 +195,7 @@
         margin-top: 3px;
     }
 }
+
+.Select.is-open {
+    z-index: 20;
+}
\ No newline at end of file
diff --git a/web/client/themes/default/less/wizard.less b/web/client/themes/default/less/wizard.less
index df81921d05..a51e44545d 100644
--- a/web/client/themes/default/less/wizard.less
+++ b/web/client/themes/default/less/wizard.less
@@ -179,4 +179,3 @@
         }
     }
 }
-
diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
index 4358063988..99969375eb 100644
--- a/web/client/translations/data.de-DE.json
+++ b/web/client/translations/data.de-DE.json
@@ -156,6 +156,21 @@
                 "scale": "Maßstab",
                 "resolution": "Auflösung"
             },
+            "3dTiles": {
+                "format": "Format",
+                "3dModel": "3D-Modell",
+                "pointCloud": "Punktwolke",
+                "pointCloudShading": {
+                    "title": "Visualisierungsoptionen",
+                    "attenuationInfo": "Punktabschwächung basierend auf der Entfernung vom aktuellen Blickpunkt durchführen",
+                    "attenuation": "Dämpfung aktivieren",
+                    "maximumAttenuation": "Maximale Dämpfung",
+                    "eyeDomeLightingInfo": "Dies ermöglicht eine Augenkuppelbeleuchtung, um die Visualisierung der Punktwolke zu verbessern. Dies stellt nicht das echte Sonnenlicht dar",
+                    "eyeDomeLighting": "Beleuchtung aktivieren",
+                    "eyeDomeLightingStrength": "Lichtstärke",
+                    "eyeDomeLightingRadius": "Beleuchtungsradius"
+                }
+            },
             "tooltip": {
                 "label": "QuickInfo",
                 "title": "Titel",
@@ -2544,7 +2559,8 @@
             "startPoint": "Startpunkt",
             "endPoint": "Endpunkt",
             "line": "Linie",
-            "geodesicLine": "Geodätische Linie"
+            "geodesicLine": "Geodätische Linie",
+            "pointCloudSizeInfo": "Der Punktwolkenradius wird nur angewendet, wenn die Dämpfungsoptionen deaktiviert sind. Die Dämpfungsoption hat Vorrang vor dieser Eigenschaft."
         },
         "playback": {
             "settings": {
diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
index 9995418617..7ce441daa3 100644
--- a/web/client/translations/data.en-US.json
+++ b/web/client/translations/data.en-US.json
@@ -156,6 +156,21 @@
                 "scale": "Scale",
                 "resolution": "Resolution"
             },
+            "3dTiles": {
+                "format": "Format",
+                "3dModel": "3D Model",
+                "pointCloud": "Point Cloud",
+                "pointCloudShading": {
+                    "title": "Visualization options",
+                    "attenuationInfo": "Perform point attenuation based on the distance from the current view point",
+                    "attenuation": "Enable attenuation",
+                    "maximumAttenuation": "Maximum attenuation",
+                    "eyeDomeLightingInfo": "This enable an eye dome lighting to improve visualization of the point cloud. This does not represent the real sun lighting",
+                    "eyeDomeLighting": "Enable lighting",
+                    "eyeDomeLightingStrength": "Lighting strength",
+                    "eyeDomeLightingRadius": "Lighting radius"
+                }
+            },
             "tooltip": {
                 "label": "Tooltip",
                 "title": "Title",
@@ -2517,7 +2532,8 @@
             "startPoint": "Start point",
             "endPoint": "End point",
             "line": "Line",
-            "geodesicLine": "Geodesic line"
+            "geodesicLine": "Geodesic line",
+            "pointCloudSizeInfo": "The point cloud radius is applied only when the attenuation options is disabled. The attenuation option takes precedence over this property."
         },
         "playback": {
             "settings": {
diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
index 0b6d36d50f..866c7789d8 100644
--- a/web/client/translations/data.es-ES.json
+++ b/web/client/translations/data.es-ES.json
@@ -153,6 +153,21 @@
                 "scale": "Escala",
                 "resolution": "Resolución"
             },
+            "3dTiles": {
+                "format": "Formato",
+                "3dModel": "Modelo 3D",
+                "pointCloud": "Nube de puntos",
+                "pointCloudShading": {
+                    "title": "Opciones de visualización",
+                    "attenuationInfo": "Realiza atenuación de puntos según la distancia desde el punto de vista actual",
+                    "attenuation": "Habilitar atenuación",
+                    "maximumAttenuation": "Atenuación máxima",
+                    "eyeDomeLightingInfo": "Esto habilita una iluminación de domo ocular para mejorar la visualización de la nube de puntos. Esto no representa la iluminación solar real",
+                    "eyeDomeLighting": "Habilitar iluminación",
+                    "eyeDomeLightingStrength": "Intensidad de iluminación",
+                    "eyeDomeLightingRadius": "Radio de iluminación"
+                }
+            },
             "tooltip": {
                 "label": "Información sobre herramientas",
                 "title": "Título",
@@ -2507,7 +2522,8 @@
             "startPoint": "Punto de inicio",
             "endPoint": "Punto final",
             "line": "Línea",
-            "geodesicLine": "Línea geodésica"
+            "geodesicLine": "Línea geodésica",
+            "pointCloudSizeInfo": "El radio de la nube de puntos se aplica sólo cuando las opciones de atenuación están deshabilitadas. La opción de atenuación tiene prioridad sobre esta propiedad."
         },
         "playback": {
             "settings": {
diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
index bca0accddb..326f872223 100644
--- a/web/client/translations/data.fr-FR.json
+++ b/web/client/translations/data.fr-FR.json
@@ -156,6 +156,21 @@
                 "scale": "Échelle",
                 "resolution": "Résolution"
             },
+            "3dTiles": {
+                "format": "Formater",
+                "3dModel": "Modèle 3D",
+                "pointCloud": "Nuage de points",
+                "pointCloudShading": {
+                    "title": "Options de visualisation",
+                    "attenuationInfo": "Effectuer une atténuation de point en fonction de la distance du point de vue actuel",
+                    "attenuation": "Activer l'atténuation",
+                    "maximumAttenuation": "Atténuation maximale",
+                    "eyeDomeLightingInfo": "Cela permet à un éclairage du dôme oculaire d'améliorer la visualisation du nuage de points. Cela ne représente pas l'éclairage réel du soleil",
+                    "eyeDomeLighting": "Activer l'éclairage",
+                    "eyeDomeLightingStrength": "Force d'éclairage",
+                    "eyeDomeLightingRadius": "Rayon d'éclairage"
+                }
+            },
             "tooltip": {
                 "label": "Infobulle",
                 "title": "Titre",
@@ -2507,7 +2522,8 @@
             "startPoint": "Point de départ",
             "endPoint": "Point final",
             "line": "Ligne",
-            "geodesicLine": "Ligne géodésique"
+            "geodesicLine": "Ligne géodésique",
+            "pointCloudSizeInfo": "Le rayon du nuage de points est appliqué uniquement lorsque les options d'atténuation sont désactivées. L'option d'atténuation est prioritaire sur cette propriété."
         },
         "playback": {
             "settings": {
diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
index f978182b98..200cd4910a 100644
--- a/web/client/translations/data.it-IT.json
+++ b/web/client/translations/data.it-IT.json
@@ -156,6 +156,21 @@
                 "scale": "Scala",
                 "resolution": "Risoluzione"
             },
+            "3dTiles": {
+                "format": "Formato",
+                "3dModel": "Modello 3D",
+                "pointCloud": "Nuvola di punti",
+                "pointCloudShading": {
+                    "title": "Opzioni di visualizzazione",
+                    "attenuationInfo": "Applica una attenuazione della nuvola di punti basata sul punto di vista corrente",
+                    "attenuation": "Abilita attenuazione",
+                    "maximumAttenuation": "Massima attenuazione",
+                    "eyeDomeLightingInfo": "Abilita l'illuminazione di tipo eye dome per migliorare la visualizzazione della nuvola di punti. Questa non rappresenta l'attuale illuminazione del sole",
+                    "eyeDomeLighting": "Abilita illuminazione",
+                    "eyeDomeLightingStrength": "Intensità luminosa",
+                    "eyeDomeLightingRadius": "Raggio di illuminazione"
+                }
+            },
             "tooltip": {
                 "label": "Tooltip",
                 "title": "Titolo",
@@ -2508,7 +2523,8 @@
             "startPoint": "Punto iniziale",
             "endPoint": "Punto finale",
             "line": "Linea",
-            "geodesicLine": "Linea geodesica"
+            "geodesicLine": "Linea geodesica",
+            "pointCloudSizeInfo": "Il raggio della nuvola di punti viene applicato solo quando le opzioni di attenuazione sono disabilitate. L'opzione di attenuazione ha la precedenza su questa proprietà."
         },
         "playback": {
             "settings": {

From 39551df1250392a628591cafc23a2269221ca84f Mon Sep 17 00:00:00 2001
From: stefano bovio <stefano.bovio@geosolutionsgroup.com>
Date: Fri, 27 Oct 2023 16:45:04 +0200
Subject: [PATCH 2/2] Fix #9666 Include pointCloudShading option to saved layer
 config (#9670)

---
 web/client/utils/LayersUtils.js                |  3 ++-
 web/client/utils/__tests__/LayersUtils-test.js | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/client/utils/LayersUtils.js b/web/client/utils/LayersUtils.js
index e57e396a5c..8cfca18d72 100644
--- a/web/client/utils/LayersUtils.js
+++ b/web/client/utils/LayersUtils.js
@@ -655,7 +655,8 @@ export const saveLayer = (layer) => {
     layer.tileGridStrategy ? { tileGridStrategy: layer.tileGridStrategy } : {},
     layer.tileGridCacheSupport ? { tileGridCacheSupport: layer.tileGridCacheSupport } : {},
     !isNil(layer.forceProxy) ? { forceProxy: layer.forceProxy } : {},
-    !isNil(layer.disableFeaturesEditing) ? { disableFeaturesEditing: layer.disableFeaturesEditing } : {});
+    !isNil(layer.disableFeaturesEditing) ? { disableFeaturesEditing: layer.disableFeaturesEditing } : {},
+    layer.pointCloudShading ? { pointCloudShading: layer.pointCloudShading } : {});
 };
 
 /**
diff --git a/web/client/utils/__tests__/LayersUtils-test.js b/web/client/utils/__tests__/LayersUtils-test.js
index 7e628fc827..4354ed5394 100644
--- a/web/client/utils/__tests__/LayersUtils-test.js
+++ b/web/client/utils/__tests__/LayersUtils-test.js
@@ -1246,6 +1246,20 @@ describe('LayersUtils', () => {
                 l => {
                     expect(l.disableFeaturesEditing).toBeTruthy();
                 }
+            ],
+            [
+                {
+                    pointCloudShading: {
+                        attenuation: true,
+                        maximumAttenuation: 4,
+                        eyeDomeLighting: true,
+                        eyeDomeLightingStrength: 1,
+                        eyeDomeLightingRadius: 1
+                    }
+                },
+                l => {
+                    expect(l.pointCloudShading).toBeTruthy();
+                }
             ]
         ];
         layers.map(([layer, test]) => test(LayersUtils.saveLayer(layer)) );