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

Vue binding to canvas element via Konva framework

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