Feat/participant color

package.json

@@ -49,6 +49,7 @@
     "@types/ramda": "^0.28.20",
     "@vue/compat": "^3.2.45",
     "antlr4": "~4.11.0",
+    "click-outside-vue3": "^4.0.1",
     "color-string": "^1.5.5",
     "dom-to-image-more": "^2.13.0",
     "dompurify": "^3.1.5",

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="inline-block">
+    <button
+      @click.stop="togglePicker"
+      class="w-6 h-6 rounded border border-gray-300 flex items-center justify-center"
+      :style="{ backgroundColor: modelValue, color: white }"
+    >
+      <svg
+        v-if="!modelValue"
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4 text-gray-500"
+        viewBox="-4 -4 24 24"
+        fill="currentColor"
+        role="presentation"
+      >
+        <path
+          fill="white"
+          fill-rule="evenodd"
+          d="M5.655.095 13.78 8.22a.75.75 0 0 1 0 1.06l-5.616 5.617a2 2 0 0 1-2.828 0L.604 10.164a2 2 0 0 1 0-2.828L5.689 2.25 4.595 1.155zM6.75 3.31 2.06 8h9.38zm4.69 6.19H2.06l4.336 4.335a.5.5 0 0 0 .708 0z"
+          clip-rule="evenodd"
+        />
+        <path
+          fill="white"
+          d="M14.5 12a.75.75 0 0 0-.654.383v.002l-.003.003-.007.013-.026.046a16 16 0 0 0-.36.695 8 8 0 0 0-.283.642c-.068.176-.167.457-.167.716a1.5 1.5 0 0 0 3 0c0-.259-.1-.54-.167-.716a8 8 0 0 0-.284-.642 16 16 0 0 0-.36-.695l-.025-.046-.007-.013-.002-.004-.001-.001A.75.75 0 0 0 14.5 12"
+        />
+      </svg>
+    </button>
+    <div
+      v-if="isOpen"
+      v-click-outside="closePicker"
+      class="absolute z-50 transform left-1/2 -translate-x-1/2 p-2 bg-white rounded border border-gray-200 w-40"
+    >
+      <div class="grid grid-cols-4 gap-2">
+        <button
+          v-for="color in colors"
+          :key="color"
+          @click.stop="selectColor(color)"
+          class="w-8 h-8 rounded"
+          :style="{ backgroundColor: color }"
+          :title="color"
+        ></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import vClickOutside from "click-outside-vue3";
+
+export default {
+  name: "ColorPicker",
+  directives: {
+    clickOutside: vClickOutside.directive,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:modelValue", "input"],
+  setup(props, { emit }) {
+    const isOpen = ref(false);
+    const colors = [
+      "#006837",
+      "#00c875",
+      "#BFB41B",
+      "#FFC20E",
+      "#F15A24",
+      "#FBB3B1",
+      "#F26D7D",
+      "#B71F3A",
+      "#E31C79",
+      "#FF66C4",
+      "#FFA3E1",
+      "#9E4F9E",
+      "#662D91",
+      "#4B0082",
+      "#2E3192",
+      "#0071BC",
+      "#1B75BC",
+      "#29ABE2",
+      "#00BFB3",
+      "#4DC7EC",
+      "#A7C6ED",
+      "#B3B3B3",
+      "#666666",
+      "#000000",
+      "#8B4513",
+      "#FF69B4",
+      "#DEB887",
+      "#B0E0E6",
+      "#CD853F",
+      "#0000FF",
+      "#004B49",
+      "#E6E6FA",
+      "#D8BFD8",
+      "#4A2F24",
+    ];
+
+    const togglePicker = () => {
+      isOpen.value = !isOpen.value;
+    };
+
+    const closePicker = () => {
+      isOpen.value = false;
+    };
+
+    const selectColor = (color) => {
+      console.log("Selected color:", color);
+      emit("update:modelValue", color);
+      emit("input", color);
+      closePicker();
+    };
+
+    return {
+      isOpen,
+      colors,
+      togglePicker,
+      closePicker,
+      selectColor,
+    };
+  },
+};
+</script>
+
+<style scoped></style>

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLineLayer.vue

@@ -34,6 +34,7 @@
         <life-line
           :key="index"
           v-if="child instanceof ParticipantContext"
+          :context="child"
           :entity="getParticipantEntity(child)"
           :renderParticipants="renderParticipants"
           :renderLifeLine="renderLifeLine"

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue

@@ -1,10 +1,11 @@
 <template>
   <div
-    class="participant bg-skin-participant shadow-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 top-8"
+    class="participant flex items-center bg-skin-participant shadow-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex-col justify-center z-10 h-10 top-8 group"
     :class="{ selected: selected }"
     ref="participant"
     :style="{
       backgroundColor: isDefaultStarter ? undefined : backgroundColor,
+      borderColor: backgroundColor,
       color: isDefaultStarter ? undefined : color,
       transform: `translateY(${translate}px)`,
     }"
@@ -14,7 +15,7 @@
       <div
         v-if="!!icon"
         v-html="icon"
-        class="h-6 w-6 mr-1 flex-shrink-0 [&>svg]:w-full [&>svg]:h-full"
+        class="h-6 w-6 flex-shrink-0 [&>svg]:w-full [&>svg]:h-full"
         :aria-description="`icon for ${entity.name}`"
       ></div>
 
@@ -40,6 +41,11 @@
         />
       </div>
     </div>
+    <ColorPicker
+      v-if="!isDefaultStarter"
+      v-model="participantColor"
+      class="absolute rounded top-full transform -translate-y-1/2 invisible group-hover:visible bg-inherit"
+    />
   </div>
 </template>
 
@@ -55,17 +61,29 @@ import { PARTICIPANT_HEIGHT } from "@/positioning/Constants";
 import { RenderMode } from "@/store/Store";
 import ParticipantLabel from "./ParticipantLabel.vue";
 import { _STARTER_ } from "@/parser/OrderedParticipants";
+import ColorPicker from "./ColorPicker.vue";
 
 const INTERSECTION_ERROR_MARGIN = 10; // a threshold for judging whether the participant is intersecting with the viewport
 
 export default {
   name: "Participant",
   components: {
     ParticipantLabel,
+    ColorPicker,
   },
   setup(props) {
     const store = useStore();
     const participant = ref(null);
+    const participantColor = computed({
+      get: () => props.entity.color,
+      set: (value) => {
+        store.dispatch("updateParticipantColor", {
+          color: value,
+          participant: store.getters.participants.Get(props.entity.name),
+        });
+      },
+    });
+
     if (store.state.mode === RenderMode.Static) {
       return { translate: 0, participant };
     }
@@ -106,7 +124,19 @@ export default {
         participantOffsetTop
       );
     });
-    return { translate, participant, labelPositions, assigneePositions };
+    // watch(
+    //   () => participantColor.value,
+    //   (newColor) => {
+    //     this.updateFontColor(newColor);
+    //   },
+    // );
+    return {
+      translate,
+      participant,
+      labelPositions,
+      assigneePositions,
+      participantColor,
+    };
   },
   props: {
     entity: {
@@ -173,8 +203,8 @@ export default {
     onSelect() {
       this.$store.commit("onSelect", this.entity.name);
     },
-    updateFontColor() {
-      if (!this.entity.color) {
+    updateFontColor(newColor) {
+      if (!newColor) {
         this.color = undefined;
         return;
       }