@geogirafe/lib-geoportal 1.1.0-dev.2456762594 → 1.1.0-dev.2463680603

package/api/apigeogirafeapp.d.ts

@@ -1,8 +1,9 @@
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
 import IGirafeContext from '../tools/context/icontext.js';
 export default class GeoGirafeApi extends GirafeHTMLElement {
-    protected templateUrl: string;
-    protected styleUrls: string[];
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
     private isInitialized;
     constructor();
     private get config();

package/api/apigeogirafeapp.js

@@ -1,3 +1,4 @@
+import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import proj4 from 'proj4';
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
@@ -10,8 +11,16 @@ import MapCustomContextMenuComponent from '../components/context-menu/custom-con
 import SearchComponent from '../components/search/component.js';
 import SelectionWindowComponent from '../components/selectionwindow/component.js';
 export default class GeoGirafeApi extends GirafeHTMLElement {
-    templateUrl = './template.html';
-    styleUrls = ['../styles/common.css', './style.css'];
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        return uHtml `<style>
+*{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
+</style><style>
+:host{position:relative}girafe-map{width:100%;height:100%;position:relative}girafe-basemap{display:block;position:absolute;bottom:.5rem;left:.5rem}girafe-search{width:50%;height:2.25rem;display:block;position:absolute;top:.5rem;left:.5rem;box-shadow:0 1px 4px #0000004d}girafe-selection-window{z-index:100;width:400px;height:240px;position:absolute;bottom:1rem;right:1rem}
+</style>
+<girafe-map></girafe-map>`;
+    };
     isInitialized = false;
     constructor() {
         super('geogirafe-api');
@@ -277,7 +286,10 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     }
     injectConfigMetaTags() {
         const location = new URL(import.meta.url);
+        // The 2 following lines are a small hack to make the api interface work in both context
+        // (debugging in vite + production app)
         location.pathname = location.pathname.replace('/src/api', '');
+        location.pathname = location.pathname.replace('/node_modules/.vite/deps', '');
         const origin = `${location.origin}${location.pathname.substring(0, location.pathname.lastIndexOf('/'))}`;
         const baseConfigUrl = `${origin}/config.json`;
         const apiConfigUrl = `${origin}/config.api.json`;

package/buildtools/lib-inline.js

@@ -4,7 +4,19 @@ import path from 'path';
 import { findFilesRecursive, inlineTemplate } from './tools.js';
 
 async function main() {
-  const fileList = findFilesRecursive(path.resolve('src', 'components'), ['.ts', '.js']);
+  // Inline template for components
+  let fileList = findFilesRecursive(path.resolve('src', 'components'), ['.ts', '.js']);
+  for (const filepath of fileList) {
+    console.info(`Integrating inline HTML for file ${filepath}`);
+    const newCodeMapObject = await inlineTemplate(filepath);
+    const newFilePath = filepath.replace('src', path.join('dist', 'lib-src-inline'));
+
+    fs.mkdirSync(path.dirname(newFilePath), { recursive: true });
+    fs.writeFileSync(newFilePath, newCodeMapObject.code, 'utf-8');
+  }
+
+  // Inline template for the API
+  fileList = findFilesRecursive(path.resolve('src', 'api'), ['.ts', '.js']);
   for (const filepath of fileList) {
     console.info(`Integrating inline HTML for file ${filepath}`);
     const newCodeMapObject = await inlineTemplate(filepath);

package/buildtools/tools.js

@@ -57,9 +57,12 @@ export function deleteFiles(patterns) {
   }
 }
 
-export function copy(filename, sourceDir, targetDir) {
+export function copy(filename, sourceDir, targetDir, targetFilename = null) {
+  if (targetFilename === null) {
+    targetFilename = filename;
+  }
   const source = path.join(sourceDir, filename);
-  const target = path.join(targetDir, filename);
+  const target = path.join(targetDir, targetFilename);
 
   if (fs.existsSync(source)) {
     // First create destination directory
@@ -111,8 +114,8 @@ async function getHtmlCode(currentFilename, relativeHtmlPath, styleCode) {
       }
     });
     htmlCode = `
-  templateUrl = null;
-  styleUrls = null;
+  protected override templateUrl: string | null = null;
+  protected override styleUrls: string[] | null = null;
   template = () => { return uHtml\`${styleCode}\n${htmlCode}\`; }`;
     return htmlCode;
   } catch (error) {
@@ -167,9 +170,9 @@ function isStringCommented(line) {
 }
 
 // Regex definitions
-export const styleRegex = /(?:override\s+)?styleUrl *= *['"](.*)['"] *;?/g;
-export const stylesRegex = /(?:override\s+)?styleUrls *= *\[([\s\S]*?)\] *;?/gs;
-export const htmlRegex = /(?:override\s+)?templateUrl *= *['"](.*)['"] *;?/g;
+export const styleRegex = /(?:(?:public|private|protected)\s+)?(?:override\s+)?styleUrl *= *['"](.*)['"] *;?/g;
+export const stylesRegex = /(?:(?:public|private|protected)\s+)?(?:override\s+)?styleUrls *= *\[([\s\S]*?)\] *;?/gs;
+export const htmlRegex = /(?:(?:public|private|protected)\s+)?(?:override\s+)?templateUrl *= *['"](.*)['"] *;?/g;
 
 export async function inlineTemplate(filename) {
   // Read the file

package/components/about/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 declare class AboutComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/alignnorthbutton-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class AlignNorthButtonMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/auth/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class OauthComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     userIconUrl?: string;
     constructor(name?: string);

package/components/auth-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import OauthComponent from '../auth/component.js';
 export default class MobileOauthComponent extends OauthComponent {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
 }

package/components/basemap/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import Basemap from '../../models/basemaps/basemap.js';
 declare class BasemapComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     changeBasemap(basemap: Basemap): void;

package/components/contact/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 declare class ContactComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/context-menu/custom-context-menu/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
 declare class MapCustomContextMenuComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     private get map();
     private static contextMenuOverlay;

package/components/context-menu/default-context-menu/component.d.ts

@@ -3,8 +3,8 @@ import { printCoordinate } from '../../../tools/geometrytools.js';
 import { MapContextMenuState } from './contextmenustate.js';
 import MapContextMenuManager from './contextmenumanager.js';
 declare class MapDefaultContextMenuComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     private get map();
     private readonly eventsCallbacks;

package/components/coordinate/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 declare class CoordinateComponent extends GirafeHTMLElement {
     #private;
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     east: string | null;
     north: string | null;

package/components/cross-section/cross-section-settings/component.d.ts

@@ -11,8 +11,8 @@ import { Draw, Modify } from 'ol/interaction.js';
 import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser.js';
 import IGirafePanel from '../../../tools/state/igirafepanel.js';
 declare class CrossSectionSettingsComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     crossSectionState: CrossSectionState;
     private readonly eventsCallbacks;

package/components/cross-section/cross-section-viewer/component.d.ts

@@ -4,8 +4,8 @@ import { CrossSectionState } from './../crosssectionstate.js';
 import { Scatterplot } from '../scatterplot.js';
 import { PytreeManager } from '../pytreemanager.js';
 declare class CrossSectionViewComponent extends GirafeResizableElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     crossSectionState: CrossSectionState;
     private readonly eventsCallbacks;

package/components/displaymenubutton-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class DisplayMenuButtonMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/displayselectorbutton-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class DisplaySelectorButtonMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/drawing/component-mobile.d.ts

@@ -1,7 +1,7 @@
 import DrawingComponent from './component.js';
 export default class DrawingComponentMobile extends DrawingComponent {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/drawing/component.d.ts

@@ -7,8 +7,8 @@ import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
 import LayerDrawing from '../../models/layers/layerdrawing.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 export default class DrawingComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/drawing/fixed-dimension/component.d.ts

@@ -10,8 +10,8 @@ export type DimensionUnit = {
 };
 declare class FixedDimensionComponent extends GirafeHTMLElement {
     static readonly observedAttributes: string[];
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     checkedIcon: string;
     notCheckedIcon: string;

package/components/drawing/olDrawing.d.ts

@@ -33,6 +33,7 @@ export default class OlDrawing {
     lastClosestFeature: Feature | null;
     translate: Translate | null;
     transform: Transform | null;
+    private readonly modifyFeatureChangeListeners;
     defaultStyle: StyleFunction | undefined;
     private readonly updateGeometryInState;
     private get state();
@@ -114,6 +115,12 @@ export default class OlDrawing {
     getStyle(dFeature: DrawingFeature, olFeature: Feature<Geometry>): Style[];
     private removeDrawInteraction;
     private removeModifyInteraction;
+    private getDrawingShapeType;
+    private isSquareOrRectangle;
+    private shouldAllowVertexInsertionAtEvent;
+    private getHoveredModifiableFeatureAtPixel;
+    private applyScaleRotateOnModifyStyle;
+    private clearModifyFeatureChangeListeners;
     private removeSnapInteraction;
     private removeEditContextMenu;
     registerInteractions(): void;

package/components/drawing/olDrawing.js

@@ -10,11 +10,12 @@ import VectorLayer from 'ol/layer/Vector.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import { getPointResolution } from 'ol/proj.js';
 import { always, never, primaryAction } from 'ol/events/condition.js';
-import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle } from '../../tools/utils/olutils.js';
+import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle, unByKeyAll } from '../../tools/utils/olutils.js';
 import { ContextMenu, EntryInteractionType } from '../map/tools/contextmenu.js';
 import { formatCoordinates } from '../../tools/geometrytools.js';
 import { v4 as uuidv4 } from 'uuid';
 import { isAlternateMouseClick, isPrimaryPointerAction } from '../../tools/state/userinteractionevent.js';
+import { calculateCenterAndMinRadius, createScaledAndRotatedGeometry, getGeometryForRendering, shouldAllowVertexInsertionForShape } from './shapeConstraints.js';
 import Transform from 'ol-ext/interaction/Transform.js';
 function getLineStroke(strokeType, lineWidth) {
     switch (strokeType) {
@@ -68,6 +69,7 @@ export default class OlDrawing {
     lastClosestFeature = null;
     translate = null;
     transform = null;
+    modifyFeatureChangeListeners = [];
     defaultStyle;
     updateGeometryInState = (olFeature) => {
         const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
@@ -127,6 +129,7 @@ export default class OlDrawing {
     }
     addModifyInteraction() {
         this.removeModifyInteraction();
+        const vertexStyle = new DrawingFeature(DrawingShape.Point, this.drawingState, this.config.drawing).getVertexStyle(true);
         this.modify = new Modify({
             features: this.modifiableFeatures,
             // Feature editing is triggered by: 1) primary action = click or touch, 2) alternate mouse click = remove vertex
@@ -135,34 +138,64 @@ export default class OlDrawing {
                 isAlternateMouseClick(e)) &&
                 this.canExecute('map.modify'),
             deleteCondition: never,
-            insertVertexCondition: primaryAction,
-            style: new DrawingFeature(DrawingShape.Point, this.drawingState, this.config.drawing).getVertexStyle(true),
+            // For square/rectangle, we disable vertex insertion only on the hovered shape.
+            insertVertexCondition: (e) => primaryAction(e) && this.shouldAllowVertexInsertionAtEvent(e),
+            style: (feature) => {
+                this.applyScaleRotateOnModifyStyle(feature);
+                return vertexStyle;
+            },
             snapToPointer: true,
             pixelTolerance: this.map.pixelTolerance
         });
         this.map.olMap.addInteraction(this.modify);
         this.modify.on('modifystart', (e) => {
+            this.clearModifyFeatureChangeListeners();
             e.features.forEach((olFeature) => {
-                olFeature.on('change', (e) => {
-                    const geometry = e.target.getGeometry();
-                    if (geometry && geometry.getType() == 'Circle') {
-                        const circle = geometry;
-                        const newRadius = circle.getRadius();
-                        const properties = circle.getProperties();
-                        const { pointer } = properties;
-                        const oldRadiusLine = new LineString([circle.getCenter(), pointer]);
-                        oldRadiusLine.scale(newRadius / oldRadiusLine.getLength());
-                        circle.setProperties({
-                            ...properties,
-                            pointer: oldRadiusLine.getLastCoordinate()
-                        });
-                    }
-                });
+                const geometry = olFeature.getGeometry();
+                if (!geometry) {
+                    return;
+                }
+                const shapeType = this.drawingState.features.find((f) => f.id === olFeature.getId())?.type;
+                if (shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle) {
+                    olFeature.set('modifyGeometry', { geometry: geometry.clone() }, true);
+                }
+                else if (shapeType === DrawingShape.Disk) {
+                    const listener = olFeature.on('change', (e) => {
+                        const geometry = e.target.getGeometry();
+                        if (!geometry) {
+                            return;
+                        }
+                        if (geometry.getType() === 'Circle') {
+                            const circle = geometry;
+                            const newRadius = circle.getRadius();
+                            const properties = circle.getProperties();
+                            const { pointer } = properties;
+                            const oldRadiusLine = new LineString([circle.getCenter(), pointer]);
+                            oldRadiusLine.scale(newRadius / oldRadiusLine.getLength());
+                            circle.setProperties({
+                                ...properties,
+                                pointer: oldRadiusLine.getLastCoordinate()
+                            });
+                        }
+                    });
+                    this.modifyFeatureChangeListeners.push(listener);
+                }
             });
         });
         // Update the modified geometries in the state
         this.modify.on('modifyend', (e) => {
-            e.features.forEach((olFeature) => this.updateGeometryInState(olFeature)); //NOSONAR(typescript:S7728) Collection<?> is a custom Implementation with custom forEach
+            this.clearModifyFeatureChangeListeners();
+            e.features.forEach((olFeature) => {
+                const shapeType = this.drawingState.features.find((f) => f.id === olFeature.getId())?.type;
+                if (shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle) {
+                    const modifyGeometry = olFeature.get('modifyGeometry');
+                    if (modifyGeometry?.geometry) {
+                        olFeature.setGeometry(modifyGeometry.geometry);
+                    }
+                    olFeature.unset('modifyGeometry', true);
+                }
+                this.updateGeometryInState(olFeature); //NOSONAR(typescript:S7728) Collection<?> is a custom Implementation with custom forEach
+            });
         });
     }
     addSnapInteraction() {
@@ -302,9 +335,13 @@ export default class OlDrawing {
         }
     }
     prepareMenuEntriesForVertex = (_e, mapCoordinate) => {
-        return this.hasEditableVertexAtCoordinate(mapCoordinate)
-            ? EntryInteractionType.ENABLED
-            : EntryInteractionType.NOT_SHOWN;
+        if (!this.hasEditableVertexAtCoordinate(mapCoordinate)) {
+            return EntryInteractionType.NOT_SHOWN;
+        }
+        if (this.isSquareOrRectangle(this.getDrawingShapeType(this.lastClosestFeature))) {
+            return EntryInteractionType.NOT_SHOWN;
+        }
+        return EntryInteractionType.ENABLED;
     };
     prepareMenuEntriesForShape = (_e, mapCoordinate) => {
         return this.hasEditableShapeAtCoordinate(mapCoordinate)
@@ -621,8 +658,10 @@ export default class OlDrawing {
     }
     // TODO Move as much parameters as possible into DrawingFeature
     getStyle(dFeature, olFeature) {
-        const modifyGeometry = olFeature.get('modifyGeometry');
-        const geometry = modifyGeometry ? modifyGeometry.geometry : olFeature.getGeometry();
+        const geometry = getGeometryForRendering(olFeature);
+        if (!geometry) {
+            return [];
+        }
         const measureFont = 'Bold ' + dFeature.measureFontSize + 'px/1 ' + dFeature.font;
         const nameFont = 'Bold ' + dFeature.nameFontSize + 'px/1 ' + dFeature.font;
         const measureColor = 'rgba(0, 0, 0, 0.4)';
@@ -782,7 +821,7 @@ export default class OlDrawing {
             const vertexStyle = dFeature.getVertexStyle();
             // Add a node style to every vertex of the geometry
             vertexStyle.setGeometry(function (f) {
-                const geom = f?.getGeometry();
+                const geom = getGeometryForRendering(f);
                 if (geom && geom instanceof Geometry) {
                     return extractVerticesFromGeometry(geom);
                 }
@@ -800,11 +839,79 @@ export default class OlDrawing {
         this.context.userInteractionManager.unregisterListener('map.select', this.toolName);
     }
     removeModifyInteraction() {
+        this.clearModifyFeatureChangeListeners();
         if (this.modify) {
             this.map.olMap.removeInteraction(this.modify);
             this.modify = null;
         }
     }
+    getDrawingShapeType(olFeature) {
+        if (!olFeature) {
+            return undefined;
+        }
+        return this.drawingState.features.find((f) => f.id === olFeature.getId())?.type;
+    }
+    isSquareOrRectangle(shapeType) {
+        return shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle;
+    }
+    shouldAllowVertexInsertionAtEvent(e) {
+        const hoveredFeature = this.getHoveredModifiableFeatureAtPixel(e.pixel);
+        return shouldAllowVertexInsertionForShape(this.getDrawingShapeType(hoveredFeature));
+    }
+    getHoveredModifiableFeatureAtPixel(pixel) {
+        const modifiableFeatureSet = new Set(this.modifiableFeatures.getArray());
+        const hoveredFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => {
+            if (!(feature instanceof Feature) || layer !== this.drawingLayer || !modifiableFeatureSet.has(feature)) {
+                return undefined;
+            }
+            return feature;
+        }, {
+            hitTolerance: this.map.pixelTolerance
+        });
+        return hoveredFeature instanceof Feature ? hoveredFeature : null;
+    }
+    applyScaleRotateOnModifyStyle(modifyPointFeature) {
+        const modifyPointGeometry = modifyPointFeature.getGeometry();
+        if (!(modifyPointGeometry instanceof Point)) {
+            return;
+        }
+        const currentPoint = modifyPointGeometry.getCoordinates();
+        const features = modifyPointFeature.get('features');
+        if (!features) {
+            return;
+        }
+        features.forEach((olFeature) => {
+            const shapeType = this.getDrawingShapeType(olFeature);
+            if (!this.isSquareOrRectangle(shapeType)) {
+                return;
+            }
+            const modifyGeometry = olFeature.get('modifyGeometry');
+            if (!modifyGeometry?.geometry) {
+                return;
+            }
+            if (!modifyGeometry.point ||
+                !modifyGeometry.geometry0 ||
+                !modifyGeometry.center ||
+                modifyGeometry.minRadius === undefined) {
+                modifyGeometry.point = [...currentPoint];
+                modifyGeometry.geometry0 = modifyGeometry.geometry;
+                const geometryData = calculateCenterAndMinRadius(modifyGeometry.geometry0);
+                modifyGeometry.center = geometryData.center;
+                modifyGeometry.minRadius = geometryData.minRadius;
+            }
+            if (!modifyGeometry.geometry0 || !modifyGeometry.center || modifyGeometry.minRadius === undefined) {
+                return;
+            }
+            modifyGeometry.geometry = createScaledAndRotatedGeometry(modifyGeometry.geometry0, modifyGeometry.center, modifyGeometry.minRadius, modifyGeometry.point, currentPoint);
+        });
+    }
+    clearModifyFeatureChangeListeners() {
+        if (this.modifyFeatureChangeListeners.length === 0) {
+            return;
+        }
+        unByKeyAll(this.modifyFeatureChangeListeners);
+        this.modifyFeatureChangeListeners.length = 0;
+    }
     removeSnapInteraction() {
         if (this.snap) {
             this.map.olMap.removeInteraction(this.snap);

package/components/drawing/shapeConstraints.d.ts

@@ -0,0 +1,11 @@
+import { Coordinate } from 'ol/coordinate.js';
+import Geometry from 'ol/geom/Geometry.js';
+import Feature from 'ol/Feature.js';
+import { DrawingShape } from './drawingFeature.js';
+export declare function calculateCenterAndMinRadius(geometry: Geometry): {
+    center: Coordinate;
+    minRadius: number;
+};
+export declare function createScaledAndRotatedGeometry(geometry0: Geometry, center: Coordinate, minRadius: number, initialPoint: Coordinate, currentPoint: Coordinate): Geometry;
+export declare function getGeometryForRendering(feature: Feature<Geometry>): Geometry | undefined;
+export declare function shouldAllowVertexInsertionForShape(shapeType: DrawingShape | undefined): boolean;

package/components/drawing/shapeConstraints.js

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: Apache-2.0
+import { getCenter, getHeight, getWidth } from 'ol/extent.js';
+import LineString from 'ol/geom/LineString.js';
+import Polygon from 'ol/geom/Polygon.js';
+import { DrawingShape } from './drawingFeature.js';
+const EPSILON = 1e-12;
+function sqDistance(a, b) {
+    const dx = a[0] - b[0];
+    const dy = a[1] - b[1];
+    return dx * dx + dy * dy;
+}
+export function calculateCenterAndMinRadius(geometry) {
+    let center;
+    let coordinates;
+    if (geometry instanceof Polygon) {
+        const ring = geometry.getCoordinates()[0];
+        const polygonCoords = ring.slice(0, -1);
+        const x = polygonCoords.reduce((sum, c) => sum + c[0], 0);
+        const y = polygonCoords.reduce((sum, c) => sum + c[1], 0);
+        center = [x / polygonCoords.length, y / polygonCoords.length];
+        coordinates = polygonCoords;
+    }
+    else if (geometry instanceof LineString) {
+        center = geometry.getCoordinateAt(0.5);
+        coordinates = geometry.getCoordinates();
+    }
+    else {
+        center = getCenter(geometry.getExtent());
+    }
+    if (coordinates && coordinates.length > 0) {
+        const maxSqDistance = Math.max(...coordinates.map((coordinate) => sqDistance(coordinate, center)));
+        return {
+            center,
+            minRadius: Math.sqrt(maxSqDistance) / 3
+        };
+    }
+    return {
+        center,
+        minRadius: Math.max(getWidth(geometry.getExtent()), getHeight(geometry.getExtent())) / 3
+    };
+}
+export function createScaledAndRotatedGeometry(geometry0, center, minRadius, initialPoint, currentPoint) {
+    const initialRadius = Math.sqrt(sqDistance(initialPoint, center));
+    if (initialRadius <= minRadius) {
+        return geometry0.clone();
+    }
+    const currentRadius = Math.sqrt(sqDistance(currentPoint, center));
+    if (currentRadius <= EPSILON) {
+        return geometry0.clone();
+    }
+    const initialAngle = Math.atan2(initialPoint[1] - center[1], initialPoint[0] - center[0]);
+    const currentAngle = Math.atan2(currentPoint[1] - center[1], currentPoint[0] - center[0]);
+    const geometry = geometry0.clone();
+    geometry.scale(currentRadius / initialRadius, undefined, center);
+    geometry.rotate(currentAngle - initialAngle, center);
+    return geometry;
+}
+export function getGeometryForRendering(feature) {
+    const modifyGeometry = feature.get('modifyGeometry');
+    return modifyGeometry?.geometry ?? feature.getGeometry() ?? undefined;
+}
+export function shouldAllowVertexInsertionForShape(shapeType) {
+    return shapeType !== DrawingShape.Square && shapeType !== DrawingShape.Rectangle;
+}