windmill-components 1.79.0 → 1.82.0

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte

@@ -1,81 +1,31 @@
-<script>import { Button } from '../../../../common';
-import { Plus } from 'lucide-svelte';
-import { getContext } from 'svelte';
+<script>import Toggle from '../../../../Toggle.svelte';
+import Tooltip from '../../../../Tooltip.svelte';
 import TriggerBadgesList from './TriggerBadgesList.svelte';
 import { getDependencies } from './triggerListUtils';
 export let fields;
 export let autoRefresh = false;
 export let id;
 export let inlineScript;
-const { connectingInput } = getContext('AppViewerContext');
-let addingDependency = false;
-function applyConnection() {
-    if (!$connectingInput.opened && $connectingInput.input !== undefined && addingDependency) {
-        if ($connectingInput.input.connection) {
-            const x = {
-                id: $connectingInput.input.connection.componentId,
-                key: $connectingInput.input.connection.path
-            };
-            if (!inlineScript) {
-                return;
-            }
-            if (inlineScript.refreshOn?.find((y) => y.id === x.id && y.key === x.key)) {
-                return;
-            }
-            if (!inlineScript.refreshOn) {
-                inlineScript.refreshOn = [x];
-            }
-            else {
-                inlineScript.refreshOn.push(x);
-            }
-            inlineScript = JSON.parse(JSON.stringify(inlineScript));
-            addingDependency = false;
-        }
-        $connectingInput = {
-            opened: false,
-            input: undefined,
-            hoveredComponent: undefined
-        };
-    }
-}
-$: $connectingInput && applyConnection();
+export let doNotRecomputeOnInputChanged = false;
+$: dependencies = getDependencies(fields);
 </script>
 
