From 8a5eca914cd4c18bf4f92d3cb8f69f93ebf022a2 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Sat, 6 Sep 2025 14:01:56 +0530
Subject: [PATCH] Refactor spatial input components to use nullable properties
 and default spatial data

---
 src/lib/elements/forms/inputLine.svelte       | 22 +++---
 src/lib/elements/forms/inputPoint.svelte      | 10 +--
 src/lib/elements/forms/inputPolygon.svelte    | 29 ++++++++
 .../table-[table]/columns/line.svelte         | 23 +++---
 .../table-[table]/columns/point.svelte        | 16 +++--
 .../table-[table]/columns/polygon.svelte      | 70 +++++++++----------
 .../rows/columns/types/line.svelte            | 25 ++++---
 .../rows/columns/types/point.svelte           | 10 ++-
 .../table-[table]/store.ts                    | 28 +++++++-
 9 files changed, 139 insertions(+), 94 deletions(-)
 create mode 100644 src/lib/elements/forms/inputPolygon.svelte

diff --git a/src/lib/elements/forms/inputLine.svelte b/src/lib/elements/forms/inputLine.svelte
index 4e3f9915f..a89af29b6 100644
--- a/src/lib/elements/forms/inputLine.svelte
+++ b/src/lib/elements/forms/inputLine.svelte
@@ -4,36 +4,30 @@
     import Button from './button.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
-    let defaultValues: number[][] = [
-        [0, 0],
-        [0, 0]
-    ];
     export let values: number[][];
-    export let showDefaults;
+    export let nullable: boolean;
     export let onAddPoint: () => void;
     export let onDeletePoint: () => void = undefined;
 
     let required = true;
 
-    $: required = showDefaults;
+    $: required = nullable;
 
     $: disableDeletePoints = !values || values.length <= 2;
 </script>
 
-<Layout.Stack>
+<Layout.Stack alignItems="flex-start">
     <Layout.Stack>
