diff --git a/src/components.ts b/src/components.ts new file mode 100644 index 0000000..d10513f --- /dev/null +++ b/src/components.ts @@ -0,0 +1,56 @@ +import KonvaModule from 'konva'; +import KonvaNode from './components/KonvaNode'; + +// hack for umd build +const Konva = (KonvaModule as any).default || KonvaModule; + +export const Arc = KonvaNode('Arc', Konva.Arc); +export const Arrow = KonvaNode('Arrow', Konva.Arrow); +export const Circle = KonvaNode('Circle', Konva.Circle); +export const Ellipse = KonvaNode('Ellipse', Konva.Ellipse); +export const FastLayer = KonvaNode('FastLayer', Konva.FastLayer); +export const Group = KonvaNode('Group', Konva.Group); +export const Image = KonvaNode('Image', Konva.Image); +export const Label = KonvaNode('Label', Konva.Label); +export const Layer = KonvaNode('Layer', Konva.Layer); +export const Line = KonvaNode('Line', Konva.Line); +export const Path = KonvaNode('Path', Konva.Path); +export const Rect = KonvaNode('Rect', Konva.Rect); +export const RegularPolygon = KonvaNode('RegularPolygon', Konva.RegularPolygon); +export const Ring = KonvaNode('Ring', Konva.Ring); +export const Shape = KonvaNode('Shape', Konva.Shape); +export const Sprite = KonvaNode('Sprite', Konva.Sprite); +export const Star = KonvaNode('Star', Konva.Star); +export const Tag = KonvaNode('Tag', Konva.Tag); +export const Text = KonvaNode('Text', Konva.Text); +export const TextPath = KonvaNode('TextPath', Konva.TextPath); +export const Transformer = KonvaNode('Transformer', Konva.Transformer); +export const Wedge = KonvaNode('Wedge', Konva.Wedge); + + +declare module 'vue' { + export interface GlobalComponents { + Arc: typeof Arc; + Arrow: typeof Arrow; + Circle: typeof Circle; + Ellipse: typeof Ellipse; + FastLayer: typeof FastLayer; + Group: typeof Group; + Image: typeof Image; + Label: typeof Label; + Layer: typeof Layer; + Line: typeof Line; + Path: typeof Path; + Rect: typeof Rect; + RegularPolygon: typeof RegularPolygon; + Ring: typeof Ring; + Shape: typeof Shape; + Sprite: typeof Sprite; + Star: typeof Star; + Tag: typeof Tag; + Text: typeof Text; + TextPath: typeof TextPath; + Transformer: typeof Transformer; + Wedge: typeof Wedge; + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index e552da6..99f9cb9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,14 +1,17 @@ import type { Component } from 'vue'; import Stage from './components/Stage'; import { componentPrefix } from './utils'; -import KonvaModule from 'konva'; import KonvaNode from './components/KonvaNode'; import { KonvaNodeConstructor } from './types'; import { useImage } from './use-image'; +import * as konvaComponentsModule from './components'; export { useImage }; export type { KonvaNodeConstructor } from './types'; +export { Stage }; +export * from './components'; + const VueKonva = { install: ( app: any, @@ -18,40 +21,16 @@ const VueKonva = { ) => { const prefixToUse = options?.prefix || componentPrefix; - // hack for umd build - const Konva = (KonvaModule as any).default || KonvaModule; - - const konvaNodeConstructors: Record = { - Arc: Konva.Arc, - Arrow: Konva.Arrow, - Circle: Konva.Circle, - Ellipse: Konva.Ellipse, - FastLayer: Konva.FastLayer, - Group: Konva.Group, - Image: Konva.Image, - Label: Konva.Label, - Layer: Konva.Layer, - Line: Konva.Line, - Path: Konva.Path, - Rect: Konva.Rect, - RegularPolygon: Konva.RegularPolygon, - Ring: Konva.Ring, - Shape: Konva.Shape, - Sprite: Konva.Sprite, - Star: Konva.Star, - Tag: Konva.Tag, - Text: Konva.Text, - TextPath: Konva.TextPath, - Transformer: Konva.Transformer, - Wedge: Konva.Wedge, - ...options?.customNodes, - }; + const customNodes = options?.customNodes + ? Object.entries(options.customNodes).map(([name, constructor]) => + KonvaNode(name, constructor) + ) + : [] const components: Component[] = [ Stage, - ...Object.entries(konvaNodeConstructors).map(([name, constructor]) => - KonvaNode(name, constructor), - ), + ...Object.values(konvaComponentsModule), + ...customNodes, ]; components.forEach((component) => { app.component(`${prefixToUse}${component.name}`, component);