{#if selection.imageTarget}
Image
Asset
updateImageFields('Reuse image asset', { assetId: (event.currentTarget as HTMLSelectElement).value })} aria-label="Image asset"> {#each Object.values(selection.imageTarget ? (store.getState().doc.assets ?? {}) : {}).filter( (asset) => asset.mediaType.startsWith('image/') ) as asset}
{asset.name}
{/each}
Caption
updateImageFields('Set image caption', { caption: (event.currentTarget as HTMLInputElement).value || undefined })} aria-label="Image caption" />
Mask
{ const kind = (event.currentTarget as HTMLSelectElement).value as | 'rectangle' | 'ellipse' | 'rounded'; updateImageFields('Set image mask', { mask: kind === 'rectangle' ? undefined : { kind } }); }} aria-label="Image mask" >
Rectangle
Ellipse
Rounded
{#if selection.imageTarget.props.mask?.kind === 'rounded'}
Radius
updateImageFields('Set image mask radius', { mask: { kind: 'rounded', radius: Math.max( 0, (event.currentTarget as HTMLInputElement).valueAsNumber || 0 ) } })} aria-label="Image mask radius" />
{/if}
void sampleSelectedImage()} >
{samplingColors ? 'Sampling…' : 'Sample colors'}
{#each sampledColors as sampled}
void copySampledColor(sampled.color)}>
{/each} {#if sampledColorMessage}
{sampledColorMessage}
{/if}
{/if}