Add tracking for clickables being held

This commit is contained in:
thepaperpilot 2022-11-30 22:17:13 -06:00
parent 2688dbbc69
commit 407afae3f3
3 changed files with 19 additions and 5 deletions

View file

@ -41,7 +41,7 @@ import {
setupHoldToClick,
unwrapRef
} from "util/vue";
import type { Component, PropType, UnwrapRef } from "vue";
import type { Component, PropType, Ref, UnwrapRef } from "vue";
import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
export default defineComponent({
@ -71,7 +71,8 @@ export default defineComponent({
id: {
type: String,
required: true
}
},
isHolding: Object as PropType<Ref<boolean>>
},
components: {
Node,
@ -108,7 +109,7 @@ export default defineComponent({
);
});
const { start, stop } = setupHoldToClick(onClick, onHold);
const { start, stop } = setupHoldToClick(onClick, onHold, props.isHolding);
return {
start,

View file

@ -11,7 +11,7 @@ import type {
} from "util/computed";
import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { computed, unref } from "vue";
import { computed, Ref, ref, unref } from "vue";
export const ClickableType = Symbol("Clickable");
@ -36,6 +36,7 @@ export interface ClickableOptions {
export interface BaseClickable {
id: string;
type: typeof ClickableType;
isHolding: Ref<boolean>;
[Component]: typeof ClickableComponent;
[GatherProps]: () => Record<string, unknown>;
}
@ -69,6 +70,8 @@ export function createClickable<T extends ClickableOptions>(
clickable.type = ClickableType;
clickable[Component] = ClickableComponent;
clickable.isHolding = ref(false);
processComputable(clickable as T, "visibility");
setDefault(clickable, "visibility", Visibility.Visible);
processComputable(clickable as T, "canClick");
@ -103,6 +106,7 @@ export function createClickable<T extends ClickableOptions>(
classes,
onClick,
onHold,
isHolding,
canClick,
small,
mark,
@ -115,6 +119,7 @@ export function createClickable<T extends ClickableOptions>(
classes,
onClick,
onHold,
isHolding,
canClick,
small,
mark,

View file

@ -112,7 +112,8 @@ export function isCoercableComponent(component: unknown): component is Coercable
export function setupHoldToClick(
onClick?: Ref<((e?: MouseEvent | TouchEvent) => void) | undefined>,
onHold?: Ref<VoidFunction | undefined>
onHold?: Ref<VoidFunction | undefined>,
isHolding?: Ref<boolean>
): {
start: (e: MouseEvent | TouchEvent) => void;
stop: VoidFunction;
@ -126,12 +127,19 @@ export function setupHoldToClick(
interval.value = setInterval(handleHolding, 250);
}
event.value = e;
if (isHolding) {
isHolding.value = true;
}
}
function stop() {
if (interval.value) {
clearInterval(interval.value);
interval.value = null;
}
console.log(isHolding);
if (isHolding) {
isHolding.value = false;
}
}
function handleHolding() {
if (onHold && onHold.value) {