thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed labels not fading out properly

Browse source
This commit is contained in:
thepaperpilot 2021-08-26 00:44:38 -05:00
parent 5c23976ec7
commit b1d2bab36f
1 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/board/BoardNode.vue
View file

@ -11,7 +11,7 @@
v-for="(action, index) in actions" v-for="(action, index) in actions"
:key="action.id" :key="action.id"
class="action" class="action"
:class="{ selected: selectedAction === action }" :class="{ selected: selectedAction?.id === action.id }"
:transform=" :transform="
`translate( `translate(
${(-size - 30) * ${(-size - 30) *
@ -34,7 +34,7 @@
: fillColor : fillColor
" "
r="20" r="20"
:stroke-width="selectedAction === action ? 4 : 0" :stroke-width="selectedAction?.id === action.id ? 4 : 0"
:stroke="outlineColor" :stroke="outlineColor"
/> />
<text :fill="titleColor" class="material-icons">{{ <text :fill="titleColor" class="material-icons">{{
@ -88,8 +88,7 @@
:width="size * sqrtTwo + 16" :width="size * sqrtTwo + 16"
:height="size * sqrtTwo + 16" :height="size * sqrtTwo + 16"
:transform=" :transform="
`translate(${-(size * sqrtTwo + 16) / 2}, ${-(size * sqrtTwo + 16) / `translate(${-(size * sqrtTwo + 16) / 2}, ${-(size * sqrtTwo + 16) / 2})`
2})`
" "
:fill="backgroundColor" :fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'" :stroke="receivingNode ? '#0F0' : '#0F03'"
@ -110,8 +109,10 @@
:width="Math.max(size * sqrtTwo * progress - 2, 0)" :width="Math.max(size * sqrtTwo * progress - 2, 0)"
:height="Math.max(size * sqrtTwo * progress - 2, 0)" :height="Math.max(size * sqrtTwo * progress - 2, 0)"
:transform=" :transform="
`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / `translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / 2}, ${-Math.max(
2}, ${-Math.max(size * sqrtTwo * progress - 2, 0) / 2})` size * sqrtTwo * progress - 2,
0
) / 2})`
" "
:fill="progressColor" :fill="progressColor"
/> />
@ -136,22 +137,23 @@
</g> </g>
<transition name="fade" appear> <transition name="fade" appear>
<text <g v-if="label">
v-if="label" <text
:fill="label.color || titleColor" :fill="label.color || titleColor"
class="node-title" class="node-title"
:class="{ pulsing: label.pulsing }" :class="{ pulsing: label.pulsing }"
:y="-size - 20" :y="-size - 20"
>{{ label.text }}</text >{{ label.text }}
> </text>
</g>
</transition> </transition>
<transition name="fade" appear> <transition name="fade" appear>
<text <text
v-if="selected && selectedAction"
:fill="titleColor" :fill="titleColor"
class="node-title" class="node-title"
:y="size + 75" :y="size + 75"
v-if="selected && selectedAction"
>Tap again to confirm</text >Tap again to confirm</text
> >
</transition> </transition>
@ -308,13 +310,13 @@ export default defineComponent({
performAction(e: MouseEvent | TouchEvent, action: BoardNodeAction) { performAction(e: MouseEvent | TouchEvent, action: BoardNodeAction) {
// If the onClick function made this action selected, // If the onClick function made this action selected,
// don't propagate the event (which will deselect everything) // don't propagate the event (which will deselect everything)
if (action.onClick(this.node) || this.board.selectedAction === action) { if (action.onClick(this.node) || this.board.selectedAction?.id === action.id) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}, },
actionMouseUp(e: MouseEvent | TouchEvent, action: BoardNodeAction) { actionMouseUp(e: MouseEvent | TouchEvent, action: BoardNodeAction) {
if (this.board.selectedAction === action) { if (this.board.selectedAction?.id === action.id) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }