Update InputNumber

src/components/App.vue

@@ -20,15 +20,7 @@ import paper from 'paper'
 import PaperOffset from 'paperjs-offset'
 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'
-import {Tab, Tabs} from '@/tweeq/Tabs'
-import TitleBar from '@/tweeq/TitleBar'
+import Tq, {ErrorInfo, useTweeq} from '@/tweeq'
 import {useCommentMeta} from '@/use/useCommentMeta'
 import {useZUI} from '@/use/useZUI'
 import {replaceTextBetween} from '@/utils'
@@ -296,8 +288,7 @@ registerActions([
 			fileHandle.value = handles[0]
 
 			const file = await fileHandle.value.getFile()
-			const text = await file.text()
-			source.value = lastSavedSource.value = text
+			source.value = lastSavedSource.value = await file.text()
 		},
 	},
 	{
@@ -341,14 +332,14 @@ window.addEventListener('drop', async e => {
 	fileHandle.value = handle as FileSystemFileHandle
 
 	const file = await fileHandle.value.getFile()
-	source.value = await file.text()
+	source.value = lastSavedSource.value = await file.text()
 })
 </script>
 
 <template>
 	<div class="App">
 		<CommandPalette />
-		<TitleBar name="Paper.js Editor" class="title" icon="favicon.svg">
+		<Tq.TitleBar name="Paper.js Editor" class="title" icon="favicon.svg">
 			<template #left>
 				{{ title }}
 			</template>
@@ -357,7 +348,7 @@ window.addEventListener('drop', async e => {
 					{{ (zoom * 100).toFixed(0) + '%' }}
 				</button>
 			</template>
-		</TitleBar>
+		</Tq.TitleBar>
 		<main class="main">
 			<div ref="$canvasWrapper" class="canvas-wrapper">
 				<div class="canvas-grid" :style="canvasGridStyle" />
@@ -369,22 +360,22 @@ window.addEventListener('drop', async e => {
 				/>
 			</div>
 		</main>
-		<FloatingPane name="inspector-pane" icon="code">
-			<Tabs class="inspector-tab" name="inspector.tab">
+		<Tq.FloatingPane name="inspector-pane" icon="code">
+			<Tq.Tabs class="inspector-tab" name="inspector.tab">
 				<template #before-tablist>
-					<RoundButton
+					<Tq.RoundButton
 						class="play"
 						:icon="autoRefresh ? 'pause_circle' : 'play_circle'"
 						:label="autoRefresh ? 'Pause' : 'Resume'"
 						longest-label="Resume"
 						@click="autoRefresh = !autoRefresh"
 					/>
 				</template>
-				<Tab name="Settings">
-					<MonacoEditor v-model="meta" class="editor" lang="text" />
-				</Tab>
-				<Tab name="Code">
-					<MonacoEditor
+				<Tq.Tab name="Settings">
+					<Tq.MonacoEditor v-model="meta" class="editor" lang="text" />
+				</Tq.Tab>
+				<Tq.Tab name="Code">
+					<Tq.MonacoEditor
 						v-model="code"
 						v-model:cursorIndex="cursorIndex"
 						v-model:cursorPosition="cursorPosition"
@@ -404,17 +395,23 @@ window.addEventListener('drop', async e => {
 						v-model:cursorIndex="cursorIndex"
 						:cursor-position="cursorPosition"
 					/>
-				</Tab>
-			</Tabs>
-		</FloatingPane>
-		<FloatingPane
+				</Tq.Tab>
+			</Tq.Tabs>
+		</Tq.FloatingPane>
+		<Tq.FloatingPane
 			name="timeline"
 			icon="timeline"
 			:position="{anchor: 'bottom', height: 200}"
 		>
-			<InputString v-model="testString" />
-			<InputNumber v-model="testNumber" :min="0" :max="100" />
-		</FloatingPane>
+			<Tq.ParameterGrid>
+				<Tq.Parameter label="Distance">
+					<Tq.InputString v-model="testString" />
+				</Tq.Parameter>
+				<Tq.Parameter label="Grow">
+					<Tq.InputNumber v-model="testNumber" :min="0" :max="100" />
+				</Tq.Parameter>
+			</Tq.ParameterGrid>
+		</Tq.FloatingPane>
 	</div>
 </template>
 

src/tweeq/FloatingPane/FloatingPane.vue

@@ -231,7 +231,7 @@ onMounted(() => {
 	--br-bottom-left var(--tq-pane-border-radius)
 
 	position fixed
-	padding 1rem
+	padding 12px
 	border-width 1px
 	border-radius var(--br-top-left) var(--br-top-right) var(--br-bottom-right) var(--br-bottom-left)
 	display grid

src/tweeq/InputNumber/InputNumber.vue

@@ -5,7 +5,7 @@ import {scalar, Vec2} from 'linearly'
 import {computed, ref, watch, watchEffect} from 'vue'
 
 import {useDrag} from '../useDrag'
-import {toFixedWithNoTrailingZeros, unsignedMod} from '../util'
+import {toFixed, unsignedMod} from '../util'
 
 interface Props {
 	modelValue: number
@@ -15,17 +15,15 @@ interface Props {
 	clampMax?: boolean
 	invalid?: boolean
 	disabled?: boolean
-	maxSpeed?: number
-	minSpeed?: number
+	precision?: 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,
+	precision: 4,
 })
 
 const emit = defineEmits<{
@@ -149,8 +147,8 @@ const {dragging: tweaking, pointerLocked} = useDrag(root, {
 		} else {
 			speedMultiplierGesture.value = scalar.clamp(
 				speedMultiplierGesture.value * Math.pow(0.98, dy),
-				props.minSpeed,
-				props.maxSpeed
+				10 ** -props.precision,
+				1000
 			)
 		}
 
@@ -160,10 +158,7 @@ const {dragging: tweaking, pointerLocked} = useDrag(root, {
 		}
 	},
 	onDragEnd() {
-		display.value = toFixedWithNoTrailingZeros(
-			props.modelValue,
-			tweakPrecision.value
-		)
+		display.value = toFixed(props.modelValue, tweakPrecision.value)
 		tweakMode.value = null
 		speedMultiplierGesture.value = 1
 	},
@@ -213,14 +208,14 @@ const increment = (delta: number) => {
 	)
 	local.value += delta * speedMultiplierKey.value
 	local.value = scalar.clamp(local.value, validMin.value, validMax.value)
-	display.value = toFixedWithNoTrailingZeros(local.value, prec)
+	display.value = toFixed(local.value, prec)
 	hasChanged = true
 	emit('update:modelValue', local.value)
 }
 
 const onBlur = () => {
 	if (hasChanged) {
-		display.value = props.modelValue.toString()
+		display.value = toFixed(props.modelValue, props.precision)
 	} else {
 		// 変な文字を打ったときはhasChanged === falseなので、これでリセットをかける
 		display.value = initialDisplay
@@ -300,8 +295,8 @@ window.addEventListener('touchstart', (e: TouchEvent) => {
 		const mul = Math.abs((ox - cx) / (x - cx))
 		speedMultiplierGesture.value = scalar.clamp(
 			initialSpeedMultiplierGesture * mul,
-			props.minSpeed,
-			props.maxSpeed
+			10 ** -props.precision,
+			1000
 		)
 	}
 

src/tweeq/ParameterGrid/Parameter.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+	label: string
+}
+
+defineProps<Props>()
+</script>
+<template>
+	<li class="Parameter">
+		<label class="label">{{ label }}</label>
+		<div class="input">
+			<slot />
+		</div>
+	</li>
+</template>
+
+<style lang="stylus" scoped>
+@import '../common.styl'
+
+.Parameter
+	display grid
+	grid-column 1 / 3
+	grid-template-columns subgrid
+
+.label
+	line-height var(--tq-input-height)
+	color var(--md-sys-color-secondary)
+</style>

src/tweeq/ParameterGrid/ParameterGrid.vue

@@ -0,0 +1,13 @@
+<template>
+	<ul class="ParameterGrid">
+		<slot />
+	</ul>
+</template>
+
+<style lang="stylus" scoped>
+
+.ParameterGrid
+	display grid
+	grid-template-columns minmax(100px, max-content) 1fr
+	grid-gap 9px
+</style>

src/tweeq/ParameterGrid/index.ts

@@ -0,0 +1,3 @@
+import Parameter from './Parameter.vue'
+import ParameterGrid from './ParameterGrid.vue'
+export {ParameterGrid, Parameter}

src/tweeq/RoundButton/RoundButton.vue

@@ -25,9 +25,10 @@ defineProps<Props>()
 
 .RoundButton
 	height 32px
+	font-size 14px
 	border-radius 9999px
 	vertical-align middle
-	display inline-flex
+	display flex
 	justify-content center
 	align-items center
 	gap .4em
@@ -36,6 +37,7 @@ defineProps<Props>()
 	background var(--tq-color-primary-container)
 	color var(--md-sys-color-on-primary-container)
 	hover-transition(background, color)
+	line-height 32px
 
 	&:hover
 		background var(--tq-color-primary)

src/tweeq/Tabs/Tabs.vue

@@ -163,6 +163,7 @@ onMounted(() => {
 .tablist-item
 	line-height 2rem
 	padding 2px .4rem 0
+	font-size 14px
 	font-weight bold
 	border-bottom 3px solid transparent
 	hover-transition(border-bottom-color)

src/tweeq/common.styl

@@ -21,17 +21,17 @@ hover-transition(prop = all)
 input-base()
 	position relative
 	padding 4px 12px
-	width 188px
+	width 100%
 	height var(--tq-input-height)
 	border-radius var(--tq-input-border-radius)
-	background-color var(--tq-color-input)
+	background var(--tq-color-input)
 	color var(--tq-color-on-input)
-	font-size 12px
-	hover-transition()
+	font-size 1rem
+	hover-transition(background, box-shadow)
 	overflow hidden
 
 	&:hover
-		background-color var(--tq-color-input-hover)
+		background var(--tq-color-input-hover)
 
 	&:focus-within, &.tweaking
 		z-index 1
@@ -45,9 +45,10 @@ input-base()
 
 	input
 		width 100%
+		user-select none
 
 		&::selection
-			background transparent
+			color var(--tq-color-on-input)
 
 		&:focus::selection
 			background var(--tq-color-primary)

src/tweeq/global.styl

@@ -1,7 +1,11 @@
 @import '../../node_modules/reset-css/reset.css'
 
+::selection
+	background var(--tq-color-primary)
+	color var(--tq-color-on-primary)
+
 :root
-	font-size 13px
+	font-size 12px
 	font-family 'Inter'
 	font-synthesis none
 	-webkit-font-smoothing antialiased
@@ -35,3 +39,4 @@ body
 	height 100vh
 	background var(--tq-color-bg)
 	color var(--tq-color-text)
+	user-select none

src/tweeq/index.ts

@@ -1 +1,29 @@
 export {useTweeq} from './useTweeq'
+
+import ColorIcon from './ColorIcon'
+import CommandPalette from './CommandPalette'
+import FloatingPane from './FloatingPane'
+import InputNumber from './InputNumber'
+import InputString from './InputString'
+import MonacoEditor, {ErrorInfo} from './MonacoEditor'
+import {Parameter, ParameterGrid} from './ParameterGrid'
+import RoundButton from './RoundButton'
+import {Tab, Tabs} from './Tabs'
+import TitleBar from './TitleBar'
+
+export {type ErrorInfo}
+
+export default {
+	CommandPalette,
+	FloatingPane,
+	InputNumber,
+	InputString,
+	RoundButton,
+	Tab,
+	Tabs,
+	TitleBar,
+	MonacoEditor,
+	ColorIcon,
+	ParameterGrid,
+	Parameter,
+}

src/tweeq/util.ts

@@ -1,4 +1,4 @@
-export function toFixedWithNoTrailingZeros(value: number, precision: number) {
+export function toFixed(value: number, precision: number) {
 	return value
 		.toFixed(precision)
 		.replace(/\.(.*?)[0]+$/, '.$1')