Fix issues with boards

2024-11-24 01:11:45 +00:00 · 2023-04-21 19:49:21 -05:00 · 2023-04-21 19:49:21 -05:00 · e892341140
commit e892341140
parent 6cff4eca82
6 changed files with 171 additions and 98 deletions
--- a/src/features/bars/Bar.vue
+++ b/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>
--- a/src/features/boards/Board.vue
+++ b/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(draggingNode.value);
+        nodes.push(nodes.splice(nodes.indexOf(draggingNode.value), 1)[0]);

        if (receivingNode.value) {
            props.types.value[receivingNode.value.type].onDrop?.(
--- a/src/features/boards/BoardLink.vue
+++ b/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;
 }
--- a/src/features/boards/BoardNode.vue
+++ b/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>
-            <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"
+        <BoardNodeAction
+            :actions="actions ?? []"
+            :is-selected="isSelected"
+            :node="node"
+            :node-type="nodeType"
        />
-                    <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
-        ? {
-              x: node.position.x + Math.round(dragged.x / 25) * 25,
-              y: node.position.y + Math.round(dragged.y / 25) * 25
+        unref(props.dragged) != null
+    ) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { x, y } = unref(props.dragged)!;
+        return {
+            x: node.position.x + Math.round(x / 25) * 25,
+            y: node.position.y + Math.round(y / 25) * 25
+        };
    }
-        : node.position;
+    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);
--- a/src/features/boards/BoardNodeAction.vue
+++ b/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>
--- a/src/features/boards/board.ts
+++ b/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");