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

Vue binding to canvas element via Konva framework

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