@widgetic/editor 4.0.4 → 4.0.5

package/dist/components/WidgetPreview.svelte

@@ -63,6 +63,11 @@
 	export let enableDrag: boolean = false;
 	/** W×H number inputs in the chrome header, live-synced with resize. */
 	export let showDimensionInputs: boolean = false;
+	/**
+	 * concentric — always resize from center (widget-creator / Canvas).
+	 * corner — opposite corner fixed; hold Alt for concentric (composition page).
+	 */
+	export let resizeMode: 'concentric' | 'corner' = 'concentric';
 	/** Initial / reset placement inside the stage. */
 	export let defaultStageAlign: 'center' | 'right-half' = 'center';
 	/** Observe stage size and fill it (desktop modal) */
@@ -102,7 +107,8 @@
 	const PREVIEW_STROKE_ALT = '#f97316';
 	let isResizing = false;
 	let isDraggingPreview = false;
-	let isSymmetricalResize = false;
+	/** Alt held — keeps orange stroke on composition even after pointerup. */
+	let isAltKeyDown = false;
 	let previewShellLeft = 0;
 	let previewShellTop = 0;
 	let previewPositionReady = false;
@@ -116,7 +122,8 @@
 	$: chromeHeaderHeight = showPreviewChrome ? PREVIEW_CHROME_HEADER_H : 0;
 	$: if (resizeWidth != null) widthInputValue = String(Math.round(resizeWidth));
 	$: if (resizeHeight != null) heightInputValue = String(Math.round(resizeHeight));
-	$: previewStrokeColor = isSymmetricalResize ? PREVIEW_STROKE_ALT : PREVIEW_STROKE;
+	$: showSymmetricalStroke = resizeMode === 'corner' && isAltKeyDown;
+	$: previewStrokeColor = showSymmetricalStroke ? PREVIEW_STROKE_ALT : PREVIEW_STROKE;
 
 	export function getResizeLimits(): { maxWidth: number; maxHeight: number } {
 		const stageEl = resizeStageEl ?? contentContainerEl;
@@ -612,7 +619,7 @@
 		event.preventDefault();
 		event.stopPropagation();
 		isResizing = true;
-		isSymmetricalResize = event.altKey;
+		if (event.altKey) isAltKeyDown = true;
 		const startX = event.clientX;
 		const startY = event.clientY;
 		const startLeft = previewShellLeft;
@@ -620,14 +627,15 @@
 		const { maxWidth, maxHeight } = getResizeLimits();
 		const startWidth = resizeWidth ?? maxWidth;
 		const startHeight = resizeHeight ?? maxHeight;
+		const alwaysConcentric = resizeMode === 'concentric';
 
 		function onPointerMove(e: PointerEvent) {
-			const useAlt = e.altKey;
-			isSymmetricalResize = useAlt;
+			if (e.altKey) isAltKeyDown = true;
+			const useConcentric = alwaysConcentric || isAltKeyDown || e.altKey;
 			const dx = e.clientX - startX;
 			const dy = e.clientY - startY;
 
-			if (useAlt) {
+			if (useConcentric) {
 				const deltaW = signX !== 0 ? dx * signX * 2 : 0;
 				const deltaH = signY !== 0 ? dy * signY * 2 : 0;
 				const nextW = clampDimension(startWidth + deltaW, MIN_WIDTH, maxWidth);
@@ -669,7 +677,7 @@
 
 		function endResize() {
 			isResizing = false;
-			isSymmetricalResize = false;
+			// Keep orange stroke while Alt remains held (composition corner mode).
 			document.removeEventListener('pointermove', onPointerMove);
 			document.removeEventListener('pointerup', endResize);
 			document.removeEventListener('pointercancel', endResize);
@@ -711,16 +719,25 @@
 	onMount(() => {
 		window.addEventListener('message', handleMessage);
 		const onAltDown = (e: KeyboardEvent) => {
-			if (e.key === 'Alt') isSymmetricalResize = true;
+			if (e.key === 'Alt' || e.code === 'AltLeft' || e.code === 'AltRight') {
+				isAltKeyDown = true;
+			}
 		};
 		const onAltUp = (e: KeyboardEvent) => {
-			if (e.key === 'Alt' && !isResizing) isSymmetricalResize = false;
+			if (e.key === 'Alt' || e.code === 'AltLeft' || e.code === 'AltRight') {
+				isAltKeyDown = false;
+			}
+		};
+		const onWindowBlur = () => {
+			isAltKeyDown = false;
 		};
 		window.addEventListener('keydown', onAltDown);
 		window.addEventListener('keyup', onAltUp);
+		window.addEventListener('blur', onWindowBlur);
 		return () => {
 			window.removeEventListener('keydown', onAltDown);
 			window.removeEventListener('keyup', onAltUp);
+			window.removeEventListener('blur', onWindowBlur);
 		};
 	});
 
@@ -839,7 +856,7 @@
 			>
 			<div
 				class="preview-iframe-shell relative flex flex-col {enableResize ? 'preview-iframe-shell-positioned' : ''}"
-				class:preview-iframe-shell-symmetrical={isSymmetricalResize}
+				class:preview-iframe-shell-symmetrical={showSymmetricalStroke}
 				style="{enableResize
 					? `position: absolute; left: ${previewShellLeft}px; top: ${previewShellTop}px; width: ${resizeWidth ? resizeWidth + 'px' : '100%'};`
 					: `width: ${resizeWidth ? resizeWidth + 'px' : '100%'}; height: ${resizeHeight ? resizeHeight + 'px' : '100%'};`} transition: {isResizing || isDraggingPreview ? 'none' : 'width 0.2s, height 0.2s, left 0.15s, top 0.15s'};"
@@ -904,14 +921,6 @@
 					<div class="preview-resize-handle preview-resize-handle-bl" onpointerdown={(e) => startResize(e, -1, 1)}></div>
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-t" onpointerdown={(e) => startResize(e, 0, -1)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-r" onpointerdown={(e) => startResize(e, 1, 0)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-b" onpointerdown={(e) => startResize(e, 0, 1)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-l" onpointerdown={(e) => startResize(e, -1, 0)}></div>
 				{/if}
 
 				{#if (resizeWidth || resizeHeight) && !showDimensionInputs}
@@ -1090,10 +1099,6 @@
 	.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
 	.preview-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
 	.preview-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }
-	.preview-resize-handle-t { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
-	.preview-resize-handle-b { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
-	.preview-resize-handle-l { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
-	.preview-resize-handle-r { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
 
 	.preview-resize-handle:hover {
 		background: #eff6ff;

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

@@ -45,6 +45,10 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
     enableResize?: boolean;
     /** Drag only via the preview chrome header (keeps iframe interactive). */ enableDrag?: boolean;
     /** W×H number inputs in the chrome header, live-synced with resize. */ showDimensionInputs?: boolean;
+    /**
+         * concentric — always resize from center (widget-creator / Canvas).
+         * corner — opposite corner fixed; hold Alt for concentric (composition page).
+         */ resizeMode?: "concentric" | "corner";
     /** Initial / reset placement inside the stage. */ defaultStageAlign?: "center" | "right-half";
     /** Observe stage size and fill it (desktop modal) */ autoFitStage?: boolean;
     /** No padding/border on preview-content-container — matches widget-creator Edit panel */ compactChrome?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.0.4",
+	"version": "4.0.5",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",