⬅️ Back to Table of Contents

📄 useDrauu

📊 Analysis Summary

Metric	Count
🔧 Functions	9
📦 Imports	16
🟢 Vue Composition API	2
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/integrations/useDrauu/index.ts

📦 Imports

Name	Source
EventHookOn	@vueuse/core
MaybeComputedElementRef	@vueuse/core
Fn	@vueuse/shared
Brush	drauu
Drauu	drauu
DrawingMode	drauu
Options	drauu
Ref	vue
ShallowRef	vue
createEventHook	@vueuse/core
unrefElement	@vueuse/core
tryOnScopeDispose	@vueuse/shared
createDrauu	drauu
deepRef	vue
shallowRef	vue
watch	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none

---

Functions

useDrauu(target: MaybeComputedElementRef, options: UseDrauuOptions): UseDrauuReturn

Reactive drauu

Parameters:

• target any: The target svg element
• options any: Drauu Options

See: https://vueuse.org/useDrauu

Raw JSDoc

/**
 * Reactive drauu
 *
 * @see https://vueuse.org/useDrauu
 * @param target The target svg element
 * @param options Drauu Options
 */

Calls:

• deepRef (from vue)
• createEventHook (from @vueuse/core)
• shallowRef (from vue)
• watch (from vue)
• drauuInstance.value?.undo
• drauuInstance.value?.redo
• drauuInstance.value?.clear
• drauuInstance.value?.cancel
• drauuInstance.value?.load
• drauuInstance.value?.dump
• disposables.forEach
• dispose
• drauuInstance.value?.unmount
• drauuInstance.value.canUndo
• drauuInstance.value.canRedo
• unrefElement (from @vueuse/core)
• cleanup
• createDrauu (from drauu)
• syncStatus
• drauuInstance.value.on
• onCanceledHook.trigger
• onCommittedHook.trigger
• onStartHook.trigger
• onEndHook.trigger
• onChangedHook.trigger
• tryOnScopeDispose (from @vueuse/shared)

Code

export function useDrauu(
  target: MaybeComputedElementRef,
  options?: UseDrauuOptions,
): UseDrauuReturn {
  const drauuInstance = deepRef<Drauu>()

  let disposables: Fn[] = []

  const onChangedHook = createEventHook<void>()
  const onCanceledHook = createEventHook<void>()
  const onCommittedHook = createEventHook<SVGElement | undefined>()
  const onStartHook = createEventHook<void>()
  const onEndHook = createEventHook<void>()
  const canUndo = shallowRef(false)
  const canRedo = shallowRef(false)
  const altPressed = shallowRef(false)
  const shiftPressed = shallowRef(false)

  const brush = deepRef<Brush>({
    color: 'black',
    size: 3,
    arrowEnd: false,
    cornerRadius: 0,
    dasharray: undefined,
    fill: 'transparent',
    mode: 'draw',
    ...options?.brush,
  })

  watch(brush, () => {
    const instance = drauuInstance.value

    if (instance) {
      instance.brush = brush.value
      instance.mode = brush.value.mode as DrawingMode
    }
  }, { deep: true })

  const undo = () => drauuInstance.value?.undo()
  const redo = () => drauuInstance.value?.redo()
  const clear = () => drauuInstance.value?.clear()
  const cancel = () => drauuInstance.value?.cancel()
  const load = (svg: string) => drauuInstance.value?.load(svg)
  const dump = () => drauuInstance.value?.dump()

  const cleanup = () => {
    disposables.forEach(dispose => dispose())
    drauuInstance.value?.unmount()
  }

  const syncStatus = () => {
    if (drauuInstance.value) {
      canUndo.value = drauuInstance.value.canUndo()
      canRedo.value = drauuInstance.value.canRedo()
      altPressed.value = drauuInstance.value.altPressed
      shiftPressed.value = drauuInstance.value.shiftPressed
    }
  }

  watch(
    () => unrefElement(target),
    (el) => {
      if (!el || typeof SVGSVGElement === 'undefined' || !(el instanceof SVGSVGElement))
        return

      if (drauuInstance.value)
        cleanup()

      drauuInstance.value = createDrauu({ el, ...options })

      syncStatus()

      disposables = [
        drauuInstance.value.on('canceled', () => onCanceledHook.trigger()),
        drauuInstance.value.on('committed', (node: SVGElement | undefined) => onCommittedHook.trigger(node)),
        drauuInstance.value.on('start', () => onStartHook.trigger()),
        drauuInstance.value.on('end', () => onEndHook.trigger()),
        drauuInstance.value.on('changed', () => {
          syncStatus()
          onChangedHook.trigger()
        }),
      ]
    },
    { flush: 'post' },
  )

  tryOnScopeDispose(() => cleanup())

  return {
    drauuInstance,

    load,
    dump,
    clear,
    cancel,
    undo,
    redo,
    canUndo,
    canRedo,
    brush,

    onChanged: onChangedHook.on,
    onCommitted: onCommittedHook.on,
    onStart: onStartHook.on,
    onEnd: onEndHook.on,
    onCanceled: onCanceledHook.on,
  }
}

Internal helpers

Declared inside another function in this file.

undo(): any

Returns: any

Calls:

• drauuInstance.value?.undo

Code

() => drauuInstance.value?.undo()

redo(): any

Returns: any

Calls:

• drauuInstance.value?.redo

Code

() => drauuInstance.value?.redo()

clear(): any

Returns: any

Calls:

• drauuInstance.value?.clear

Code

() => drauuInstance.value?.clear()

cancel(): any

Returns: any

Calls:

• drauuInstance.value?.cancel

Code

() => drauuInstance.value?.cancel()

load(svg: string): any

Parameters:

• svg string

Returns: any

Calls:

• drauuInstance.value?.load

Code

(svg: string) => drauuInstance.value?.load(svg)

dump(): any

Returns: any

Calls:

• drauuInstance.value?.dump

Code

() => drauuInstance.value?.dump()

cleanup(): void

Returns: void

Calls:

• disposables.forEach
• dispose
• drauuInstance.value?.unmount

Code

() => {
    disposables.forEach(dispose => dispose())
    drauuInstance.value?.unmount()
  }

syncStatus(): void

Returns: void

Calls:

• drauuInstance.value.canUndo
• drauuInstance.value.canRedo

Code

() => {
    if (drauuInstance.value) {
      canUndo.value = drauuInstance.value.canUndo()
      canRedo.value = drauuInstance.value.canRedo()
      altPressed.value = drauuInstance.value.altPressed
      shiftPressed.value = drauuInstance.value.shiftPressed
    }
  }

---

Interfaces

UseDrauuReturn

Interface Code

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
}

Properties

Name	Type	Optional	Description
drauuInstance	Ref<Drauu \| undefined>	✗	not shown
load	(svg: string) => void	✗	not shown
dump	() => string \| undefined	✗	not shown
clear	() => void	✗	not shown
cancel	() => void	✗	not shown
undo	() => boolean \| undefined	✗	not shown
redo	() => boolean \| undefined	✗	not shown
canUndo	ShallowRef<boolean>	✗	not shown
canRedo	ShallowRef<boolean>	✗	not shown
brush	Ref<Brush>	✗	not shown
onChanged	EventHookOn	✗	not shown
onCommitted	EventHookOn	✗	not shown
onStart	EventHookOn	✗	not shown
onEnd	EventHookOn	✗	not shown
onCanceled	EventHookOn	✗	not shown

---

Type Aliases

UseDrauuOptions

type UseDrauuOptions = Omit<Options, 'el'>;

---

Generated by Syntax Scribe