also handle colors on entity types

Signed-off-by: Vinzenz Rosenkranz <[email protected]>

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## 0.11
+### Fixed
+- Missing "Color Dots" of _Entity Type_ (colors are now handled on the Entity Type itself and do no longer rely on the _Map_ Plugin)
+
 ## 0.10.1
 ### Added
 - Option to display attributes in _Data Model Editor_ in groups

app/EntityType.php

@@ -34,8 +34,9 @@ public function getActivitylogOptions() : LogOptions
             ->logOnlyDirty();
     }
 
-    public function setRelationInfo($isRoot = false, $subTypes = []) {
+    public function setRelationInfo($color, $isRoot = false, $subTypes = []) {
         $this->is_root = $isRoot;
+        $this->color = $color;
         EntityTypeRelation::where('parent_id', $this->id)->delete();
         foreach($subTypes as $type) {
             $relation = new EntityTypeRelation();

app/Http/Controllers/EditorController.php

@@ -179,7 +179,8 @@ public function setRelationInfo(Request $request, $id) {
         }
         $this->validate($request, [
             'is_root' => 'boolean_string',
-            'sub_entity_types' => 'array'
+            'sub_entity_types' => 'array',
+            'color' => 'color',
         ]);
         try {
             $entityType = EntityType::findOrFail($id);
@@ -190,7 +191,8 @@ public function setRelationInfo(Request $request, $id) {
         }
         $is_root = $request->get('is_root');
         $subs = $request->get('sub_entity_types');
-        $entityType->setRelationInfo($is_root, $subs);
+        $color = $request->get('color');
+        $entityType->setRelationInfo($color, $is_root, $subs);
         return response()->json(null, 204);
     }
 

database/migrations/2024_12_02_132705_move_entity_type_color.php

@@ -0,0 +1,61 @@
+<?php
+
+use App\AvailableLayer;
+use App\EntityType;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        activity()->disableLogging();
+
+        Schema::table('entity_types', function (Blueprint $table) {
+            $table->text('color')->nullable();
+        });
+
+        // migrate existing colors from map plugin table
+        if(Schema::hasTable('available_layers')) {
+            $entityTypeLayers = AvailableLayer::has('entity_type')->get();
+
+            foreach($entityTypeLayers as $entityTypeLayer) {
+                $color = $entityTypeLayer->color;
+                $entityTypeLayer->color = null;
+                $entityTypeLayer->saveQuietly();
+                $entityType = EntityType::find($entityTypeLayer->entity_type_id);
+                $entityType->color = $color;
+                $entityType->saveQuietly();
+            }
+        }
+
+        activity()->enableLogging();
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        activity()->disableLogging();
+
+        if(Schema::hasTable('available_layers')) {
+            $entityTypeLayers = AvailableLayer::has('entity_type')->get();
+
+            foreach($entityTypeLayers as $entityTypeLayer) {
+                $entityTypeLayer->color = $entityTypeLayer->entity_type->color;
+                $entityTypeLayer->saveQuietly();
+            }
+        }
+
+        Schema::table('entity_types', function (Blueprint $table) {
+            $table->dropColumn('color');
+        });
+
+        activity()->enableLogging();
+    }
+};

resources/js/api.js

@@ -365,7 +365,7 @@ export async function confirmUserPassword(uid, password = null) {
 }
 
 export async function updateEntityTypeRelation(etid, values) {
-    const data = only(values, ['is_root', 'sub_entity_types']);
+    const data = only(values, ['is_root', 'sub_entity_types', 'color']);
     const apiData = { ...data };
     if(data.sub_entity_types) {
         apiData.sub_entity_types = data.sub_entity_types.map(t => t.id);

resources/js/bootstrap/store.js

@@ -7,6 +7,7 @@ import {
 } from '@/helpers/tree.js';
 import {
     can,
+    calculateEntityColors,
     fillEntityData,
     only,
     slugify,
@@ -159,10 +160,14 @@ export const store = createStore({
                 },
                 updateEntityType(state, data) {
                     const entityType = state.entityTypes[data.id];
-                    const values = only(data, ['thesaurus_url', 'updated_at', 'is_root', 'sub_entity_types']);
+                    const values = only(data, ['thesaurus_url', 'updated_at', 'is_root', 'sub_entity_types', 'color']);
                     for(let k in values) {
                         entityType[k] = values[k];
                     }
+                    if(data.color) {
+                        const colors = calculateEntityColors(data.id);
+                        state.entityTypeColors[data.id] = colors;
+                    }
                 },
                 moveEntity(state, data) {
                     const entity = state.entities[data.entity_id];
@@ -282,8 +287,8 @@ export const store = createStore({
                         }
                     }
 
-                    // Remove the data from the entity. 
-                    // We need to do this as the 'replace', 'add' 'remove' 
+                    // Remove the data from the entity.
+                    // We need to do this as the 'replace', 'add' 'remove'
                     // operations are calculated based on this value.
                     for(const attributeId in data.removed_data) {
                         if(entity.data[attributeId]) {

resources/js/components/DataModelDetailView.vue

@@ -34,10 +34,30 @@
                     </div>
                 </div>
                 <div class="mb-3 row">
+                    <label
+                        for="entity-color"
+                        class="col-form-label col-md-3 text-end"
+                    >
+                        {{ t('global.color') }}
+                    </label>
+                    <div class="col-md-9 d-flex align-items-center">
+                        <input
+                            v-model="state.entityType.color"
+                            type="color"
+                            class="w-100"
+                        >
+                    </div>
+                </div>
+                <div
+                    v-if="state.entityType?.layer?.type"
+                    class="mb-3 row"
+                >
                     <label
                         for="entity-geometrytype-ro"
                         class="col-form-label col-md-3 text-end"
-                    >{{ t('global.geometry_type') }}</label>
+                    >
+                        {{ t('global.geometry_type') }}
+                    </label>
                     <div class="col-md-9 d-flex align-items-center">
                         <span>
                             {{ state.entityType.layer.type }}
@@ -185,6 +205,7 @@
                 const data = {
                     'is_root': et.is_root || false,
                     'sub_entity_types': et.sub_entity_types || [],
+                    'color': et.color,
                 };
 
                 updateEntityTypeRelation(et.id, data).then(_ => {

resources/js/helpers/helpers.js

@@ -521,9 +521,16 @@ export function fillEntityData(data, etid) {
 // Formula based on https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color/3943023#3943023
 export function calculateEntityColors(id, alpha = 0.5) {
     const et = getEntityType(id);
-    if(!et || !et.layer) return {};
+    let typeColor = null;
+    if(et?.layer?.color) {
+        typeColor = et.layer.color;
+    } else if(et.color) {
+        typeColor = et.color;
+    } else {
+        return {};
+    }
     let r, g, b, a;
-    [r, g, b] = splitColor(et.layer.color);
+    [r, g, b] = splitColor(typeColor);
     const cs = [r, g, b].map(c => {
         c /= 255.0;
         if(c <= 0.03928) c /= 12.92;