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