-        {#each values || defaultValues as value}
+        {#each values as value}
             <InputPoint
-                showDefaults={required}
+                nullable={required}
                 values={value}
                 deletePoints={true}
                 disableDelete={disableDeletePoints}
                 {onDeletePoint} />
         {/each}
     </Layout.Stack>
-    <Layout.Stack direction="row" gap="s" style="margin-top: 8px;">
-        <Button compact on:click={onAddPoint}>
-            <Icon icon={IconPlus} size="s" /> Add coordinate
-        </Button>
-    </Layout.Stack>
+    <Button compact on:click={onAddPoint} disabled={nullable}>
+        <Icon icon={IconPlus} size="s" /> Add coordinate
+    </Button>
 </Layout.Stack>
diff --git a/src/lib/elements/forms/inputPoint.svelte b/src/lib/elements/forms/inputPoint.svelte
index 7fb61d4f6..387ee3283 100644
--- a/src/lib/elements/forms/inputPoint.svelte
+++ b/src/lib/elements/forms/inputPoint.svelte
@@ -4,9 +4,9 @@
     import Button from './button.svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
 
-    let defaultValues: number[] = [0, 0];
+    let nullableSkeletonShape: number[] = [0, 0];
     export let values: number[];
-    export let showDefaults;
+    export let nullable = false;
     export let deletePoints = false;
     export let onDeletePoint: () => void = undefined;
     export let disableDelete = false;
@@ -14,8 +14,8 @@
 
 <Layout.Stack>
     <Layout.Stack direction="row" gap="s">
-        {#if showDefaults}
-            {#each defaultValues as _, index}
+        {#if nullable}
+            {#each nullableSkeletonShape as _, index}
                 <InputNumber id={`default-${index}`} placeholder="Enter value" disabled={true} />
             {/each}
         {:else}
@@ -28,7 +28,7 @@
             {/each}
         {/if}
         {#if deletePoints}
-            <Button secondary disabled={showDefaults || disableDelete} on:click={onDeletePoint}>
+            <Button secondary disabled={nullable || disableDelete} on:click={onDeletePoint}>
                 <Icon icon={IconX} size="s" />
             </Button>
         {/if}
diff --git a/src/lib/elements/forms/inputPolygon.svelte b/src/lib/elements/forms/inputPolygon.svelte
new file mode 100644
index 000000000..169c09d0c
--- /dev/null
+++ b/src/lib/elements/forms/inputPolygon.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import Button from './button.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import type { NestedNumberArray } from '$lib/helpers/types';
+    import InputLine from './inputLine.svelte';
+
+    export let values: NestedNumberArray;
+    export let nullable;
+    export let onAddPoint: () => void;
+    export let onAddLine: () => void;
+    export let onDeletePoint: () => void = undefined;
+
+    let required = true;
+
+    $: required = nullable;
+</script>
+
+<Layout.Stack>
+    {#each values as value}
+        <InputLine values={value as number[][]} {onAddPoint} nullable={required} {onDeletePoint} />
+    {/each}
+
+    <Layout.Stack direction="row" gap="s" style="margin-top: 8px;">
+        <Button compact on:click={onAddLine}>
+            <Icon icon={IconPlus} size="s" /> Add line
+        </Button>
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
index 588229e23..4d1233264 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
@@ -35,33 +35,26 @@
 </script>
 
 <script lang="ts">
+    const defaultData = getDefaultSpatialData('linestring') as number[][];
     export let data: Partial<Models.ColumnLine> = {
         required: false,
-        default: [
-            [0, 0],
-            [0, 0]
-        ]
+        default: defaultData
     };
 
     import { createConservative } from '$lib/helpers/stores';
     import { Selector, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { InputLine } from '$lib/elements/forms';
+    import { getDefaultSpatialData } from '../store';
 
     let savedDefault = data.default;
-    let showDefaultPointDummyData = false;
+    // let showDefaultPointDummyData = false;
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
-            savedDefault = data.default ?? [
-                [0, 0],
-                [0, 0]
-            ];
+            savedDefault = data.default;
             data.default = null;
         } else {
-            data.default = savedDefault ?? [
-                [0, 0],
-                [0, 0]
-            ];
+            data.default = savedDefault ?? defaultData;
         }
     }
 
@@ -101,8 +94,8 @@
         <Typography.Caption variant="400">Optional</Typography.Caption>
     </Layout.Stack>
     <InputLine
-        values={data.default as number[][]}
+        values={data.default || defaultData}
         onAddPoint={pushCoordinate}
-        showDefaults={showDefaultPointDummyData}
+        nullable={showDefaultPointDummyData}
         onDeletePoint={deleteCoordinate} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
index bb6584a2c..663a5b2fb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
@@ -36,24 +36,26 @@
 
 <script lang="ts">
     import { InputPoint } from '$lib/elements/forms';
+    import { getDefaultSpatialData } from '../store';
+    import { createConservative } from '$lib/helpers/stores';
+    import { Selector, Typography, Layout } from '@appwrite.io/pink-svelte';
+
+    const defaultData = getDefaultSpatialData('point') as number[];
 
     export let data: Partial<Models.ColumnPoint> = {
         required: false,
-        default: [0, 0]
+        default: defaultData
     };
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector, Typography, Layout } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
     let showDefaultPointDummyData = false;
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
-            savedDefault = data.default ?? [0, 0];
+            savedDefault = data.default ?? defaultData;
             data.default = null;
         } else {
-            data.default = savedDefault ?? [0, 0];
+            data.default = savedDefault ?? defaultData;
         }
     }
 
@@ -84,5 +86,5 @@
         <Typography.Text variant="m-600">Default</Typography.Text>
         <Typography.Caption variant="400">Optional</Typography.Caption>
     </Layout.Stack>
-    <InputPoint values={data.default as number[]} showDefaults={showDefaultPointDummyData} />
+    <InputPoint values={data.default} nullable={showDefaultPointDummyData} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
index 550ec50c8..cde0ede51 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
@@ -7,82 +7,71 @@
         databaseId: string,
         tableId: string,
         key: string,
-        data: Partial<Models.ColumnBoolean>
+        data: Partial<Models.ColumnPoint>
     ) {
-        await sdk.forProject(page.params.region, page.params.project).tablesDB.createBooleanColumn({
+        await sdk.forProject(page.params.region, page.params.project).tablesDB.createPolygonColumn({
             databaseId,
             tableId,
             key,
             required: data.required,
-            xdefault: data.default,
-            array: data.array
+            xdefault: data?.default
         });
     }
     export async function updatePolygon(
         databaseId: string,
         tableId: string,
-        data: Partial<Models.ColumnBoolean>,
+        data: Partial<Models.ColumnPoint>,
         originalKey?: string
     ) {
-        await sdk.forProject(page.params.region, page.params.project).tablesDB.updateBooleanColumn({
+        await sdk.forProject(page.params.region, page.params.project).tablesDB.updatePolygonColumn({
             databaseId,
             tableId,
             key: originalKey,
             required: data.required,
-            xdefault: data.default,
+            xdefault: data?.default,
             newKey: data.key !== originalKey ? data.key : undefined
         });
     }
 </script>
 
 <script lang="ts">
-    import { InputSelect } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import { Selector, Typography, Layout } from '@appwrite.io/pink-svelte';
+    import InputPolygon from '$lib/elements/forms/inputPolygon.svelte';
+    import { getDefaultSpatialData } from '../store';
 
-    export let editing = false;
-    export let data: Partial<Models.ColumnBoolean> = {
+    const defaultData = getDefaultSpatialData('polygon');
+    export let data: Partial<Models.ColumnPoint> = {
         required: false,
-        array: false,
-        default: null
+        default: defaultData
     };
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
+    let showDefaultPointDummyData = false;
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
             savedDefault = data.default;
             data.default = null;
         } else {
-            data.default = savedDefault;
+            data.default = savedDefault ?? defaultData;
         }
     }
 
     const {
-        stores: { required, array },
+        stores: { required },
         listen
-    } = createConservative<Partial<Models.ColumnBoolean>>({
+    } = createConservative<Partial<Models.ColumnPoint>>({
         required: false,
-        array: false,
         ...data
     });
     $: listen(data);
 
-    $: handleDefaultState($required || $array);
+    $: handleDefaultState($required);
+
+    $: showDefaultPointDummyData = $required ? true : false;
 </script>
 
-<InputSelect
-    id="default"
-    label="Default value"
-    placeholder="Select a value"
-    disabled={data.required || data.array}
-    options={[
-        { label: 'NULL', value: null },
-        { label: 'True', value: true },
-        { label: 'False', value: false }
-    ]}
-    bind:value={data.default} />
 <Selector.Checkbox
     size="s"
     id="required"
@@ -90,10 +79,15 @@
     bind:checked={data.required}
     disabled={data.array}
     description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<Layout.Stack>
+    <Layout.Stack direction="row" alignItems="center" gap="s">
+        <Typography.Text variant="m-600">Default</Typography.Text>
+        <Typography.Caption variant="400">Optional</Typography.Caption>
+    </Layout.Stack>
+    <InputPolygon
+        values={data.default || defaultData}
+        nullable={showDefaultPointDummyData}
+        onAddLine={() => {}}
+        onAddPoint={() => {}} />
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
index d230c5523..99435757c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
@@ -2,18 +2,17 @@
     import { InputLine } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { getDefaultSpatialData } from '../../../store';
 
     export let id: string;
     export let label: string;
-    export let value: number[][] | null = null;
+    export let value: number[][];
     export let limited: boolean = false;
-    export let column: Models.ColumnInteger;
-    const defaultShape = [
-        [0, 0],
-        [0, 0]
-    ];
+    export let column: Models.ColumnLine;
+
+    const defaultData = getDefaultSpatialData('linestring') as number[][];
     function onAddPoint() {
-        value = [...(value || defaultShape), [0, 0]];
+        value = [...(value || defaultData), getDefaultSpatialData('point') as number[]];
     }
 
     function onDeletePoint() {
@@ -21,15 +20,19 @@
     }
 
     $: nullable = !limited ? !column.required : false;
+
+    $: value = nullable ? null : defaultData;
+
+    $: console.log({ name: column.key, column, nullable });
 </script>
 
 <Layout.Stack>
     <Layout.Stack direction="row" alignItems="center" gap="s">
-        <Typography.Text variant="m-600">{label}</Typography.Text>
+        <Typography.Text variant="m-500">{label}</Typography.Text>
         {#if nullable}
-            <Typography.Caption variant="400">optional</Typography.Caption>
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary"
+                >optional</Typography.Text>
         {/if}
     </Layout.Stack>
-
-    <InputLine values={value} showDefaults={false} {onAddPoint} {onDeletePoint} />
+    <InputLine values={value || defaultData} {nullable} {onAddPoint} {onDeletePoint} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
index 3bc780172..216394c00 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
@@ -2,6 +2,7 @@
     import { InputPoint } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { getDefaultSpatialData } from '../../../store';
 
     export let id: string;
     export let label: string;
@@ -10,14 +11,17 @@
     export let column: Models.ColumnInteger;
 
     $: nullable = !limited ? !column.required : false;
+
+    $: value = nullable ? null : (getDefaultSpatialData('point') as number[]);
 </script>
 
 <Layout.Stack>
     <Layout.Stack direction="row" alignItems="center" gap="s">
-        <Typography.Text variant="m-600">{label}</Typography.Text>
+        <Typography.Text variant="m-500">{label}</Typography.Text>
         {#if nullable}
-            <Typography.Caption variant="400">optional</Typography.Caption>
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary"
+                >optional</Typography.Text>
         {/if}
     </Layout.Stack>
-    <InputPoint values={value || [0, 0]} showDefaults={false} />
+    <InputPoint values={value} {nullable} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 293eeef8f..be8b019f7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -1,5 +1,5 @@
 import { page } from '$app/stores';
-import type { Column } from '$lib/helpers/types';
+import type { Column, ColumnType } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 import type { SortDirection } from '$lib/components';
@@ -191,3 +191,29 @@ export const PROHIBITED_ROW_KEYS = [
 ];
 
 export const sheetHeightStore = writable('74.5vh');
+
+export const getDefaultSpatialData = (
+    type: Extract<ColumnType, 'point' | 'linestring' | 'polygon'>
+) => {
+    if (type === 'point') return [0, 0];
+    else if (type === 'linestring')
+        return [
+            [0, 0],
+            [0, 0]
+        ];
+    else if (type === 'polygon')
+        return [
+            [
+                [0, 0],
+                [0, 0],
+                [0, 0],
+                [0, 0]
+            ],
+            [
+                [0, 0],
+                [0, 0],
+                [0, 0],
+                [0, 0]
+            ]
+        ];
+};