From 36b068c5dca94a1875ba8dd2b631ca283340fdf9 Mon Sep 17 00:00:00 2001
From: Baku Hashimoto <mail@baku89.com>
Date: Sat, 30 Sep 2023 01:13:45 +0900
Subject: [PATCH] Create InputNumber

---
 src/components/App.vue                |   3 +
 src/tweeq/InputNumber/InputNumber.vue | 442 ++++++++++++++++++++++++++
 src/tweeq/InputNumber/index.ts        |   2 +
 src/tweeq/common.styl                 |  17 +-
 src/tweeq/useDrag.ts                  | 152 +++++++++
 src/tweeq/useTheme.ts                 |   2 +-
 src/tweeq/util.ts                     |   7 +
 7 files changed, 620 insertions(+), 5 deletions(-)
 create mode 100644 src/tweeq/InputNumber/InputNumber.vue
 create mode 100644 src/tweeq/InputNumber/index.ts
 create mode 100644 src/tweeq/useDrag.ts
 create mode 100644 src/tweeq/util.ts

diff --git a/src/components/App.vue b/src/components/App.vue
index a356e87..799923a 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -23,6 +23,7 @@ PaperOffset(paper)
 import {useTweeq} from '@/tweeq'
 import CommandPalette from '@/tweeq/CommandPalette'
 import FloatingPane from '@/tweeq/FloatingPane'
+import InputNumber from '@/tweeq/InputNumber'
 import InputString from '@/tweeq/InputString'
 import MonacoEditor, {ErrorInfo} from '@/tweeq/MonacoEditor'
 import RoundButton from '@/tweeq/RoundButton'
@@ -41,6 +42,7 @@ const {appStorage, registerActions, performAction} = useTweeq(
 )
 
 const testString = ref('Hello World')
+const testNumber = ref(100)
 
 // interface PaperDesc {
 // 	id?: string
