thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-25 01:41:44 +00:00
Code Issues 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 b37d00409b
commit 839079be8a
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
@ -144,7 +145,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);
@ -248,6 +249,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

@ -94,6 +94,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. */
@ -140,6 +144,8 @@ export type NodeType<T extends NodeTypeOptions> = Replace<
subtitle: GetComputableType<T["subtitle"]>; subtitle: GetComputableType<T["subtitle"]>;
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>;
@ -382,6 +388,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");