vue-konva/dist/vue-konva.umd.js

Vue binding to canvas element via Konva framework

(function(o,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("konva")):typeof define=="function"&&define.amd?define(["exports","vue","konva"],c):(o=typeof globalThis<"u"?globalThis:o||self,c(o["vue-konva"]={},o.Vue,o.Konva))})(this,(function(o,c,_){"use strict";function v(r){if(!_.autoDrawEnabled){const t=r.getLayer()||r.getStage();t&&t.batchDraw()}}const k={key:!0,style:!0,elm:!0,isRootInsert:!0},N=".vue-konva-event";function T(r,t,i,d){const e=r.__konvaNode,g={};let a=!1;for(let n in i){if(k.hasOwnProperty(n))continue;const f=n.slice(0,2)==="on",h=i[n]!==t[n];if(f&&h){let m=n.slice(2).toLowerCase();m.slice(0,7)==="content"&&(m="content"+m.slice(7,1).toUpperCase()+m.slice(8)),e?.off(m+N,i[n])}!t.hasOwnProperty(n)&&e?.setAttr(n,void 0)}for(let n in t){if(k.hasOwnProperty(n))continue;let f=n.slice(0,2)==="on";const h=i[n]!==t[n];if(f&&h){let l=n.slice(2).toLowerCase();l.slice(0,7)==="content"&&(l="content"+l.slice(7,1).toUpperCase()+l.slice(8)),t[n]&&(e?.off(l+N),e?.on(l+N,t[n]))}!f&&(t[n]!==i[n]||d&&t[n]!==e?.getAttr(n))&&(a=!0,g[n]=t[n])}a&&e&&(e.setAttrs(g),v(e))}const J="V";function Q(r){function t(i){return i?.__konvaNode?i:i?.parent?t(i.parent):(console.error("vue-konva error: Can not find parent node"),null)}return t(r.parent)}function P(r){return r.component?r.component.__konvaNode||P(r.component.subTree):null}function X(r){const{el:t,component:i}=r,d=P(r);if(t?.tagName&&i&&!d){const e=t.tagName.toLowerCase();return console.error(`vue-konva error: You are trying to render "${e}" inside your component tree. Looks like it is not a Konva node. You can render only Konva components inside the Stage.`),null}return d}function x(r){const t=e=>!!e&&typeof e=="object"&&"component"in e,i=e=>Array.isArray(e),d=e=>t(e)?[e,...d(e.children)]:i(e)?e.flatMap(d):[];return d(r.children)}function L(r,t){const i=x(r),d=[];i.forEach(g=>{const a=X(g);a&&d.push(a)});let e=!1;d.forEach((g,a)=>{g.getZIndex()!==a&&(g.setZIndex(a),e=!0)}),e&&v(t)}const ee=_.default?.Stage||_.Stage,w=c.defineComponent({name:"Stage",props:{config:{type:Object,default:function(){return{}}},__useStrictMode:{type:Boolean}},inheritAttrs:!1,setup(r,{attrs:t,slots:i,expose:d}){const e=c.getCurrentInstance();if(!e)return;const g=c.reactive({}),a=c.ref(null),n=new ee({width:r.config.width,height:r.config.height,container:document.createElement("div")});e.__konvaNode=n,l();function f(){return e?.__konvaNode}function h(){return e?.__konvaNode}function l(){if(!e)return;const m=g||{},p={...t,...r.config};T(e,p,m,r.__useStrictMode),Object.assign(g,p)}return c.onMounted(()=>{a.value&&(a.value.innerHTML="",n.container(a.value)),l()}),c.onUpdated(()=>{l(),L(e.subTree,n)}),c.onBeforeUnmount(()=>{n.destroy()}),c.watch(()=>r.config,l,{deep:!0}),d({getStage:h,getNode:f}),()=>c.h("div",{ref:a,style:t?.style},i.default?.())}}),ne=".vue-konva-event",te={Group:!0,Layer:!0,FastLayer:!0,Label:!0};function s(r,t){return c.defineComponent({name:r,props:{config:{type:Object,default:function(){return{}}},__useStrictMode:{type:Boolean}},setup(i,{attrs:d,slots:e,expose:g}){const a=c.getCurrentInstance();if(!a)return;const n=c.reactive({}),f=new t;a.__konvaNode=f,a.vnode.__konvaNode=f,m();function h(){return a?.__konvaNode}function l(){return a?.__konvaNode}function m(){if(!a)return;const y={};for(const S in a?.vnode.props)S.slice(0,2)==="on"&&(y[S]=a.vnode.props[S]);const ce=n||{},H={...d,...i.config,...y};T(a,H,ce,i.__useStrictMode),Object.assign(n,H)}c.onMounted(()=>{const y=Q(a)?.__konvaNode;y&&"add"in y&&y.add(f),v(f)}),c.onUnmounted(()=>{v(f),f.destroy(),f.off(ne)}),c.onUpdated(()=>{m(),L(a.subTree,f)}),c.watch(()=>i.config,m,{deep:!0}),g({getStage:l,getNode:h});const p=te.hasOwnProperty(r);return()=>p?c.h("template",{},e.default?.()):null}})}function oe(r,t,i){const d=c.ref(null),e=c.ref("loading"),g=(n,f,h)=>{e.value="loading";const l=new Image;f&&(l.crossOrigin=f),h&&(l.referrerPolicy=h),l.onload=()=>{d.value=l,e.value="loaded"},l.onerror=()=>{d.value=null,e.value="error"},l.src=n},a=c.computed(()=>({url:c.toValue(r),crossorigin:c.toValue(t),referrerPolicy:c.toValue(i)}));return c.watch(a,({url:n,crossorigin:f,referrerPolicy:h})=>{n&&g(n,f,h)},{immediate:!0}),[d,e]}const u=_.default||_,b=s("Arc",u.Arc),A=s("Arrow",u.Arrow),C=s("Circle",u.Circle),E=s("Ellipse",u.Ellipse),O=s("FastLayer",u.FastLayer),R=s("Group",u.Group),I=s("Image",u.Image),j=s("Label",u.Label),M=s("Layer",u.Layer),V=s("Line",u.Line),U=s("Path",u.Path),K=s("Rect",u.Rect),F=s("RegularPolygon",u.RegularPolygon),G=s("Ring",u.Ring),$=s("Shape",u.Shape),W=s("Sprite",u.Sprite),B=s("Star",u.Star),q=s("Tag",u.Tag),D=s("Text",u.Text),Y=s("TextPath",u.TextPath),Z=s("Transformer",u.Transformer),z=s("Wedge",u.Wedge),re=Object.freeze(Object.defineProperty({__proto__:null,Arc:b,Arrow:A,Circle:C,Ellipse:E,FastLayer:O,Group:R,Image:I,Label:j,Layer:M,Line:V,Path:U,Rect:K,RegularPolygon:F,Ring:G,Shape:$,Sprite:W,Star:B,Tag:q,Text:D,TextPath:Y,Transformer:Z,Wedge:z},Symbol.toStringTag,{value:"Module"})),ae={install:(r,t)=>{const i=t?.prefix||J,d=t?.customNodes?Object.entries(t.customNodes).map(([g,a])=>s(g,a)):[];[w,...Object.values(re),...d].forEach(g=>{r.component(`${i}${g.name}`,g)})}};o.Arc=b,o.Arrow=A,o.Circle=C,o.Ellipse=E,o.FastLayer=O,o.Group=R,o.Image=I,o.Label=j,o.Layer=M,o.Line=V,o.Path=U,o.Rect=K,o.RegularPolygon=F,o.Ring=G,o.Shape=$,o.Sprite=W,o.Stage=w,o.Star=B,o.Tag=q,o.Text=D,o.TextPath=Y,o.Transformer=Z,o.Wedge=z,o.default=ae,o.useImage=oe,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));