@@ -411,6 +413,7 @@ window.addEventListener('drop', async e => {
 			:position="{anchor: 'bottom', height: 200}"
 		>
 			<InputString v-model="testString" />
+			<InputNumber v-model="testNumber" :min="0" :max="100" />
 		</FloatingPane>
 	</div>
 </template>
diff --git a/src/tweeq/InputNumber/InputNumber.vue b/src/tweeq/InputNumber/InputNumber.vue
new file mode 100644
index 0000000..118fccb
--- /dev/null
+++ b/src/tweeq/InputNumber/InputNumber.vue
@@ -0,0 +1,442 @@
+<script lang="ts" setup>
+import {useElementBounding, useFocus, useKeyModifier} from '@vueuse/core'
+import {useWheel} from '@vueuse/gesture'
+import {scalar, Vec2} from 'linearly'
+import {computed, ref, watch, watchEffect} from 'vue'
+
+import {useDrag} from '../useDrag'
+import {toFixedWithNoTrailingZeros, unsignedMod} from '../util'
+
+interface Props {
+	modelValue: number
+	min?: number
+	max?: number
+	clampMin?: boolean
+	clampMax?: boolean
+	invalid?: boolean
+	disabled?: boolean
+	maxSpeed?: number
+	minSpeed?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	min: Number.MIN_SAFE_INTEGER,
+	max: Number.MAX_SAFE_INTEGER,
+	clampMin: true,
+	clampMax: true,
+	maxSpeed: 1000,
+	minSpeed: 0.001,
+})
+
+const emit = defineEmits<{
+	'update:modelValue': [number]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+
+const local = ref(props.modelValue)
+const display = ref(props.modelValue.toString())
+
+const {left, top, width, height, right} = useElementBounding(root)
+
+const alt = useKeyModifier('Alt')
+const shift = useKeyModifier('Shift')
+
+const hasRange = computed(() => {
+	return (
+		props.min !== Number.MIN_SAFE_INTEGER &&
+		props.max !== Number.MAX_SAFE_INTEGER
+	)
+})
+
+const validMin = computed(() =>
+	props.clampMin ? props.min : Number.MIN_SAFE_INTEGER
+)
+const validMax = computed(() =>
+	props.clampMax ? props.max : Number.MAX_SAFE_INTEGER
+)
+
+const speedMultiplierKey = computed(() => {
+	return (alt.value ? 0.1 : 1) * (shift.value ? 10 : 1)
+})
+const speedMultiplierGesture = ref(1)
+const speed = computed(() => {
+	return speedMultiplierKey.value * speedMultiplierGesture.value
+})
+
+const getDisplayPrecision = () => {
+	const floats = /\.[0-9]*$/.exec(display.value)
+	return floats ? floats[0].length - 1 : 0
+}
+const displayPrecision = ref(0)
+
+const tweakPrecision = computed(() => {
+	const prec = Math.max(0, Math.ceil(-Math.log10(speed.value)))
+	return Math.max(prec, displayPrecision.value)
+})
+const tweakInitialValue = ref(props.modelValue)
+
+const tweakDirection = ref(0)
+const pointerSize = ref(0)
+
+let resetTweakModeTimer: NodeJS.Timeout
+const tweakMode = ref<null | 'value' | 'speed'>(null)
+
+const {dragging: tweaking, pointerLocked} = useDrag(root, {
+	lockPointer: true,
+	disabled: computed(() => props.disabled || useFocus(input).focused.value),
+	onClick() {
+		input.value?.focus()
+	},
+	onDragStart(state, event) {
+		const isTipDragged = (event.target as Element).classList.contains('tip')
+		const insideRange = props.min <= local.value && local.value <= props.max
+		if (hasRange.value && insideRange && !isTipDragged) {
+			// Absolute mode
+			local.value = scalar.efit(
+				state.xy[0],
+				left.value,
+				right.value,
+				props.min,
+				props.max
+			)
+			emit('update:modelValue', local.value)
+		}
+
+		tweakMode.value = null
+		tweakInitialValue.value = props.modelValue
+		speedMultiplierGesture.value = 1
+		displayPrecision.value = getDisplayPrecision()
+	},
+	onDrag(state, event) {
+		const [dx, dy] = state.delta
+
+		const isMouse = event.pointerType === 'mouse' || event.pointerType === 'pen'
+
+		tweakDirection.value = dx
+		pointerSize.value =
+			event.width *
+			0.75 *
+			scalar.smoothstep(
+				(event.width * 0.7) / 2,
+				(event.width * 0.5) / 2,
+				Math.abs(state.xy[1] - (top.value + height.value / 2))
+			)
+
+		if (state.pointerLocked) {
+			scaleOffset.value = 0
+		} else {
+			scaleOffset.value = state.xy[0] - (left.value + width.value / 2)
+		}
+
+		if (!tweakMode.value) {
+			if (isMouse) {
+				tweakMode.value = Math.abs(dx) >= Math.abs(dy) ? 'value' : 'speed'
+			} else {
+				tweakMode.value = 'value'
+			}
+		}
+
+		if (tweakMode.value === 'value') {
+			const baseSpeed = hasRange.value
+				? (props.max - props.min) / width.value
+				: 1
+
+			local.value = props.modelValue + dx * baseSpeed * speed.value
+			local.value = scalar.clamp(local.value, validMin.value, validMax.value)
+			emit('update:modelValue', local.value)
+		} else {
+			speedMultiplierGesture.value = scalar.clamp(
+				speedMultiplierGesture.value * Math.pow(0.98, dy),
+				props.minSpeed,
+				props.maxSpeed
+			)
+		}
+
+		if (isMouse) {
+			clearTimeout(resetTweakModeTimer)
+			resetTweakModeTimer = setTimeout(() => (tweakMode.value = null), 250)
+		}
+	},
+	onDragEnd() {
+		display.value = toFixedWithNoTrailingZeros(
+			props.modelValue,
+			tweakPrecision.value
+		)
+		tweakMode.value = null
+		speedMultiplierGesture.value = 1
+	},
+})
+
+useWheel(
+	({delta: [, y], event}: {delta: Vec2; event: WheelEvent}) => {
+		event.preventDefault()
+
+		local.value = props.modelValue + y * speedMultiplierGesture.value
+		local.value = scalar.clamp(local.value, validMin.value, validMax.value)
+		display.value = props.modelValue.toFixed(tweakPrecision.value)
+
+		emit('update:modelValue', local.value)
+	},
+	{domTarget: root, eventOptions: {passive: false}}
+)
+
+let hasChanged = false
+let initialDisplay = ''
+
+const onFocus = (e: FocusEvent) => {
+	const el = e.target as HTMLInputElement
+	el.select()
+	hasChanged = false
+	initialDisplay = display.value
+}
+
+const onInput = (e: Event) => {
+	const el = e.target as HTMLInputElement
+
+	display.value = el.value
+
+	const value = parseFloat(el.value)
+	if (isNaN(value)) return
+
+	local.value = scalar.clamp(value, validMin.value, validMax.value)
+	hasChanged = true
+
+	emit('update:modelValue', local.value)
+}
+
+const increment = (delta: number) => {
+	const prec = Math.max(
+		getDisplayPrecision(),
+		-Math.log10(speedMultiplierKey.value)
+	)
+	local.value += delta * speedMultiplierKey.value
+	local.value = scalar.clamp(local.value, validMin.value, validMax.value)
+	display.value = toFixedWithNoTrailingZeros(local.value, prec)
+	hasChanged = true
+	emit('update:modelValue', local.value)
+}
+
+const onBlur = () => {
+	if (hasChanged) {
+		display.value = props.modelValue.toString()
+	} else {
+		// 変な文字を打ったときはhasChanged === falseなので、これでリセットをかける
+		display.value = initialDisplay
+	}
+}
+
+watchEffect(() => {
+	if (tweaking.value) {
+		display.value = props.modelValue.toFixed(tweakPrecision.value)
+	}
+})
+
+const scaleOffset = ref(0)
+
+const scaleAttrs = (offset: number) => {
+	const precision = unsignedMod(
+		-Math.log10(speedMultiplierGesture.value) + offset,
+		3
+	)
+	const halfWidth = (width.value + height.value * 20) / 2
+
+	const opacity = scalar.smoothstep(1, 2, precision)
+
+	return {
+		x1: -halfWidth,
+		x2: halfWidth,
+		style: {
+			strokeDashoffset: -halfWidth,
+			strokeDasharray: `0 ${Math.pow(10, precision)}`,
+			opacity,
+		},
+	}
+}
+
+const cursorStyle = computed(() => {
+	return {
+		transform: `translateX(${scaleOffset.value}px)`,
+		width: `${pointerSize.value}px`,
+		marginLeft: `${pointerSize.value / -2}px`,
+		opacity: scalar.smoothstep(
+			width.value * 0.5,
+			width.value * 0.6,
+			Math.abs(scaleOffset.value)
+		),
+	}
+})
+
+// For iPad. Swiping with second finger to change the drag speed
+window.addEventListener('touchstart', (e: TouchEvent) => {
+	if (!tweaking.value) return
+
+	const secondTouch = e.touches.item(1)
+	if (!secondTouch) return
+
+	const ox = secondTouch.clientX
+	const initialSpeedMultiplierGesture = speedMultiplierGesture.value
+
+	const stop = watch(tweaking, () => {
+		window.removeEventListener('touchmove', onSecondTouchMove)
+		window.removeEventListener('touchend', onSecondTouchEnd)
+		stop()
+	})
+
+	window.addEventListener('touchmove', onSecondTouchMove)
+	window.addEventListener('touchend', onSecondTouchEnd)
+
+	function onSecondTouchMove(e: TouchEvent) {
+		const firstTouch = e.touches.item(0)
+		const secondTouch = e.touches.item(1)
+		if (!firstTouch || !secondTouch) return
+
+		const cx = firstTouch.clientX
+		const x = secondTouch.clientX
+
+		tweakMode.value = 'speed'
+
+		const mul = Math.abs((ox - cx) / (x - cx))
+		speedMultiplierGesture.value = scalar.clamp(
+			initialSpeedMultiplierGesture * mul,
+			props.minSpeed,
+			props.maxSpeed
+		)
+	}
+
+	function onSecondTouchEnd() {
+		if (!e.touches.item(1)) return
+
+		tweakMode.value = 'value'
+
+		window.removeEventListener('touchmove', onSecondTouchMove)
+		window.removeEventListener('touchend', onSecondTouchEnd)
+	}
+})
+</script>
+
+<template>
+	<div ref="root" class="InputNumber" :class="{tweaking}" v-bind="$attrs">
+		<div
+			v-if="hasRange"
+			class="bar"
+			:style="{width: scalar.invlerp(min, max, modelValue) * 100 + '%'}"
+		>
+			<div class="tip"></div>
+		</div>
+
+		<input
+			ref="input"
+			class="input"
+			type="text"
+			min="0"
+			inputmode="numeric"
+			pattern="d*"
+			:value="display"
+			:invalid="invalid"
+			:disabled="disabled"
+			@focus="onFocus"
+			@input="onInput"
+			@blur="onBlur"
+			@keydown.up.prevent="increment(1)"
+			@keydown.down.prevent="increment(-1)"
+		/>
+		<div
+			v-if="tweaking"
+			class="cursor"
+			:class="{floating: !pointerLocked}"
+			:style="cursorStyle"
+		>
+			<!-- <IconDec
+				class="dec"
+				:class="{active: tweakMode === 'value' && tweakDirection < 0}"
+				:size="height"
+			></IconDec>
+			<IconInc
+				class="inc"
+				:class="{active: tweakMode === 'value' && tweakDirection > 0}"
+				:size="height"
+			></IconInc> -->
+		</div>
+	</div>
+	<teleport to="body">
+		<svg v-if="tweaking || true" class="InputNumber__overlay">
+			<g
+				:transform="`translate(${left + width / 2 + scaleOffset}, ${
+					top + height / 2
+				})`"
+			>
+				<g v-if="tweakMode === 'speed'">
+					<line class="scale" v-bind="scaleAttrs(0)"></line>
+					<line class="scale" v-bind="scaleAttrs(1)"></line>
+					<line class="scale" v-bind="scaleAttrs(2)"></line>
+				</g>
+			</g>
+		</svg>
+	</teleport>
+</template>
+
+<style lang="stylus">
+@import '../common.styl'
+
+.InputNumber
+	input-base()
+
+	input
+		position relative
+		text-align center
+		font-numeric()
+		pointer-events none
+
+.bar
+	top 0
+	left 0
+	position absolute
+	height 100%
+	hover-transition(background)
+	background var(--tq-color-primary-container)
+
+.tip
+	position absolute
+	height 100%
+	width 2px
+	right -1px
+	background var(--tq-color-inverse-primary)
+	hover-transition(opacity)
+
+	&:before
+		content ''
+		position absolute
+		display block
+		height 100%
+		left calc(var(--tq-input-height) / -2)
+		right @left
+
+	.tweaking &, &:hover
+		background var(--tq-color-primary)
+
+.InputNumber:hover, .InputNumber:focus-within
+	.bar
+		background var(--tq-color-inverse-primary)
+</style>
+
+<style lang="stylus">
+.InputNumber__overlay
+	position fixed
+	overflow visible
+	pointer-events none
+	width 100%
+	height: 100%
+	inset 0
+	z-index 200
+
+	.scale
+		fill none
+		stroke-width 4
+		stroke-linecap round
+		stroke var(--tq-color-primary)
+
+	.pointer
+		fill var(--tq-color-primary)
+</style>
diff --git a/src/tweeq/InputNumber/index.ts b/src/tweeq/InputNumber/index.ts
new file mode 100644
index 0000000..6f86598
--- /dev/null
+++ b/src/tweeq/InputNumber/index.ts
@@ -0,0 +1,2 @@
+import InputNumber from './InputNumber.vue'
+export default InputNumber
diff --git a/src/tweeq/common.styl b/src/tweeq/common.styl
index 6acf58e..92e80c7 100644
--- a/src/tweeq/common.styl
+++ b/src/tweeq/common.styl
@@ -19,6 +19,7 @@ hover-transition(prop = all)
 	transition unquote(join(',', values))
 
 input-base()
+	position relative
 	padding 4px 12px
 	width 188px
 	height var(--tq-input-height)
@@ -27,11 +28,13 @@ input-base()
 	color var(--tq-color-on-input)
 	font-size 12px
 	hover-transition()
+	overflow hidden
 
 	&:hover
 		background-color var(--tq-color-input-hover)
 
-	&:focus-within
+	&:focus-within, &.tweaking
+		z-index 1
 		background var(--tq-color-primary-container)
 		box-shadow 0 0 0 1px var(--tq-color-primary)
 
@@ -40,6 +43,12 @@ input-base()
 		--tq-color-primary var(--tq-color-error)
 		--tq-color-primary-container var(--tq-color-error-container)
 
-	input::selection
-		background var(--tq-color-primary)
-		color var(--tq-color-on-primary)
+	input
+		width 100%
+
+		&::selection
+			background transparent
+
+		&:focus::selection
+			background var(--tq-color-primary)
+			color var(--tq-color-on-primary)
diff --git a/src/tweeq/useDrag.ts b/src/tweeq/useDrag.ts
new file mode 100644
index 0000000..8ac39f2
--- /dev/null
+++ b/src/tweeq/useDrag.ts
@@ -0,0 +1,152 @@
+import {unrefElement} from '@vueuse/core'
+import {Vec2, vec2} from 'linearly'
+import {reactive, Ref, toRefs, watch} from 'vue'
+
+interface DragState {
+	xy: Vec2
+	previous: Vec2
+	initial: Vec2
+	delta: Vec2
+	dragging: boolean
+	pointerLocked: boolean
+}
+
+type PointerType = 'mouse' | 'pen' | 'touch'
+
+interface UseDragOptions {
+	disabled?: Ref<boolean>
+	lockPointer?: boolean
+	pointerType?: PointerType[]
+	dragDelaySeconds?: number
+
+	onClick?: () => void
+	onDrag?: (state: DragState, event: PointerEvent) => void
+	onDragStart?: (state: DragState, event: PointerEvent) => void
+	onDragEnd?: (state: DragState, event: PointerEvent) => void
+}
+
+export function useDrag(
+	target: Ref<null | HTMLElement>,
+	{
+		disabled,
+		lockPointer = false,
+		pointerType = ['mouse', 'pen', 'touch'],
+		dragDelaySeconds = 0.5,
+		onClick,
+		onDrag,
+		onDragStart,
+		onDragEnd,
+	}: UseDragOptions = {}
+) {
+	const state = reactive<Omit<DragState, 'event'>>({
+		// All coordinates are relative to the viewport
+		xy: vec2.zero,
+		previous: vec2.zero,
+		initial: vec2.zero,
+		delta: vec2.zero,
+
+		dragging: false,
+		pointerLocked: false,
+	})
+
+	let dragDelayTimer = -1
+
+	function setup(el: HTMLElement) {
+		el.addEventListener('pointerdown', onPointerDown)
+
+		function fireDragStart(event: PointerEvent) {
+			if (lockPointer && 'requestPointerLock' in el) {
+				el.requestPointerLock()
+				state.pointerLocked = true
+			} else {
+				state.pointerLocked = false
+			}
+
+			state.dragging = true
+			state.initial = state.previous
+			onDragStart?.(state, event)
+		}
+
+		function onPointerDown(event: PointerEvent) {
+			if (disabled?.value) return
+			if (event.button === 2) return // Ignore right click
+			if (!event.isPrimary) return
+			if (!pointerType.includes(event.pointerType as PointerType)) return
+
+			// Initialzize pointer position
+			state.xy = state.previous = state.initial = [event.clientX, event.clientY]
+
+			dragDelayTimer = setTimeout(fireDragStart, dragDelaySeconds * 1000)
+
+			el.setPointerCapture(event.pointerId)
+
+			window.addEventListener('pointermove', onPointerMove)
+			window.addEventListener('pointerup', onPointerUp)
+		}
+
+		function onPointerMove(event: PointerEvent) {
+			if (disabled?.value) return
+			if (!event.isPrimary) return
+
+			if (event.movementX !== undefined && event.movementY !== undefined) {
+				const movement: Vec2 = [event.movementX, event.movementY]
+				state.xy = vec2.add(state.xy, movement)
+			} else {
+				state.xy = [event.clientX, event.clientY]
+			}
+
+			state.delta = vec2.sub(state.xy, state.previous)
+
+			if (vec2.squaredLength(state.delta) === 0) return
+
+			if (state.dragging) {
+				onDrag?.(state, event)
+			} else {
+				// Determine whether dragging has started
+				const d = vec2.dist(state.initial, state.xy)
+				const minDragDistance = event.pointerType === 'mouse' ? 3 : 7
+				if (d >= minDragDistance) {
+					fireDragStart(event)
+					clearTimeout(dragDelayTimer)
+				}
+			}
+
+			state.previous = vec2.clone(state.xy)
+		}
+
+		function onPointerUp(event: PointerEvent) {
+			if (disabled?.value) return
+			if (!event.isPrimary) return
+
+			if (lockPointer && 'exitPointerLock' in document) {
+				document.exitPointerLock()
+			}
+			state.pointerLocked = false
+
+			if (state.dragging) {
+				onDragEnd?.(state, event)
+			} else {
+				onClick?.()
+			}
+
+			// Reset
+			clearTimeout(dragDelayTimer)
+			state.dragging = false
+			state.xy = state.initial = state.delta = vec2.zero
+			window.removeEventListener('pointermove', onPointerMove)
+			window.removeEventListener('pointerup', onPointerUp)
+		}
+	}
+
+	// Hooks
+	watch(
+		target,
+		() => {
+			const el = unrefElement(target)
+			if (el) setup(el)
+		},
+		{immediate: true, flush: 'post'}
+	)
+
+	return toRefs(state)
+}
diff --git a/src/tweeq/useTheme.ts b/src/tweeq/useTheme.ts
index 2bb0d24..6ec2a43 100644
--- a/src/tweeq/useTheme.ts
+++ b/src/tweeq/useTheme.ts
@@ -101,7 +101,7 @@ export function provideTheme(
 				colorShadow: toColor(colors.shadow),
 				colorInput: toColor(materialTheme.palettes.neutral.tone(97)),
 				colorInputHover: toColor(
-					materialTheme.palettes.neutralVariant.tone(90)
+					materialTheme.palettes.neutralVariant.tone(95)
 				),
 				colorOnInput: toColor(colors.onBackground),
 				colorError: toColor(colors.error),
diff --git a/src/tweeq/util.ts b/src/tweeq/util.ts
new file mode 100644
index 0000000..ee48560
--- /dev/null
+++ b/src/tweeq/util.ts
@@ -0,0 +1,7 @@
+export function toFixedWithNoTrailingZeros(value: number, precision: number) {
+	return value
+		.toFixed(precision)
+		.replace(/\.(.*?)[0]+$/, '.$1')
+		.replace(/\.$/, '')
+}
+export const unsignedMod = (x: number, y: number) => ((x % y) + y) % y