@widgetic/creator 0.3.54 → 0.3.56

package/dist/components/EditableName.svelte

@@ -1,45 +1,119 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { Tooltip } from '@widgetic/canvas/components';
+	import HoverTooltip from './HoverTooltip.svelte';
 
 	export let name: string = '';
 	export let placeholder: string = 'Unnamed';
 	export let tooltipText: string = 'Double-click to rename';
-	export let tooltipPosition: 'above' | 'below' | 'left' | 'right' = 'above';
 	let className = '';
 	export { className as class };
 	export let style = '';
 
 	const dispatch = createEventDispatcher();
 
+	const NAME_DRAG_SLOP_PX = 5;
+	const NAME_DBLCLICK_MS = 450;
+
 	let isEditing = false;
 	let inputValue = '';
+	let nameInputEl: HTMLInputElement | null = null;
+	let namePointerStartX = 0;
+	let namePointerStartY = 0;
+	let namePointerMoved = false;
+	let lastNameClickAt = 0;
+	let lastNameClickX = 0;
+	let lastNameClickY = 0;
+
+	$: nameDisplayText = isEditing ? inputValue : (name || placeholder);
 
-	function startEditing() {
+	function openEditMode() {
 		isEditing = true;
 		inputValue = name || '';
 	}
 
-	function cancelEditing() {
+	function clearNameSelection() {
+		requestAnimationFrame(() => {
+			if (nameInputEl) {
+				const caret = nameInputEl.value.length;
+				try {
+					nameInputEl.setSelectionRange(caret, caret);
+				} catch {
+					/* ignore */
+				}
+				nameInputEl.blur();
+			}
+			window.getSelection()?.removeAllRanges();
+		});
+	}
+
+	function closeEditMode() {
+		if (!isEditing) {
+			clearNameSelection();
+			return;
+		}
+		const trimmed = inputValue.trim();
 		isEditing = false;
+
+		if (trimmed && trimmed !== name) {
+			dispatch('rename', { newName: trimmed });
+		}
 		inputValue = '';
+		clearNameSelection();
 	}
 
-	function commitEdit() {
+	function cancelEditing() {
 		if (!isEditing) return;
-		const trimmed = inputValue.trim();
 		isEditing = false;
+		inputValue = '';
+		clearNameSelection();
+	}
 
-		if (!trimmed || trimmed === name) {
-			inputValue = '';
+	function toggleEditing(e: MouseEvent) {
+		e.stopPropagation();
+		if (isEditing) {
+			closeEditMode();
 			return;
 		}
+		openEditMode();
+	}
 
-		dispatch('rename', { newName: trimmed });
-		inputValue = '';
+	function onNamePointerDown(e: PointerEvent) {
+		if (isEditing) {
+			e.stopPropagation();
+			return;
+		}
+		namePointerMoved = false;
+		namePointerStartX = e.clientX;
+		namePointerStartY = e.clientY;
+	}
+
+	function onNamePointerMove(e: PointerEvent) {
+		if (isEditing || namePointerMoved) return;
+		if (Math.hypot(e.clientX - namePointerStartX, e.clientY - namePointerStartY) > NAME_DRAG_SLOP_PX) {
+			namePointerMoved = true;
+		}
+	}
+
+	function onNamePointerUp(e: PointerEvent) {
+		if (isEditing) return;
+		if (namePointerMoved) {
+			lastNameClickAt = 0;
+			return;
+		}
+		const now = Date.now();
+		const dist = Math.hypot(e.clientX - lastNameClickX, e.clientY - lastNameClickY);
+		if (now - lastNameClickAt <= NAME_DBLCLICK_MS && dist <= 10) {
+			lastNameClickAt = 0;
+			openEditMode();
+			return;
+		}
+		lastNameClickAt = now;
+		lastNameClickX = e.clientX;
+		lastNameClickY = e.clientY;
 	}
 
 	function focusAndSelect(node: HTMLInputElement, editing: boolean) {
+		nameInputEl = node;
 		function apply(shouldEdit: boolean) {
 			if (shouldEdit) {
 				requestAnimationFrame(() => {
@@ -58,37 +132,76 @@
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<Tooltip text={isEditing ? '' : tooltipText} position={tooltipPosition}>
+<HoverTooltip text={isEditing ? '' : tooltipText} class="min-w-0 w-max max-w-full" {style}>
 <div
-	class="editable-name-ct flex items-center gap-1 min-w-0 {className}"
-	{style}
-	ondblclick={() => startEditing()}
+	class="editable-name-ct flex items-center w-max max-w-full min-w-0 {isEditing ? 'gap-0.5' : 'gap-0'} {className}"
+	onpointerdown={onNamePointerDown}
+	onpointermove={onNamePointerMove}
+	onpointerup={onNamePointerUp}
+	onpointercancel={() => { namePointerMoved = true; }}
 >
-	<input
-		class="editable-name-input min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap font-semibold rounded px-1 py-0.5 text-sm outline-none transition-colors {isEditing ? 'border border-blue-400 bg-white focus:ring-1 focus:ring-blue-500' : 'border border-transparent bg-transparent cursor-default'}"
-		style="flex: 1 1 0%; {!isEditing ? 'pointer-events: none;' : ''}"
-		type="text"
-		value={isEditing ? inputValue : (name || placeholder)}
-		readonly={!isEditing}
-		tabindex={isEditing ? 0 : -1}
-		use:focusAndSelect={isEditing}
-		oninput={(e) => { if (isEditing) inputValue = e.currentTarget.value; }}
-		onkeydown={(e) => {
-			if (!isEditing) return;
-			e.stopPropagation();
-			if (e.key === 'Enter') commitEdit();
-			if (e.key === 'Escape') cancelEditing();
-		}}
-		onblur={() => { if (isEditing) commitEdit(); }}
-	/>
-	{#if !isEditing}
-		<span class="editable-name-pencil flex-shrink-0 text-gray-400 opacity-0 text-xs cursor-pointer transition-opacity">✏️</span>
-	{/if}
+	<div class="editable-name-input-wrap relative min-w-0 max-w-full">
+		<span class="editable-name-sizer" aria-hidden="true">{nameDisplayText}</span>
+		<input
+			class="editable-name-input absolute inset-0 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-semibold rounded text-sm outline-none transition-colors {isEditing ? 'editable-name-input-editing border border-blue-400 bg-white focus:ring-1 focus:ring-blue-500' : 'editable-name-input-idle border border-transparent bg-transparent cursor-grab'}"
+			style="{!isEditing ? 'pointer-events: none;' : ''}"
+			type="text"
+			value={nameDisplayText}
+			readonly={!isEditing}
+			tabindex={isEditing ? 0 : -1}
+			use:focusAndSelect={isEditing}
+			oninput={(e) => { if (isEditing) inputValue = e.currentTarget.value; }}
+			onkeydown={(e) => {
+				if (!isEditing) return;
+				e.stopPropagation();
+				if (e.key === 'Enter') closeEditMode();
+				if (e.key === 'Escape') cancelEditing();
+			}}
+			onblur={() => { if (isEditing) closeEditMode(); }}
+		/>
+	</div>
+	<button
+		type="button"
+		class="editable-name-pencil w-4 h-4 shrink-0 text-gray-400 text-[16px] leading-none cursor-pointer transition-opacity flex items-center justify-center p-0 bg-transparent border-0 {isEditing ? 'opacity-100' : 'opacity-0'}"
+		aria-label={isEditing ? 'Save name' : 'Rename widget'}
+		onmousedown={(e) => { e.preventDefault(); e.stopPropagation(); }}
+		onpointerdown={(e) => e.stopPropagation()}
+		onclick={toggleEditing}
+	>✏️</button>
 </div>
-</Tooltip>
+</HoverTooltip>
 
 <style>
-	.editable-name-ct:hover .editable-name-pencil {
+	.editable-name-sizer {
+		display: block;
+		visibility: hidden;
+		white-space: nowrap;
+		font: inherit;
+		padding: 2px 0 2px 2px;
+	}
+	.editable-name-ct:focus-within .editable-name-sizer {
+		padding-right: 2px;
+	}
+	.editable-name-input {
+		width: 100%;
+		height: 100%;
+		padding: 2px 0 2px 2px;
+		margin: 0;
+		border-width: 1px;
+		box-sizing: border-box;
+	}
+	.editable-name-ct:hover .editable-name-pencil,
+	.editable-name-ct:focus-within .editable-name-pencil {
 		opacity: 1;
 	}
+	.editable-name-ct:hover .editable-name-input-idle {
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-underline-offset: 3px;
+	}
+	.editable-name-pencil:focus,
+	.editable-name-pencil:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
 </style>

package/dist/components/EditableName.svelte.d.ts

@@ -15,7 +15,6 @@ declare const EditableName: $$__sveltets_2_IsomorphicComponent<{
     name?: string;
     placeholder?: string;
     tooltipText?: string;
-    tooltipPosition?: "above" | "below" | "left" | "right";
     class?: string;
     style?: string;
 }, {

package/dist/components/HoverTooltip.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Portal } from '@widgetic/design-system/components';
+
+	export let text: string = '';
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	let triggerEl: HTMLElement | null = null;
+	let open = false;
+	let tipTop = 0;
+	let tipLeft = 0;
+	const portalTarget = `wc-hover-tooltip-${Math.random().toString(36).slice(2, 10)}`;
+
+	function place() {
+		if (!triggerEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		tipTop = rect.top - 8;
+		tipLeft = rect.left + rect.width / 2;
+	}
+
+	function show() {
+		if (!text) return;
+		place();
+		open = true;
+	}
+
+	function hide() {
+		open = false;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={triggerEl}
+	class="wc-hover-tooltip-trigger {className}"
+	{style}
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocusin={show}
+	onfocusout={hide}
+>
+	<slot />
+</div>
+
+{#if open && text}
+	<Portal target={portalTarget}>
+		<div
+			class="wc-hover-tooltip-bubble pointer-events-none fixed z-[99999] -translate-x-1/2 -translate-y-full rounded-md bg-[#1f2937] px-2.5 py-1 text-xs leading-snug text-[#f9fafb] whitespace-nowrap shadow-md"
+			style="top: {tipTop}px; left: {tipLeft}px;"
+			role="tooltip"
+		>
+			{text}
+			<span
+				class="wc-hover-tooltip-arrow absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 border-x-[5px] border-t-[5px] border-x-transparent border-t-[#1f2937]"
+				aria-hidden="true"
+			></span>
+		</div>
+	</Portal>
+{/if}

package/dist/components/HoverTooltip.svelte.d.ts

@@ -0,0 +1,31 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const HoverTooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    text?: string;
+    class?: string;
+    style?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type HoverTooltip = InstanceType<typeof HoverTooltip>;
+export default HoverTooltip;