@geogirafe/lib-geoportal 1.1.0-dev.2576836481 → 1.1.0-dev.2578643340
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/i18n/de.json +7 -0
- package/assets/i18n/en.json +7 -0
- package/assets/i18n/fr.json +7 -0
- package/assets/i18n/it.json +7 -0
- package/components/drawing/component-mobile.js +2 -2
- package/components/drawing/component.d.ts +9 -3
- package/components/drawing/component.js +38 -14
- package/components/map/component.d.ts +1 -0
- package/components/map/component.js +5 -2
- package/package.json +1 -1
- package/templates/public/about.json +1 -1
- package/tools/drawing/drawingFeature.d.ts +5 -4
- package/tools/drawing/drawingFeature.js +12 -12
- package/tools/drawing/olDrawing.js +38 -13
- package/tools/main.d.ts +1 -1
package/assets/i18n/de.json
CHANGED
|
@@ -251,12 +251,19 @@
|
|
|
251
251
|
"map": "Karte",
|
|
252
252
|
"map.geo.admin.ch": "map.geo.admin.ch",
|
|
253
253
|
"Material": "Material",
|
|
254
|
+
"measure-information-full": "Vollständig",
|
|
255
|
+
"measure-information-mixed": "Unterschiedliche",
|
|
256
|
+
"measure-information-mixed-tooltip": "Mehrere Zeichnungen sind ausgewählt. Wenn Sie die angezeigten Informationen ändern, werden diese für ALLE übernommen",
|
|
257
|
+
"measure-information-none": "Keine",
|
|
258
|
+
"measure-information-simple": "Einfach",
|
|
259
|
+
"measure-information-tooltip": "Sie können die Menge der auf der Karte angezeigten Informationen ändern",
|
|
254
260
|
"Measures": "Masse",
|
|
255
261
|
"Medium": "Mittel",
|
|
256
262
|
"Message sent": "Nachricht gesendet",
|
|
257
263
|
"meters": "Meter",
|
|
258
264
|
"Move": "Verschieben",
|
|
259
265
|
"Move Shape": "Zeichnung verschieben",
|
|
266
|
+
"multiple-shapes-selected": "${shape-count} Formen ausgewählt",
|
|
260
267
|
"My Drawing": "Meine Zeichnung",
|
|
261
268
|
"My selection": "Meine Auswahl",
|
|
262
269
|
"Name": "Name",
|
package/assets/i18n/en.json
CHANGED
|
@@ -252,6 +252,12 @@
|
|
|
252
252
|
"map": "Map",
|
|
253
253
|
"map.geo.admin.ch": "map.geo.admin.ch",
|
|
254
254
|
"Material": "Material",
|
|
255
|
+
"measure-information-full": "Full",
|
|
256
|
+
"measure-information-none": "None",
|
|
257
|
+
"measure-information-simple": "Simple",
|
|
258
|
+
"measure-information-mixed": "Mixed",
|
|
259
|
+
"measure-information-tooltip": "You can change the amount of information shown on the map",
|
|
260
|
+
"measure-information-mixed-tooltip": "Multiple Drawings are selected. When you change the shown information it will change for ALL of them",
|
|
255
261
|
"Measures": "Measures",
|
|
256
262
|
"Medium": "Medium",
|
|
257
263
|
"Message sent": "Message sent",
|
|
@@ -260,6 +266,7 @@
|
|
|
260
266
|
"Move Shape": "Move Shape",
|
|
261
267
|
"My Drawing": "My Drawing",
|
|
262
268
|
"My selection": "My selection",
|
|
269
|
+
"multiple-shapes-selected": "${shape-count} Shapes selected",
|
|
263
270
|
"Name": "Name",
|
|
264
271
|
"Navigate to Selection": "Navigate to Selection",
|
|
265
272
|
"negativeInteger": "negative integer",
|
package/assets/i18n/fr.json
CHANGED
|
@@ -251,12 +251,19 @@
|
|
|
251
251
|
"map": "Carte",
|
|
252
252
|
"map.geo.admin.ch": "map.geo.admin.ch",
|
|
253
253
|
"Material": "Matériel",
|
|
254
|
+
"measure-information-full": "Complète",
|
|
255
|
+
"measure-information-mixed": "Mixte",
|
|
256
|
+
"measure-information-mixed-tooltip": "Plusieurs dessins sont sélectionnés. Lorsque vous modifiez les informations affichées, elles seront modifiées pour TOUS",
|
|
257
|
+
"measure-information-none": "Aucune",
|
|
258
|
+
"measure-information-simple": "Simple",
|
|
259
|
+
"measure-information-tooltip": "Vous pouvez modifier la quantité d'informations affichées sur la carte",
|
|
254
260
|
"Measures": "Mesures",
|
|
255
261
|
"Medium": "Moyenne",
|
|
256
262
|
"Message sent": "Message envoyé",
|
|
257
263
|
"meters": "mètres",
|
|
258
264
|
"Move": "Déplacer",
|
|
259
265
|
"Move Shape": "Déplacer la forme",
|
|
266
|
+
"multiple-shapes-selected": "${shape-count} formes sélectionnées",
|
|
260
267
|
"My Drawing": "Mon dessin",
|
|
261
268
|
"My selection": "Ma sélection",
|
|
262
269
|
"Name": "Nom",
|
package/assets/i18n/it.json
CHANGED
|
@@ -251,12 +251,19 @@
|
|
|
251
251
|
"map": "Mappa",
|
|
252
252
|
"map.geo.admin.ch": "map.geo.admin.ch",
|
|
253
253
|
"Material": "Materiale",
|
|
254
|
+
"measure-information-full": "Completa",
|
|
255
|
+
"measure-information-mixed": "Misto",
|
|
256
|
+
"measure-information-mixed-tooltip": "Più disegni sono selezionati. Quando modifichi le informazioni visualizzate, queste cambieranno per TUTTI",
|
|
257
|
+
"measure-information-none": "Nessuna",
|
|
258
|
+
"measure-information-simple": "Semplice",
|
|
259
|
+
"measure-information-tooltip": "È possibile modificare la quantità di informazioni visualizzate sulla mappa",
|
|
254
260
|
"Measures": "Misure",
|
|
255
261
|
"Medium": "Medio",
|
|
256
262
|
"Message sent": "Messaggio inviato",
|
|
257
263
|
"meters": "metri",
|
|
258
264
|
"Move": "Muovi",
|
|
259
265
|
"Move Shape": "Sposta forma",
|
|
266
|
+
"multiple-shapes-selected": "${shape-count} forme selezionate",
|
|
260
267
|
"My Drawing": "Il mio disegno",
|
|
261
268
|
"My selection": "La mia selezione",
|
|
262
269
|
"Name": "Nome",
|
|
@@ -9,12 +9,12 @@ export default class DrawingComponentMobile extends DrawingComponent {
|
|
|
9
9
|
return uHtml `<style>
|
|
10
10
|
*{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}
|
|
11
11
|
</style><style>
|
|
12
|
-
input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var(--bkg-color-input);padding-right:0}input:focus{border:1px solid var(--lt-color-gray-900)}button{border:solid 1px var(--bkg-color);color:var(--text-color);background-color:var(--bkg-color);cursor:pointer;padding:0}button:hover{border:solid 1px var(--text-color-grad2)}button.selected{border:solid 1px var(--text-color-grad2);background-color:var(--bkg-color-grad1);color:var(--bkg-color)}#toolbar{flex-wrap:wrap;display:flex}.label-container{flex-grow:1}.text-end{text-align:end}.icon{width:1.2rem;height:1.2rem;fill:var(--text-color);flex-shrink:0;margin:3px}.icon:hover{fill:var(--text-color-grad2)}.gg-icon-button:hover{border:none}.colorPicker{border:1px solid var(--text-color);border-radius:5px}.picker_wrapper{transform:translate(-250px)}.picker_arrow{transform:translate(200px)rotate(90deg)scaleX(-1)!important}.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}button:disabled,input:disabled,.disabled{pointer-events:none;opacity:.5}fieldset.field-wrapper{border:0;margin:0;padding:0}#panel{height:100%;color:var(--text-color);flex-direction:column;display:flex}#panel>div{padding:1rem}#toolParametersContainer{& .title{margin-top:.5rem;margin-bottom:.75rem;display:inline-block}}.toolParameters{flex-direction:column;justify-content:left;row-gap:.25rem;display:flex}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto;padding-top:0!important;& .titleContainer{margin-bottom:1rem;display:flex;& .title{flex-grow:1;align-items:center;display:flex}}}#drawingList{flex-flow:column;gap:.15rem;display:flex}#drawingList .girafe{border:solid 1px var(--text-color);flex-wrap:wrap;align-items:center;padding:.3rem;display:flex;position:relative}#drawingList .girafe span{flex-grow:1;padding-left:5px}#options{box-shadow:0px -2px 3px -1px var(--text-color-grad1);z-index:100;flex-direction:column;display:flex;position:relative}#optionsTitle{text-align:center;margin-bottom:20px;font-size:1.2rem}#options hr{width:100%;margin:8px 0}#optionsTextLines,#optionsColorLine,#optionsLineLines{align-items:center;display:grid}#optionsText{margin:auto}#optionsTextLines{grid-template-columns
|
|
12
|
+
input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var(--bkg-color-input);padding-right:0}input:focus{border:1px solid var(--lt-color-gray-900)}button{border:solid 1px var(--bkg-color);color:var(--text-color);background-color:var(--bkg-color);cursor:pointer;padding:0}button:hover{border:solid 1px var(--text-color-grad2)}button.selected{border:solid 1px var(--text-color-grad2);background-color:var(--bkg-color-grad1);color:var(--bkg-color)}#toolbar{flex-wrap:wrap;display:flex}.label-container{flex-grow:1}.text-end{text-align:end}.icon{width:1.2rem;height:1.2rem;fill:var(--text-color);flex-shrink:0;margin:3px}.icon:hover{fill:var(--text-color-grad2)}.gg-icon-button:hover{border:none}.colorPicker{border:1px solid var(--text-color);border-radius:5px}.picker_wrapper{transform:translate(-250px)}.picker_arrow{transform:translate(200px)rotate(90deg)scaleX(-1)!important}.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}button:disabled,input:disabled,.disabled{pointer-events:none;opacity:.5}fieldset.field-wrapper{border:0;margin:0;padding:0}#panel{height:100%;color:var(--text-color);flex-direction:column;display:flex}#panel>div{padding:1rem}#toolParametersContainer{& .title{margin-top:.5rem;margin-bottom:.75rem;display:inline-block}}.toolParameters{flex-direction:column;justify-content:left;row-gap:.25rem;display:flex}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto;padding-top:0!important;& .titleContainer{margin-bottom:1rem;display:flex;& .title{flex-grow:1;align-items:center;display:flex}}}#drawingList{flex-flow:column;gap:.15rem;display:flex}#drawingList .girafe{border:solid 1px var(--text-color);flex-wrap:wrap;align-items:center;padding:.3rem;display:flex;position:relative}#drawingList .girafe span{flex-grow:1;padding-left:5px}#options{box-shadow:0px -2px 3px -1px var(--text-color-grad1);z-index:100;flex-direction:column;display:flex;position:relative}#optionsTitle{text-align:center;margin-bottom:20px;font-size:1.2rem}#options hr{width:100%;margin:8px 0}#optionsTextLines,#optionsColorLine,#optionsLineLines{align-items:center;display:grid}#optionsText{margin:auto}#optionsTextLines{grid-template-columns:.825fr 2.5fr 1fr 4em .5fr .5fr}#optionsTextLines button:hover{border:none}#optionsColor,#optionsLine,#optionsExport,#optionsArrow{margin:auto}#optionsColorLine{display:flex}#optionsColorLine>div{align-items:center;width:100%;display:flex}#optionsLineLines,#optionsArrowStyle{grid-template-columns:3fr 4em 1fr auto}#optionsExportLine{grid-template-columns:60px 60px 45px 45px;gap:.2rem;display:flex}span.label{padding-left:.5rem;padding-right:.5rem;&.first{padding-left:0}}span.unit{padding-left:.5rem}
|
|
13
13
|
</style><style>
|
|
14
14
|
button.selected{background-color:#daebff!important;border:1px solid #54a4ff!important}#toolbar{box-sizing:border-box;grid-template-columns:repeat(5,1fr);gap:20px;width:100%;display:grid}#toolbar>button{box-sizing:border-box;filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;padding:10px}#toolbar>button>img{opacity:.7;width:100%}.icon{width:1.5rem;height:1.5rem}.gg-icon-button:hover{background-color:#0000}#panel{font-size:1.5em}#drawingList{gap:10px}#drawingList .girafe{filter:drop-shadow(0 4px 7px #0004381c);background:#fff;border:none;border-radius:8px;padding:10px}#optionsTitle{text-align:center;filter:drop-shadow(0 4px 7px #0004381c);color:#4553ff;border-radius:8px;width:100%;margin-bottom:20px;padding:10px;font-size:1.6rem}.gg-input:hover{filter:drop-shadow(0 4px 7px #4c58ff70);background-color:#fff}#optionsColorLine{flex-direction:column;display:flex}#optionsColorLine>div{text-align:end;width:100%}.selectable-label{font-size:1.3em}#optionsNameFontSize,#optionsMeasuresFontSize,#optionsStrokeWidth,#line-style,#arrow-style,#arrow-position{text-align:right;border:1px solid #e3e3e3;padding:1px;font-size:1em}.popup.popup_top{translate:15px -15px}#optionsExportLine{display:none}
|
|
15
15
|
</style>
|
|
16
16
|
<style>${this.customStyle}</style>
|
|
17
|
-
<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span>pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span i18n="Measures">Measures</span> <
|
|
17
|
+
<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span class="label first" i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span class="label" i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span class="label first" i18n="Measures">Measures</span> <select id="measure-information" class="gg-select" tip="${this.measureInformationTooltip}" onchange="${() => this.onOptionsChange()}">${Object.entries(this.measureInformations).map((entry) => uHtml `<option selected="${this.selectedFeatureMeasureInformation === entry[0]}" value="${entry[0]}"><span i18n="${entry[1]}">${entry[0]}</span></option>`)}</select> <span class="label" i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="measureColorPicker"></button></div></div><hr><div id="optionsColor"><div id="optionsColorLine"><div><span class="text-end" i18n="Stroke color">Stroke color</span> <button class="icon colorPicker" id="strokePicker"></button></div><div><span class="${this.isFillColorEnabled() ? 'text-end' : 'text-end disabled'}" id="fillPickerSpan" i18n="Fill color">Fill color</span> <button class="icon colorPicker" disabled="${!this.isFillColorEnabled()}" id="fillPicker"></button></div></div></div><hr><div id="optionsLine"><div id="optionsLineLines"><span i18n="Line width">Line width</span> <input id="optionsStrokeWidth" type="number" class="gg-input" min="1" value="${this.selectedFeatures[0]?.strokeWidth}" oninput="${() => this.onOptionsChange()}"> <span class="unit">px</span> <select id="line-style" class="gg-select" onchange="${() => this.onOptionsChange()}">${Object.entries(this.lineStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.lineStroke === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsArrow"><div class="${this.isLineStyleEnabled() ? '' : 'disabled'}" id="optionsArrowStyles"><span i18n="Arrows style">Arrows style</span> <select id="arrow-style" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowStyle === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select> <select id="arrow-position" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowPositions).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowPosition === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsExport"><div id="optionsExportLine"><label for="export" class="gg-label" i18n="Export">Export</label> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('geojson')}">GeoJson</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('kml')}">KML</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('gpx')}">GPX</button></div></div></fieldset></div></div>`;
|
|
18
18
|
};
|
|
19
19
|
constructor() {
|
|
20
20
|
super('drawing-mobile');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Color } from 'vanilla-picker';
|
|
2
|
-
import DrawingFeature, { ArrowPosition, ArrowStyle, DrawingShape } from '../../tools/drawing/drawingFeature.js';
|
|
2
|
+
import DrawingFeature, { ArrowPosition, ArrowStyle, DrawingShape, MeasureInformation } from '../../tools/drawing/drawingFeature.js';
|
|
3
3
|
import DrawingState from '../../tools/drawing/drawingState.js';
|
|
4
4
|
import OlDrawing from '../../tools/drawing/olDrawing.js';
|
|
5
5
|
import CesiumDrawing from '../../tools/drawing/cesiumDrawing.js';
|
|
@@ -8,6 +8,7 @@ import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
|
|
|
8
8
|
import LayerDrawing from '../../models/layers/layerdrawing.js';
|
|
9
9
|
import IGirafePanel from '../../tools/state/igirafepanel.js';
|
|
10
10
|
export declare const DrawingStateLocation = "drawing";
|
|
11
|
+
type MeasureInformationForDropown = MeasureInformation & 'mixed';
|
|
11
12
|
export default class DrawingComponent extends GirafeHTMLElement implements IGirafePanel {
|
|
12
13
|
protected templateUrl: string | null;
|
|
13
14
|
protected styleUrls: string[] | null;
|
|
@@ -32,6 +33,12 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
|
|
|
32
33
|
arrowStyles: Record<ArrowStyle, string>;
|
|
33
34
|
arrowPositions: Record<ArrowPosition, string>;
|
|
34
35
|
lineStyles: Record<string, string>;
|
|
36
|
+
measureInformationsSingle: Record<MeasureInformationForDropown, string>;
|
|
37
|
+
measureInformationsMultiple: Record<MeasureInformationForDropown, string>;
|
|
38
|
+
get measureInformations(): {};
|
|
39
|
+
get selectedFeatureMeasureInformation(): MeasureInformation | "mixed";
|
|
40
|
+
get measureInformationTooltip(): "measure-information-tooltip" | "measure-information-mixed-tooltip";
|
|
41
|
+
get haveSameMeasureInformation(): boolean;
|
|
35
42
|
activeDrawingLayer?: LayerDrawing;
|
|
36
43
|
defaultLayerName: string;
|
|
37
44
|
olDrawing: OlDrawing;
|
|
@@ -60,7 +67,6 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
|
|
|
60
67
|
deactivateLayerInTreeAnMap(): void;
|
|
61
68
|
protected getOptionsTitle(): string;
|
|
62
69
|
protected isDisplayNameEnabled(): boolean;
|
|
63
|
-
protected isDisplayMeasureEnabled(): boolean;
|
|
64
70
|
protected isLineStyleEnabled(): boolean;
|
|
65
71
|
protected isFillColorEnabled(): boolean;
|
|
66
72
|
deleteFeature(feature: DrawingFeature): Promise<void>;
|
|
@@ -68,7 +74,7 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
|
|
|
68
74
|
onOptionsChange(): void;
|
|
69
75
|
onArrowsChange(): void;
|
|
70
76
|
toggleNameVisibility(): void;
|
|
71
|
-
toggleMeasureVisibility(): void;
|
|
72
77
|
private warnWhenInWebMercator;
|
|
73
78
|
exportSelectedFeatures(format: 'geojson' | 'kml' | 'gpx'): void;
|
|
74
79
|
}
|
|
80
|
+
export {};
|
|
@@ -33,10 +33,10 @@ export default class DrawingComponent extends GirafeHTMLElement {
|
|
|
33
33
|
return uHtml `<style>
|
|
34
34
|
*{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}
|
|
35
35
|
</style><style>
|
|
36
|
-
input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var(--bkg-color-input);padding-right:0}input:focus{border:1px solid var(--lt-color-gray-900)}button{border:solid 1px var(--bkg-color);color:var(--text-color);background-color:var(--bkg-color);cursor:pointer;padding:0}button:hover{border:solid 1px var(--text-color-grad2)}button.selected{border:solid 1px var(--text-color-grad2);background-color:var(--bkg-color-grad1);color:var(--bkg-color)}#toolbar{flex-wrap:wrap;display:flex}.label-container{flex-grow:1}.text-end{text-align:end}.icon{width:1.2rem;height:1.2rem;fill:var(--text-color);flex-shrink:0;margin:3px}.icon:hover{fill:var(--text-color-grad2)}.gg-icon-button:hover{border:none}.colorPicker{border:1px solid var(--text-color);border-radius:5px}.picker_wrapper{transform:translate(-250px)}.picker_arrow{transform:translate(200px)rotate(90deg)scaleX(-1)!important}.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}button:disabled,input:disabled,.disabled{pointer-events:none;opacity:.5}fieldset.field-wrapper{border:0;margin:0;padding:0}#panel{height:100%;color:var(--text-color);flex-direction:column;display:flex}#panel>div{padding:1rem}#toolParametersContainer{& .title{margin-top:.5rem;margin-bottom:.75rem;display:inline-block}}.toolParameters{flex-direction:column;justify-content:left;row-gap:.25rem;display:flex}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto;padding-top:0!important;& .titleContainer{margin-bottom:1rem;display:flex;& .title{flex-grow:1;align-items:center;display:flex}}}#drawingList{flex-flow:column;gap:.15rem;display:flex}#drawingList .girafe{border:solid 1px var(--text-color);flex-wrap:wrap;align-items:center;padding:.3rem;display:flex;position:relative}#drawingList .girafe span{flex-grow:1;padding-left:5px}#options{box-shadow:0px -2px 3px -1px var(--text-color-grad1);z-index:100;flex-direction:column;display:flex;position:relative}#optionsTitle{text-align:center;margin-bottom:20px;font-size:1.2rem}#options hr{width:100%;margin:8px 0}#optionsTextLines,#optionsColorLine,#optionsLineLines{align-items:center;display:grid}#optionsText{margin:auto}#optionsTextLines{grid-template-columns
|
|
36
|
+
input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var(--bkg-color-input);padding-right:0}input:focus{border:1px solid var(--lt-color-gray-900)}button{border:solid 1px var(--bkg-color);color:var(--text-color);background-color:var(--bkg-color);cursor:pointer;padding:0}button:hover{border:solid 1px var(--text-color-grad2)}button.selected{border:solid 1px var(--text-color-grad2);background-color:var(--bkg-color-grad1);color:var(--bkg-color)}#toolbar{flex-wrap:wrap;display:flex}.label-container{flex-grow:1}.text-end{text-align:end}.icon{width:1.2rem;height:1.2rem;fill:var(--text-color);flex-shrink:0;margin:3px}.icon:hover{fill:var(--text-color-grad2)}.gg-icon-button:hover{border:none}.colorPicker{border:1px solid var(--text-color);border-radius:5px}.picker_wrapper{transform:translate(-250px)}.picker_arrow{transform:translate(200px)rotate(90deg)scaleX(-1)!important}.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}button:disabled,input:disabled,.disabled{pointer-events:none;opacity:.5}fieldset.field-wrapper{border:0;margin:0;padding:0}#panel{height:100%;color:var(--text-color);flex-direction:column;display:flex}#panel>div{padding:1rem}#toolParametersContainer{& .title{margin-top:.5rem;margin-bottom:.75rem;display:inline-block}}.toolParameters{flex-direction:column;justify-content:left;row-gap:.25rem;display:flex}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto;padding-top:0!important;& .titleContainer{margin-bottom:1rem;display:flex;& .title{flex-grow:1;align-items:center;display:flex}}}#drawingList{flex-flow:column;gap:.15rem;display:flex}#drawingList .girafe{border:solid 1px var(--text-color);flex-wrap:wrap;align-items:center;padding:.3rem;display:flex;position:relative}#drawingList .girafe span{flex-grow:1;padding-left:5px}#options{box-shadow:0px -2px 3px -1px var(--text-color-grad1);z-index:100;flex-direction:column;display:flex;position:relative}#optionsTitle{text-align:center;margin-bottom:20px;font-size:1.2rem}#options hr{width:100%;margin:8px 0}#optionsTextLines,#optionsColorLine,#optionsLineLines{align-items:center;display:grid}#optionsText{margin:auto}#optionsTextLines{grid-template-columns:.825fr 2.5fr 1fr 4em .5fr .5fr}#optionsTextLines button:hover{border:none}#optionsColor,#optionsLine,#optionsExport,#optionsArrow{margin:auto}#optionsColorLine{display:flex}#optionsColorLine>div{align-items:center;width:100%;display:flex}#optionsLineLines,#optionsArrowStyle{grid-template-columns:3fr 4em 1fr auto}#optionsExportLine{grid-template-columns:60px 60px 45px 45px;gap:.2rem;display:flex}span.label{padding-left:.5rem;padding-right:.5rem;&.first{padding-left:0}}span.unit{padding-left:.5rem}
|
|
37
37
|
</style>
|
|
38
38
|
<style>${this.customStyle}</style>
|
|
39
|
-
<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span>pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span i18n="Measures">Measures</span> <
|
|
39
|
+
<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span class="label first" i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span class="label" i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span class="label first" i18n="Measures">Measures</span> <select id="measure-information" class="gg-select" tip="${this.measureInformationTooltip}" onchange="${() => this.onOptionsChange()}">${Object.entries(this.measureInformations).map((entry) => uHtml `<option selected="${this.selectedFeatureMeasureInformation === entry[0]}" value="${entry[0]}"><span i18n="${entry[1]}">${entry[0]}</span></option>`)}</select> <span class="label" i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="measureColorPicker"></button></div></div><hr><div id="optionsColor"><div id="optionsColorLine"><div><span class="text-end" i18n="Stroke color">Stroke color</span> <button class="icon colorPicker" id="strokePicker"></button></div><div><span class="${this.isFillColorEnabled() ? 'text-end' : 'text-end disabled'}" id="fillPickerSpan" i18n="Fill color">Fill color</span> <button class="icon colorPicker" disabled="${!this.isFillColorEnabled()}" id="fillPicker"></button></div></div></div><hr><div id="optionsLine"><div id="optionsLineLines"><span i18n="Line width">Line width</span> <input id="optionsStrokeWidth" type="number" class="gg-input" min="1" value="${this.selectedFeatures[0]?.strokeWidth}" oninput="${() => this.onOptionsChange()}"> <span class="unit">px</span> <select id="line-style" class="gg-select" onchange="${() => this.onOptionsChange()}">${Object.entries(this.lineStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.lineStroke === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsArrow"><div class="${this.isLineStyleEnabled() ? '' : 'disabled'}" id="optionsArrowStyles"><span i18n="Arrows style">Arrows style</span> <select id="arrow-style" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowStyle === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select> <select id="arrow-position" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowPositions).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowPosition === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsExport"><div id="optionsExportLine"><label for="export" class="gg-label" i18n="Export">Export</label> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('geojson')}">GeoJson</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('kml')}">KML</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('gpx')}">GPX</button></div></div></fieldset></div></div>`;
|
|
40
40
|
};
|
|
41
41
|
isPanelVisible = false;
|
|
42
42
|
panelTitle = 'drawing-panel';
|
|
@@ -78,6 +78,34 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
|
|
|
78
78
|
dash: '━ ━ ━',
|
|
79
79
|
dot: '• • • • • •'
|
|
80
80
|
};
|
|
81
|
+
measureInformationsSingle = {
|
|
82
|
+
none: 'measure-information-none',
|
|
83
|
+
simple: 'measure-information-simple',
|
|
84
|
+
full: 'measure-information-full'
|
|
85
|
+
};
|
|
86
|
+
measureInformationsMultiple = {
|
|
87
|
+
...this.measureInformationsSingle,
|
|
88
|
+
mixed: 'measure-information-mixed'
|
|
89
|
+
};
|
|
90
|
+
get measureInformations() {
|
|
91
|
+
if (this.selectedFeatures.length == 0)
|
|
92
|
+
return {};
|
|
93
|
+
return this.haveSameMeasureInformation ? this.measureInformationsSingle : this.measureInformationsMultiple;
|
|
94
|
+
}
|
|
95
|
+
get selectedFeatureMeasureInformation() {
|
|
96
|
+
return this.haveSameMeasureInformation ? this.selectedFeatures[0].measureInformation : 'mixed';
|
|
97
|
+
}
|
|
98
|
+
get measureInformationTooltip() {
|
|
99
|
+
return this.selectedFeatures.length == 1 ? 'measure-information-tooltip' : 'measure-information-mixed-tooltip';
|
|
100
|
+
}
|
|
101
|
+
get haveSameMeasureInformation() {
|
|
102
|
+
return this.selectedFeatures.every((feature, index, features) => {
|
|
103
|
+
if (index === 0) {
|
|
104
|
+
return true;
|
|
105
|
+
}
|
|
106
|
+
return feature.measureInformation === features[0].measureInformation;
|
|
107
|
+
});
|
|
108
|
+
}
|
|
81
109
|
activeDrawingLayer;
|
|
82
110
|
defaultLayerName = 'My Drawing';
|
|
83
111
|
olDrawing;
|
|
@@ -330,15 +358,14 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
|
|
|
330
358
|
return this.selectedFeatures[0]?.name || '';
|
|
331
359
|
}
|
|
332
360
|
else {
|
|
333
|
-
return
|
|
361
|
+
return this.context.i18nManager
|
|
362
|
+
.getTranslation('multiple-shapes-selected')
|
|
363
|
+
.replace('${shape-count}', this.selectedFeatures.length.toString());
|
|
334
364
|
}
|
|
335
365
|
}
|
|
336
366
|
isDisplayNameEnabled() {
|
|
337
367
|
return this.selectedFeatures.some((f) => f.displayName);
|
|
338
368
|
}
|
|
339
|
-
isDisplayMeasureEnabled() {
|
|
340
|
-
return this.selectedFeatures.some((f) => f.displayMeasure);
|
|
341
|
-
}
|
|
342
369
|
isLineStyleEnabled() {
|
|
343
370
|
return this.selectedFeatures.some((f) => f.type == DrawingShape.Polyline || f.type == DrawingShape.FreehandPolyline);
|
|
344
371
|
}
|
|
@@ -369,10 +396,15 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
|
|
|
369
396
|
const measureFontSize = parseInt(this.getById('optionsMeasuresFontSize').value);
|
|
370
397
|
const strokeWidth = parseInt(this.getById('optionsStrokeWidth').value);
|
|
371
398
|
const lineStroke = this.getById('line-style').value;
|
|
399
|
+
const measureInformation = this.getById('measure-information').value;
|
|
372
400
|
this.selectedFeatures.forEach((f) => (f.nameFontSize = nameFontSize));
|
|
373
401
|
this.selectedFeatures.forEach((f) => (f.measureFontSize = measureFontSize));
|
|
374
402
|
this.selectedFeatures.forEach((f) => (f.strokeWidth = strokeWidth));
|
|
375
403
|
this.selectedFeatures.forEach((f) => (f.lineStroke = lineStroke));
|
|
404
|
+
if (measureInformation !== 'mixed') {
|
|
405
|
+
this.selectedFeatures.forEach((f) => (f.measureInformation = measureInformation));
|
|
406
|
+
}
|
|
407
|
+
this.refreshRender();
|
|
376
408
|
}
|
|
377
409
|
onArrowsChange() {
|
|
378
410
|
const arrowStyle = this.getById('arrow-style').value;
|
|
@@ -385,11 +417,6 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
|
|
|
385
417
|
this.selectedFeatures.forEach((f) => (f.displayName = !currentVisibility));
|
|
386
418
|
this.refreshRender();
|
|
387
419
|
}
|
|
388
|
-
toggleMeasureVisibility() {
|
|
389
|
-
const currentVisibility = this.selectedFeatures.some((f) => f.displayMeasure);
|
|
390
|
-
this.selectedFeatures.forEach((f) => (f.displayMeasure = !currentVisibility));
|
|
391
|
-
this.refreshRender();
|
|
392
|
-
}
|
|
393
420
|
warnWhenInWebMercator(projection = this.state.projection) {
|
|
394
421
|
if (this.isPanelVisible && projection === 'EPSG:3857') {
|
|
395
422
|
const errorMessage = 'Web Mercator projection distorts distances and areas';
|
|
@@ -440,9 +467,6 @@ __decorate([
|
|
|
440
467
|
__decorate([
|
|
441
468
|
UsedInTemplateOnly()
|
|
442
469
|
], DrawingComponent.prototype, "isDisplayNameEnabled", null);
|
|
443
|
-
__decorate([
|
|
444
|
-
UsedInTemplateOnly()
|
|
445
|
-
], DrawingComponent.prototype, "isDisplayMeasureEnabled", null);
|
|
446
470
|
__decorate([
|
|
447
471
|
UsedInTemplateOnly()
|
|
448
472
|
], DrawingComponent.prototype, "isLineStyleEnabled", null);
|
|
@@ -57,6 +57,7 @@ export default class MapComponent extends GirafeHTMLElement {
|
|
|
57
57
|
private readonly markerLayer;
|
|
58
58
|
get projection(): import("ol/proj.js").Projection;
|
|
59
59
|
get config(): import("../../tools/main.js").GirafeConfig;
|
|
60
|
+
get onMobile(): boolean;
|
|
60
61
|
/**
|
|
61
62
|
*
|
|
62
63
|
* @param path Overridden to make those methods public for this component
|
|
@@ -50,10 +50,10 @@ export default class MapComponent extends GirafeHTMLElement {
|
|
|
50
50
|
return uHtml `<style>
|
|
51
51
|
*{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}
|
|
52
52
|
</style><style>
|
|
53
|
-
#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
|
|
53
|
+
#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.mobile-map .ol-zoom{display:none!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
|
|
54
54
|
</style>
|
|
55
55
|
<style>${this.customStyle}</style>
|
|
56
|
-
<link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
|
|
56
|
+
<link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
|
|
57
57
|
};
|
|
58
58
|
olMap;
|
|
59
59
|
mapTarget;
|
|
@@ -88,6 +88,9 @@ export default class MapComponent extends GirafeHTMLElement {
|
|
|
88
88
|
get config() {
|
|
89
89
|
return this.context.configManager.Config;
|
|
90
90
|
}
|
|
91
|
+
get onMobile() {
|
|
92
|
+
return this.state.interface.isMobile;
|
|
93
|
+
}
|
|
91
94
|
subscribe(path, callback) {
|
|
92
95
|
// @ts-expect-error The call would have succeeded against this implementation,
|
|
93
96
|
// but implementation signatures of overloads are not externally visible.
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"1.1.0-dev.
|
|
1
|
+
{"version":"1.1.0-dev.2578643340", "build":"2578643340", "date":"05/06/2026"}
|
|
@@ -16,6 +16,7 @@ export declare enum DrawingShape {
|
|
|
16
16
|
export type ArrowStyle = 'none' | 'start' | 'end' | 'both';
|
|
17
17
|
export type ArrowPosition = 'whole' | 'each' | 'mid';
|
|
18
18
|
export type LineStroke = 'full' | 'dash' | 'dot' | 'double';
|
|
19
|
+
export type MeasureInformation = 'none' | 'simple' | 'full';
|
|
19
20
|
export type SerializedFeature = {
|
|
20
21
|
n: string;
|
|
21
22
|
sc: string;
|
|
@@ -29,7 +30,7 @@ export type SerializedFeature = {
|
|
|
29
30
|
f: string;
|
|
30
31
|
g: object;
|
|
31
32
|
dn: boolean;
|
|
32
|
-
|
|
33
|
+
mi: string;
|
|
33
34
|
nc: string;
|
|
34
35
|
mc: string;
|
|
35
36
|
s: boolean;
|
|
@@ -45,12 +46,12 @@ export default class DrawingFeature {
|
|
|
45
46
|
private _lineStroke;
|
|
46
47
|
private _arrowStyle;
|
|
47
48
|
private _arrowPosition;
|
|
49
|
+
private _measureInformation;
|
|
48
50
|
private _nameFontSize;
|
|
49
51
|
private _measureFontSize;
|
|
50
52
|
private _measureColor;
|
|
51
53
|
private _font;
|
|
52
54
|
private _displayName;
|
|
53
|
-
private _displayMeasure;
|
|
54
55
|
private _selected;
|
|
55
56
|
geojson: object;
|
|
56
57
|
id: string;
|
|
@@ -80,8 +81,8 @@ export default class DrawingFeature {
|
|
|
80
81
|
set font(v: string);
|
|
81
82
|
get displayName(): boolean;
|
|
82
83
|
set displayName(v: boolean);
|
|
83
|
-
get
|
|
84
|
-
set
|
|
84
|
+
get measureInformation(): MeasureInformation;
|
|
85
|
+
set measureInformation(v: MeasureInformation);
|
|
85
86
|
get nameColor(): string;
|
|
86
87
|
set nameColor(v: string);
|
|
87
88
|
get measureColor(): string;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { v4 as uuidv4 } from 'uuid';
|
|
3
3
|
import { Fill, RegularShape, Stroke, Style } from 'ol/style.js';
|
|
4
4
|
import { toRadians } from 'ol/math.js';
|
|
5
|
-
import GeoJSON from 'ol/format/GeoJSON.js';
|
|
6
5
|
import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../utils/olutils.js';
|
|
6
|
+
import { GeoJSON } from 'ol/format.js';
|
|
7
7
|
export var DrawingShape;
|
|
8
8
|
(function (DrawingShape) {
|
|
9
9
|
DrawingShape[DrawingShape["Point"] = 0] = "Point";
|
|
@@ -25,12 +25,12 @@ export default class DrawingFeature {
|
|
|
25
25
|
_lineStroke = 'full';
|
|
26
26
|
_arrowStyle = 'none';
|
|
27
27
|
_arrowPosition = 'whole';
|
|
28
|
+
_measureInformation = 'simple';
|
|
28
29
|
_nameFontSize;
|
|
29
30
|
_measureFontSize;
|
|
30
31
|
_measureColor;
|
|
31
32
|
_font;
|
|
32
33
|
_displayName = true;
|
|
33
|
-
_displayMeasure = true;
|
|
34
34
|
_selected = false;
|
|
35
35
|
geojson = {};
|
|
36
36
|
id = uuidv4();
|
|
@@ -128,11 +128,11 @@ export default class DrawingFeature {
|
|
|
128
128
|
this._displayName = v;
|
|
129
129
|
this.onChange(this);
|
|
130
130
|
}
|
|
131
|
-
get
|
|
132
|
-
return this.
|
|
131
|
+
get measureInformation() {
|
|
132
|
+
return this._measureInformation;
|
|
133
133
|
}
|
|
134
|
-
set
|
|
135
|
-
this.
|
|
134
|
+
set measureInformation(v) {
|
|
135
|
+
this._measureInformation = v;
|
|
136
136
|
this.onChange(this);
|
|
137
137
|
}
|
|
138
138
|
get nameColor() {
|
|
@@ -177,20 +177,20 @@ export default class DrawingFeature {
|
|
|
177
177
|
g: this.geojson,
|
|
178
178
|
t: this._tool,
|
|
179
179
|
dn: this._displayName,
|
|
180
|
-
|
|
180
|
+
mi: this._measureInformation,
|
|
181
181
|
nc: this._nameColor,
|
|
182
182
|
mc: this._measureColor,
|
|
183
183
|
s: this._selected
|
|
184
184
|
};
|
|
185
185
|
}
|
|
186
186
|
getLengthText(length) {
|
|
187
|
-
return getLengthAsMetricText(this.
|
|
187
|
+
return getLengthAsMetricText(this.measureInformation === 'none' ? undefined : length);
|
|
188
188
|
}
|
|
189
189
|
getAreaText(area) {
|
|
190
|
-
return getAreaAsMetricText(this.
|
|
190
|
+
return getAreaAsMetricText(this.measureInformation === 'none' ? undefined : area);
|
|
191
191
|
}
|
|
192
192
|
getCoordText(coord) {
|
|
193
|
-
if (
|
|
193
|
+
if (this.measureInformation === 'none') {
|
|
194
194
|
return '';
|
|
195
195
|
}
|
|
196
196
|
if (coord.length > 2) {
|
|
@@ -199,7 +199,7 @@ export default class DrawingFeature {
|
|
|
199
199
|
return 'E ' + coord[0].toFixed(2) + '\nN ' + coord[1].toFixed(2);
|
|
200
200
|
}
|
|
201
201
|
getAzimuthText(circle) {
|
|
202
|
-
return getAzimuthAsText(this.
|
|
202
|
+
return getAzimuthAsText(this.measureInformation === 'none' ? undefined : (circle.getProperties()['azimuth'] ?? undefined));
|
|
203
203
|
}
|
|
204
204
|
isPointOrPolyline() {
|
|
205
205
|
return (this.type === DrawingShape.Point ||
|
|
@@ -240,7 +240,7 @@ export default class DrawingFeature {
|
|
|
240
240
|
newFeature.measureFontSize = serializedFeature.mfz;
|
|
241
241
|
newFeature.font = serializedFeature.f;
|
|
242
242
|
newFeature.displayName = serializedFeature.dn;
|
|
243
|
-
newFeature.
|
|
243
|
+
newFeature.measureInformation = serializedFeature.mi;
|
|
244
244
|
newFeature.nameColor = serializedFeature.nc;
|
|
245
245
|
newFeature.measureColor = serializedFeature.mc;
|
|
246
246
|
newFeature.selected = serializedFeature.s;
|
|
@@ -10,7 +10,7 @@ import VectorLayer from 'ol/layer/Vector.js';
|
|
|
10
10
|
import GeoJSON from 'ol/format/GeoJSON.js';
|
|
11
11
|
import { getPointResolution } from 'ol/proj.js';
|
|
12
12
|
import { always, never, primaryAction } from 'ol/events/condition.js';
|
|
13
|
-
import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle, unByKeyAll } from '../utils/olutils.js';
|
|
13
|
+
import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getLengthAsMetricText, getRadiusDataForCircle, unByKeyAll } from '../utils/olutils.js';
|
|
14
14
|
import { ContextMenu, EntryInteractionType } from '../../components/map/tools/contextmenu.js';
|
|
15
15
|
import { formatCoordinates } from '../geometrytools.js';
|
|
16
16
|
import { v4 as uuidv4 } from 'uuid';
|
|
@@ -683,8 +683,8 @@ export default class OlDrawing {
|
|
|
683
683
|
text: new Text({
|
|
684
684
|
text: dFeature.displayName ? dFeature.name : '',
|
|
685
685
|
font: nameFont,
|
|
686
|
-
textBaseline: '
|
|
687
|
-
offsetY: dFeature.type == DrawingShape.Point ? 2 * dFeature.nameFontSize : 1.2 * dFeature.nameFontSize
|
|
686
|
+
textBaseline: 'middle',
|
|
687
|
+
/*offsetY: dFeature.type == DrawingShape.Point ? 2 * dFeature.nameFontSize : 1.2 * dFeature.nameFontSize,*/
|
|
688
688
|
fill: new Fill({ color: dFeature.nameColor }),
|
|
689
689
|
overflow: true
|
|
690
690
|
})
|
|
@@ -712,6 +712,14 @@ export default class OlDrawing {
|
|
|
712
712
|
styles.push(labelStyleToAdd);
|
|
713
713
|
}
|
|
714
714
|
};
|
|
715
|
+
const appendText = (text) => {
|
|
716
|
+
const textStyle = defaultStyle.getText();
|
|
717
|
+
let existingText = textStyle.getText() ?? '';
|
|
718
|
+
if (existingText.trim().length > 0) {
|
|
719
|
+
existingText += '\n';
|
|
720
|
+
}
|
|
721
|
+
textStyle.setText(existingText + text);
|
|
722
|
+
};
|
|
715
723
|
// If the shape is being constructed (ex. it is a polygon for which only two points are placed yet)
|
|
716
724
|
if (geometry.getType() == 'LineString') {
|
|
717
725
|
if (dFeature.type !== DrawingShape.Polyline && dFeature.type !== DrawingShape.FreehandPolyline) {
|
|
@@ -777,21 +785,34 @@ export default class OlDrawing {
|
|
|
777
785
|
addLabel(geometry, dFeature.getCoordText(geometry.getCoordinates()));
|
|
778
786
|
}
|
|
779
787
|
else if (dFeature.type == DrawingShape.Polyline) {
|
|
780
|
-
|
|
788
|
+
const lineString = geometry;
|
|
789
|
+
if (dFeature.measureInformation === 'full') {
|
|
790
|
+
lineString.forEachSegment((a, b) => addLabel(getHalfPoint([a, b]), dFeature.getLengthText(getDistance([a, b], this.state.projection))));
|
|
791
|
+
}
|
|
792
|
+
if (dFeature.measureInformation === 'simple' || dFeature.measureInformation === 'full') {
|
|
793
|
+
appendText(getLengthAsMetricText(lineString.getLength()));
|
|
794
|
+
}
|
|
781
795
|
}
|
|
782
796
|
else if (dFeature.type == DrawingShape.Polygon) {
|
|
783
797
|
const polygon = geometry;
|
|
784
798
|
const segments = ensurePolygonIsProperlyClosed(polygon);
|
|
785
|
-
new LineString(segments)
|
|
786
|
-
|
|
799
|
+
const lineString = new LineString(segments);
|
|
800
|
+
if (dFeature.measureInformation === 'full') {
|
|
801
|
+
lineString.forEachSegment((a, b) => addLabel(getHalfPoint([a, b]), dFeature.getLengthText(getDistance([a, b], this.state.projection))));
|
|
802
|
+
}
|
|
803
|
+
if (dFeature.measureInformation === 'simple' || dFeature.measureInformation === 'full') {
|
|
804
|
+
appendText(dFeature.getAreaText(getAreaOfPolygon(polygon, this.state.projection)));
|
|
805
|
+
appendText(getLengthAsMetricText(lineString.getLength()));
|
|
806
|
+
}
|
|
787
807
|
}
|
|
788
808
|
else if (dFeature.type == DrawingShape.Disk) {
|
|
789
|
-
if (dFeature.
|
|
790
|
-
const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width:
|
|
809
|
+
if (dFeature.measureInformation !== 'none') {
|
|
810
|
+
const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
|
|
791
811
|
styles.push(radiusDataForCircle.style);
|
|
792
812
|
const lengthText = dFeature.getLengthText(radiusDataForCircle.radius);
|
|
793
813
|
const azimuthText = dFeature.getAzimuthText(geometry);
|
|
794
|
-
|
|
814
|
+
const textTemplate = dFeature.measureInformation === 'simple' ? lengthText : lengthText + ', ' + azimuthText;
|
|
815
|
+
addLabel(getHalfPoint(radiusDataForCircle.radiusLine), textTemplate);
|
|
795
816
|
}
|
|
796
817
|
}
|
|
797
818
|
else if (dFeature.type == DrawingShape.FreehandPolygon) {
|
|
@@ -808,14 +829,18 @@ export default class OlDrawing {
|
|
|
808
829
|
const rect = geometry;
|
|
809
830
|
const segment1 = [rect.getCoordinates()[0][0], rect.getCoordinates()[0][1]];
|
|
810
831
|
const segment2 = [rect.getCoordinates()[0][1], rect.getCoordinates()[0][2]];
|
|
811
|
-
|
|
812
|
-
|
|
832
|
+
if (dFeature.measureInformation === 'full') {
|
|
833
|
+
addLabel(getHalfPoint(segment1), dFeature.getLengthText(getDistance(segment1, this.state.projection)));
|
|
834
|
+
addLabel(getHalfPoint(segment2), dFeature.getLengthText(getDistance(segment2, this.state.projection)));
|
|
835
|
+
}
|
|
813
836
|
addLabel(rect.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(rect, this.state.projection)));
|
|
814
837
|
}
|
|
815
838
|
else if (dFeature.type == DrawingShape.Square) {
|
|
816
839
|
const square = geometry;
|
|
817
|
-
|
|
818
|
-
|
|
840
|
+
if (dFeature.measureInformation === 'full') {
|
|
841
|
+
const segment = [square.getCoordinates()[0][0], square.getCoordinates()[0][1]];
|
|
842
|
+
addLabel(getHalfPoint(segment), dFeature.getLengthText(getDistance(segment, this.state.projection)));
|
|
843
|
+
}
|
|
819
844
|
addLabel(square.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(square, this.state.projection)));
|
|
820
845
|
}
|
|
821
846
|
if (dFeature.selected && this.transform == null) {
|
package/tools/main.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export { default as GirafeConfig } from './configuration/girafeconfig.js';
|
|
|
13
13
|
export { default as GirafeContext } from './context/context.js';
|
|
14
14
|
export type { default as IGirafeContext } from './context/icontext.js';
|
|
15
15
|
export { default as CesiumDrawing } from './drawing/cesiumDrawing.js';
|
|
16
|
-
export type { DrawingShape, ArrowStyle, ArrowPosition, LineStroke, SerializedFeature } from './drawing/drawingFeature.js';
|
|
16
|
+
export type { DrawingShape, ArrowStyle, ArrowPosition, LineStroke, MeasureInformation, SerializedFeature } from './drawing/drawingFeature.js';
|
|
17
17
|
export { default as DrawingFeature } from './drawing/drawingFeature.js';
|
|
18
18
|
export { default as DrawingSerializer } from './drawing/drawingSerializer.js';
|
|
19
19
|
export { default as DrawingState } from './drawing/drawingState.js';
|