Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement onChangePoint handlers for spatial input components and update related logic

Browse Source
This commit is contained in:
ArnabChatterjee20k
2025-09-06 17:42:06 +05:30
parent fe7ea4113b
commit 90fd508af6
9 changed files with 127 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/elements/forms/inputLine.svelte
+11 -1
View File
@@ -9,12 +9,20 @@
export let disableDeletePointsCountPerLine: number = 2;
export let onAddPoint: (index: number) => void;
export let onDeletePoint: (index: number) => void = undefined;
export let onChangePoint: (pointIndex: number, coordIndex: number, newValue: number) => void =
undefined;
let required = true;
$: required = nullable;
let disableDeletePoints = false;
$: disableDeletePoints = !values || values.length <= disableDeletePointsCountPerLine;
function handlePointChange(pointIndex: number, coordIndex: number, newValue: number) {
if (onChangePoint) {
onChangePoint(pointIndex, coordIndex, newValue);
}
}
</script>
<Layout.Stack alignItems="flex-start">
@@ -25,7 +33,9 @@
values={value}
deletePoints={true}
disableDelete={disableDeletePoints}
onDeletePoint={() => onDeletePoint(index)} />
onDeletePoint={() => onDeletePoint(index)}
onChangePoint={(coordIndex, newValue) =>
handlePointChange(index, coordIndex, newValue)} />
{/each}
</Layout.Stack>
<Button compact on:click={() => onAddPoint(-1)} disabled={nullable}>
src/lib/elements/forms/inputPoint.svelte
+8 -6
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import InputNumber from './inputNumber.svelte';
import { Input } from '@appwrite.io/pink-svelte';
import { Layout, Icon } from '@appwrite.io/pink-svelte';
import Button from './button.svelte';
import { IconX } from '@appwrite.io/pink-icons-svelte';
@@ -10,21 +10,23 @@
export let deletePoints = false;
export let onDeletePoint: () => void = undefined;
export let disableDelete = false;
export let onChangePoint: (index: number, newValue: number) => void;
</script>
<Layout.Stack>
<Layout.Stack direction="row" gap="s">
{#if nullable}
{#each nullableSkeletonShape as _, index}
<InputNumber id={`default-${index}`} placeholder="Enter value" disabled={true} />
<Input.Number id={`default-${index}`} placeholder="Enter value" disabled={true} />
{/each}
{:else}
{#each values as value, index}
<InputNumber
{#each values as _, index}
<Input.Number
id={`point-${index}`}
placeholder="Enter value"
bind:value={value as number}
step={0.001} />
step={0.001}
value={values[index]}
on:change={(e) => onChangePoint(index, Number.parseFloat(`${e.detail}`))} />
{/each}
{/if}
{#if deletePoints}
src/lib/elements/forms/inputPolygon.svelte
+19
View File
@@ -10,11 +10,28 @@
export let onAddPoint: (index: number) => void;
export let onAddLine: (index: number) => void;
export let onDeletePoint: (index: number) => void = undefined;
export let onChangePoint: (
lineIndex: number,
pointIndex: number,
coordIndex: number,
newValue: number
) => void = undefined;
export let disableDeletePointsCountPerLine: number = 4;
let required = true;
$: required = nullable;
function handlePointChange(
lineIndex: number,
pointIndex: number,
coordIndex: number,
newValue: number
) {
if (onChangePoint) {
onChangePoint(lineIndex, pointIndex, coordIndex, newValue);
}
}
</script>
<Layout.Stack>
@@ -24,6 +41,8 @@
onAddPoint={() => onAddPoint(index)}
nullable={required}
onDeletePoint={() => onDeletePoint(index)}
onChangePoint={(pointIndex, coordIndex, newValue) =>
handlePointChange(index, pointIndex, coordIndex, newValue)}
{disableDeletePointsCountPerLine} />
{/each}
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
+5 -4
View File
@@ -48,7 +48,6 @@
let savedDefault = data.default;
let showDefaultPointDummyData = false;
let disableDeletePoints = false;
onMount(() => {
data.default = data.required ? null : defaultData;
});
@@ -82,8 +81,6 @@
$: handleDefaultState($required);
$: showDefaultPointDummyData = $required ? true : false;
$: disableDeletePoints = !data.default || data.default.length <= 2;
</script>
<Selector.Checkbox
@@ -104,5 +101,9 @@
onAddPoint={pushCoordinate}
nullable={showDefaultPointDummyData}
onDeletePoint={deleteCoordinate}
{disableDeletePoints} />
onChangePoint={(pointIndex, coordIndex, newValue) => {
if (data.default && data.default[pointIndex]) {
data.default[pointIndex][coordIndex] = newValue;
}
}} />
</Layout.Stack>
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
+8 -1
View File
@@ -91,5 +91,12 @@
<Typography.Text variant="m-600">Default</Typography.Text>
<Typography.Caption variant="400">Optional</Typography.Caption>
</Layout.Stack>
<InputPoint values={data.default || defaultData} nullable={showDefaultPointDummyData} />
<InputPoint
values={data.default || defaultData}
nullable={showDefaultPointDummyData}
onChangePoint={(index, newValue) => {
if (data.default) {
data.default[index] = newValue;
}
}} />
</Layout.Stack>
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
+6 -1
View File
@@ -120,5 +120,10 @@
nullable={showDefaultPointDummyData}
onAddLine={pushLine}
onAddPoint={pushCoordinate}
onDeletePoint={deleteCoordinate} />
onDeletePoint={deleteCoordinate}
onChangePoint={(lineIndex, pointIndex, coordIndex, newValue) => {
if (data.default && data.default[lineIndex] && data.default[lineIndex][pointIndex]) {
data.default[lineIndex][pointIndex][coordIndex] = newValue;
}
}} />
</Layout.Stack>
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
+7 -3
View File
@@ -21,9 +21,13 @@
if (value && value?.length > 2) value = value.slice(0, value.length - 1);
}
$: nullable = !limited ? !column.required : false;
function handlePointChange(pointIndex: number, coordIndex: number, newValue: number) {
if (value && value[pointIndex]) {
value[pointIndex][coordIndex] = newValue;
}
}
$: value = nullable ? null : defaultData;
$: nullable = !limited ? !column.required : false;
$: disableDeletePoints = !value || value.length <= 2;
</script>
@@ -41,5 +45,5 @@
{nullable}
{onAddPoint}
{onDeletePoint}
{disableDeletePoints} />
onChangePoint={handlePointChange} />
</Layout.Stack>
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
+8 -2
View File
@@ -12,7 +12,13 @@
$: nullable = !limited ? !column.required : false;
$: value = nullable ? null : (getDefaultSpatialData('point') as number[]);
$: value = value && !nullable ? value : (getDefaultSpatialData('point') as number[]);
function handlePointChange(index: number, newValue: number) {
if (value) {
value[index] = newValue;
}
}
</script>
<Layout.Stack>
@@ -23,5 +29,5 @@
>optional</Typography.Text>
{/if}
</Layout.Stack>
<InputPoint values={value} {nullable} />
<InputPoint values={value} {nullable} onChangePoint={handlePointChange} />
</Layout.Stack>
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/polygon.svelte
+55 -5
View File
@@ -1,18 +1,62 @@
<script lang="ts">
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';
import InputPolygon from '$lib/elements/forms/inputPolygon.svelte';
export let id: string;
export let label: string;
export let value: number[];
export let value: number[][][];
export let limited: boolean = false;
export let column: Models.ColumnInteger;
export let column: Models.ColumnPolygon;
const defaultData = getDefaultSpatialData('polygon');
function pushCoordinate(ringIndex: number) {
if (!value) return;
const ring = value.at(ringIndex);
if (!ring) return;
const newPoint = getDefaultSpatialData('point') as number[];
ring.splice(ring.length - 1, 0, newPoint);
ring[ring.length - 1] = [...ring[0]];
}
function pushLine() {
if (!value) return;
const p1 = getDefaultSpatialData('point') as number[];
const p2 = getDefaultSpatialData('point') as number[];
const p3 = getDefaultSpatialData('point') as number[];
const ring = [p1, p2, p3, [...p1]];
value.push(ring);
}
function deleteCoordinate(ringIndex: number) {
if (!value) return;
const ring = value.at(ringIndex);
if (!ring || ring.length <= 4) return;
ring.splice(ring.length - 2, 1);
ring[ring.length - 1] = [...ring[0]];
}
function handlePointChange(
lineIndex: number,
pointIndex: number,
coordIndex: number,
newValue: number
) {
if (value && value[lineIndex] && value[lineIndex][pointIndex]) {
value[lineIndex][pointIndex][coordIndex] = newValue;
}
}
$: nullable = !limited ? !column.required : false;
$: value = nullable ? null : (getDefaultSpatialData('point') as number[]);
$: displayValue = value || defaultData;
</script>
<Layout.Stack>
@@ -23,5 +67,11 @@
>optional</Typography.Text>
{/if}
</Layout.Stack>
<InputPoint values={value} {nullable} />
<InputPolygon
values={displayValue}
{nullable}
onAddLine={pushLine}
onAddPoint={pushCoordinate}
onDeletePoint={deleteCoordinate}
onChangePoint={handlePointChange} />
</Layout.Stack>