+{#if inlineScript.language !== 'frontend'}
+	<div class="flex items-center px-1">
+		<Toggle
+			size="xs"
+			color="red"
+			bind:checked={doNotRecomputeOnInputChanged}
+			options={{ right: 'do NOT recompute on input changes' }}
+		/>
+		<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
+	</div>
+{/if}
+
 <TriggerBadgesList
+	bind:inlineScript
 	{id}
-	inputDependencies={getDependencies(fields)}
-	frontendDependencies={inlineScript?.language === 'frontend'
-		? inlineScript?.refreshOn?.map((x) => `${x.id} - ${x.key}`) ?? undefined
-		: undefined}
+	inputDependencies={dependencies}
 	onLoad={autoRefresh}
-	on:delete={(e) => {
-		const index = e.detail.index
-		if (inlineScript) {
-			inlineScript.refreshOn?.splice(index, 1)
-		}
-
-		inlineScript = JSON.parse(JSON.stringify(inlineScript))
-	}}
->
-	{#if inlineScript?.language === 'frontend'}
-		<Button
-			variant="border"
-			size="xs"
-			color="light"
-			btnClasses="!px-1 !py-0.5"
-			on:click={() => {
-				addingDependency = true
-				$connectingInput = {
-					opened: true,
-					input: undefined,
-					hoveredComponent: undefined
-				}
-			}}
-		>
-			<div class="flex flex-row gap-1 items-center">
-				Add dependency
-				<Plus size={14} />
-			</div>
-		</Button>
-	{/if}
-</TriggerBadgesList>
+	{doNotRecomputeOnInputChanged}
+/>

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         id: string;
         inlineScript: InlineScript;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -1,18 +1,24 @@
 <script>import { getContext } from 'svelte';
-import { findGridItem } from '../../appUtils';
 import TriggerBadgesList from './TriggerBadgesList.svelte';
 import { getDependencies } from './triggerListUtils';
-const { selectedComponent, app } = getContext('AppViewerContext');
+const { selectedComponent } = getContext('AppViewerContext');
 export let fields;
-$: gridItem = $selectedComponent ? findGridItem($app, $selectedComponent) : undefined;
-$: onClick =
-    gridItem?.data.type &&
-        ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(gridItem?.data.type);
+export let appComponent;
+export let runnable;
+export let doNotRecomputeOnInputChanged = false;
+const onClick = ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type);
+$: onLoad =
+    !onClick ||
+        (appComponent?.configuration?.triggerOnAppLoad != undefined &&
+            appComponent.configuration.triggerOnAppLoad.type == 'static' &&
+            appComponent.configuration.triggerOnAppLoad.value);
 </script>
 
 <TriggerBadgesList
-	inputDependencies={getDependencies(fields)}
-	onLoad={!onClick}
+	inputDependencies={onClick ? [] : getDependencies(fields)}
+	bind:inlineScript={runnable.inlineScript}
+	{onLoad}
+	{doNotRecomputeOnInputChanged}
 	id={$selectedComponent}
 	{onClick}
 />

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte.d.ts

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { ConnectedAppInput, RowAppInput, RunnableByName, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { AppComponent } from '../../component';
 declare const __propDef: {
     props: {
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        appComponent: AppComponent;
+        runnable: RunnableByName;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -1,12 +1,14 @@
-<script>import { classNames } from '../../../../../utils';
-import { X } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+<script>import { Button } from '../../../../common';
+import { classNames } from '../../../../../utils';
+import { Plus, X } from 'lucide-svelte';
+import { getContext } from 'svelte';
 import { getAllRecomputeIdsForComponent } from '../../appUtils';
 export let inputDependencies = [];
-export let frontendDependencies = undefined;
+export let inlineScript;
 export let onClick = false;
 export let onLoad = false;
 export let id = undefined;
+export let doNotRecomputeOnInputChanged = false;
 const colors = {
     red: 'text-red-800 border-red-600 bg-red-100',
     green: 'text-green-800 border-green-600 bg-green-100',
@@ -14,17 +16,52 @@ const colors = {
     blue: 'text-blue-800 border-blue-600 bg-blue-100'
 };
 let badgeClass = 'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border';
-const recomputedBadges = [];
-const { app, selectedComponent } = getContext('AppViewerContext');
-const dispatch = createEventDispatcher();
-$: if ($app && $selectedComponent && id) {
-    const recomputeIds = getAllRecomputeIdsForComponent($app, id);
-    if ($selectedComponent && recomputeIds) {
-        recomputeIds.forEach((x) => {
-            recomputedBadges.push(x);
-        });
+const { app, worldStore } = getContext('AppViewerContext');
+const { connectingInput } = getContext('AppViewerContext');
+let addingDependency = false;
+function applyConnection() {
+    if (!$connectingInput.opened && $connectingInput.input !== undefined && addingDependency) {
+        if ($connectingInput.input.connection) {
+            const x = {
+                id: $connectingInput.input.connection.componentId,
+                key: $connectingInput.input.connection.path
+            };
+            if (!inlineScript) {
+                return;
+            }
+            if (inlineScript.refreshOn?.find((y) => y.id === x.id && y.key === x.key)) {
+                return;
+            }
+            if (!inlineScript.refreshOn) {
+                inlineScript.refreshOn = [x];
+            }
+            else {
+                inlineScript.refreshOn.push(x);
+            }
+            inlineScript = JSON.parse(JSON.stringify(inlineScript));
+            addingDependency = false;
+        }
+        $connectingInput = {
+            opened: false,
+            input: undefined,
+            hoveredComponent: undefined
+        };
+        $app = $app;
+        $worldStore = $worldStore;
     }
 }
+$: frontendDependencies =
+    inlineScript?.language === 'frontend'
+        ? inlineScript?.refreshOn?.map((x) => `${x.id} - ${x.key}`) ?? []
+        : undefined;
+$: $connectingInput && applyConnection();
+$: recomputedBadges = getAllRecomputeIdsForComponent($app, id);
+function deleteDep(index) {
+    if (inlineScript) {
+        inlineScript.refreshOn?.splice(index, 1);
+    }
+    inlineScript = inlineScript;
+}
 </script>
 
 <div class="flex w-full flex-col items-start gap-2 mt-2 mb-1">
@@ -33,28 +70,29 @@ $: if ($app && $selectedComponent && id) {
 			This script has no triggers. It will never run.
 		</p>
 	{:else}
-		<div class="text-sm font-semibold text-slate-800 ">Triggered by</div>
+		<div class="text-sm font-semibold text-gray-800 ">Triggered by</div>
 
 		{#if onLoad || onClick}
 			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Event</div>
+				<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#if onLoad}
-						<span class={classNames(badgeClass, colors['green'])}>On load</span>
+						<span class={classNames(badgeClass, colors['green'])}>Start</span>
+						<span class={classNames(badgeClass, colors['green'])}>Refresh</span>
 					{/if}
 					{#if onClick}
-						<span class={classNames(badgeClass, colors['green'])}>On click</span>
+						<span class={classNames(badgeClass, colors['green'])}>Click</span>
 					{/if}
 				</div>
 			</div>
 		{/if}
-		{#if inputDependencies.length > 0}
+		{#if inputDependencies.length > 0 && !doNotRecomputeOnInputChanged}
 			<div class="w-full">
-				<div class="flex justify-between items-center mb-2">
-					<div class="text-xs font-semibold text-slate-800 mb-1">Values change </div>
+				<div class="flex justify-between items-center mb-1">
+					<div class="text-xs font-semibold text-slate-800">Change on values</div>
 				</div>
 				<div class="flex flex-row gap-2 flex-wrap">
-					{#each inputDependencies as label, index}
+					{#each inputDependencies as label}
 						<span class={classNames(badgeClass, colors['blue'])}>
 							{label}
 						</span>
@@ -65,7 +103,7 @@ $: if ($app && $selectedComponent && id) {
 
 		{#if recomputedBadges?.length > 0}
 			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Success of</div>
+				<div class="text-xs font-semibold text-slate-800 mb-1">Computation of</div>
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#each recomputedBadges as badge}
 						<span class={classNames(badgeClass, colors['indigo'])}>{badge}</span>
@@ -74,18 +112,38 @@ $: if ($app && $selectedComponent && id) {
 			</div>
 		{/if}
 	{/if}
-	{#if frontendDependencies}
+	{#if frontendDependencies && !doNotRecomputeOnInputChanged}
 		<div class="w-full">
-			<div class="flex justify-between items-center mb-2">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Values change (Frontend)</div>
-				<slot />
+			<div class="flex justify-between items-center">
+				<div class="text-xs font-semibold text-slate-800 mb-1">Change on values</div>
+				{#if inlineScript?.language === 'frontend'}
+					<Button
+						variant="border"
+						size="xs"
+						color="light"
+						btnClasses="!px-1 !py-0.5"
+						on:click={() => {
+							addingDependency = true
+							$connectingInput = {
+								opened: true,
+								input: undefined,
+								hoveredComponent: undefined
+							}
+						}}
+					>
+						<div class="flex flex-row gap-1 items-center">
+							Add dependency
+							<Plus size={14} />
+						</div>
+					</Button>
+				{/if}
 			</div>
 			<div class="flex flex-row gap-2 flex-wrap">
 				{#each frontendDependencies as label, index}
 					<span class={classNames(badgeClass, colors['red'])}>
 						{label}
 						<button
-							on:click={() => dispatch('delete', { index })}
+							on:click={() => deleteDep(index)}
 							class="bg-red-300 cursor-pointer hover:bg-red-400 ml-1 rounded-md"
 						>
 							<X size={18} class="p-0.5" />

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte.d.ts

@@ -1,20 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../../types';
 declare const __propDef: {
     props: {
         inputDependencies?: string[] | undefined;
-        frontendDependencies?: string[] | undefined;
+        inlineScript: InlineScript | undefined;
         onClick?: boolean | undefined;
         onLoad?: boolean | undefined;
         id?: string | undefined;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
-        delete: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type TriggerBadgesListProps = typeof __propDef.props;
 export type TriggerBadgesListEvents = typeof __propDef.events;

package/components/apps/gridUtils.js

@@ -10,7 +10,7 @@ const columnConfiguration = [
 ];
 const gridColumns = columnConfiguration.map((value) => value[1]);
 function toggleFixed(component) {
-    const nValue = !component[gridColumns[0]].fixed;
+    const nValue = !(component[gridColumns[0]]?.fixed ?? false);
     gridColumns.forEach((column) => {
         component[column].fixed = nValue;
     });

package/components/apps/inputType.d.ts

@@ -1,7 +1,6 @@
 import type { ReadFileAs } from '../common/fileInput/model';
-import type { staticValues } from './editor/componentsPanel/componentStaticValues';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'tab-select';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -40,7 +39,7 @@ export type RunnableByPath = {
     runType: 'script' | 'flow' | 'hubscript';
     type: 'runnableByPath';
 };
-type RunnableByName = {
+export type RunnableByName = {
     name: string;
     inlineScript: InlineScript | undefined;
     type: 'runnableByName';
@@ -48,9 +47,13 @@ type RunnableByName = {
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type ResultInput = {
     runnable: Runnable;
+    transformer?: InlineScript & {
+        language: 'frontend';
+    };
     fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
     type: 'runnable';
     value?: any;
+    doNotRecomputeOnInputChanged?: boolean;
 };
 type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, V>;
 type InputConfiguration<T extends InputType, V extends InputType> = {
@@ -72,20 +75,13 @@ type InputConfiguration<T extends InputType, V extends InputType> = {
         convertTo?: ReadFileAs;
     };
 };
-type StaticOptions = {
-    /**
-     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
-     */
-    optionValuesKey: keyof typeof staticValues;
+export type StaticOptions = {
+    selectOptions: readonly string[] | readonly {
+        value: string;
+        label: string;
+    }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & {
-    /**
-     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
-     */
-    optionValuesKey: keyof typeof staticValues;
-}) | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
-    optionValuesKey: keyof typeof staticValues;
-}) | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/components/apps/rx.d.ts

@@ -19,6 +19,8 @@ export type World = {
     connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
     stateId: Writable<number>;
     newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
+    initializedOutputs: number;
+    initialized: boolean;
 };
 export declare function buildWorld(context: Record<string, any>): Writable<World>;
 export declare function buildObservableWorld(): {

package/components/apps/rx.js

@@ -24,7 +24,14 @@ export function buildWorld(context) {
         return o;
     }
     stateId.update((x) => x + 1);
-    writableWorld = writable({ outputsById, connect: newWorld.connect, stateId, newOutput });
+    writableWorld = writable({
+        outputsById,
+        connect: newWorld.connect,
+        stateId,
+        newOutput,
+        initializedOutputs: 0,
+        initialized: false
+    });
     return writableWorld;
 }
 export function buildObservableWorld() {
@@ -47,7 +54,6 @@ export function buildObservableWorld() {
                 };
             }
             const { componentId, path } = connection;
-            console.log('connection', connection);
             const input = cachedInput(next, `${componentId}-${path}-${id}`);
             const [p] = path ? path.split('.')[0].split('[') : [undefined];
             let obs = observables[`${componentId}.${p}`];

package/components/apps/svelte-grid/Grid.svelte

@@ -125,8 +125,6 @@ const handleRepaint = ({ detail }) => {
 				on:pointerup={pointerup}
 				onTop={item.id == onTopId}
 				id={item.id}
-				resizable={item[getComputedCols] && item[getComputedCols].resizable}
-				draggable={item[getComputedCols] && item[getComputedCols].draggable}
 				{xPerPx}
 				{yPerPx}
 				width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
@@ -136,8 +134,6 @@ const handleRepaint = ({ detail }) => {
 				top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
 				left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
 				item={item[getComputedCols]}
-				min={item[getComputedCols] && item[getComputedCols].min}
-				max={item[getComputedCols] && item[getComputedCols].max}
 				cols={getComputedCols}
 				{gapX}
 				{gapY}

package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -11,7 +11,7 @@ declare class __sveltets_Render<T> {
         throttleResize?: number | undefined;
         onTopId?: string | undefined;
         containerWidth?: number | undefined;
-        scroller?: undefined;
+        scroller?: HTMLElement | undefined;
         sensor?: number | undefined;
         parentWidth?: number | undefined;
     };

package/components/apps/svelte-grid/MoveResize.svelte

@@ -5,8 +5,6 @@ export let width;
 export let height;
 export let left;
 export let top;
-export let resizable;
-export let draggable;
 export let id;
 export let container;
 export let xPerPx;
@@ -14,8 +12,6 @@ export let yPerPx;
 export let gapX;
 export let gapY;
 export let item;
-export let max;
-export let min;
 export let cols;
 export let nativeContainer;
 export let onTop;
@@ -112,19 +108,23 @@ function computeRect(target) {
         rect = irect;
     }
 }
+let dragClosure = undefined;
 const pointerdown = ({ clientX, clientY, target }) => {
-    initX = clientX;
-    initY = clientY;
-    capturePos = { x: left, y: top };
-    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
-    newSize = { width, height };
-    containerFrame = getContainerFrame(container);
-    scrollElement = getScroller(container);
-    cordDiff = { x: 0, y: 0 };
-    computeRect(target);
-    active = true;
-    trans = false;
-    _scrollTop = scrollElement.scrollTop;
+    dragClosure = () => {
+        dragClosure = undefined;
+        initX = clientX;
+        initY = clientY;
+        capturePos = { x: left, y: top };
+        shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+        newSize = { width, height };
+        containerFrame = getContainerFrame(container);
+        scrollElement = getScroller(container);
+        cordDiff = { x: 0, y: 0 };
+        active = true;
+        trans = false;
+        computeRect(target);
+        _scrollTop = scrollElement.scrollTop;
+    };
     window.addEventListener('pointermove', pointermove);
     window.addEventListener('pointerup', pointerup);
 };
@@ -146,13 +146,11 @@ const update = () => {
     if (shadow) {
         shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0);
         shadow.y = Math.max(gridY, 0);
-        if (max.y) {
-            shadow.y = Math.min(shadow.y, max.y);
-        }
     }
     repaint(undefined, false);
 };
 const pointermove = (event) => {
+    dragClosure && dragClosure();
     event.preventDefault();
     event.stopPropagation();
     event.stopImmediatePropagation();
@@ -183,6 +181,7 @@ const pointermove = (event) => {
     }
 };
 const pointerup = (e) => {
+    dragClosure = undefined;
     stopAutoscroll();
     window.removeEventListener('pointerdown', pointerdown);
     window.removeEventListener('pointermove', pointermove);
@@ -214,13 +213,9 @@ const resizePointerMove = ({ pageX, pageY }) => {
         newSize.height = initSize.height + pageY - resizeInitPos.y;
         // Get max col number
         let maxWidth = cols - shadow.x;
-        maxWidth = Math.min(max.w, maxWidth) || maxWidth;
+        maxWidth = maxWidth;
         // Limit bound
-        newSize.width = Math.max(Math.min(newSize.width, maxWidth * xPerPx - gapX * 2), min.w * xPerPx - gapX * 2);
-        newSize.height = Math.max(newSize.height, min.h * yPerPx - gapY * 2);
-        if (max.h) {
-            newSize.height = Math.min(newSize.height, max.h * yPerPx - gapY * 2);
-        }
+        newSize.width = Math.min(newSize.width, maxWidth * xPerPx - gapX * 2);
         // Limit col & row
         shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
         shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
@@ -235,9 +230,10 @@ const resizePointerUp = (e) => {
 };
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	draggable={false}
-	on:pointerdown={item && item.customDragger ? null : draggable && pointerdown}
+	draggable="false"
+	on:pointerdown|stopPropagation|preventDefault={pointerdown}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active
@@ -250,9 +246,7 @@ const resizePointerUp = (e) => {
 		: `transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `} "
 >
 	<slot movePointerDown={pointerdown} {resizePointerDown} />
-	{#if resizable && !item.customResizer}
-		<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
-	{/if}
+	<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
 </div>
 
 {#if (active || trans) && shadow}

package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         height: any;
         left: any;
         top: any;
-        resizable: any;
-        draggable: any;
         id: any;
         container: any;
         xPerPx: any;
@@ -15,8 +13,6 @@ declare const __propDef: {
         gapX: any;
         gapY: any;
         item: any;
-        max: any;
-        min: any;
         cols: any;
         nativeContainer: any;
         onTop: any;

package/components/apps/svelte-grid/types.d.ts

@@ -9,13 +9,7 @@ export interface Positon {
 }
 
 interface ItemLayout extends Size, Positon {
-	fixed?: boolean
-	resizable?: boolean
-	draggable?: boolean
-	customDragger?: boolean
-	customResizer?: boolean
-	min?: Size
-	max?: Size
+	fixed: boolean
 }
 
 export type FilledItem<T> = { [width: number]: Required<ItemLayout>; data: T; id: string }