HTM-1704 | HTM-1705: Add styling to 3D Tiles layers (#1036)

* save object in layer settings instead of file in uploads

* format style field

* use type for style

* check if inserted style is correct

* improve typing in form field for tileset style

* Add translations

* Move isTileset3dStyle to helper class

* Add link to 3D Tiles Styling Language documentation

* Fix duplicate i18n identifier

* Do not use incorrect null check

* move 3D tileset style model

* remove incorrect export

* fix incorrect import

* fix incorrect import

Author: steinkobben

projects/admin-api/src/lib/models/app-layer-settings.model.ts

@@ -1,4 +1,4 @@
-import { HiddenLayerFunctionality } from '@tailormap-viewer/api';
+import { HiddenLayerFunctionality, Tileset3dStyle } from '@tailormap-viewer/api';
 
 export interface AppLayerSettingsModel {
   title?: string;
@@ -11,5 +11,6 @@ export interface AppLayerSettingsModel {
   hideAttributes?: string[] | null;
   readOnlyAttributes?: string[] | null;
   autoRefreshInSeconds?: number | null;
+  tileset3dStyle?: Tileset3dStyle | null;
   hiddenFunctionality?: HiddenLayerFunctionality[] | null;
 }

projects/admin-core/assets/locale/messages.admin-core.de.xlf

@@ -174,10 +174,14 @@
         <source>Edit <x id="INTERPOLATION" equiv-text="{{ application.title }}"/></source>
         <target>Bearbeiten von<x id="INTERPOLATION" equiv-text="{{ application.title }}"/></target>
       </trans-unit>
-      <trans-unit id="admin-core.application.edit-application-layer-attributes" datatype="html">
+      <trans-unit id="admin-core.application.edit-application-layer-attribute-settings" datatype="html">
         <source>Edit application layer attribute settings</source>
         <target>Einstellungen für Anwendungsebenenattribute bearbeiten</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.edit-application-layer-attributes" datatype="html">
+        <source>Edit application layer attributes</source>
+        <target>Anwendungsebenenattribute bearbeiten</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.edit-application-layer-attributes-hint1" datatype="html">
         <source>This only shows the attributes that are enabled in the catalog. If an attribute is missing, check the catalog settings.</source>
         <target>Hier werden nur die Attribute angezeigt, die im Katalog aktiviert sind. Wenn ein Attribut fehlt, überprüfen Sie die Katalogeinstellungen.</target>
@@ -454,10 +458,18 @@
         <source>Initial extent</source>
         <target>Anfangsausdehnung</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.invalid-json" datatype="html">
+        <source>Invalid JSON: </source>
+        <target>Ongeldige JSON: </target>
+      </trans-unit>
       <trans-unit id="admin-core.application.invalid-name-error" datatype="html">
         <source>Name can only contain letters, numbers, underscores and dashes.</source>
         <target>Der Name darf nur Buchstaben, Zahlen, Unterstriche und Bindestriche enthalten.</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.invalid-tileset-style" datatype="html">
+        <source>The style does not conform to the 3D Tileset Styling Language structure</source>
+        <target>Der Stil entspricht nicht der Struktur der 3D Tileset Styling Language</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.layer-not-editable" datatype="html">
         <source>This layer cannot be edited because there is no writeable feature source / type configured for this layer</source>
         <target>Diese Ebene kann nicht bearbeitet werden, da keine beschreibbare Feature-Quelle / -Typ für diese Ebene konfiguriert ist</target>
@@ -590,6 +602,10 @@
         <source>Setting this application as default will overwrite the current default application</source>
         <target>Das Festlegen dieser Anwendung als Standard überschreibt die aktuelle Standardanwendung</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.set-tileset-style" datatype="html">
+        <source>Set a style for the 3D Tileset</source>
+        <target>Stil für das 3D Tileset festlege</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.settings" datatype="html">
         <source>Settings</source>
         <target>Einstellungen</target>
@@ -606,6 +622,14 @@
         <source>Terrain layers</source>
         <target>Geländeebene</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.tileset-style" datatype="html">
+        <source>Tileset style</source>
+        <target>Kachelstil</target>
+      </trans-unit>
+      <trans-unit id="admin-core.application.tileset-style-hint" datatype="html">
+        <source>Fill in a tileset style in json format according to the <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;https://docs.ogc.org/cs/22-025r4/22-025r4.html#toc45&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;"/>OGC 3D Tiles Styling Language<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>. Note: The structure of the style is validated, but not the style expressions.</source>
+        <target>Geben Sie einen Kachelstil im JSON-Format gemäß der <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;https://docs.ogc.org/cs/22-025r4/22-025r4.html#toc45&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;"/>OGC 3D Tiles Styling Language<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> ein. Hinweis: Die Struktur des Stils wird validiert, nicht jedoch die Stil-Ausdrücke.</target>
+      </trans-unit>
       <trans-unit id="admin-core.authorizations.access" datatype="html">
         <source>Access</source>
         <target>Zugriff</target>

projects/admin-core/assets/locale/messages.admin-core.en.xlf

@@ -131,6 +131,9 @@
       <trans-unit id="admin-core.application.edit" datatype="html">
         <source>Edit <x id="INTERPOLATION" equiv-text="{{ application.title }}"/></source>
       </trans-unit>
+      <trans-unit id="admin-core.application.edit-application-layer-attribute-settings" datatype="html">
+        <source>Edit application layer attribute settings</source>
+      </trans-unit>
       <trans-unit id="admin-core.application.edit-application-layer-attributes" datatype="html">
         <source>Edit application layer attributes</source>
       </trans-unit>
@@ -341,9 +344,15 @@
       <trans-unit id="admin-core.application.initial-extent" datatype="html">
         <source>Initial extent</source>
       </trans-unit>
+      <trans-unit id="admin-core.application.invalid-json" datatype="html">
+        <source>Invalid JSON: </source>
+      </trans-unit>
       <trans-unit id="admin-core.application.invalid-name-error" datatype="html">
         <source>Name can only contain letters, numbers, underscores and dashes.</source>
       </trans-unit>
+      <trans-unit id="admin-core.application.invalid-tileset-style" datatype="html">
+        <source>The style does not conform to the 3D Tileset Styling Language structure</source>
+      </trans-unit>
       <trans-unit id="admin-core.application.layer-not-editable" datatype="html">
         <source>This layer cannot be edited because there is no writeable feature source / type configured for this layer</source>
       </trans-unit>
@@ -443,6 +452,9 @@
       <trans-unit id="admin-core.application.set-default-application-hint" datatype="html">
         <source>Setting this application as default will overwrite the current default application</source>
       </trans-unit>
+      <trans-unit id="admin-core.application.set-tileset-style" datatype="html">
+        <source>Set a style for the 3D Tileset</source>
+      </trans-unit>
       <trans-unit id="admin-core.application.settings" datatype="html">
         <source>Settings</source>
       </trans-unit>
@@ -455,6 +467,12 @@
       <trans-unit id="admin-core.application.terrain-layers" datatype="html">
         <source>Terrain layers</source>
       </trans-unit>
+      <trans-unit id="admin-core.application.tileset-style" datatype="html">
+        <source>Tileset style</source>
+      </trans-unit>
+      <trans-unit id="admin-core.application.tileset-style-hint" datatype="html">
+        <source>Fill in a tileset style in json format according to the <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;https://docs.ogc.org/cs/22-025r4/22-025r4.html#toc45&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;"/>OGC 3D Tiles Styling Language<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>. Note: The structure of the style is validated, but not the style expressions.</source>
+      </trans-unit>
       <trans-unit id="admin-core.authorizations.access" datatype="html">
         <source>Access</source>
       </trans-unit>

projects/admin-core/assets/locale/messages.admin-core.nl.xlf

@@ -174,9 +174,13 @@
         <source>Edit <x id="INTERPOLATION" equiv-text="{{ application.title }}"/></source>
         <target>Bewerken van <x id="INTERPOLATION" equiv-text="{{ application.title }}"/></target>
       </trans-unit>
-      <trans-unit id="admin-core.application.edit-application-layer-attributes" datatype="html">
+      <trans-unit id="admin-core.application.edit-application-layer-attribute-settings" datatype="html">
         <source>Edit application layer attribute settings</source>
-        <target state="new">Attributen voor applicatielaag bewerken</target>
+        <target>Attribuut-instellingen voor applicatielaag bewerken</target>
+      </trans-unit>
+      <trans-unit id="admin-core.application.edit-application-layer-attributes" datatype="html">
+        <source>Edit application layer attributes</source>
+        <target>Attributen voor applicatielaag bewerken</target>
       </trans-unit>
       <trans-unit id="admin-core.application.edit-application-layer-attributes-hint1" datatype="html">
         <source>This only shows the attributes that are enabled in the catalog. If an attribute is missing, check the catalog settings.</source>
@@ -453,10 +457,18 @@
         <source>Initial extent</source>
         <target>Start-begrenzingsrechthoek</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.invalid-json" datatype="html">
+        <source>Invalid JSON: </source>
+        <target>Ongeldige JSON: </target>
+      </trans-unit>
       <trans-unit id="admin-core.application.invalid-name-error" datatype="html">
         <source>Name can only contain letters, numbers, underscores and dashes.</source>
         <target>De naam mag alleen letters, cijfers en (liggende) streepjes bevatten.</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.invalid-tileset-style" datatype="html">
+        <source>The style does not conform to the 3D Tileset Styling Language structure</source>
+        <target>De stijl komt niet overeen met de structuur van de 3D Tileset Styling Language</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.layer-not-editable" datatype="html">
         <source>This layer cannot be edited because there is no writeable feature source / type configured for this layer</source>
         <target>Deze laag kan niet worden bewerkt omdat er geen schrijfbare feature source / type is geconfigureerd voor deze laag</target>
@@ -589,6 +601,10 @@
         <source>Setting this application as default will overwrite the current default application</source>
         <target>Door deze applicatie als standaard in te stellen, wordt de huidige standaardapplicatie overschreven</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.set-tileset-style" datatype="html">
+        <source>Set a style for the 3D Tileset</source>
+        <target>Stel een stijl in voor de 3D Tileset</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.settings" datatype="html">
         <source>Settings</source>
         <target>Instellingen</target>
@@ -605,6 +621,14 @@
         <source>Terrain layers</source>
         <target>Terreinlagen</target>
       </trans-unit>
+      <trans-unit id="admin-core.application.tileset-style" datatype="html">
+        <source>Tileset style</source>
+        <target>Tileset stijl</target>
+      </trans-unit>
+      <trans-unit id="admin-core.application.tileset-style-hint" datatype="html">
+        <source>Fill in a tileset style in json format according to the <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;https://docs.ogc.org/cs/22-025r4/22-025r4.html#toc45&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;"/>OGC 3D Tiles Styling Language<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>. Note: The structure of the style is validated, but not the style expressions.</source>
+        <target>Vul een tileset stijl in JSON-formaat in volgens de OGC <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;https://docs.ogc.org/cs/22-025r4/22-025r4.html#toc45&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;"/>OGC 3D Tiles Styling Language<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>. Let op: De structuur van de stijl wordt gevalideerd, maar de stijlexpressies niet.</target>
+      </trans-unit>
       <trans-unit id="admin-core.authorizations.access" datatype="html">
         <source>Access</source>
         <target>Toegang</target>

projects/admin-core/src/lib/application/application-layer-attribute-settings/application-layer-attribute-settings.component.html

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title i18n="@@admin-core.application.edit-application-layer-attributes">Edit application layer attribute settings</h2>
+<h2 mat-dialog-title i18n="@@admin-core.application.edit-application-layer-attribute-settings">Edit application layer attribute settings</h2>
 <mat-dialog-content>
   <p i18n="@@admin-core.application.edit-application-layer-attributes-hint1">This only shows the attributes that are enabled in the catalog. If an attribute is missing, check the catalog settings.</p>
   <p i18n="@@admin-core.application.edit-application-layer-attributes-hint2">It is advised to use the catalog for global attribute settings and only use these application layer settings in specific cases.</p>

projects/admin-core/src/lib/application/application-layer-settings/application-layer-settings.component.css

@@ -25,3 +25,24 @@ fieldset {
 fieldset.layer-functionality mat-checkbox {
  display: block;
 }
+
+.set-tileset-style {
+  margin-top: 16px;
+}
+
+.set-tileset-style mat-form-field {
+  margin-top: 8px;
+}
+
+.tileset-style-error-message {
+  margin-top: 8px;
+}
+
+.hint {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
+  line-height: 20px;
+  text-align: left;
+  padding: 0 16px;
+}

projects/admin-core/src/lib/application/application-layer-settings/application-layer-settings.component.html

@@ -10,7 +10,7 @@
       <mat-label i18n="@@admin-core.common.title">Title</mat-label>
       <input matInput formControlName="title" />
     </mat-form-field>
-    @if (!layerIs3D) {
+    @if (!layerIs3d) {
       <div class="form-field form-field__slider">
         <strong i18n="@@admin-core.application.opacity">Opacity</strong>
         <tm-slider formControlName="opacity"></tm-slider>
@@ -30,7 +30,7 @@
                 cdkAutosizeMinRows="4"
                 cdkAutosizeMaxRows="10"></textarea>
     </mat-form-field>
-    @if (!layerIs3D) {
+    @if (!layerIs3d) {
       <mat-form-field>
         <mat-label i18n="@@admin-core.application.autoRefreshInSeconds">Auto refresh the layer (seconds)</mat-label>
         <input type="number" matInput formControlName="autoRefreshInSeconds" />
@@ -106,5 +106,26 @@
         }
       }
     }
+    @if (layerIs3dTiles) {
+      <div class="set-tileset-style">
+        <strong class="set-tileset-style-label" i18n="@@admin-core.application.set-tileset-style">Set a style for the 3D Tileset</strong>
+        @if (tilesetStyleErrorMessage) {
+          <div class="tileset-style-error-message">
+            <tm-error-message [message]="tilesetStyleErrorMessage" [friendlyError]="true">
+            </tm-error-message>
+          </div>
+        }
+        <mat-form-field>
+          <mat-label i18n="@@admin-core.application.tileset-style">Tileset style</mat-label>
+          <textarea matInput formControlName="tileset3dStyle"
+                    [cdkTextareaAutosize]="true"
+                    cdkAutosizeMinRows="4"
+                    cdkAutosizeMaxRows="12">
+          </textarea>
+        </mat-form-field>
+        <div class="hint" i18n="@@admin-core.application.tileset-style-hint">Fill in a tileset style in json format according to the <a href="https://docs.ogc.org/cs/22-025r4/22-025r4.html#toc45" target="_blank" rel="noopener">OGC 3D Tiles Styling Language</a>. Note: The structure of the style is validated, but not the style expressions.</div>
+      </div>
+    }
+
   </form>
 }