escapee/profectus-template
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Releases Activity Actions

Fix issues with boards

Browse source
This commit is contained in:
thepaperpilot 2023-04-21 19:49:21 -05:00
parent 6cff4eca82
commit 4160986a4d
6 changed files with 171 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/features/bars/Bar.vue
View file

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

16
src/features/boards/Board.vue
View file

@ -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?.(

4
src/features/boards/BoardLink.vue
View file

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

135
src/features/boards/BoardNode.vue
View file

@ -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"
/>
<text :fill="titleColor" class="material-icons">{{
getNodeProperty(action.icon, node)
}}</text>
</g>
</g>
</transition>
<BoardNodeAction
:actions="actions ?? []"
:is-selected="isSelected"
:node="node"
:node-type="nodeType"
/>
<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
}
: node.position;
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
};
}
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);

109
src/features/boards/BoardNodeAction.vue Normal file
View file

@ -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>

4
src/features/boards/board.ts
View file

@ -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");