Skip to content

useDrauu ​

Category
Export Size
928 B
Package
@vueuse/integrations
Last Changed
5 months ago

Reactive instance for drauu.

Demo ​

Available in the @vueuse/integrations add-on.

Install ​

bash
npm i drauu@^0

Usage ​

vue
<script setup>
import { ref } from 'vue'
import { toRefs } from '@vueuse/core'
import { useDrauu } from '@vueuse/integrations/useDrauu'

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

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

Type Declarations ​

typescript
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: Ref<boolean>
  canRedo: Ref<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

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
wheat
qinwencheng
Doctorwu
ge Datou
Hayk Khachatryan
Curt Grimes

Changelog ​

v10.5.0 on 10/7/2023
87ea3 - fix: spread options for brush (#3463)
v10.1.1 on 5/1/2023
aaadd - fix: pass on node argument in committed event hook (#3047)

Released under the MIT License.