feat: add alignment input for image

web-common/src/features/canvas/components/image/Image.svelte

@@ -4,12 +4,15 @@
   import httpClient from "@rilldata/web-common/runtime-client/http-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import type { ImageSpec } from "./";
+  import { getImagePosition } from "./util";
 
   export let rendererProperties: V1ComponentSpecRendererProperties;
 
   const instanceId = $runtime.instanceId;
   $: imageProperties = rendererProperties as ImageSpec;
 
+  $: objectPosition = getImagePosition(imageProperties.alignment);
+
   let imageSrc: string | null = null;
   let errorMessage: string | null = null;
   $: {
@@ -64,6 +67,7 @@
     src={imageSrc || ""}
     alt={"Canvas Image"}
     draggable="false"
-    class="h-full w-full object-contain overflow-hidden"
+    class="h-full w-full overflow-hidden object-contain"
+    style:object-position={objectPosition}
   />
 {/if}

web-common/src/features/canvas/components/image/index.ts

@@ -1,13 +1,22 @@
 import { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
-import { type ComponentCommonProperties } from "@rilldata/web-common/features/canvas/components/types";
+import {
+  type ComponentAlignment,
+  type ComponentCommonProperties,
+} from "@rilldata/web-common/features/canvas/components/types";
 import { commonOptions } from "@rilldata/web-common/features/canvas/components/util";
 import type { InputParams } from "@rilldata/web-common/features/canvas/inspector/types";
 import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
 
 export { default as Image } from "./Image.svelte";
 
+export const defaultImageAlignment: ComponentAlignment = {
+  horizontal: "center",
+  vertical: "middle",
+};
+
 export interface ImageSpec extends ComponentCommonProperties {
   url: string;
+  alignment?: ComponentAlignment;
 }
 
 export class ImageComponent extends BaseCanvasComponent<ImageSpec> {
@@ -34,6 +43,11 @@ export class ImageComponent extends BaseCanvasComponent<ImageSpec> {
     return {
       options: {
         url: { type: "text", label: "URL" },
+        alignment: {
+          type: "alignment",
+          label: "Alignment",
+          meta: { defaultAlignment: defaultImageAlignment },
+        },
         ...commonOptions,
       },
       filter: {},

web-common/src/features/canvas/components/image/util.ts

@@ -0,0 +1,14 @@
+import { defaultImageAlignment } from "@rilldata/web-common/features/canvas/components/image";
+import type { ComponentAlignment } from "@rilldata/web-common/features/canvas/components/types";
+
+// Return object-position CSS property for image
+export function getImagePosition(alignment: ComponentAlignment | undefined) {
+  if (!alignment) alignment = defaultImageAlignment;
+
+  const verticalValue =
+    alignment.vertical === "middle" ? "center" : alignment.vertical;
+
+  const horizontalValue = alignment.horizontal;
+
+  return `${horizontalValue} ${verticalValue}`;
+}

web-common/src/features/canvas/components/markdown/index.ts

@@ -8,7 +8,7 @@ import {
 
 export { default as Markdown } from "./Markdown.svelte";
 
-export const defaultAlignment: ComponentAlignment = {
+export const defaultMarkdownAlignment: ComponentAlignment = {
   vertical: "middle",
   horizontal: "left",
 };
@@ -32,7 +32,7 @@ export class MarkdownCanvasComponent extends BaseCanvasComponent<MarkdownSpec> {
       title: "",
       description: "",
       content: "Your text",
-      alignment: defaultAlignment,
+      alignment: defaultMarkdownAlignment,
     };
     super(fileArtifact, path, defaultSpec, initialSpec);
   }
@@ -49,7 +49,13 @@ export class MarkdownCanvasComponent extends BaseCanvasComponent<MarkdownSpec> {
           label: "Markdown",
           description: "Write text using the markdown syntax",
         },
-        alignment: { type: "alignment", label: "Alignment" },
+        alignment: {
+          type: "alignment",
+          label: "Alignment",
+          meta: {
+            defaultAlignment: defaultMarkdownAlignment,
+          },
+        },
       },
       filter: {},
     };
@@ -71,7 +77,7 @@ Start writing in **Markdown** and see your text beautifully formatted! 🚀`;
 
     return {
       content: defaultContent,
-      alignment: defaultAlignment,
+      alignment: defaultMarkdownAlignment,
     };
   }
 }

web-common/src/features/canvas/components/markdown/util.ts

@@ -1,8 +1,8 @@
-import { defaultAlignment } from "@rilldata/web-common/features/canvas/components/markdown";
+import { defaultMarkdownAlignment } from "@rilldata/web-common/features/canvas/components/markdown";
 import type { ComponentAlignment } from "@rilldata/web-common/features/canvas/components/types";
 
 export function getPositionClasses(alignment: ComponentAlignment | undefined) {
-  if (!alignment) alignment = defaultAlignment;
+  if (!alignment) alignment = defaultMarkdownAlignment;
   let classString = "";
 
   switch (alignment.horizontal) {

web-common/src/features/canvas/inspector/AlignmentInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import IconSwitcher from "@rilldata/web-common/components/forms/IconSwitcher.svelte";
   import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
-  import { defaultAlignment } from "@rilldata/web-common/features/canvas/components/markdown";
   import type {
     ComponentAlignment,
     HoritzontalAlignment,
@@ -18,6 +17,10 @@
 
   export let key: string;
   export let label: string;
+  export let defaultAlignment: ComponentAlignment = {
+    horizontal: "center",
+    vertical: "middle",
+  };
   export let position: ComponentAlignment | undefined;
   export let onChange: (updatedPosition: ComponentAlignment) => void;
 

web-common/src/features/canvas/inspector/ParamMapper.svelte

@@ -167,6 +167,7 @@
             {key}
             label={config.label ?? key}
             position={localParamValues[key]}
+            defaultAlignment={config.meta?.defaultAlignment}
             onChange={(updatedPosition) => {
               localParamValues[key] = updatedPosition;
               component.updateProperty(key, updatedPosition);

web-common/src/features/canvas/inspector/types.ts

@@ -1,3 +1,5 @@
+import type { ComponentAlignment } from "@rilldata/web-common/features/canvas/components/types";
+
 type NativeInputTypes = "text" | "number" | "boolean" | "textArea";
 type SemanticInputTypes =
   | "metrics"
@@ -24,7 +26,10 @@ export interface ComponentInputParam {
   showInUI?: boolean; // If not specified, can assume true
   optional?: boolean;
   description?: string; // Tooltip description for the input
-  meta?: Record<string, string>; // Any additional metadata
+  meta?: {
+    defaultAlignment?: ComponentAlignment;
+    [key: string]: any;
+  };
 }
 
 export interface FilterInputParam {