#9624 Point cloud shading options (#9666)

geosolutions-it · Oct 27, 2023 · b94b6e3 · b94b6e3
1 parent 8fe23e9
commit b94b6e3
Show file tree

Hide file tree

Showing 16 changed files with 679 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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;