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

Vue binding to canvas element via Konva framework

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