filipkopyt14/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Releases Activity Actions

Support classes and styles to be defined by node types

Browse source
This commit is contained in:
thepaperpilot 2023-04-22 19:21:16 -05:00
parent 6e443ace0d
commit a59f77aa6d
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
<template> <template>
<!-- Ugly casting to prevent TS compiler error about style because vue doesn't think it supports arrays when it does -->
<g <g
class="boardnode" class="boardnode"
:class="{ [node.type]: true, isSelected, isDraggable }" :class="{ [node.type]: true, isSelected, isDraggable, ...classes }"
:style="{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }" :style="[{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }, style ?? []] as unknown as (string | CSSProperties)"
:transform="`translate(${position.x},${position.y})${isSelected ? ' scale(1.2)' : ''}`" :transform="`translate(${position.x},${position.y})${isSelected ? ' scale(1.2)' : ''}`"
> >
<BoardNodeAction <BoardNodeAction
@ -141,7 +142,7 @@ import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "feature
import { ProgressDisplay, Shape, getNodeProperty } from "features/boards/board"; import { ProgressDisplay, Shape, getNodeProperty } from "features/boards/board";
import { isVisible } from "features/feature"; import { isVisible } from "features/feature";
import settings from "game/settings"; import settings from "game/settings";
import { computed, toRefs, unref, watch } from "vue"; import { CSSProperties, computed, toRefs, unref, watch } from "vue";
import BoardNodeAction from "./BoardNodeAction.vue"; import BoardNodeAction from "./BoardNodeAction.vue";
const sqrtTwo = Math.sqrt(2); const sqrtTwo = Math.sqrt(2);
@ -244,6 +245,8 @@ const canAccept = computed(
unref(props.hasDragged) && unref(props.hasDragged) &&
getNodeProperty(props.nodeType.value.canAccept, unref(props.node)) getNodeProperty(props.nodeType.value.canAccept, unref(props.node))
); );
const style = computed(() => getNodeProperty(props.nodeType.value.style, unref(props.node)));
const classes = computed(() => getNodeProperty(props.nodeType.value.classes, unref(props.node)));
function mouseDown(e: MouseEvent | TouchEvent) { function mouseDown(e: MouseEvent | TouchEvent) {
emit("mouseDown", e, props.node.value.id, isDraggable.value); emit("mouseDown", e, props.node.value.id, isDraggable.value);

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

@ -92,6 +92,10 @@ export interface NodeTypeOptions {
label?: NodeComputable<NodeLabel | null>; label?: NodeComputable<NodeLabel | null>;
/** The size of the node - diameter for circles, width and height for squares. */ /** The size of the node - diameter for circles, width and height for squares. */
size: NodeComputable<number>; size: NodeComputable<number>;
/** CSS to apply to this node. */
style?: NodeComputable<StyleValue>;
/** Dictionary of CSS classes to apply to this node. */
classes?: NodeComputable<Record<string, boolean>>;
/** Whether the node is draggable or not. */ /** Whether the node is draggable or not. */
draggable?: NodeComputable<boolean>; draggable?: NodeComputable<boolean>;
/** The shape of the node. */ /** The shape of the node. */
@ -137,6 +141,8 @@ export type NodeType<T extends NodeTypeOptions> = Replace<
title: GetComputableType<T["title"]>; title: GetComputableType<T["title"]>;
label: GetComputableType<T["label"]>; label: GetComputableType<T["label"]>;
size: GetComputableTypeWithDefault<T["size"], 50>; size: GetComputableTypeWithDefault<T["size"], 50>;
style: GetComputableType<T["style"]>;
classes: GetComputableType<T["classes"]>;
draggable: GetComputableTypeWithDefault<T["draggable"], false>; draggable: GetComputableTypeWithDefault<T["draggable"], false>;
shape: GetComputableTypeWithDefault<T["shape"], Shape.Circle>; shape: GetComputableTypeWithDefault<T["shape"], Shape.Circle>;
canAccept: GetComputableTypeWithDefault<T["canAccept"], false>; canAccept: GetComputableTypeWithDefault<T["canAccept"], false>;
@ -378,6 +384,8 @@ export function createBoard<T extends BoardOptions>(
processComputable(nodeType as NodeTypeOptions, "label"); processComputable(nodeType as NodeTypeOptions, "label");
processComputable(nodeType as NodeTypeOptions, "size"); processComputable(nodeType as NodeTypeOptions, "size");
setDefault(nodeType, "size", 50); setDefault(nodeType, "size", 50);
processComputable(nodeType as NodeTypeOptions, "style");
processComputable(nodeType as NodeTypeOptions, "classes");
processComputable(nodeType as NodeTypeOptions, "draggable"); processComputable(nodeType as NodeTypeOptions, "draggable");
setDefault(nodeType, "draggable", false); setDefault(nodeType, "draggable", false);
processComputable(nodeType as NodeTypeOptions, "shape"); processComputable(nodeType as NodeTypeOptions, "shape");