stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useDrauu.md

category

category
@Integrations

useDrauu

Reactive instance for drauu.

Install

npm i drauu@^0

Usage

<script setup lang="ts">
import { toRefs } from '@vueuse/core';
import { useDrauu } from '@vueuse/integrations/useDrauu';
import { useTemplateRef } from 'vue';

const target = useTemplateRef('target');
const { undo, redo, canUndo, canRedo, brush } = useDrauu(target);
const { color, size } = toRefs(brush);
</script>

<template>
  <svg ref="target" />
</template>

Type Declarations

export type UseDrauuOptions = Omit<Options, 'el'>;
export interface UseDrauuReturn {
  drauuInstance: Ref<Drauu | undefined>;
  load: (svg: string) => void;
  dump: () => string | undefined;
  clear: () => void;
  cancel: () => void;
  undo: () => boolean | undefined;
  redo: () => boolean | undefined;
  canUndo: ShallowRef<boolean>;
  canRedo: ShallowRef<boolean>;
  brush: Ref<Brush>;
  onChanged: EventHookOn;
  onCommitted: EventHookOn;
  onStart: EventHookOn;
  onEnd: EventHookOn;
  onCanceled: EventHookOn;
}
/**
 * Reactive drauu
 *
 * @see https://vueuse.org/useDrauu
 * @param target The target svg element
 * @param options Drauu Options
 */
export declare function useDrauu(
  target: MaybeComputedElementRef,
  options?: UseDrauuOptions,
): UseDrauuReturn;