CADmium

<script lang="ts">
	import { slide } from "svelte/transition"
	import { quintOut } from "svelte/easing"
	import { renameStep } from "shared/projectUtils"
	import { workbenchIsStale, featureIndex } from "shared/stores"
	import { base } from "../base"

	// prettier-ignore
	const log = (function () { const context = "[PointFeature.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()

	export let name: string, index: number

	const source = `${base}/actions/point_min_icon.svg`
	const closeAndRefresh = () => {
		log("closing, refreshing")
		workbenchIsStale.set(true)
		$featureIndex = 1000
	}
</script>

<div
	class="flex items-center text-sm hover:bg-sky-200"
	role="button"
	tabindex="0"
	on:dblclick={() => {
		if ($featureIndex === index) {
			closeAndRefresh()
		} else {
			$featureIndex = index
		}
	}}
>
	<img class="h-8 w-8 px-1" src={source} alt={name} />
	{name}
</div>

{#if $featureIndex === index}
	<div transition:slide={{ delay: 0, duration: 400, easing: quintOut, axis: "y" }}>
		<form
			on:submit|preventDefault={() => {
				closeAndRefresh()
			}}
			class="px-3 py-2 bg-gray-100 flex flex-col space-y-2"
			autocomplete="off"
		>
			<label>
				Name
				<input
					autocomplete="off"
					data-1p-ignore
					class="shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight focus:border focus:border-sky-500"
					bind:value={name}
				/>
			</label>

			<div class="flex space-x-1.5">
				<button
					class="flex-grow bg-sky-500 hover:bg-sky-700 text-white font-bold py-1.5 px-1 shadow"
					on:click={() => {
						renameStep(index, name)
					}}>Done</button
				>

				<button
					class="bg-transparent hover:bg-sky-700 text-sky-500 font-semibold hover:text-white py-1.5 px-4 border border-sky-500 hover:border-transparent"
					>Cancel</button
				>
			</div>
		</form>
	</div>
{/if}