Enhance spatial input components by adding default handling logic and improving button states for better user experience

src/lib/components/filters/content.svelte

@@ -183,13 +183,16 @@
             {/if}
             
             {#if isDistanceOperator}
+            <div style="margin-top: 8px;">
                 <InputNumber
                     id="distance"
                     bind:value={distanceValue}
                     placeholder="Enter distance"
                     step={0.001}
                     min={0}
-                    required={true} />
+                    required
+                />
+            </div>
             {/if}
         {/if}
         {#if !singleCondition}

src/lib/elements/forms/inputPolygon.svelte

@@ -47,10 +47,10 @@
                 onChangePoint={(pointIndex, coordIndex, newValue) =>
                     handlePointChange(index, pointIndex, coordIndex, newValue)}
                 disableDeleteLine={index < 2} 
-                disableDeletePointsIndex={4}>
+                disableDeletePointsIndex={disableDeletePointsIndex}>
                     <svelte:fragment slot="line-button">
                         {#if index === values.length-1}
-                            <Button size="xs" compact on:click={handleAddLineInternal}>
+                            <Button disabled={nullable} size="xs" compact on:click={handleAddLineInternal}>
                                 <Icon icon={IconPlus} size="s" /> Add line
                             </Button>
                         {/if}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte

@@ -46,9 +46,11 @@
         required: false,
         default: null
     };
+    export let editing = false;
 
     let savedDefault = data.default;
     let showDefaultPointDummyData = false;
+    let defaultLineAdded = false;
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
@@ -76,6 +78,7 @@
     });
     
     function handleAddDefault() {
+        defaultLineAdded = true;
         data.default = getDefaultSpatialData('linestring') as number[][];
     }
 
@@ -101,7 +104,7 @@
             <Typography.Text variant="m-600">Default</Typography.Text>
             <Typography.Caption variant="400">Optional</Typography.Caption>
         </Layout.Stack>
-        {#if !data.default}
+        {#if !data.default && ((!editing && !defaultLineAdded) || (editing && !showDefaultPointDummyData))}
             <Button secondary on:click={handleAddDefault}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Add Line
@@ -109,9 +112,9 @@
         {/if}
     </Layout.Stack>
     <InputLine
-        values={data.default}
+        values={(defaultLineAdded && showDefaultPointDummyData) ? getDefaultSpatialData("point") : data.default}
         onAddPoint={pushCoordinate}
-        nullable={showDefaultPointDummyData}
+        nullable={defaultLineAdded && showDefaultPointDummyData}
         onDeletePoint={deleteCoordinate}
         onChangePoint={(pointIndex, coordIndex, newValue) => {
             if (data.default && data.default[pointIndex]) {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte

@@ -46,9 +46,11 @@
         required: false,
         default: null
     };
+    export let editing = false;
 
     let savedDefault = data.default;
     let showDefaultPointDummyData = false;
+    let defaultPointAdded = false;
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
@@ -68,6 +70,7 @@
     });
 
     function handleAddDefault() {
+        defaultPointAdded = true;
         data.default = getDefaultSpatialData('point') as number[];
     }
 
@@ -76,6 +79,8 @@
     $: handleDefaultState($required);
 
     $: showDefaultPointDummyData = $required ? true : false;
+
+    $:console.log(editing)
 </script>
 
 <Selector.Checkbox
@@ -92,7 +97,7 @@
             <Typography.Text variant="m-600">Default</Typography.Text>
             <Typography.Caption variant="400">Optional</Typography.Caption>
         </Layout.Stack>
-        {#if !data.default}
+        {#if !data.default && ((!editing && !defaultPointAdded) || (editing && !showDefaultPointDummyData))}
             <Button secondary on:click={handleAddDefault}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Add Point
@@ -100,8 +105,8 @@
         {/if}
     </Layout.Stack>
     <InputPoint
-        values={data.default}
-        nullable={showDefaultPointDummyData}
+        values={(showDefaultPointDummyData && ((!editing && defaultPointAdded) || (editing && !data.default))) ? getDefaultSpatialData("point") : data.default}
+        nullable={showDefaultPointDummyData && ((!editing && defaultPointAdded) || (editing && !data.default))}
         onChangePoint={(index, newValue) => {
             if (data.default) {
                 data.default[index] = newValue;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte

@@ -46,9 +46,11 @@
         required: false,
         default: null
     };
+    export let editing = false;
 
     let savedDefault = data.default;
     let showDefaultPointDummyData = false;
+    let defaultPolygonAdded = false;
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
@@ -97,6 +99,7 @@
     });
 
     function handleAddDefault(){
+        defaultPolygonAdded = true;
         data.default = getDefaultSpatialData("polygon") as number[][][];
     }
 
@@ -121,7 +124,7 @@
             <Typography.Text variant="m-600">Default</Typography.Text>
             <Typography.Caption variant="400">Optional</Typography.Caption>
         </Layout.Stack>
-        {#if !data.default}
+        {#if !data.default && ((!editing && !defaultPolygonAdded) || (editing && !showDefaultPointDummyData))}
             <Button secondary on:click={handleAddDefault}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Add Polygon
@@ -129,8 +132,8 @@
         {/if}
     </Layout.Stack>
     <InputPolygon
-        values={data.default}
-        nullable={showDefaultPointDummyData}
+        values={(defaultPolygonAdded && showDefaultPointDummyData) ? getDefaultSpatialData("polygon") : data.default}
+        nullable={defaultPolygonAdded && showDefaultPointDummyData}
         onAddLine={pushLine}
         onAddPoint={pushCoordinate}
         onDeletePoint={deleteCoordinate}