Fix issues with boards

src/features/bars/Bar.vue

@@ -179,5 +179,6 @@ export default defineComponent({
     margin-left: -0.5px;
     transition-duration: 0.2s;
     z-index: 2;
+    transition-duration: 0.05s;
 }
 </style>

src/features/boards/Board.vue

@@ -1,7 +1,6 @@
 <template>
     <panZoom
         v-if="isVisible(visibility)"
-        v-show="isHidden(visibility)"
         :style="[
             {
                 width,
@@ -25,7 +24,10 @@
         <svg class="stage" width="100%" height="100%">
             <g class="g1">
                 <transition-group name="link" appear>
-                    <g v-for="(link, i) in unref(links) || []" :key="i">
+                    <g
+                        v-for="link in unref(links) || []"
+                        :key="`${link.startNode.id}-${link.endNode.id}`"
+                    >
                         <BoardLinkVue :link="link" />
                     </g>
                 </transition-group>
@@ -35,7 +37,7 @@
                             :node="node"
                             :nodeType="types[node.type]"
                             :dragging="draggingNode"
-                            :dragged="dragged"
+                            :dragged="draggingNode === node ? dragged : undefined"
                             :hasDragged="hasDragged"
                             :receivingNode="receivingNode?.id === node.id"
                             :selectedNode="unref(selectedNode)"
@@ -60,9 +62,9 @@ import type {
 } from "features/boards/board";
 import { getNodeProperty } from "features/boards/board";
 import type { StyleValue } from "features/feature";
-import { isHidden, isVisible, Visibility } from "features/feature";
+import { Visibility, isVisible } from "features/feature";
 import type { ProcessedComputable } from "util/computed";
-import { computed, ref, Ref, toRefs, unref } from "vue";
+import { Ref, computed, ref, toRefs, unref } from "vue";
 import BoardLinkVue from "./BoardLink.vue";
 import BoardNodeVue from "./BoardNode.vue";
 
@@ -138,6 +140,7 @@ const receivingNode = computed(() => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onInit(panzoomInstance: any) {
     panzoomInstance.setTransformOrigin(null);
+    panzoomInstance.moveTo(stage.value.$el.clientWidth / 2, stage.value.$el.clientHeight / 2);
 }
 
 function mouseDown(e: MouseEvent | TouchEvent, nodeID: number | null = null, draggable = false) {
@@ -222,8 +225,7 @@ function endDragging(nodeID: number | null) {
         draggingNode.value.position.y += Math.round(dragged.value.y / 25) * 25;
 
         const nodes = props.nodes.value;
-        nodes.splice(nodes.indexOf(draggingNode.value), 1);
+        nodes.push(nodes.splice(nodes.indexOf(draggingNode.value), 1)[0]);
-        nodes.push(draggingNode.value);
 
         if (receivingNode.value) {
             props.types.value[receivingNode.value.type].onDrop?.(

src/features/boards/BoardLink.vue

@@ -39,6 +39,10 @@ const endPosition = computed(() => {
 </script>
 
 <style scoped>
+.link {
+    transition-duration: 0s;
+}
+
 .link.pulsing {
     animation: pulsing 2s ease-in infinite;
 }

src/features/boards/BoardNode.vue

@@ -1,50 +1,19 @@
 <template>
     <g
         class="boardnode"
-        :class="node.type"
+        :class="{ [node.type]: true, isSelected, isDraggable }"
         :style="{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }"
         :transform="`translate(${position.x},${position.y})`"
     >
-        <transition name="actions" appear>
+        <BoardNodeAction
-            <g v-if="isSelected && actions">
+            :actions="actions ?? []"
-                <!-- TODO move to separate file -->
+            :is-selected="isSelected"
-                <g
+            :node="node"
-                    v-for="(action, index) in actions"
+            :node-type="nodeType"
-                    :key="action.id"
+        />
-                    class="action"
-                    :class="{ selected: selectedAction?.id === action.id }"
-                    :transform="`translate(
-                            ${
-                                (-size - 30) *
-                                Math.sin(((actions.length - 1) / 2 - index) * actionDistance)
-                            },
-                            ${
-                                (size + 30) *
-                                Math.cos(((actions.length - 1) / 2 - index) * actionDistance)
-                            }
-                        )`"
-                    @mousedown="e => performAction(e, action)"
-                    @touchstart="e => performAction(e, action)"
-                    @mouseup="e => actionMouseUp(e, action)"
-                    @touchend.stop="e => actionMouseUp(e, action)"
-                >
-                    <circle
-                        :fill="getNodeProperty(action.fillColor, node)"
-                        r="20"
-                        :stroke-width="selectedAction?.id === action.id ? 4 : 0"
-                        :stroke="outlineColor"
-                    />
-                    <text :fill="titleColor" class="material-icons">{{
-                        getNodeProperty(action.icon, node)
-                    }}</text>
-                </g>
-            </g>
-        </transition>
 
         <g
             class="node-container"
-            @mouseenter="isHovering = true"
-            @mouseleave="isHovering = false"
             @mousedown="mouseDown"
             @touchstart.passive="mouseDown"
             @mouseup="mouseUp"
@@ -69,7 +38,7 @@
                 />
 
                 <circle
-                    class="progressFill"
+                    class="progress progressFill"
                     v-if="progressDisplay === ProgressDisplay.Fill"
                     :r="Math.max(size * progress - 2, 0)"
                     :fill="progressColor"
@@ -77,7 +46,7 @@
                 <circle
                     v-else
                     :r="size + 4.5"
-                    class="progressRing"
+                    class="progress progressRing"
                     fill="transparent"
                     :stroke-dasharray="(size + 4.5) * 2 * Math.PI"
                     :stroke-width="5"
@@ -113,7 +82,7 @@
 
                 <rect
                     v-if="progressDisplay === ProgressDisplay.Fill"
-                    class="progressFill"
+                    class="progress progressFill"
                     :width="Math.max(size * sqrtTwo * progress - 2, 0)"
                     :height="Math.max(size * sqrtTwo * progress - 2, 0)"
                     :transform="`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / 2}, ${
@@ -123,7 +92,7 @@
                 />
                 <rect
                     v-else
-                    class="progressDiamond"
+                    class="progress progressDiamond"
                     :width="size * sqrtTwo + 9"
                     :height="size * sqrtTwo + 9"
                     :transform="`translate(${-(size * sqrtTwo + 9) / 2}, ${
@@ -173,6 +142,7 @@ import { ProgressDisplay, getNodeProperty, Shape } from "features/boards/board";
 import { isVisible } from "features/feature";
 import settings from "game/settings";
 import { computed, ref, toRefs, unref, watch } from "vue";
+import BoardNodeAction from "./BoardNodeAction.vue";
 
 const sqrtTwo = Math.sqrt(2);
 
@@ -195,7 +165,6 @@ const emit = defineEmits<{
     (e: "endDragging", node: number): void;
 }>();
 
-const isHovering = ref(false);
 const isSelected = computed(() => unref(props.selectedNode) === unref(props.node));
 const isDraggable = computed(() =>
     getNodeProperty(props.nodeType.value.draggable, unref(props.node))
@@ -217,16 +186,20 @@ const actions = computed(() => {
 
 const position = computed(() => {
     const node = unref(props.node);
-    const dragged = unref(props.dragged);
 
-    return getNodeProperty(props.nodeType.value.draggable, node) &&
+    if (
+        getNodeProperty(props.nodeType.value.draggable, node) &&
         unref(props.dragging)?.id === node.id &&
-        dragged
+        unref(props.dragged) != null
-        ? {
+    ) {
-              x: node.position.x + Math.round(dragged.x / 25) * 25,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              y: node.position.y + Math.round(dragged.y / 25) * 25
+        const { x, y } = unref(props.dragged)!;
-          }
+        return {
-        : node.position;
+            x: node.position.x + Math.round(x / 25) * 25,
+            y: node.position.y + Math.round(y / 25) * 25
+        };
+    }
+    return node.position;
 });
 
 const shape = computed(() => getNodeProperty(props.nodeType.value.shape, unref(props.node)));
@@ -264,32 +237,14 @@ const canAccept = computed(
         unref(props.hasDragged) &&
         getNodeProperty(props.nodeType.value.canAccept, unref(props.node))
 );
-const actionDistance = computed(() =>
-    getNodeProperty(props.nodeType.value.actionDistance, unref(props.node))
-);
 
 function mouseDown(e: MouseEvent | TouchEvent) {
     emit("mouseDown", e, props.node.value.id, isDraggable.value);
 }
 
-function mouseUp() {
+function mouseUp(e: MouseEvent | TouchEvent) {
     if (!props.hasDragged?.value) {
         props.nodeType.value.onClick?.(props.node.value);
-    }
-}
-
-function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    // If the onClick function made this action selected,
-    // don't propagate the event (which will deselect everything)
-    if (action.onClick(unref(props.node)) || unref(props.selectedAction)?.id === action.id) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-
-function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    if (unref(props.selectedAction)?.id === action.id) {
-        e.preventDefault();
         e.stopPropagation();
     }
 }
@@ -301,6 +256,22 @@ function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeActio
     transition-duration: 0s;
 }
 
+.boardnode:hover .body {
+    fill: var(--highlighted);
+}
+
+.boardnode.isSelected {
+    transform: scale(1.2);
+}
+
+.boardnode.isSelected .body {
+    fill: var(--accent1) !important;
+}
+
+.boardnode:not(.isDraggable) .body {
+    fill: var(--locked);
+}
+
 .node-title {
     text-anchor: middle;
     dominant-baseline: middle;
@@ -309,25 +280,14 @@ function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeActio
     pointer-events: none;
 }
 
+.progress {
+    transition-duration: 0.05s;
+}
+
 .progressRing {
     transform: rotate(-90deg);
 }
 
-.action:not(.boardnode):hover circle,
-.action:not(.boardnode).selected circle {
-    r: 25;
-}
-
-.action:not(.boardnode):hover text,
-.action:not(.boardnode).selected text {
-    font-size: 187.5%; /* 150% * 1.25 */
-}
-
-.action:not(.boardnode) text {
-    text-anchor: middle;
-    dominant-baseline: central;
-}
-
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;
@@ -353,11 +313,6 @@ function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeActio
 </style>
 
 <style>
-.actions-enter-from .action,
-.actions-leave-to .action {
-    transform: translate(0, 0);
-}
-
 .grow-enter-from .node-container,
 .grow-leave-to .node-container {
     transform: scale(0);

src/features/boards/BoardNodeAction.vue

@@ -0,0 +1,109 @@
+<template>
+    <transition name="actions" appear>
+        <g v-if="isSelected && actions">
+            <!-- TODO move to separate file -->
+            <g
+                v-for="(action, index) in actions"
+                :key="action.id"
+                class="action"
+                :class="{ selected: selectedAction?.id === action.id }"
+                :transform="`translate(
+                        ${
+                            (-size - 30) *
+                            Math.sin(((actions.length - 1) / 2 - index) * actionDistance)
+                        },
+                        ${
+                            (size + 30) *
+                            Math.cos(((actions.length - 1) / 2 - index) * actionDistance)
+                        }
+                    )`"
+                @mousedown="e => performAction(e, action)"
+                @touchstart="e => performAction(e, action)"
+                @mouseup="e => actionMouseUp(e, action)"
+                @touchend.stop="e => actionMouseUp(e, action)"
+            >
+                <circle
+                    :fill="getNodeProperty(action.fillColor, node)"
+                    r="20"
+                    :stroke-width="selectedAction?.id === action.id ? 4 : 0"
+                    :stroke="outlineColor"
+                />
+                <text :fill="titleColor" class="material-icons">{{
+                    getNodeProperty(action.icon, node)
+                }}</text>
+            </g>
+        </g>
+    </transition>
+</template>
+
+<script setup lang="ts">
+import themes from "data/themes";
+import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
+import { getNodeProperty } from "features/boards/board";
+import settings from "game/settings";
+import { computed, toRefs, unref } from "vue";
+
+const _props = defineProps<{
+    node: BoardNode;
+    nodeType: GenericNodeType;
+    actions?: GenericBoardNodeAction[];
+    isSelected: boolean;
+    selectedAction?: GenericBoardNodeAction;
+}>();
+const props = toRefs(_props);
+
+const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
+const outlineColor = computed(
+    () =>
+        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
+        themes[settings.theme].variables["--outline"]
+);
+const titleColor = computed(
+    () =>
+        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
+        themes[settings.theme].variables["--foreground"]
+);
+const actionDistance = computed(() =>
+    getNodeProperty(props.nodeType.value.actionDistance, unref(props.node))
+);
+
+function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
+    // If the onClick function made this action selected,
+    // don't propagate the event (which will deselect everything)
+    if (action.onClick(unref(props.node)) || unref(props.selectedAction)?.id === action.id) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+
+function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
+    if (unref(props.selectedAction)?.id === action.id) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+</script>
+
+<style scoped>
+.action:not(.boardnode):hover circle,
+.action:not(.boardnode).selected circle {
+    r: 25;
+}
+
+.action:not(.boardnode):hover text,
+.action:not(.boardnode).selected text {
+    font-size: 187.5%; /* 150% * 1.25 */
+}
+
+.action:not(.boardnode) text {
+    text-anchor: middle;
+    dominant-baseline: central;
+}
+</style>
+
+<style>
+.actions-enter-from .action,
+.actions-leave-to .action {
+    transform: translate(0, 0);
+}
+</style>

src/features/boards/board.ts

@@ -63,6 +63,8 @@ export interface BoardNode {
 export interface BoardNodeLink extends Omit<Link, "startNode" | "endNode"> {
     startNode: BoardNode;
     endNode: BoardNode;
+    stroke: string;
+    strokeWidth: number;
     pulsing?: boolean;
 }
 
@@ -365,7 +367,7 @@ export function createBoard<T extends BoardOptions>(
         processComputable(board as T, "width");
         setDefault(board, "width", "100%");
         processComputable(board as T, "height");
-        setDefault(board, "height", "400px");
+        setDefault(board, "height", "100%");
         processComputable(board as T, "classes");
         processComputable(board as T, "style");