Svelte

Introduction

The Doka Svelte adapter exposes three different components.

• <Doka> useful for editing images on the page itself.
• <DokaModal> will open in a popover on top of the page.
• <DokaOverlay> will render on top of another element.

Attributes supplied to each component are passed on to the Doka core library, they're named exactly like the default instance properties.

This means that the configuration below:

Doka.create({
    cropAspectRatio: 1,
    cropAllowImageTurnRight: true,
    onconfirm: (output) => {
        console.log('Crop result', output);
    },
});

Is the same as this:

<Doka
    cropAspectRatio="1"
    cropAllowImageTurnRight="true"
    onconfirm="{handleConfirm}"
>
</Doka>

Examples

The examples below are included in the project package as demos and should give a good overview of how to use these components and can be used as development starting points.

Doka

The Doka Component can be used to render Doka inline.

<!-- DemoInline.svelte -->
<script>
    import { Doka } from './svelte-doka';

    let cropAspectRatio = 1;

    const handleConfirm = (output) => {
        console.log('Confirm edit!', output);
    };

    const handleCancel = () => {
        console.log('Cancel edit!');
    };
</script>

<div>
    <h2>Demo Inline</h2>

    <Doka style="width: 800px; height: 480px" src={'./assets/photo.jpeg'}
    utils='crop, filter, color, markup, resize' {cropAspectRatio}
    oncancel={handleCancel} onconfirm={handleConfirm} cropAspectRatioOptions={[
    { label: 'Free', value: null }, { label: 'Portrait', value: 1.5 }, { label:
    'Square', value: 1 }, { label: 'Landscape', value: .75 } ]}/>
</div>

DokaModal

The DokaModal component opens Doka in a popover on top of the current page.

<!-- DemoModal.svelte -->
<script>
import { DokaModal, toURL } from './svelte-doka';

let src = 'assets/photo.jpeg';
let enabled = false;
let result = null;

const handleConfirm = (output) => {
    console.log('Confirm edit!', output);
    result = toURL(output.file);
}

const handleCancel = () => {
    console.log('Cancel edit!');
}

const handleClose = () => {
    console.log('Close edit!');
    enabled = false;
}
</script>

<div>

    <h2>Demo Modal</h2>

    <button on:click={() => enabled = true}>Show Modal</button>

    {#if enabled}
    <DokaModal
        {src}
        cropAspectRatio="1"
        onconfirm={handleConfirm}
        oncancel={handleCancel}
        onclose={handleClose}/>
    {/if}

    {#if result}
    <img src={result} alt="" />
    {/if}

</div>

DokaOverlay

The DokaOverlay component renders on top on another image. This is useful when editing an image in place.

<!-- DemoPreview.svelte -->
<script>
import { DokaOverlay, toURL } from './svelte-doka';

let enabled = false;
let imagePreviewCrop = {
    aspectRatio: .5,
    rotation: -1.5707963268
};
let imagePreviewSource = 'assets/photo-preview.jpeg';
let imageSource = 'assets/photo.jpeg';

const handleConfirm = (output) => {
    console.log('Confirm edit!', output);
    enabled = false;
    imagePreviewSource = toURL(output.file);
    imagePreviewCrop = output.data.crop;
}

const handleCancel = () => {
    console.log('Cancel edit!');
    enabled = false;
}
</script>

<div>

    <h2>Demo Preview</h2>

    <button on:click={() => enabled = true}>Show Overlay</button>

    <DokaOverlay
        {enabled}
        utils="crop"
        src={imageSource}
        crop={imagePreviewCrop}
        onconfirm={handleConfirm}
        oncancel={handleCancel}>
        <img src={imagePreviewSource} alt="">
    </DokaOverlay>

</div>