mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2025-01-31 15:41:37 +00:00
Add tracking for clickables being held
This commit is contained in:
parent
2688dbbc69
commit
407afae3f3
3 changed files with 19 additions and 5 deletions
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Add table
Reference in a new issue