⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

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

📚 Table of Contents

• Imports
• Variables & Constants
• 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

---

Variables & Constants

Name	Type	Kind	Value	Exported
disposables	Fn[]	let/var	[]	✗
instance	any	const	drauuInstance.value	✗

---

Vue Composition API

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

---

Functions

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

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,
  }
}

• JSDoc:

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

• Parameters:

• target: MaybeComputedElementRef
• options: UseDrauuOptions
• Return Type: UseDrauuReturn
• 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)

undo(): any

Code

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

• Return Type: any
• Calls:
• drauuInstance.value?.undo

redo(): any

Code

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

• Return Type: any
• Calls:
• drauuInstance.value?.redo

clear(): any

Code

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

• Return Type: any
• Calls:
• drauuInstance.value?.clear

cancel(): any

Code

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

• Return Type: any
• Calls:
• drauuInstance.value?.cancel

load(svg: string): any

Code

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

• Parameters:
• svg: string
• Return Type: any
• Calls:
• drauuInstance.value?.load

dump(): any

Code

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

• Return Type: any
• Calls:
• drauuInstance.value?.dump

cleanup(): void

Code

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

• Return Type: void
• Calls:
• disposables.forEach
• dispose
• drauuInstance.value?.unmount

syncStatus(): void

Code

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

• Return Type: void
• Calls:
• drauuInstance.value.canUndo
• drauuInstance.value.canRedo

---

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>	✗
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	✗

---

Type Aliases

UseDrauuOptions

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

---