w-flow-vue 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +1 -1
  2. package/dist/w-flow-vue.umd.js +2 -2
  3. package/dist/w-flow-vue.umd.js.map +1 -1
  4. package/docs/components_WFlowVue.vue.html +35 -1
  5. package/docs/components_ui_Controls.vue.html +1 -1
  6. package/docs/examples/app.html +1 -1
  7. package/docs/examples/app.umd.js +3 -3
  8. package/docs/examples/app.umd.js.map +1 -1
  9. package/docs/examples/ex-AppBasic.html +1 -1
  10. package/docs/examples/ex-AppConnectivity.html +1 -1
  11. package/docs/global.html +1 -1
  12. package/docs/index.html +1 -1
  13. package/docs/js_defaults.mjs.html +1 -1
  14. package/docs/js_edgePath.mjs.html +1 -1
  15. package/docs/js_fixSvgNs.mjs.html +1 -1
  16. package/docs/js_geometry.mjs.html +1 -1
  17. package/docs/js_graph.mjs.html +1 -1
  18. package/docs/js_stepRouting.mjs.html +1 -1
  19. package/docs/module-WFlowVue.html +1 -1
  20. package/package.json +1 -1
  21. package/src/components/WFlowVue.vue +34 -0
package/dist/w-flow-vue.umd.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * w-flow-vue v1.0.21
2
+ * w-flow-vue v1.0.22
3
3
  * (c) 2018-2021 yuda-lyu(semisphere)
4
4
  * Released under the MIT License.
5
5
  */
@@ -11,5 +11,5 @@
11
11
  * Copyright (c) 2025 Michael Mclaughlin <M8ch88l@gmail.com>
12
12
  * MIT Licence
13
13
  */
14
- var Gu,Zu,qu=9e15,Qu=1e9,Ju="0123456789abcdef",Ku="2.3025850929940456840179914546843642076011014886287729760333279009675726096773524802359972050895982983419677840422862486334095254650828067566662873690987816894829072083255546808437998948262331985283935053089653777326288461633662222876982198867465436674744042432743651550489343149393914796194044002221051017141748003688084012647080685567743216228355220114804663715659121373450747856947683463616792101806445070648000277502684916746550586856935673420670581136429224554405758925724208241314695689016758940256776311356919292033376587141660230105703089634572075440370847469940168269282808481184289314848524948644871927809676271275775397027668605952496716674183485704422507197965004714951050492214776567636938662976979522110718264549734772662425709429322582798502585509785265383207606726317164309505995087807523710333101197857547331541421808427543863591778117054309827482385045648019095610299291824318237525357709750539565187697510374970888692180205189339507238539205144634197265287286965110862571492198849978748873771345686209167058",nd="3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491298336733624406566430860213949463952247371907021798609437027705392171762931767523846748184676694051320005681271452635608277857713427577896091736371787214684409012249534301465495853710507922796892589235420199561121290219608640344181598136297747713099605187072113499999983729780499510597317328160963185950244594553469083026425223082533446850352619311881710100031378387528865875332083814206171776691473035982534904287554687311595628638823537875937519577818577805321712268066130019278766111959092164201989380952572010654858632789",ed={precision:20,rounding:4,modulo:1,toExpNeg:-7,toExpPos:21,minE:-qu,maxE:qu,crypto:!1},td=!0,od="[DecimalError] ",rd=od+"Invalid argument: ",id=od+"Precision limit exceeded",ad=od+"crypto unavailable",ld="[object Decimal]",sd=Math.floor,ud=Math.pow,dd=/^0b([01]+(\.[01]*)?|\.[01]+)(p[+-]?\d+)?$/i,cd=/^0x([0-9a-f]+(\.[0-9a-f]*)?|\.[0-9a-f]+)(p[+-]?\d+)?$/i,pd=/^0o([0-7]+(\.[0-7]*)?|\.[0-7]+)(p[+-]?\d+)?$/i,fd=/^(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,hd=1e7,gd=Ku.length-1,vd=nd.length-1,md={toStringTag:ld};function Ad(n){var e,t,o,r=n.length-1,i="",a=n[0];if(r>0){for(i+=a,e=1;e<r;e++)(t=7-(o=n[e]+"").length)&&(i+=Pd(t)),i+=o;(t=7-(o=(a=n[e])+"").length)&&(i+=Pd(t))}else if(0===a)return"0";for(;a%10==0;)a/=10;return i+a}function bd(n,e,t){if(n!==~~n||n<e||n>t)throw Error(rd+n)}function yd(n,e,t,o){var r,i,a,l;for(i=n[0];i>=10;i/=10)--e;return--e<0?(e+=7,r=0):(r=Math.ceil((e+1)/7),e%=7),i=ud(10,7-e),l=n[r]%i|0,null==o?e<3?(0==e?l=l/100|0:1==e&&(l=l/10|0),a=t<4&&99999==l||t>3&&49999==l||5e4==l||0==l):a=(t<4&&l+1==i||t>3&&l+1==i/2)&&(n[r+1]/i/100|0)==ud(10,e-2)-1||(l==i/2||0==l)&&!(n[r+1]/i/100|0):e<4?(0==e?l=l/1e3|0:1==e?l=l/100|0:2==e&&(l=l/10|0),a=(o||t<4)&&9999==l||!o&&t>3&&4999==l):a=((o||t<4)&&l+1==i||!o&&t>3&&l+1==i/2)&&(n[r+1]/i/1e3|0)==ud(10,e-3)-1,a}function Cd(n,e,t){for(var o,r,i=[0],a=0,l=n.length;a<l;){for(r=i.length;r--;)i[r]*=e;for(i[0]+=Ju.indexOf(n.charAt(a++)),o=0;o<i.length;o++)i[o]>t-1&&(void 0===i[o+1]&&(i[o+1]=0),i[o+1]+=i[o]/t|0,i[o]%=t)}return i.reverse()}md.absoluteValue=md.abs=function(){var n=new this.constructor(this);return n.s<0&&(n.s=1),wd(n)},md.ceil=function(){return wd(new this.constructor(this),this.e+1,2)},md.clampedTo=md.clamp=function(n,e){var t=this,o=t.constructor;if(n=new o(n),e=new o(e),!n.s||!e.s)return new o(NaN);if(n.gt(e))throw Error(rd+e);return t.cmp(n)<0?n:t.cmp(e)>0?e:new o(t)},md.comparedTo=md.cmp=function(n){var e,t,o,r,i=this,a=i.d,l=(n=new i.constructor(n)).d,s=i.s,u=n.s;if(!a||!l)return s&&u?s!==u?s:a===l?0:!a^s<0?1:-1:NaN;if(!a[0]||!l[0])return a[0]?s:l[0]?-u:0;if(s!==u)return s;if(i.e!==n.e)return i.e>n.e^s<0?1:-1;for(e=0,t=(o=a.length)<(r=l.length)?o:r;e<t;++e)if(a[e]!==l[e])return a[e]>l[e]^s<0?1:-1;return o===r?0:o>r^s<0?1:-1},md.cosine=md.cos=function(){var n,e,t=this,o=t.constructor;return t.d?t.d[0]?(n=o.precision,e=o.rounding,o.precision=n+Math.max(t.e,t.sd())+7,o.rounding=1,t=function(n,e){var t,o,r;if(e.isZero())return e;o=e.d.length,o<32?r=(1/Ld(4,t=Math.ceil(o/3))).toString():(t=16,r="2.3283064365386962890625e-10");n.precision+=t,e=Md(n,1,e.times(r),new n(1));for(var i=t;i--;){var a=e.times(e);e=a.times(a).minus(a).times(8).plus(1)}return n.precision-=t,e}(o,Dd(o,t)),o.precision=n,o.rounding=e,wd(2==Zu||3==Zu?t.neg():t,n,e,!0)):new o(1):new o(NaN)},md.cubeRoot=md.cbrt=function(){var n,e,t,o,r,i,a,l,s,u,d=this,c=d.constructor;if(!d.isFinite()||d.isZero())return new c(d);for(td=!1,(i=d.s*ud(d.s*d,1/3))&&Math.abs(i)!=1/0?o=new c(i.toString()):(t=Ad(d.d),(i=((n=d.e)-t.length+1)%3)&&(t+=1==i||-2==i?"0":"00"),i=ud(t,1/3),n=sd((n+1)/3)-(n%3==(n<0?-1:2)),(o=new c(t=i==1/0?"5e"+n:(t=i.toExponential()).slice(0,t.indexOf("e")+1)+n)).s=d.s),a=(n=c.precision)+3;;)if(u=(s=(l=o).times(l).times(l)).plus(d),o=xd(u.plus(d).times(l),u.plus(s),a+2,1),Ad(l.d).slice(0,a)===(t=Ad(o.d)).slice(0,a)){if("9999"!=(t=t.slice(a-3,a+1))&&(r||"4999"!=t)){+t&&(+t.slice(1)||"5"!=t.charAt(0))||(wd(o,n+1,1),e=!o.times(o).times(o).eq(d));break}if(!r&&(wd(l,n+1,0),l.times(l).times(l).eq(d))){o=l;break}a+=4,r=1}return td=!0,wd(o,n,c.rounding,e)},md.decimalPlaces=md.dp=function(){var n,e=this.d,t=NaN;if(e){if(t=7*((n=e.length-1)-sd(this.e/7)),n=e[n])for(;n%10==0;n/=10)t--;t<0&&(t=0)}return t},md.dividedBy=md.div=function(n){return xd(this,new this.constructor(n))},md.dividedToIntegerBy=md.divToInt=function(n){var e=this.constructor;return wd(xd(this,new e(n),0,1,1),e.precision,e.rounding)},md.equals=md.eq=function(n){return 0===this.cmp(n)},md.floor=function(){return wd(new this.constructor(this),this.e+1,3)},md.greaterThan=md.gt=function(n){return this.cmp(n)>0},md.greaterThanOrEqualTo=md.gte=function(n){var e=this.cmp(n);return 1==e||0===e},md.hyperbolicCosine=md.cosh=function(){var n,e,t,o,r,i=this,a=i.constructor,l=new a(1);if(!i.isFinite())return new a(i.s?1/0:NaN);if(i.isZero())return l;t=a.precision,o=a.rounding,a.precision=t+Math.max(i.e,i.sd())+4,a.rounding=1,(r=i.d.length)<32?e=(1/Ld(4,n=Math.ceil(r/3))).toString():(n=16,e="2.3283064365386962890625e-10"),i=Md(a,1,i.times(e),new a(1),!0);for(var s,u=n,d=new a(8);u--;)s=i.times(i),i=l.minus(s.times(d.minus(s.times(d))));return wd(i,a.precision=t,a.rounding=o,!0)},md.hyperbolicSine=md.sinh=function(){var n,e,t,o,r=this,i=r.constructor;if(!r.isFinite()||r.isZero())return new i(r);if(e=i.precision,t=i.rounding,i.precision=e+Math.max(r.e,r.sd())+4,i.rounding=1,(o=r.d.length)<3)r=Md(i,2,r,r,!0);else{n=(n=1.4*Math.sqrt(o))>16?16:0|n,r=Md(i,2,r=r.times(1/Ld(5,n)),r,!0);for(var a,l=new i(5),s=new i(16),u=new i(20);n--;)a=r.times(r),r=r.times(l.plus(a.times(s.times(a).plus(u))))}return i.precision=e,i.rounding=t,wd(r,e,t,!0)},md.hyperbolicTangent=md.tanh=function(){var n,e,t=this,o=t.constructor;return t.isFinite()?t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+7,o.rounding=1,xd(t.sinh(),t.cosh(),o.precision=n,o.rounding=e)):new o(t.s)},md.inverseCosine=md.acos=function(){var n=this,e=n.constructor,t=n.abs().cmp(1),o=e.precision,r=e.rounding;return-1!==t?0===t?n.isNeg()?Bd(e,o,r):new e(0):new e(NaN):n.isZero()?Bd(e,o+4,r).times(.5):(e.precision=o+6,e.rounding=1,n=new e(1).minus(n).div(n.plus(1)).sqrt().atan(),e.precision=o,e.rounding=r,n.times(2))},md.inverseHyperbolicCosine=md.acosh=function(){var n,e,t=this,o=t.constructor;return t.lte(1)?new o(t.eq(1)?0:NaN):t.isFinite()?(n=o.precision,e=o.rounding,o.precision=n+Math.max(Math.abs(t.e),t.sd())+4,o.rounding=1,td=!1,t=t.times(t).minus(1).sqrt().plus(t),td=!0,o.precision=n,o.rounding=e,t.ln()):new o(t)},md.inverseHyperbolicSine=md.asinh=function(){var n,e,t=this,o=t.constructor;return!t.isFinite()||t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+2*Math.max(Math.abs(t.e),t.sd())+6,o.rounding=1,td=!1,t=t.times(t).plus(1).sqrt().plus(t),td=!0,o.precision=n,o.rounding=e,t.ln())},md.inverseHyperbolicTangent=md.atanh=function(){var n,e,t,o,r=this,i=r.constructor;return r.isFinite()?r.e>=0?new i(r.abs().eq(1)?r.s/0:r.isZero()?r:NaN):(n=i.precision,e=i.rounding,o=r.sd(),Math.max(o,n)<2*-r.e-1?wd(new i(r),n,e,!0):(i.precision=t=o-r.e,r=xd(r.plus(1),new i(1).minus(r),t+n,1),i.precision=n+4,i.rounding=1,r=r.ln(),i.precision=n,i.rounding=e,r.times(.5))):new i(NaN)},md.inverseSine=md.asin=function(){var n,e,t,o,r=this,i=r.constructor;return r.isZero()?new i(r):(e=r.abs().cmp(1),t=i.precision,o=i.rounding,-1!==e?0===e?((n=Bd(i,t+4,o).times(.5)).s=r.s,n):new i(NaN):(i.precision=t+6,i.rounding=1,r=r.div(new i(1).minus(r.times(r)).sqrt().plus(1)).atan(),i.precision=t,i.rounding=o,r.times(2)))},md.inverseTangent=md.atan=function(){var n,e,t,o,r,i,a,l,s,u=this,d=u.constructor,c=d.precision,p=d.rounding;if(u.isFinite()){if(u.isZero())return new d(u);if(u.abs().eq(1)&&c+4<=vd)return(a=Bd(d,c+4,p).times(.25)).s=u.s,a}else{if(!u.s)return new d(NaN);if(c+4<=vd)return(a=Bd(d,c+4,p).times(.5)).s=u.s,a}for(d.precision=l=c+10,d.rounding=1,n=t=Math.min(28,l/7+2|0);n;--n)u=u.div(u.times(u).plus(1).sqrt().plus(1));for(td=!1,e=Math.ceil(l/7),o=1,s=u.times(u),a=new d(u),r=u;-1!==n;)if(r=r.times(s),i=a.minus(r.div(o+=2)),r=r.times(s),void 0!==(a=i.plus(r.div(o+=2))).d[e])for(n=e;a.d[n]===i.d[n]&&n--;);return t&&(a=a.times(2<<t-1)),td=!0,wd(a,d.precision=c,d.rounding=p,!0)},md.isFinite=function(){return!!this.d},md.isInteger=md.isInt=function(){return!!this.d&&sd(this.e/7)>this.d.length-2},md.isNaN=function(){return!this.s},md.isNegative=md.isNeg=function(){return this.s<0},md.isPositive=md.isPos=function(){return this.s>0},md.isZero=function(){return!!this.d&&0===this.d[0]},md.lessThan=md.lt=function(n){return this.cmp(n)<0},md.lessThanOrEqualTo=md.lte=function(n){return this.cmp(n)<1},md.logarithm=md.log=function(n){var e,t,o,r,i,a,l,s,u=this,d=u.constructor,c=d.precision,p=d.rounding;if(null==n)n=new d(10),e=!0;else{if(t=(n=new d(n)).d,n.s<0||!t||!t[0]||n.eq(1))return new d(NaN);e=n.eq(10)}if(t=u.d,u.s<0||!t||!t[0]||u.eq(1))return new d(t&&!t[0]?-1/0:1!=u.s?NaN:t?0:1/0);if(e)if(t.length>1)i=!0;else{for(r=t[0];r%10==0;)r/=10;i=1!==r}if(td=!1,a=$d(u,l=c+5),o=e?_d(d,l+10):$d(n,l),yd((s=xd(a,o,l,1)).d,r=c,p))do{if(a=$d(u,l+=10),o=e?_d(d,l+10):$d(n,l),s=xd(a,o,l,1),!i){+Ad(s.d).slice(r+1,r+15)+1==1e14&&(s=wd(s,c+1,0));break}}while(yd(s.d,r+=10,p));return td=!0,wd(s,c,p)},md.minus=md.sub=function(n){var e,t,o,r,i,a,l,s,u,d,c,p,f=this,h=f.constructor;if(n=new h(n),!f.d||!n.d)return f.s&&n.s?f.d?n.s=-n.s:n=new h(n.d||f.s!==n.s?f:NaN):n=new h(NaN),n;if(f.s!=n.s)return n.s=-n.s,f.plus(n);if(u=f.d,p=n.d,l=h.precision,s=h.rounding,!u[0]||!p[0]){if(p[0])n.s=-n.s;else{if(!u[0])return new h(3===s?-0:0);n=new h(f)}return td?wd(n,l,s):n}if(t=sd(n.e/7),d=sd(f.e/7),u=u.slice(),i=d-t){for((c=i<0)?(e=u,i=-i,a=p.length):(e=p,t=d,a=u.length),i>(o=Math.max(Math.ceil(l/7),a)+2)&&(i=o,e.length=1),e.reverse(),o=i;o--;)e.push(0);e.reverse()}else{for((c=(o=u.length)<(a=p.length))&&(a=o),o=0;o<a;o++)if(u[o]!=p[o]){c=u[o]<p[o];break}i=0}for(c&&(e=u,u=p,p=e,n.s=-n.s),a=u.length,o=p.length-a;o>0;--o)u[a++]=0;for(o=p.length;o>i;){if(u[--o]<p[o]){for(r=o;r&&0===u[--r];)u[r]=hd-1;--u[r],u[o]+=hd}u[o]-=p[o]}for(;0===u[--a];)u.pop();for(;0===u[0];u.shift())--t;return u[0]?(n.d=u,n.e=kd(u,t),td?wd(n,l,s):n):new h(3===s?-0:0)},md.modulo=md.mod=function(n){var e,t=this,o=t.constructor;return n=new o(n),!t.d||!n.s||n.d&&!n.d[0]?new o(NaN):!n.d||t.d&&!t.d[0]?wd(new o(t),o.precision,o.rounding):(td=!1,9==o.modulo?(e=xd(t,n.abs(),0,3,1)).s*=n.s:e=xd(t,n,0,o.modulo,1),e=e.times(n),td=!0,t.minus(e))},md.naturalExponential=md.exp=function(){return Fd(this)},md.naturalLogarithm=md.ln=function(){return $d(this)},md.negated=md.neg=function(){var n=new this.constructor(this);return n.s=-n.s,wd(n)},md.plus=md.add=function(n){var e,t,o,r,i,a,l,s,u,d,c=this,p=c.constructor;if(n=new p(n),!c.d||!n.d)return c.s&&n.s?c.d||(n=new p(n.d||c.s===n.s?c:NaN)):n=new p(NaN),n;if(c.s!=n.s)return n.s=-n.s,c.minus(n);if(u=c.d,d=n.d,l=p.precision,s=p.rounding,!u[0]||!d[0])return d[0]||(n=new p(c)),td?wd(n,l,s):n;if(i=sd(c.e/7),o=sd(n.e/7),u=u.slice(),r=i-o){for(r<0?(t=u,r=-r,a=d.length):(t=d,o=i,a=u.length),r>(a=(i=Math.ceil(l/7))>a?i+1:a+1)&&(r=a,t.length=1),t.reverse();r--;)t.push(0);t.reverse()}for((a=u.length)-(r=d.length)<0&&(r=a,t=d,d=u,u=t),e=0;r;)e=(u[--r]=u[r]+d[r]+e)/hd|0,u[r]%=hd;for(e&&(u.unshift(e),++o),a=u.length;0==u[--a];)u.pop();return n.d=u,n.e=kd(u,o),td?wd(n,l,s):n},md.precision=md.sd=function(n){var e,t=this;if(void 0!==n&&n!==!!n&&1!==n&&0!==n)throw Error(rd+n);return t.d?(e=Td(t.d),n&&t.e+1>e&&(e=t.e+1)):e=NaN,e},md.round=function(){var n=this,e=n.constructor;return wd(new e(n),n.e+1,e.rounding)},md.sine=md.sin=function(){var n,e,t=this,o=t.constructor;return t.isFinite()?t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+Math.max(t.e,t.sd())+7,o.rounding=1,t=function(n,e){var t,o=e.d.length;if(o<3)return e.isZero()?e:Md(n,2,e,e);t=(t=1.4*Math.sqrt(o))>16?16:0|t,e=e.times(1/Ld(5,t)),e=Md(n,2,e,e);for(var r,i=new n(5),a=new n(16),l=new n(20);t--;)r=e.times(e),e=e.times(i.plus(r.times(a.times(r).minus(l))));return e}(o,Dd(o,t)),o.precision=n,o.rounding=e,wd(Zu>2?t.neg():t,n,e,!0)):new o(NaN)},md.squareRoot=md.sqrt=function(){var n,e,t,o,r,i,a=this,l=a.d,s=a.e,u=a.s,d=a.constructor;if(1!==u||!l||!l[0])return new d(!u||u<0&&(!l||l[0])?NaN:l?a:1/0);for(td=!1,0==(u=Math.sqrt(+a))||u==1/0?(((e=Ad(l)).length+s)%2==0&&(e+="0"),u=Math.sqrt(e),s=sd((s+1)/2)-(s<0||s%2),o=new d(e=u==1/0?"5e"+s:(e=u.toExponential()).slice(0,e.indexOf("e")+1)+s)):o=new d(u.toString()),t=(s=d.precision)+3;;)if(o=(i=o).plus(xd(a,i,t+2,1)).times(.5),Ad(i.d).slice(0,t)===(e=Ad(o.d)).slice(0,t)){if("9999"!=(e=e.slice(t-3,t+1))&&(r||"4999"!=e)){+e&&(+e.slice(1)||"5"!=e.charAt(0))||(wd(o,s+1,1),n=!o.times(o).eq(a));break}if(!r&&(wd(i,s+1,0),i.times(i).eq(a))){o=i;break}t+=4,r=1}return td=!0,wd(o,s,d.rounding,n)},md.tangent=md.tan=function(){var n,e,t=this,o=t.constructor;return t.isFinite()?t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+10,o.rounding=1,(t=t.sin()).s=1,t=xd(t,new o(1).minus(t.times(t)).sqrt(),n+10,0),o.precision=n,o.rounding=e,wd(2==Zu||4==Zu?t.neg():t,n,e,!0)):new o(NaN)},md.times=md.mul=function(n){var e,t,o,r,i,a,l,s,u,d=this,c=d.constructor,p=d.d,f=(n=new c(n)).d;if(n.s*=d.s,!(p&&p[0]&&f&&f[0]))return new c(!n.s||p&&!p[0]&&!f||f&&!f[0]&&!p?NaN:p&&f?0*n.s:n.s/0);for(t=sd(d.e/7)+sd(n.e/7),(s=p.length)<(u=f.length)&&(i=p,p=f,f=i,a=s,s=u,u=a),i=[],o=a=s+u;o--;)i.push(0);for(o=u;--o>=0;){for(e=0,r=s+o;r>o;)l=i[r]+f[o]*p[r-o-1]+e,i[r--]=l%hd|0,e=l/hd|0;i[r]=(i[r]+e)%hd|0}for(;!i[--a];)i.pop();return e?++t:i.shift(),n.d=i,n.e=kd(i,t),td?wd(n,c.precision,c.rounding):n},md.toBinary=function(n,e){return Rd(this,2,n,e)},md.toDecimalPlaces=md.toDP=function(n,e){var t=this,o=t.constructor;return t=new o(t),void 0===n?t:(bd(n,0,Qu),void 0===e?e=o.rounding:bd(e,0,8),wd(t,n+t.e+1,e))},md.toExponential=function(n,e){var t,o=this,r=o.constructor;return void 0===n?t=Sd(o,!0):(bd(n,0,Qu),void 0===e?e=r.rounding:bd(e,0,8),t=Sd(o=wd(new r(o),n+1,e),!0,n+1)),o.isNeg()&&!o.isZero()?"-"+t:t},md.toFixed=function(n,e){var t,o,r=this,i=r.constructor;return void 0===n?t=Sd(r):(bd(n,0,Qu),void 0===e?e=i.rounding:bd(e,0,8),t=Sd(o=wd(new i(r),n+r.e+1,e),!1,n+o.e+1)),r.isNeg()&&!r.isZero()?"-"+t:t},md.toFraction=function(n){var e,t,o,r,i,a,l,s,u,d,c,p,f=this,h=f.d,g=f.constructor;if(!h)return new g(f);if(u=t=new g(1),o=s=new g(0),a=(i=(e=new g(o)).e=Td(h)-f.e-1)%7,e.d[0]=ud(10,a<0?7+a:a),null==n)n=i>0?e:u;else{if(!(l=new g(n)).isInt()||l.lt(u))throw Error(rd+l);n=l.gt(e)?i>0?e:u:l}for(td=!1,l=new g(Ad(h)),d=g.precision,g.precision=i=7*h.length*2;c=xd(l,e,0,1,1),1!=(r=t.plus(c.times(o))).cmp(n);)t=o,o=r,r=u,u=s.plus(c.times(r)),s=r,r=e,e=l.minus(c.times(r)),l=r;return r=xd(n.minus(t),o,0,1,1),s=s.plus(r.times(u)),t=t.plus(r.times(o)),s.s=u.s=f.s,p=xd(u,o,i,1).minus(f).abs().cmp(xd(s,t,i,1).minus(f).abs())<1?[u,o]:[s,t],g.precision=d,td=!0,p},md.toHexadecimal=md.toHex=function(n,e){return Rd(this,16,n,e)},md.toNearest=function(n,e){var t=this,o=t.constructor;if(t=new o(t),null==n){if(!t.d)return t;n=new o(1),e=o.rounding}else{if(n=new o(n),void 0===e?e=o.rounding:bd(e,0,8),!t.d)return n.s?t:n;if(!n.d)return n.s&&(n.s=t.s),n}return n.d[0]?(td=!1,t=xd(t,n,0,e,1).times(n),td=!0,wd(t)):(n.s=t.s,t=n),t},md.toNumber=function(){return+this},md.toOctal=function(n,e){return Rd(this,8,n,e)},md.toPower=md.pow=function(n){var e,t,o,r,i,a,l=this,s=l.constructor,u=+(n=new s(n));if(!(l.d&&n.d&&l.d[0]&&n.d[0]))return new s(ud(+l,u));if((l=new s(l)).eq(1))return l;if(o=s.precision,i=s.rounding,n.eq(1))return wd(l,o,i);if((e=sd(n.e/7))>=n.d.length-1&&(t=u<0?-u:u)<=9007199254740991)return r=zd(s,l,t,o),n.s<0?new s(1).div(r):wd(r,o,i);if((a=l.s)<0){if(e<n.d.length-1)return new s(NaN);if(1&n.d[e]||(a=1),0==l.e&&1==l.d[0]&&1==l.d.length)return l.s=a,l}return(e=0!=(t=ud(+l,u))&&isFinite(t)?new s(t+"").e:sd(u*(Math.log("0."+Ad(l.d))/Math.LN10+l.e+1)))>s.maxE+1||e<s.minE-1?new s(e>0?a/0:0):(td=!1,s.rounding=l.s=1,t=Math.min(12,(e+"").length),(r=Fd(n.times($d(l,o+t)),o)).d&&yd((r=wd(r,o+5,1)).d,o,i)&&(e=o+10,+Ad((r=wd(Fd(n.times($d(l,e+t)),e),e+5,1)).d).slice(o+1,o+15)+1==1e14&&(r=wd(r,o+1,0))),r.s=a,td=!0,s.rounding=i,wd(r,o,i))},md.toPrecision=function(n,e){var t,o=this,r=o.constructor;return void 0===n?t=Sd(o,o.e<=r.toExpNeg||o.e>=r.toExpPos):(bd(n,1,Qu),void 0===e?e=r.rounding:bd(e,0,8),t=Sd(o=wd(new r(o),n,e),n<=o.e||o.e<=r.toExpNeg,n)),o.isNeg()&&!o.isZero()?"-"+t:t},md.toSignificantDigits=md.toSD=function(n,e){var t=this.constructor;return void 0===n?(n=t.precision,e=t.rounding):(bd(n,1,Qu),void 0===e?e=t.rounding:bd(e,0,8)),wd(new t(this),n,e)},md.toString=function(){var n=this,e=n.constructor,t=Sd(n,n.e<=e.toExpNeg||n.e>=e.toExpPos);return n.isNeg()&&!n.isZero()?"-"+t:t},md.truncated=md.trunc=function(){return wd(new this.constructor(this),this.e+1,1)},md.valueOf=md.toJSON=function(){var n=this,e=n.constructor,t=Sd(n,n.e<=e.toExpNeg||n.e>=e.toExpPos);return n.isNeg()?"-"+t:t};var xd=function(){function n(n,e,t){var o,r=0,i=n.length;for(n=n.slice();i--;)o=n[i]*e+r,n[i]=o%t|0,r=o/t|0;return r&&n.unshift(r),n}function e(n,e,t,o){var r,i;if(t!=o)i=t>o?1:-1;else for(r=i=0;r<t;r++)if(n[r]!=e[r]){i=n[r]>e[r]?1:-1;break}return i}function t(n,e,t,o){for(var r=0;t--;)n[t]-=r,r=n[t]<e[t]?1:0,n[t]=r*o+n[t]-e[t];for(;!n[0]&&n.length>1;)n.shift()}return function(o,r,i,a,l,s){var u,d,c,p,f,h,g,v,m,A,b,y,C,x,w,S,k,_,B,T,P=o.constructor,z=o.s==r.s?1:-1,E=o.d,I=r.d;if(!(E&&E[0]&&I&&I[0]))return new P(o.s&&r.s&&(E?!I||E[0]!=I[0]:I)?E&&0==E[0]||!I?0*z:z/0:NaN);for(s?(f=1,d=o.e-r.e):(s=hd,f=7,d=sd(o.e/f)-sd(r.e/f)),B=I.length,k=E.length,A=(m=new P(z)).d=[],c=0;I[c]==(E[c]||0);c++);if(I[c]>(E[c]||0)&&d--,null==i?(x=i=P.precision,a=P.rounding):x=l?i+(o.e-r.e)+1:i,x<0)A.push(1),h=!0;else{if(x=x/f+2|0,c=0,1==B){for(p=0,I=I[0],x++;(c<k||p)&&x--;c++)w=p*s+(E[c]||0),A[c]=w/I|0,p=w%I|0;h=p||c<k}else{for((p=s/(I[0]+1)|0)>1&&(I=n(I,p,s),E=n(E,p,s),B=I.length,k=E.length),S=B,y=(b=E.slice(0,B)).length;y<B;)b[y++]=0;(T=I.slice()).unshift(0),_=I[0],I[1]>=s/2&&++_;do{p=0,(u=e(I,b,B,y))<0?(C=b[0],B!=y&&(C=C*s+(b[1]||0)),(p=C/_|0)>1?(p>=s&&(p=s-1),1==(u=e(g=n(I,p,s),b,v=g.length,y=b.length))&&(p--,t(g,B<v?T:I,v,s))):(0==p&&(u=p=1),g=I.slice()),(v=g.length)<y&&g.unshift(0),t(b,g,y,s),-1==u&&(u=e(I,b,B,y=b.length))<1&&(p++,t(b,B<y?T:I,y,s)),y=b.length):0===u&&(p++,b=[0]),A[c++]=p,u&&b[0]?b[y++]=E[S]||0:(b=[E[S]],y=1)}while((S++<k||void 0!==b[0])&&x--);h=void 0!==b[0]}A[0]||A.shift()}if(1==f)m.e=d,Gu=h;else{for(c=1,p=A[0];p>=10;p/=10)c++;m.e=c+d*f-1,wd(m,l?i+m.e+1:i,a,h)}return m}}();function wd(n,e,t,o){var r,i,a,l,s,u,d,c,p,f=n.constructor;n:if(null!=e){if(!(c=n.d))return n;for(r=1,l=c[0];l>=10;l/=10)r++;if((i=e-r)<0)i+=7,a=e,s=(d=c[p=0])/ud(10,r-a-1)%10|0;else if((p=Math.ceil((i+1)/7))>=(l=c.length)){if(!o)break n;for(;l++<=p;)c.push(0);d=s=0,r=1,a=(i%=7)-7+1}else{for(d=l=c[p],r=1;l>=10;l/=10)r++;s=(a=(i%=7)-7+r)<0?0:d/ud(10,r-a-1)%10|0}if(o=o||e<0||void 0!==c[p+1]||(a<0?d:d%ud(10,r-a-1)),u=t<4?(s||o)&&(0==t||t==(n.s<0?3:2)):s>5||5==s&&(4==t||o||6==t&&(i>0?a>0?d/ud(10,r-a):0:c[p-1])%10&1||t==(n.s<0?8:7)),e<1||!c[0])return c.length=0,u?(e-=n.e+1,c[0]=ud(10,(7-e%7)%7),n.e=-e||0):c[0]=n.e=0,n;if(0==i?(c.length=p,l=1,p--):(c.length=p+1,l=ud(10,7-i),c[p]=a>0?(d/ud(10,r-a)%ud(10,a)|0)*l:0),u)for(;;){if(0==p){for(i=1,a=c[0];a>=10;a/=10)i++;for(a=c[0]+=l,l=1;a>=10;a/=10)l++;i!=l&&(n.e++,c[0]==hd&&(c[0]=1));break}if(c[p]+=l,c[p]!=hd)break;c[p--]=0,l=1}for(i=c.length;0===c[--i];)c.pop()}return td&&(n.e>f.maxE?(n.d=null,n.e=NaN):n.e<f.minE&&(n.e=0,n.d=[0])),n}function Sd(n,e,t){if(!n.isFinite())return Hd(n);var o,r=n.e,i=Ad(n.d),a=i.length;return e?(t&&(o=t-a)>0?i=i.charAt(0)+"."+i.slice(1)+Pd(o):a>1&&(i=i.charAt(0)+"."+i.slice(1)),i=i+(n.e<0?"e":"e+")+n.e):r<0?(i="0."+Pd(-r-1)+i,t&&(o=t-a)>0&&(i+=Pd(o))):r>=a?(i+=Pd(r+1-a),t&&(o=t-r-1)>0&&(i=i+"."+Pd(o))):((o=r+1)<a&&(i=i.slice(0,o)+"."+i.slice(o)),t&&(o=t-a)>0&&(r+1===a&&(i+="."),i+=Pd(o))),i}function kd(n,e){var t=n[0];for(e*=7;t>=10;t/=10)e++;return e}function _d(n,e,t){if(e>gd)throw td=!0,t&&(n.precision=t),Error(id);return wd(new n(Ku),e,1,!0)}function Bd(n,e,t){if(e>vd)throw Error(id);return wd(new n(nd),e,t,!0)}function Td(n){var e=n.length-1,t=7*e+1;if(e=n[e]){for(;e%10==0;e/=10)t--;for(e=n[0];e>=10;e/=10)t++}return t}function Pd(n){for(var e="";n--;)e+="0";return e}function zd(n,e,t,o){var r,i=new n(1),a=Math.ceil(o/7+4);for(td=!1;;){if(t%2&&jd((i=i.times(e)).d,a)&&(r=!0),0===(t=sd(t/2))){t=i.d.length-1,r&&0===i.d[t]&&++i.d[t];break}jd((e=e.times(e)).d,a)}return td=!0,i}function Ed(n){return 1&n.d[n.d.length-1]}function Id(n,e,t){for(var o,r,i=new n(e[0]),a=0;++a<e.length;){if(!(r=new n(e[a])).s){i=r;break}((o=i.cmp(r))===t||0===o&&i.s===t)&&(i=r)}return i}function Fd(n,e){var t,o,r,i,a,l,s,u=0,d=0,c=0,p=n.constructor,f=p.rounding,h=p.precision;if(!n.d||!n.d[0]||n.e>17)return new p(n.d?n.d[0]?n.s<0?0:1/0:1:n.s?n.s<0?0:n:NaN);for(null==e?(td=!1,s=h):s=e,l=new p(.03125);n.e>-2;)n=n.times(l),c+=5;for(s+=o=Math.log(ud(2,c))/Math.LN10*2+5|0,t=i=a=new p(1),p.precision=s;;){if(i=wd(i.times(n),s,1),t=t.times(++d),Ad((l=a.plus(xd(i,t,s,1))).d).slice(0,s)===Ad(a.d).slice(0,s)){for(r=c;r--;)a=wd(a.times(a),s,1);if(null!=e)return p.precision=h,a;if(!(u<3&&yd(a.d,s-o,f,u)))return wd(a,p.precision=h,f,td=!0);p.precision=s+=10,t=i=l=new p(1),d=0,u++}a=l}}function $d(n,e){var t,o,r,i,a,l,s,u,d,c,p,f=1,h=n,g=h.d,v=h.constructor,m=v.rounding,A=v.precision;if(h.s<0||!g||!g[0]||!h.e&&1==g[0]&&1==g.length)return new v(g&&!g[0]?-1/0:1!=h.s?NaN:g?0:h);if(null==e?(td=!1,d=A):d=e,v.precision=d+=10,o=(t=Ad(g)).charAt(0),!(Math.abs(i=h.e)<15e14))return u=_d(v,d+2,A).times(i+""),h=$d(new v(o+"."+t.slice(1)),d-10).plus(u),v.precision=A,null==e?wd(h,A,m,td=!0):h;for(;o<7&&1!=o||1==o&&t.charAt(1)>3;)o=(t=Ad((h=h.times(n)).d)).charAt(0),f++;for(i=h.e,o>1?(h=new v("0."+t),i++):h=new v(o+"."+t.slice(1)),c=h,s=a=h=xd(h.minus(1),h.plus(1),d,1),p=wd(h.times(h),d,1),r=3;;){if(a=wd(a.times(p),d,1),Ad((u=s.plus(xd(a,new v(r),d,1))).d).slice(0,d)===Ad(s.d).slice(0,d)){if(s=s.times(2),0!==i&&(s=s.plus(_d(v,d+2,A).times(i+""))),s=xd(s,new v(f),d,1),null!=e)return v.precision=A,s;if(!yd(s.d,d-10,m,l))return wd(s,v.precision=A,m,td=!0);v.precision=d+=10,u=a=h=xd(c.minus(1),c.plus(1),d,1),p=wd(h.times(h),d,1),r=l=1}s=u,r+=2}}function Hd(n){return String(n.s*n.s/0)}function Nd(n,e){var t,o,r;for((t=e.indexOf("."))>-1&&(e=e.replace(".","")),(o=e.search(/e/i))>0?(t<0&&(t=o),t+=+e.slice(o+1),e=e.substring(0,o)):t<0&&(t=e.length),o=0;48===e.charCodeAt(o);o++);for(r=e.length;48===e.charCodeAt(r-1);--r);if(e=e.slice(o,r)){if(r-=o,n.e=t=t-o-1,n.d=[],o=(t+1)%7,t<0&&(o+=7),o<r){for(o&&n.d.push(+e.slice(0,o)),r-=7;o<r;)n.d.push(+e.slice(o,o+=7));o=7-(e=e.slice(o)).length}else o-=r;for(;o--;)e+="0";n.d.push(+e),td&&(n.e>n.constructor.maxE?(n.d=null,n.e=NaN):n.e<n.constructor.minE&&(n.e=0,n.d=[0]))}else n.e=0,n.d=[0];return n}function Wd(n,e){var t,o,r,i,a,l,s,u,d;if(e.indexOf("_")>-1){if(e=e.replace(/(\d)_(?=\d)/g,"$1"),fd.test(e))return Nd(n,e)}else if("Infinity"===e||"NaN"===e)return+e||(n.s=NaN),n.e=NaN,n.d=null,n;if(cd.test(e))t=16,e=e.toLowerCase();else if(dd.test(e))t=2;else{if(!pd.test(e))throw Error(rd+e);t=8}for((i=e.search(/p/i))>0?(s=+e.slice(i+1),e=e.substring(2,i)):e=e.slice(2),a=(i=e.indexOf("."))>=0,o=n.constructor,a&&(i=(l=(e=e.replace(".","")).length)-i,r=zd(o,new o(t),i,2*i)),i=d=(u=Cd(e,t,hd)).length-1;0===u[i];--i)u.pop();return i<0?new o(0*n.s):(n.e=kd(u,d),n.d=u,td=!1,a&&(n=xd(n,r,4*l)),s&&(n=n.times(Math.abs(s)<54?ud(2,s):Pc.pow(2,s))),td=!0,n)}function Md(n,e,t,o,r){var i,a,l,s,u=n.precision,d=Math.ceil(u/7);for(td=!1,s=t.times(t),l=new n(o);;){if(a=xd(l.times(s),new n(e++*e++),u,1),l=r?o.plus(a):o.minus(a),o=xd(a.times(s),new n(e++*e++),u,1),void 0!==(a=l.plus(o)).d[d]){for(i=d;a.d[i]===l.d[i]&&i--;);if(-1==i)break}i=l,l=o,o=a,a=i}return td=!0,a.d.length=d+1,a}function Ld(n,e){for(var t=n;--e;)t*=n;return t}function Dd(n,e){var t,o=e.s<0,r=Bd(n,n.precision,1),i=r.times(.5);if((e=e.abs()).lte(i))return Zu=o?4:1,e;if((t=e.divToInt(r)).isZero())Zu=o?3:2;else{if((e=e.minus(t.times(r))).lte(i))return Zu=Ed(t)?o?2:3:o?4:1,e;Zu=Ed(t)?o?1:4:o?3:2}return e.minus(r).abs()}function Rd(n,e,t,o){var r,i,a,l,s,u,d,c,p,f=n.constructor,h=void 0!==t;if(h?(bd(t,1,Qu),void 0===o?o=f.rounding:bd(o,0,8)):(t=f.precision,o=f.rounding),n.isFinite()){for(h?(r=2,16==e?t=4*t-3:8==e&&(t=3*t-2)):r=e,(a=(d=Sd(n)).indexOf("."))>=0&&(d=d.replace(".",""),(p=new f(1)).e=d.length-a,p.d=Cd(Sd(p),10,r),p.e=p.d.length),i=s=(c=Cd(d,10,r)).length;0==c[--s];)c.pop();if(c[0]){if(a<0?i--:((n=new f(n)).d=c,n.e=i,c=(n=xd(n,p,t,o,0,r)).d,i=n.e,u=Gu),a=c[t],l=r/2,u=u||void 0!==c[t+1],u=o<4?(void 0!==a||u)&&(0===o||o===(n.s<0?3:2)):a>l||a===l&&(4===o||u||6===o&&1&c[t-1]||o===(n.s<0?8:7)),c.length=t,u)for(;++c[--t]>r-1;)c[t]=0,t||(++i,c.unshift(1));for(s=c.length;!c[s-1];--s);for(a=0,d="";a<s;a++)d+=Ju.charAt(c[a]);if(h){if(s>1)if(16==e||8==e){for(a=16==e?4:3,--s;s%a;s++)d+="0";for(s=(c=Cd(d,r,e)).length;!c[s-1];--s);for(a=1,d="1.";a<s;a++)d+=Ju.charAt(c[a])}else d=d.charAt(0)+"."+d.slice(1);d=d+(i<0?"p":"p+")+i}else if(i<0){for(;++i;)d="0"+d;d="0."+d}else if(++i>s)for(i-=s;i--;)d+="0";else i<s&&(d=d.slice(0,i)+"."+d.slice(i))}else d=h?"0p+0":"0";d=(16==e?"0x":2==e?"0b":8==e?"0o":"")+d}else d=Hd(n);return n.s<0?"-"+d:d}function jd(n,e){if(n.length>e)return n.length=e,!0}function Od(n){return new this(n).abs()}function Vd(n){return new this(n).acos()}function Yd(n){return new this(n).acosh()}function Ud(n,e){return new this(n).plus(e)}function Xd(n){return new this(n).asin()}function Gd(n){return new this(n).asinh()}function Zd(n){return new this(n).atan()}function qd(n){return new this(n).atanh()}function Qd(n,e){n=new this(n),e=new this(e);var t,o=this.precision,r=this.rounding,i=o+4;return n.s&&e.s?n.d||e.d?!e.d||n.isZero()?(t=e.s<0?Bd(this,o,r):new this(0)).s=n.s:!n.d||e.isZero()?(t=Bd(this,i,1).times(.5)).s=n.s:e.s<0?(this.precision=i,this.rounding=1,t=this.atan(xd(n,e,i,1)),e=Bd(this,i,1),this.precision=o,this.rounding=r,t=n.s<0?t.minus(e):t.plus(e)):t=this.atan(xd(n,e,i,1)):(t=Bd(this,i,1).times(e.s>0?.25:.75)).s=n.s:t=new this(NaN),t}function Jd(n){return new this(n).cbrt()}function Kd(n){return wd(n=new this(n),n.e+1,2)}function nc(n,e,t){return new this(n).clamp(e,t)}function ec(n){if(!n||"object"!=typeof n)throw Error(od+"Object expected");var e,t,o,r=!0===n.defaults,i=["precision",1,Qu,"rounding",0,8,"toExpNeg",-qu,0,"toExpPos",0,qu,"maxE",0,qu,"minE",-qu,0,"modulo",0,9];for(e=0;e<i.length;e+=3)if(t=i[e],r&&(this[t]=ed[t]),void 0!==(o=n[t])){if(!(sd(o)===o&&o>=i[e+1]&&o<=i[e+2]))throw Error(rd+t+": "+o);this[t]=o}if(t="crypto",r&&(this[t]=ed[t]),void 0!==(o=n[t])){if(!0!==o&&!1!==o&&0!==o&&1!==o)throw Error(rd+t+": "+o);if(o){if("undefined"==typeof crypto||!crypto||!crypto.getRandomValues&&!crypto.randomBytes)throw Error(ad);this[t]=!0}else this[t]=!1}return this}function tc(n){return new this(n).cos()}function oc(n){return new this(n).cosh()}function rc(n,e){return new this(n).div(e)}function ic(n){return new this(n).exp()}function ac(n){return wd(n=new this(n),n.e+1,3)}function lc(){var n,e,t=new this(0);for(td=!1,n=0;n<arguments.length;)if((e=new this(arguments[n++])).d)t.d&&(t=t.plus(e.times(e)));else{if(e.s)return td=!0,new this(1/0);t=e}return td=!0,t.sqrt()}function sc(n){return n instanceof Pc||n&&n.toStringTag===ld||!1}function uc(n){return new this(n).ln()}function dc(n,e){return new this(n).log(e)}function cc(n){return new this(n).log(2)}function pc(n){return new this(n).log(10)}function fc(){return Id(this,arguments,-1)}function hc(){return Id(this,arguments,1)}function gc(n,e){return new this(n).mod(e)}function vc(n,e){return new this(n).mul(e)}function mc(n,e){return new this(n).pow(e)}function Ac(n){var e,t,o,r,i=0,a=new this(1),l=[];if(void 0===n?n=this.precision:bd(n,1,Qu),o=Math.ceil(n/7),this.crypto)if(crypto.getRandomValues)for(e=crypto.getRandomValues(new Uint32Array(o));i<o;)(r=e[i])>=429e7?e[i]=crypto.getRandomValues(new Uint32Array(1))[0]:l[i++]=r%1e7;else{if(!crypto.randomBytes)throw Error(ad);for(e=crypto.randomBytes(o*=4);i<o;)(r=e[i]+(e[i+1]<<8)+(e[i+2]<<16)+((127&e[i+3])<<24))>=214e7?crypto.randomBytes(4).copy(e,i):(l.push(r%1e7),i+=4);i=o/4}else for(;i<o;)l[i++]=1e7*Math.random()|0;for(n%=7,(o=l[--i])&&n&&(r=ud(10,7-n),l[i]=(o/r|0)*r);0===l[i];i--)l.pop();if(i<0)t=0,l=[0];else{for(t=-1;0===l[0];t-=7)l.shift();for(o=1,r=l[0];r>=10;r/=10)o++;o<7&&(t-=7-o)}return a.e=t,a.d=l,a}function bc(n){return wd(n=new this(n),n.e+1,this.rounding)}function yc(n){return(n=new this(n)).d?n.d[0]?n.s:0*n.s:n.s||NaN}function Cc(n){return new this(n).sin()}function xc(n){return new this(n).sinh()}function wc(n){return new this(n).sqrt()}function Sc(n,e){return new this(n).sub(e)}function kc(){var n=0,e=arguments,t=new this(e[n]);for(td=!1;t.s&&++n<e.length;)t=t.plus(e[n]);return td=!0,wd(t,this.precision,this.rounding)}function _c(n){return new this(n).tan()}function Bc(n){return new this(n).tanh()}function Tc(n){return wd(n=new this(n),n.e+1,1)}md[Symbol.for("nodejs.util.inspect.custom")]=md.toString,md[Symbol.toStringTag]="Decimal";var Pc=md.constructor=function n(e){var t,o,r;function i(n){var e,t,o,r=this;if(!(r instanceof i))return new i(n);if(r.constructor=i,sc(n))return r.s=n.s,void(td?!n.d||n.e>i.maxE?(r.e=NaN,r.d=null):n.e<i.minE?(r.e=0,r.d=[0]):(r.e=n.e,r.d=n.d.slice()):(r.e=n.e,r.d=n.d?n.d.slice():n.d));if("number"===(o=typeof n)){if(0===n)return r.s=1/n<0?-1:1,r.e=0,void(r.d=[0]);if(n<0?(n=-n,r.s=-1):r.s=1,n===~~n&&n<1e7){for(e=0,t=n;t>=10;t/=10)e++;return void(td?e>i.maxE?(r.e=NaN,r.d=null):e<i.minE?(r.e=0,r.d=[0]):(r.e=e,r.d=[n]):(r.e=e,r.d=[n]))}return 0*n!=0?(n||(r.s=NaN),r.e=NaN,void(r.d=null)):Nd(r,n.toString())}if("string"===o)return 45===(t=n.charCodeAt(0))?(n=n.slice(1),r.s=-1):(43===t&&(n=n.slice(1)),r.s=1),fd.test(n)?Nd(r,n):Wd(r,n);if("bigint"===o)return n<0?(n=-n,r.s=-1):r.s=1,Nd(r,n.toString());throw Error(rd+n)}if(i.prototype=md,i.ROUND_UP=0,i.ROUND_DOWN=1,i.ROUND_CEIL=2,i.ROUND_FLOOR=3,i.ROUND_HALF_UP=4,i.ROUND_HALF_DOWN=5,i.ROUND_HALF_EVEN=6,i.ROUND_HALF_CEIL=7,i.ROUND_HALF_FLOOR=8,i.EUCLID=9,i.config=i.set=ec,i.clone=n,i.isDecimal=sc,i.abs=Od,i.acos=Vd,i.acosh=Yd,i.add=Ud,i.asin=Xd,i.asinh=Gd,i.atan=Zd,i.atanh=qd,i.atan2=Qd,i.cbrt=Jd,i.ceil=Kd,i.clamp=nc,i.cos=tc,i.cosh=oc,i.div=rc,i.exp=ic,i.floor=ac,i.hypot=lc,i.ln=uc,i.log=dc,i.log10=pc,i.log2=cc,i.max=fc,i.min=hc,i.mod=gc,i.mul=vc,i.pow=mc,i.random=Ac,i.round=bc,i.sign=yc,i.sin=Cc,i.sinh=xc,i.sqrt=wc,i.sub=Sc,i.sum=kc,i.tan=_c,i.tanh=Bc,i.trunc=Tc,void 0===e&&(e={}),e&&!0!==e.defaults)for(r=["precision","rounding","toExpNeg","toExpPos","maxE","minE","modulo","crypto"],t=0;t<r.length;)e.hasOwnProperty(o=r[t++])||(e[o]=this[o]);return i.config(e),i}(ed);Ku=new Pc(Ku),nd=new Pc(nd);var zc={name:"arrow",enabled:!0,phase:"main",fn:function(n){var e,t=n.state,o=n.name,r=n.options,i=t.elements.arrow,a=t.modifiersData.popperOffsets,l=ea(t.placement),s=oa(l),u=[Di,Li].indexOf(l)>=0?"height":"width";if(i&&a){var d=function(n,e){return ia("number"!=typeof(n="function"==typeof n?n(Object.assign({},e.rects,{placement:e.placement})):n)?n:aa(n,ji))}(r.padding,t),c=zi(i),p="y"===s?Wi:Di,f="y"===s?Mi:Li,h=t.rects.reference[u]+t.rects.reference[s]-a[s]-t.rects.popper[u],g=a[s]-t.rects.reference[s],v=Ni(i),m=v?"y"===s?v.clientHeight||0:v.clientWidth||0:0,A=h/2-g/2,b=d[p],y=m-c[u]-d[f],C=m/2-c[u]/2+A,x=Ba(b,C,y),w=s;t.modifiersData[o]=((e={})[w]=x,e.centerOffset=x-C,e)}},effect:function(n){var e=n.state,t=n.options.element,o=void 0===t?"[data-popper-arrow]":t;null!=o&&("string"!=typeof o||(o=e.elements.popper.querySelector(o)))&&Qi(e.elements.popper,o)&&(e.elements.arrow=o)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};const Ec={directives:{domresize:Hr()},components:{},props:{value:{type:Number,default:0},valueMin:{type:Number,default:0},valueMax:{type:Number,default:100},valueStep:{type:Number,default:1},valueDecimal:{type:Number,default:0},progBorderRadius:{type:Number,default:5},progHeight:{type:Number,default:4},progColor:{type:String,default:"#74a4d9"},progColorDisabled:{type:String,default:"#c5c5c5"},progBackgroundColor:{type:String,default:"#eee"},progBackgroundColorDisabled:{type:String,default:"#f2f2f2"},sliderSize:{type:Number,default:20},sliderBackgroundColor:{type:String,default:"blue darken-3"},sliderBackgroundColorHover:{type:String,default:"blue darken-2"},sliderBackgroundColorDisabled:{type:String,default:"#aaa"},cmpZIndex:{type:Number,default:3e3},tooltipPlacementDist:{type:Number,default:5},tooltipBorderRadius:{type:Number,default:4},tooltipTextFontSize:{type:String,default:"0.85rem"},tooltipTextColor:{type:String,default:"white"},tooltipBackgroundColor:{type:String,default:"#666"},editable:{type:Boolean,default:!0}},data:function(){return{panelWidth:0,panelHeight:0,das:null,hoverTrans:!1,dragTrans:!1,popperInstance:null,popperShow:!1,r:null,rt:null}},mounted:function(){let n=this,e=function(n,e,t={}){let o=null,r=null,i=null,a=null,l=null,s=null,u=null,d=null,c=null,p=null,f=null,h=null,g=null,v=null,m=null,A=!1,b=On(t,"getHeighRatio",null);en(b)||(b=()=>1);let y=On(t,"getWidthRatio",null);en(y)||(y=()=>1);let C=On(t,"stopScrollPropagationForPanel",null);ni(C)||(C=!1);let x=On(t,"stopTouchDragPropagationForPanel",null);ni(x)||(x=!1);let w=On(t,"useTouchDragForPanel",null);ni(w)||(w=!0);let S=n,k=e,_=$r();return o=n=>{let e=n.deltaY/Math.abs(n.deltaY),t=n.deltaX/Math.abs(n.deltaX);_.emit("scrollPanel",{ratioY:e,ratioX:t}),C&&gu(n)},S.addEventListener("wheel",o),r=n=>{if(w){let e=On(n,"touches.0.clientY",0),t=On(n,"touches.0.clientX",0),o=-e*b(),r=-t*y();A=!0,_.emit("pressBar",{clientY:o,clientX:r}),x&&gu(n)}},S.addEventListener("touchstart",r),i=n=>{if(w&&A){let e=On(n,"touches.0.clientY",0),t=On(n,"touches.0.clientX",0),o=-e*b(),r=-t*y();_.emit("dragBar",{clientY:o,clientX:r}),x&&gu(n)}},S.addEventListener("touchmove",i,{passive:!1}),a=n=>{w&&A&&(A=!1,_.emit("freeBar"),x&&gu(n))},S.addEventListener("touchend",a),l=n=>{A=!0,_.emit("pressBar",{clientY:n.clientY,clientX:n.clientX})},k.addEventListener("mousedown",l),s=n=>{A&&(A=!1,_.emit("freeBar"))},k.addEventListener("mouseup",s),u=n=>{A=!0,_.emit("pressBar",{clientY:n.touches[0].clientY,clientX:n.touches[0].clientX})},k.addEventListener("touchstart",u),d=n=>{A&&(_.emit("dragBar",{clientY:n.touches[0].clientY,clientX:n.touches[0].clientX}),gu(n))},k.addEventListener("touchmove",d,{passive:!1}),c=n=>{A&&(A=!1,_.emit("freeBar"))},k.addEventListener("touchend",c),p=n=>{A&&_.emit("dragBar",{clientY:n.clientY,clientX:n.clientX})},window.addEventListener("mousemove",p),f=n=>{A&&(A=!1,_.emit("freeBar"),C&&gu(n))},window.addEventListener("mouseup",f),h=n=>{},window.addEventListener("scroll",h,{passive:!1}),g=n=>{},window.addEventListener("wheel",g,{passive:!1}),v=n=>{},document.addEventListener("scroll",v,{passive:!1}),m=n=>{},document.addEventListener("wheel",m,{passive:!1}),_.clear=function(){S.removeEventListener("wheel",o),S.removeEventListener("touchstart",r),S.removeEventListener("touchmove",i),S.removeEventListener("touchend",a),k.removeEventListener("mousedown",l),k.removeEventListener("mouseup",s),k.removeEventListener("touchstart",u),k.removeEventListener("touchmove",d),k.removeEventListener("touchend",c),window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",f),window.removeEventListener("scroll",h),window.removeEventListener("wheel",g),document.removeEventListener("scroll",v),document.removeEventListener("wheel",m)},_}(n.$refs.divPanel,n.$refs.divBar,{useTouchDragForPanel:!1});e.on("dragBar",n.dragBar),e.on("pressBar",n.pressBar),e.on("freeBar",n.freeBar),n.das=e},beforeDestroy:function(){let n=this;n.das&&n.das.clear()},computed:{changeParam:function(){let n=this,e=0;try{e=(n.value-n.valueMin)/(n.valueMax-n.valueMin)}catch(n){}e=n.limitRatio(e);let t=n.tickRatio(e);return n.r=e,n.rt=t,""},heightCir:function(){return this.sliderSize},widthCir:function(){return this.heightCir},effecting:function(){let n=this;if(!n.editable)return;let e=n.hoverTrans||n.dragTrans;return e?n.showPopper():(n.hidePopper(),n.r=n.rt),e},progWidth:function(){return this.panelWidth-this.sliderSize},useProgBorderRadius:function(){return`border-radius:${this.progBorderRadius}px;`},effProgColor:function(){return qt(this.progColor)},effProgColorDisabled:function(){return qt(this.progColorDisabled)},useProgColor:function(){let n=this;return n.editable?n.effProgColor:n.effProgColorDisabled},effProgBackgroundColor:function(){return qt(this.progBackgroundColor)},effProgBackgroundColorDisabled:function(){return qt(this.progBackgroundColorDisabled)},useProgBackgroundColor:function(){let n=this;return n.editable?n.effProgBackgroundColor:n.effProgBackgroundColorDisabled},effSliderBackgroundColor:function(){return qt(this.sliderBackgroundColor)},effSliderBackgroundColorHover:function(){return qt(this.sliderBackgroundColorHover)},effSliderBackgroundColorDisabled:function(){return qt(this.sliderBackgroundColorDisabled)},useSliderBackgroundColor:function(){let n=this;return n.editable?n.effecting?n.effSliderBackgroundColorHover:n.effSliderBackgroundColor:n.effSliderBackgroundColorDisabled},useTooltipBorderRadius:function(){let n=this;return Zr(n.tooltipBorderRadius)?`border-radius:${n.tooltipBorderRadius}px;`:""},useTooltipTextFontSize:function(){let n=this.tooltipTextFontSize;return n=qr(n,";",""),`font-size:${n};`},useTooltipTextColor:function(){return qt(this.tooltipTextColor)},useTooltipBackgroundColor:function(){return qt(this.tooltipBackgroundColor)},valueDig:function(){let n=this;return function(n,e=0){return uo(n)&&yl(e)?(n=co(n),vo(n,e).toFixed(e)):""}(n.rt*(n.valueMax-n.valueMin)+n.valueMin,n.valueDecimal)}},methods:{resizePanel:function(n){this.panelWidth=n.snew.offsetWidth,this.panelHeight=n.snew.offsetHeight},limitRatio:function(n){return n=Math.min(n,1),n=Math.max(n,0)},tickRatio:function(n){let e=this,t=0;try{let o=e.valueMax-e.valueMin,r=e.valueStep/o;t=function(n,e=0,t={}){yl(e)||(e=0),e=mo(e);let o=On(t,"rounding","");return"ROUND_HALF_UP"!==o&&"ROUND_HALF_EVEN"!==o&&(o="ROUND_HALF_UP"),uo(n)?new Pc(n).toDecimalPlaces(e,Pc[o]).toNumber():""}(n/r)*r}catch(n){}return t},dragBar:function(n){let e=this;if(!e.editable)return;let t=e.$el.getBoundingClientRect(),o=n.clientX-e.sliderSize/2,r=e.progWidth,i=0;r>0&&(i=(o-t.left)/r),i=e.limitRatio(i);let a=e.tickRatio(i);e.r=i,e.rt=a;let l=co(e.valueDig);e.updatePopper(),e.$emit("input",l)},pressBar:function(){this.dragTrans=!0},freeBar:function(){this.dragTrans=!1},showPopper:function(n){let e=this;if(!e.editable)return;let t=On(e,"$refs.divTrigger",null);if(null===t)return;let o=On(e,"$refs.divContent",null);if(null===o)return;let r={strategy:"fixed",placement:"top",modifiers:[zc,{name:"arrow",options:{padding:5}},xa,{name:"flip",options:{fallbackPlacements:["top","top-start","top-end","bottom","bottom-start","bottom-end"]}},wa,{name:"offset",options:{offset:({placement:n,reference:t,popper:o})=>[0,e.tooltipPlacementDist]}},_a]};e.popperInstance=va(t,o,r)},updatePopper:function(n){let e=this;e.editable&&e.popperInstance&&e.popperInstance.update()},hidePopper:function(n){let e=this;e.popperInstance&&(e.popperInstance.destroy(),e.popperInstance=null)}}};var Ic=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],style:"user-select:none;",attrs:{changeParam:n.changeParam},on:{domresize:n.resizePanel}},[t("div",{style:"position:relative; width:100%; height:"+n.sliderSize+"px;"},[t("div",{style:"position:absolute; top:"+(n.sliderSize/2-n.progHeight/2)+"px; left:"+n.sliderSize/2+"px; width:"+n.progWidth+"px;"},[t("div",{ref:"divPanel",style:"position:relative; width:"+n.progWidth+"px;",attrs:{_click:"clickProg"}},[t("div",{style:n.useProgBorderRadius+" overflow:hidden; width:"+n.progWidth+"px; height:"+n.progHeight+"px;"},[t("div",{style:"background:"+n.useProgBackgroundColor+"; height:"+n.progHeight+"px;"},[t("div",{style:"background:"+n.useProgColor+"; width:"+n.rt*n.progWidth+"px; height:"+n.progHeight+"px;"})])]),n._v(" "),t("div",{style:"position:absolute; left:"+(n.rt*n.progWidth-n.widthCir/2)+"px; top:"+(n.progHeight/2-n.heightCir/2)+"px; z-index:1; "+(n.editable?"cursor:pointer;":"")},[t("div",{ref:"divTrigger",staticClass:"ts bs",style:"width:"+n.widthCir+"px; height:"+n.heightCir+"px; border-radius:50%; background:"+n.useSliderBackgroundColor+"; outline:none;"})]),n._v(" "),t("div",{ref:"divBar",style:"position:absolute; left:"+(n.r*n.progWidth-n.widthCir/2)+"px; top:"+(n.progHeight/2-n.heightCir/2)+"px; z-index:2; "+(n.editable?"cursor:pointer;":"")},[t("div",{style:"width:"+n.widthCir+"px; height:"+n.heightCir+"px; border-radius:50%; opacity:0; outline:none;",on:{mouseenter:function(e){n.hoverTrans=!0},mouseleave:function(e){n.hoverTrans=!1}}})])])])]),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:n.effecting,expression:"effecting"},{name:"domresize",rawName:"v-domresize"}],ref:"divContent",staticClass:"WPopperFix",style:"z-index:"+n.cmpZIndex+";",on:{domresize:n.updatePopper}},[t("div",{style:"padding:2px 5px; font-size:0.8rem; "+n.useTooltipTextFontSize+" color:"+n.useTooltipTextColor+"; background:"+n.useTooltipBackgroundColor+"; "+n.useTooltipBorderRadius},[n._v("\n "+n._s(n.valueDig)+"\n "),t("div",{staticClass:"arrow",attrs:{"data-popper-arrow":""}})])])])};Ic._withStripped=!0;const Fc={components:{WGroupChipRadio:Iu,WPanelLabelItem:Hu,WText:Xu,WSlider:e({render:Ic,staticRenderFns:[]},function(n){n&&n("data-v-062a5ce9_0",{source:"\n.ts[data-v-062a5ce9] {\r\n transition:all 0.3s;\n}\n.bs[data-v-062a5ce9] {\r\n box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);\n}\n.WPopperFix[data-popper-reference-hidden][data-v-062a5ce9] {\r\n visibility: hidden;\r\n pointer-events: none;\n}\n.arrow[data-v-062a5ce9],\r\n.arrow[data-v-062a5ce9]::before {\r\n position: absolute;\r\n width: 5px;\r\n height: 5px;\r\n background: inherit;\n}\n.arrow[data-v-062a5ce9] {\r\n visibility: hidden;\n}\n.arrow[data-v-062a5ce9]::before {\r\n visibility: visible;\r\n content: '';\r\n transform: rotate(45deg);\n}\r\n/* .arrow::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n margin-left: -5px;\r\n border-width: 5px;\r\n border-style: solid;\r\n border-color: black transparent transparent transparent;\r\n} */\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\node_modules\\w-component-vue\\src\\components\\WSlider.vue"],names:[],mappings:";AA6qBA;IACA,mBAAA;AACA;AACA;IACA,kHAAA;AACA;AACA;IACA,kBAAA;IACA,oBAAA;AACA;AACA;;IAEA,kBAAA;IACA,UAAA;IACA,WAAA;IACA,mBAAA;AACA;AACA;IACA,kBAAA;AACA;AACA;IACA,mBAAA;IACA,WAAA;IACA,wBAAA;AACA;AACA;;;;;;;;;GASA",file:"WSlider.vue",sourcesContent:["<template>\r\n <div\r\n :style=\"`user-select:none;`\"\r\n :changeParam=\"changeParam\"\r\n v-domresize\r\n @domresize=\"resizePanel\"\r\n >\r\n\r\n <div\r\n :style=\"`position:relative; width:100%; height:${sliderSize}px;`\"\r\n >\r\n\r\n <div :style=\"`position:absolute; top:${sliderSize/2-progHeight/2}px; left:${sliderSize/2}px; width:${progWidth}px;`\">\r\n\r\n <div\r\n ref=\"divPanel\"\r\n :style=\"`position:relative; width:${progWidth}px;`\"\r\n _click=\"clickProg\"\r\n >\r\n\r\n <div :style=\"`${useProgBorderRadius} overflow:hidden; width:${progWidth}px; height:${progHeight}px;`\">\r\n <div :style=\"`background:${useProgBackgroundColor}; height:${progHeight}px;`\">\r\n <div :style=\"`background:${useProgColor}; width:${(rt)*progWidth}px; height:${progHeight}px;`\"></div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n :style=\"`position:absolute; left:${(rt)*progWidth-widthCir/2}px; top:${progHeight/2-heightCir/2}px; z-index:1; ${editable?'cursor:pointer;':''}`\"\r\n >\r\n\r\n <div\r\n ref=\"divTrigger\"\r\n class=\"ts bs\"\r\n :style=\"`width:${widthCir}px; height:${heightCir}px; border-radius:50%; background:${useSliderBackgroundColor}; outline:none;`\"\r\n ></div>\r\n\r\n </div>\r\n\r\n <div\r\n ref=\"divBar\"\r\n :style=\"`position:absolute; left:${(r)*progWidth-widthCir/2}px; top:${progHeight/2-heightCir/2}px; z-index:2; ${editable?'cursor:pointer;':''}`\"\r\n >\r\n\r\n <div\r\n :style=\"`width:${widthCir}px; height:${heightCir}px; border-radius:50%; opacity:0; outline:none;`\"\r\n @mouseenter=\"hoverTrans=true\"\r\n @mouseleave=\"hoverTrans=false\"\r\n ></div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n \x3c!-- 不能給予position因會被popupjs洗掉, 但可給z-index, 且popupjs會改用transform:translate定位 --\x3e\r\n \x3c!-- 若使用minWidth, 會使popupjs重算給予minWidth用以自動撐開彈窗寬度失效, 若於其內slot外添加div給予minWidth, 亦會使popupjs給予minWidth機制失效, 待研究 --\x3e\r\n <div\r\n ref=\"divContent\"\r\n class=\"WPopperFix\"\r\n :style=\"`z-index:${cmpZIndex};`\"\r\n v-show=\"effecting\"\r\n v-domresize\r\n @domresize=\"updatePopper\"\r\n >\r\n \x3c!-- 不使用v-if來重產dom, 因開啟arrow會有顯示後來不及定位問題 --\x3e\r\n <div\r\n :style=\"`padding:2px 5px; font-size:0.8rem; ${useTooltipTextFontSize} color:${useTooltipTextColor}; background:${useTooltipBackgroundColor}; ${useTooltipBorderRadius}`\"\r\n >\r\n {{valueDig}}\r\n <div class=\"arrow\" data-popper-arrow></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport get from 'lodash-es/get.js'\r\nimport isNumber from 'lodash-es/isNumber.js'\r\nimport dig from 'wsemi/src/dig.mjs'\r\nimport round from 'wsemi/src/round.mjs'\r\nimport cdbl from 'wsemi/src/cdbl.mjs'\r\nimport replace from 'wsemi/src/replace.mjs'\r\nimport domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport { createPopper } from '@popperjs/core/lib/popper-lite.js' //不用安裝@popperjs/core, 因wsemi安裝tippy.js內有依賴@popperjs/core\r\nimport flip from '@popperjs/core/lib/modifiers/flip.js'\r\nimport offset from '@popperjs/core/lib/modifiers/offset.js'\r\nimport arrow from '@popperjs/core/lib/modifiers/arrow.js'\r\nimport hide from '@popperjs/core/lib/modifiers/hide.js'\r\n//import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js'\r\n//import computeStyles from '@popperjs/core/lib/modifiers/computeStyles'\r\n\r\n\r\n/**\r\n * @vue-prop {Number} [value=0] 輸入值數字，介於valueMin與valueMax之間，預設0\r\n * @vue-prop {Number} [valueMin=0] 輸入最小值數字，預設0\r\n * @vue-prop {Number} [valueMax=100] 輸入最大值數字，預設100\r\n * @vue-prop {Number} [valueStep=1] 輸入間隔數字，預設1\r\n * @vue-prop {Number} [valueDecimal=0] 輸入值取小數位數字，用於可拖選值具有小數時，預設0\r\n * @vue-prop {Number} [progBorderRadius=5] 輸入值域條框圓角度數字，單位為px，預設5\r\n * @vue-prop {Number} [progHeight=4] 輸入值域條高度數字，單位為px，預設4\r\n * @vue-prop {String} [progColor='#74a4d9'] 輸入值域條顏色字串，預設'#74a4d9'\r\n * @vue-prop {String} [progColorDisabled='#c5c5c5'] 輸入不可編輯時值域條顏色字串，預設'#c5c5c5'\r\n * @vue-prop {String} [progBackgroundColor='#eee'] 輸入值域條背景顏色字串，預設'#eee'\r\n * @vue-prop {String} [progBackgroundColorDisabled='#f2f2f2'] 輸入不可編輯時值域條背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {Number} [sliderSize=20] 輸入拖曳球尺寸數字，單位為px，預設20\r\n * @vue-prop {String} [sliderBackgroundColor='blue darken-3'] 輸入拖曳球背景顏色字串，預設'blue darken-3'\r\n * @vue-prop {String} [sliderBackgroundColorHover='blue darken-2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'blue darken-2'\r\n * @vue-prop {String} [sliderBackgroundColorDisabled='#aaa'] 輸入不可編輯時拖曳球背景顏色字串，預設'#aaa'\r\n * @vue-prop {Number} [cmpZIndex=3000] 輸入提示窗使用z-index數字，預設3000\r\n * @vue-prop {Number} [tooltipPlacementDist=5] 輸入提示窗距離觸發元素距離數字，單位為px，預設5\r\n * @vue-prop {Number} [tooltipBorderRadius=5] 輸入提示窗框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [tooltipTextFontSize='0.85rem'] 輸入提示窗框文字字型大小字串，預設'0.85rem'\r\n * @vue-prop {String} [tooltipTextColor='white'] 輸入提示窗框文字顏色字串，預設'white'\r\n * @vue-prop {String} [tooltipBackgroundColor='#666'] 輸入值域條背景顏色字串，預設'#666'\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n directives: {\r\n domresize: domResize(),\r\n },\r\n components: {\r\n },\r\n props: {\r\n value: {\r\n type: Number,\r\n default: 0,\r\n },\r\n valueMin: {\r\n type: Number,\r\n default: 0,\r\n },\r\n valueMax: {\r\n type: Number,\r\n default: 100,\r\n },\r\n valueStep: {\r\n type: Number,\r\n default: 1,\r\n },\r\n valueDecimal: {\r\n type: Number,\r\n default: 0,\r\n },\r\n progBorderRadius: {\r\n type: Number,\r\n default: 5,\r\n },\r\n progHeight: {\r\n type: Number,\r\n default: 4,\r\n },\r\n progColor: {\r\n type: String,\r\n default: '#74a4d9',\r\n },\r\n progColorDisabled: {\r\n type: String,\r\n default: '#c5c5c5',\r\n },\r\n progBackgroundColor: {\r\n type: String,\r\n default: '#eee',\r\n },\r\n progBackgroundColorDisabled: {\r\n type: String,\r\n default: '#f2f2f2',\r\n },\r\n sliderSize: {\r\n type: Number,\r\n default: 20,\r\n },\r\n sliderBackgroundColor: {\r\n type: String,\r\n default: 'blue darken-3',\r\n },\r\n sliderBackgroundColorHover: {\r\n type: String,\r\n default: 'blue darken-2',\r\n },\r\n sliderBackgroundColorDisabled: {\r\n type: String,\r\n default: '#aaa',\r\n },\r\n cmpZIndex: {\r\n type: Number,\r\n default: 3000,\r\n },\r\n tooltipPlacementDist: {\r\n type: Number,\r\n default: 5,\r\n },\r\n tooltipBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n tooltipTextFontSize: {\r\n type: String,\r\n default: '0.85rem',\r\n },\r\n tooltipTextColor: {\r\n type: String,\r\n default: 'white',\r\n },\r\n tooltipBackgroundColor: {\r\n type: String,\r\n default: '#666', //rgba(60,60,60,0.75) //因arrow是通過div與旋轉成菱形來繪製, 因此可支援外部指定背景色, 但若有透明就會出現arrow的菱形問題\r\n },\r\n editable: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n data: function() {\r\n return {\r\n\r\n panelWidth: 0,\r\n panelHeight: 0,\r\n\r\n das: null,\r\n\r\n hoverTrans: false,\r\n dragTrans: false,\r\n\r\n popperInstance: null,\r\n popperShow: false,\r\n\r\n r: null,\r\n rt: null,\r\n\r\n }\r\n },\r\n mounted: function() {\r\n //console.log('mounted')\r\n\r\n let vo = this\r\n\r\n //das\r\n let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })\r\n das.on('dragBar', vo.dragBar)\r\n das.on('pressBar', vo.pressBar)\r\n das.on('freeBar', vo.freeBar)\r\n\r\n //save\r\n vo.das = das\r\n\r\n },\r\n beforeDestroy: function() {\r\n //console.log('beforeDestroy')\r\n\r\n let vo = this\r\n\r\n //clear\r\n if (vo.das) {\r\n vo.das.clear()\r\n }\r\n\r\n },\r\n computed: {\r\n\r\n changeParam: function() {\r\n // console.log('computed changeParam')\r\n\r\n let vo = this\r\n\r\n //ratio\r\n let r = 0\r\n try {\r\n r = (vo.value - vo.valueMin) / (vo.valueMax - vo.valueMin)\r\n }\r\n catch (err) {}\r\n\r\n //limitRatio\r\n r = vo.limitRatio(r)\r\n\r\n //rt\r\n let rt = vo.tickRatio(r)\r\n\r\n //save\r\n vo.r = r\r\n vo.rt = rt\r\n\r\n return ''\r\n },\r\n\r\n heightCir: function() {\r\n let vo = this\r\n return vo.sliderSize\r\n },\r\n\r\n widthCir: function() {\r\n let vo = this\r\n return vo.heightCir\r\n },\r\n\r\n effecting: function() {\r\n //console.log('computed effecting')\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //b\r\n let b = vo.hoverTrans || vo.dragTrans\r\n\r\n if (b) {\r\n\r\n //showPopper\r\n vo.showPopper()\r\n\r\n }\r\n else {\r\n\r\n //hidePopper\r\n vo.hidePopper()\r\n\r\n //同步\r\n vo.r = vo.rt\r\n\r\n }\r\n\r\n return b\r\n },\r\n\r\n progWidth: function() {\r\n let vo = this\r\n return vo.panelWidth - vo.sliderSize\r\n },\r\n\r\n useProgBorderRadius: function() {\r\n let vo = this\r\n return `border-radius:${vo.progBorderRadius}px;`\r\n },\r\n\r\n effProgColor: function() {\r\n let vo = this\r\n return convertColor(vo.progColor)\r\n },\r\n\r\n effProgColorDisabled: function() {\r\n let vo = this\r\n return convertColor(vo.progColorDisabled)\r\n },\r\n\r\n useProgColor: function() {\r\n let vo = this\r\n if (!vo.editable) {\r\n return vo.effProgColorDisabled\r\n }\r\n return vo.effProgColor\r\n },\r\n\r\n effProgBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.progBackgroundColor)\r\n },\r\n\r\n effProgBackgroundColorDisabled: function() {\r\n let vo = this\r\n return convertColor(vo.progBackgroundColorDisabled)\r\n },\r\n\r\n useProgBackgroundColor: function() {\r\n let vo = this\r\n if (!vo.editable) {\r\n return vo.effProgBackgroundColorDisabled\r\n }\r\n return vo.effProgBackgroundColor\r\n },\r\n\r\n effSliderBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.sliderBackgroundColor)\r\n },\r\n\r\n effSliderBackgroundColorHover: function() {\r\n let vo = this\r\n return convertColor(vo.sliderBackgroundColorHover)\r\n },\r\n\r\n effSliderBackgroundColorDisabled: function() {\r\n let vo = this\r\n return convertColor(vo.sliderBackgroundColorDisabled)\r\n },\r\n\r\n useSliderBackgroundColor: function() {\r\n let vo = this\r\n if (!vo.editable) {\r\n return vo.effSliderBackgroundColorDisabled\r\n }\r\n if (vo.effecting) {\r\n return vo.effSliderBackgroundColorHover\r\n }\r\n return vo.effSliderBackgroundColor\r\n },\r\n\r\n useTooltipBorderRadius: function() {\r\n //console.log('computed useTooltipBorderRadius')\r\n\r\n let vo = this\r\n\r\n if (isNumber(vo.tooltipBorderRadius)) {\r\n return `border-radius:${vo.tooltipBorderRadius}px;`\r\n }\r\n return ''\r\n },\r\n\r\n useTooltipTextFontSize: function() {\r\n let vo = this\r\n let s = vo.tooltipTextFontSize\r\n s = replace(s, ';', '')\r\n return `font-size:${s};`\r\n },\r\n\r\n useTooltipTextColor: function() {\r\n //console.log('computed useTooltipTextColor')\r\n\r\n let vo = this\r\n\r\n return convertColor(vo.tooltipTextColor)\r\n },\r\n\r\n useTooltipBackgroundColor: function() {\r\n //console.log('computed useTooltipBackgroundColor')\r\n\r\n let vo = this\r\n\r\n return convertColor(vo.tooltipBackgroundColor)\r\n },\r\n\r\n valueDig: function() {\r\n // console.log('computed valueDig')\r\n\r\n let vo = this\r\n\r\n //t\r\n let t = (vo.rt) * (vo.valueMax - vo.valueMin) + vo.valueMin\r\n\r\n //dig\r\n let c = dig(t, vo.valueDecimal)\r\n\r\n return c\r\n },\r\n\r\n },\r\n methods: {\r\n\r\n resizePanel: function(msg) {\r\n //console.log('methods resizePanel', msg)\r\n\r\n let vo = this\r\n\r\n //update\r\n vo.panelWidth = msg.snew.offsetWidth\r\n vo.panelHeight = msg.snew.offsetHeight\r\n\r\n // //emit\r\n // vo.$emit('resize', msg)\r\n\r\n },\r\n\r\n limitRatio: function(r) {\r\n // console.log('methods limitRatio', r)\r\n\r\n // let vo = this\r\n\r\n r = Math.min(r, 1)\r\n r = Math.max(r, 0)\r\n\r\n return r\r\n },\r\n\r\n tickRatio: function(r) {\r\n // console.log('methods tickRatio', r)\r\n\r\n let vo = this\r\n\r\n //rt\r\n let rt = 0\r\n try {\r\n\r\n //rtk\r\n let rng = vo.valueMax - vo.valueMin\r\n let rtk = vo.valueStep / rng\r\n\r\n //round\r\n let i = round(r / rtk)\r\n\r\n //rt\r\n rt = i * rtk\r\n // console.log('r', r, 'rt', rt)\r\n\r\n }\r\n catch (err) { }\r\n\r\n\r\n return rt\r\n },\r\n\r\n dragBar: function(msg) {\r\n // console.log('methods dragBar', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //r\r\n let bd = vo.$el.getBoundingClientRect()\r\n let x = msg.clientX - vo.sliderSize / 2\r\n let w = vo.progWidth //vo.$el.offsetWidth\r\n let r = 0\r\n if (w > 0) {\r\n r = (x - bd.left) / w //clientX需扣除元件的left位置\r\n }\r\n\r\n //limitRatio\r\n r = vo.limitRatio(r)\r\n // console.log(vo.r, 'r', r)\r\n\r\n //rt\r\n let rt = vo.tickRatio(r)\r\n\r\n //save\r\n vo.r = r\r\n vo.rt = rt\r\n\r\n //v\r\n let v = cdbl(vo.valueDig)\r\n\r\n //updatePopper\r\n vo.updatePopper()\r\n\r\n //emit\r\n vo.$emit('input', v)\r\n\r\n },\r\n\r\n pressBar: function() {\r\n let vo = this\r\n vo.dragTrans = true\r\n },\r\n\r\n freeBar: function() {\r\n let vo = this\r\n vo.dragTrans = false\r\n },\r\n\r\n showPopper: function(from) {\r\n // console.log('methods showPopper', from)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //divTrigger\r\n let divTrigger = get(vo, '$refs.divTrigger', null)\r\n if (divTrigger === null) {\r\n return //console.log('無法找到點擊區元素')\r\n }\r\n\r\n //divContent\r\n let divContent = get(vo, '$refs.divContent', null)\r\n\r\n //check\r\n if (divContent === null) {\r\n return //console.log('無法找到顯示元素')\r\n }\r\n\r\n //@popperjs/core 2.x\r\n let opt = {\r\n strategy: 'fixed', //盡量使用'fixed'而不用'absolute', 否則位於多層dialog或多層drawer內popup顯示會異常\r\n placement: 'top', //預設top, 因arrow不好給故僅提供top\r\n modifiers: [\r\n // preventOverflow,\r\n // computeStyles,\r\n // {\r\n // name: 'computeStyles',\r\n // options: {\r\n // gpuAcceleration: false, //預設true, 可關閉GPU加速\r\n // },\r\n // },\r\n arrow,\r\n {\r\n name: 'arrow',\r\n options: {\r\n padding: 5,\r\n },\r\n },\r\n flip,\r\n {\r\n name: 'flip',\r\n options: {\r\n fallbackPlacements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],\r\n },\r\n },\r\n offset,\r\n {\r\n name: 'offset',\r\n options: {\r\n // offset: [0, vo.tooltipPlacementDist], //[Skidding, Distance]\r\n // offset: [0, 5], //因popperjs會自動調位置, 故得通過callback函數處理指定位置時的偏移量\r\n offset: ({ placement, reference, popper }) => {\r\n // console.log('offset', placement, reference, popper, vo.tooltipPlacementDist)\r\n // if (placement === 'bottom-start' || placement === 'bottom' || placement === 'bottom-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else if (placement === 'top-start' || placement === 'top' || placement === 'top-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else if (placement === 'left-start' || placement === 'left' || placement === 'left-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else if (placement === 'right-start' || placement === 'right' || placement === 'right-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else {\r\n // return []\r\n // }\r\n return [0, vo.tooltipPlacementDist] //[Skidding, Distance]\r\n },\r\n },\r\n },\r\n hide,\r\n ],\r\n }\r\n vo.popperInstance = createPopper(divTrigger, divContent, opt)\r\n // console.log('popperInstance', vo.popperInstance)\r\n\r\n },\r\n\r\n updatePopper: function(msg) {\r\n //console.log('methods updatePopper', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //update\r\n if (vo.popperInstance) {\r\n vo.popperInstance.update()\r\n }\r\n\r\n // //emit\r\n // vo.$emit('resize', msg)\r\n\r\n },\r\n\r\n hidePopper: function(from) {\r\n // console.log('methods hidePopper', from, this.mmkey)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (vo.popperInstance) {\r\n\r\n //destroy\r\n vo.popperInstance.destroy()\r\n vo.popperInstance = null\r\n\r\n }\r\n\r\n },\r\n\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.ts {\r\n transition:all 0.3s;\r\n}\r\n.bs {\r\n box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);\r\n}\r\n.WPopperFix[data-popper-reference-hidden] {\r\n visibility: hidden;\r\n pointer-events: none;\r\n}\r\n.arrow,\r\n.arrow::before {\r\n position: absolute;\r\n width: 5px;\r\n height: 5px;\r\n background: inherit;\r\n}\r\n.arrow {\r\n visibility: hidden;\r\n}\r\n.arrow::before {\r\n visibility: visible;\r\n content: '';\r\n transform: rotate(45deg);\r\n}\r\n/* .arrow::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n margin-left: -5px;\r\n border-width: 5px;\r\n border-style: solid;\r\n border-color: black transparent transparent transparent;\r\n} */\r\n</style>\r\n"]},media:void 0})},Ec,"data-v-062a5ce9",false,void 0,!1,o,void 0,void 0)},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},backgroundColor:{type:String,default:"transparent"},menuBorderRadius:{type:Number,default:4},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"}},data:function(){return{methods:[{text:"RGBA"},{text:"HSVA"}],methodSelect:{text:"RGBA"},lock:!1,valueTrans:null,r:255,g:255,b:255,h:360,s:1,v:1,a:1,rt:255,gt:255,bt:255,ht:360,st:1,vt:1,at:1}},computed:{changeValue:function(){let n=this;n.valueTrans=qt(n.value);let e=Ts.toRgba(n.valueTrans),t=Ts.toHsva(n.valueTrans);return n.r=e.r,n.rt=e.r,n.g=e.g,n.gt=e.g,n.b=e.b,n.bt=e.b,n.a=e.a,n.at=e.a,n.h=t.h,n.ht=t.h,n.s=t.s,n.st=t.s,n.v=t.v,n.vt=t.v,""},sliderWidth:function(){let n=this,e=n.size-n.inputTextWidth-n.inputLabelWidth-13;return e=Math.max(e,0),e},useBorderColor:function(){return qt(this.borderColor)},useBackgroundColor:function(){return qt(this.backgroundColor)}},methods:{cki255:function(n){if(!yl(n))return 0;let e=n;return(n=mo(n))<0?n=0:n>255&&(n=255),n===mo(e)?e:n},cki360:function(n){if(!yl(n))return 0;let e=n;return(n=mo(n))<0?n=0:n>360&&(n=360),n===mo(e)?e:n},ckd1:function(n){if(!cu(n))return 0;let e=n;return(n=co(n))<0?n=0:n>1&&(n=1),n===co(e)?e:n},updateColorCore:function(){let n=this,e=!1,t=!1;{let t=mo(n.rt);n.r!==t&&(n.r=t,e=!0)}{let t=mo(n.gt);n.g!==t&&(n.g=t,e=!0)}{let t=mo(n.bt);n.b!==t&&(n.b=t,e=!0)}{let t=co(n.at);n.a!==t&&(n.a=t,e=!0)}{let e=mo(n.ht);n.h!==e&&(n.h=e,t=!0)}{let e=co(n.st);n.s!==e&&(n.s=e,t=!0)}{let e=co(n.vt);n.v!==e&&(n.v=e,t=!0)}let o=null;e?o={r:n.r,g:n.g,b:n.b,a:n.a}:t&&(o={h:n.h,s:n.s,v:n.v,a:n.a}),oi(o)&&(o=Ts.toRgbaString(o),n.valueTrans=o,n.$emit("input",o))},updateColor:function(n,e,t){let o=this;setTimeout(()=>{o.updateColorCore()},1)}}};var $c=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue}},[t("div",{style:"padding-left:10px; margin-bottom:-1px;"},[t("WGroupChipRadio",{attrs:{items:n.methods,paddingStyle:{v:1,h:6},group:!0,groupBorderRadiusStyle:{top:!0},groupShift:0,borderRadius:n.menuBorderRadius,borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,backgroundColor:n.menuBackgroundColor,backgroundColorHover:n.menuBackgroundColorHover,backgroundColorActive:n.menuBackgroundColorActive,textColor:n.menuTextColor,textColorHover:n.menuTextColorHover,textColorActive:n.menuTextColorActive,textFontSize:n.menuTextFontSize,marginStyle:{},shadowActive:!1},model:{value:n.methodSelect,callback:function(e){n.methodSelect=e},expression:"methodSelect"}})],1),n._v(" "),t("div",{style:"padding:10px; border:1px solid "+n.useBorderColor+"; background:"+n.useBackgroundColor+";"},[t("div",{directives:[{name:"show",rawName:"v-show",value:"RGBA"===n.methodSelect.text,expression:"methodSelect.text==='RGBA'"}]},[t("WPanelLabelItem",{attrs:{label:"R",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"r")}},model:{value:n.rt,callback:function(e){n.rt=e},expression:"rt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.r},on:{input:function(e){n.rt=e,n.updateColor(e,"","rs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"G",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"g")}},model:{value:n.gt,callback:function(e){n.gt=e},expression:"gt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.g},on:{input:function(e){n.gt=e,n.updateColor(e,"","gs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"B",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"b")}},model:{value:n.bt,callback:function(e){n.bt=e},expression:"bt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.b},on:{input:function(e){n.bt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:"HSVA"===n.methodSelect.text,expression:"methodSelect.text==='HSVA'"}]},[t("WPanelLabelItem",{attrs:{label:"H",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki360,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"h")}},model:{value:n.ht,callback:function(e){n.ht=e},expression:"ht"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:360,valueStep:1,valueDecimal:0,value:n.h},on:{input:function(e){n.ht=e,n.updateColor(e,"","hs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"S",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"s")}},model:{value:n.st,callback:function(e){n.st=e},expression:"st"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.s},on:{input:function(e){n.st=e,n.updateColor(e,"","ss")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"V",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"v")}},model:{value:n.vt,callback:function(e){n.vt=e},expression:"vt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.v},on:{input:function(e){n.vt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1)])])};$c._withStripped=!0;const Hc=e({render:$c,staticRenderFns:[]},function(n){n&&n("data-v-05ab930f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectInput.vue"},media:void 0})},Fc,"data-v-05ab930f",false,void 0,!1,o,void 0,void 0);const Nc={directives:{domresize:Hr()},components:{WPopup:La,WColorSelectPanel:du,WColorSelectInput:Hc,WButtonChip:Bu,WIcon:yu},props:{value:{type:String,default:"#FFFFFF"},type:{type:String,default:"HSVA"},size:{type:Number,default:200},space:{type:Number,default:10},colorBlockSize:{type:Number,default:20},colorBlockBorderWidth:{type:Number,default:1},colorBlockBorderColor:{type:String,default:"#ddd"},showColorText:{type:Boolean,default:!0},colorTextColor:{type:String,default:"#000"},colorTextFontSize:{type:String,default:"0.8rem"},panelBackgroundColor:{type:String,default:"#fff"},toolBackgroundColor:{type:String,default:"#f5f5f5"},menuIconLump:{type:String,default:"M12,5.32L18,8.69V15.31L12,18.68L6,15.31V8.69L12,5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},menuIconHsva:{type:String,default:"M19 3V21H15V3H19M14 3V21H10V3H14M9 3V21H5V3H9Z"},menuIconEyeDropper:{type:String,default:"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z"},menuIconColor:{type:String,default:"#aaa"},menuIconColorHover:{type:String,default:"#999"},menuIconColorActive:{type:String,default:"#666"},menuIconSize:{type:Number,default:20},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},menuBorderRadius:{type:Number,default:4},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"},popupPlacementDist:{type:Number,default:5},btnText:{type:String,default:"Confirm"},btnRippleColor:{type:String,default:"rgba(255,255,255,0.4)"},btnPaddingStyle:{type:Object,default:()=>({v:1,h:5})},btnTextColor:{type:String,default:"#000"},btnTextColorHover:{type:String,default:"#222"},btnTextColorActive:{type:String,default:"#222"},btnTextFontSize:{type:String,default:"0.8rem"},btnBorderRadius:{type:Number,default:4},btnBackgroundColor:{type:String,default:"rgb(241,241,241)"},btnBackgroundColorHover:{type:String,default:"rgb(236,236,236)"},btnBackgroundColorActive:{type:String,default:"rgb(236,236,236)"},btnShadow:{type:Boolean,default:!0},labelContent:{type:String,default:null},cmpZIndex:{type:Number,default:3e3},editable:{type:Boolean,default:!0}},data:function(){return{mdiLoading:"M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z",show:!1,typeTrans:"HSVA",loadingEyeDropper:!1,layoutType:"horizontal",layoutShowScrollY:!1,layoutMinHeight:300,layoutMaxHeight:300,selectPanelHeight:0,selectInputHeight:0,valueOri:null,valueNew:null,popperPlacement:null}},watch:{show:function(n){let e=this;n&&(e.popperPlacement=null,e.layoutShowScrollY=!0,e.layoutMaxHeight=e.layoutMinHeight,e.$nextTick(()=>{e.$nextTick(()=>{e.adjustMaxHeight()})}))}},computed:{changeValue:function(){let n=this;return n.valueOri=qt(n.value),n.valueNew=n.valueOri,""},changeType:function(){return this.typeTrans=this.type,""},hasEyeDropper:function(){return Vn(window.EyeDropper)},useColorBlockBorderColor:function(){return qt(this.colorBlockBorderColor)},useColorTextColor:function(){return qt(this.colorTextColor)},usePanelBackgroundColor:function(){return qt(this.panelBackgroundColor)},useToolBackgroundColor:function(){return qt(this.toolBackgroundColor)},useBorderColor:function(){return qt(this.borderColor)},usePanelOverflowAndHeight:function(){let n=this,e=`overflow-y:auto; min-height:${n.layoutMinHeight}px;`;return n.layoutShowScrollY&&(e+=`max-height:${n.layoutMaxHeight}px;`),e}},methods:{resize:function(n){let e=this;if(!e.show)return;let t=On(n,"snew.windowWidth",0)>=2*(e.size+20)+3*e.space;e.layoutType=t?"horizontal":"vertical"},resizeContent:function(n){this.show&&this.adjustMaxHeight()},onPlacementChange:function(n){this.popperPlacement=n,this.adjustMaxHeight()},adjustMaxHeight:function(){let n=this;if(n.show)try{let e=n.$refs.ct;if(!e)return;let t=window.innerHeight,o=n.popperPlacement;if(!o)return;let r,i=function(n){if(!Kn(n))return null;try{return n.getBoundingClientRect()}catch(n){}return null}(e),a=e.scrollHeight,l=30;r=o.startsWith("top")?i.bottom-l:t-i.top-l;let s=a>r,u=Math.max(r,n.layoutMinHeight);if(s===n.layoutShowScrollY&&Math.abs(u-n.layoutMaxHeight)<2)return;n.layoutShowScrollY=s,n.layoutMaxHeight=u}catch(n){}},resizeSelectPanel:function(n){if(!this.show)return;let e=On(n,"snew.clientHeight",0);this.selectPanelHeight=e},resizeSelectInput:function(n){if(!this.show)return;let e=On(n,"snew.clientHeight",0);this.selectInputHeight=e},openEyeDropper:function(){let n=this;n.hasEyeDropper&&(n.loadingEyeDropper=!0,(new window.EyeDropper).open().then(e=>{let t=On(e,"sRGBHex","#fff");n.valueNew=t}).catch(n=>{console.log(n)}).finally(()=>{n.loadingEyeDropper=!1}))},clickColor:function(){let n=this;n.editable&&(n.$emit("input",n.valueNew),n.show=!1)}}};var Wc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("WPopup",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,placementDistY:n.popupPlacementDist,editable:n.editable,labelContent:n.labelContent,cmpZIndex:n.cmpZIndex,changeValue:n.changeValue,changeType:n.changeType},on:{domresize:n.resize,"placement-change":n.onPlacementChange},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{},[t("div",{staticStyle:{display:"flex","align-items":"center",cursor:"pointer",outline:"none"},on:{click:n.clickColor}},[t("div",{style:"border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+"; width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; box-sizing:border-box; background:"+n.valueOri+";"}),n._v(" "),n.showColorText?[t("div",{style:"padding-left:5px;"}),n._v(" "),t("div",{style:"font-size:"+n.colorTextFontSize+"; color:"+n.useColorTextColor+";"},[n._v("\n "+n._s(n.valueOri)+"\n ")])]:n._e()],2)])]},proxy:!0},{key:"content",fn:function(){return[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],ref:"ct",style:"background:"+n.usePanelBackgroundColor+"; "+n.usePanelOverflowAndHeight,on:{domresize:n.resizeContent}},[t("div",{style:"display:flex; padding:"+n.space+"px; border-bottom:1px solid "+n.useBorderColor+"; background:"+n.useToolBackgroundColor+";"},[t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconHsva,color:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="HSVA",n.$emit("update:type","HSVA")}}})],1),n._v(" "),t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconLump,color:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="LUMP",n.$emit("update:type","LUMP")}}})],1),n._v(" "),n.hasEyeDropper?t("div",{},[t("WIcon",{class:{"icon-spinner":n.loadingEyeDropper},staticStyle:{cursor:"pointer"},attrs:{icon:n.loadingEyeDropper?n.mdiLoading:n.menuIconEyeDropper,color:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,colorHover:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,size:n.menuIconSize},on:{click:n.openEyeDropper}})],1):n._e(),n._v(" "),t("div",{style:"width:100%;"}),n._v(" "),t("div",{ref:"mtb",style:"display:flex; align-items:center;"},[t("div",{style:"display:flex; align-items:center; border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+";"},[t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueOri+";"}),n._v(" "),t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueNew+";"})])])]),n._v(" "),t("div",{style:"padding:"+n.space+"px;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectPanel}},[t("WColorSelectPanel",{attrs:{type:n.typeTrans,size:n.size,space:0,backgroundColor:"transparent",menuIconLump:n.menuIconLump,menuIconHsva:n.menuIconHsva,menuIconColor:n.menuIconColor,menuIconColorHover:n.menuIconColorHover,menuIconColorActive:n.menuIconColorActive,menuIconSize:n.menuIconSize},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectInput}},[t("WColorSelectInput",{attrs:{size:Math.max(n.size-22,0),backgroundColor:"transparent",borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,menuBorderRadius:n.menuBorderRadius,menuBackgroundColor:n.menuBackgroundColor,menuBackgroundColorHover:n.menuBackgroundColorHover,menuBackgroundColorActive:n.menuBackgroundColorActive,menuTextColor:n.menuTextColor,menuTextColorHover:n.menuTextColorHover,menuTextColorActive:n.menuTextColorActive,menuTextFontSize:n.menuTextFontSize,inputBorderRadius:n.inputBorderRadius,inputBorderColor:n.inputBorderColor,inputBorderColorHover:n.inputBorderColorHover,inputBorderColorActive:n.inputBorderColorActive,inputBackgroundColor:n.inputBackgroundColor,inputBackgroundColorHover:n.inputBackgroundColorHover,inputBackgroundColorActive:n.inputBackgroundColorActive,inputTextColor:n.inputTextColor,inputTextFontSize:n.inputTextFontSize,inputTextWidth:n.inputTextWidth,inputTextHeight:n.inputTextHeight,inputLabelWidth:n.inputLabelWidth,inputLabelColor:n.inputLabelColor,inputLabelFontSize:n.inputLabelFontSize,barProgHeight:n.barProgHeight,barProgColor:n.barProgColor,barProgBackgroundColor:n.barProgBackgroundColor,barSliderSize:n.barSliderSize,barSliderBackgroundColor:n.barSliderBackgroundColor,barSliderBackgroundColorHover:n.barSliderBackgroundColorHover},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{"text-align":"right"}},[t("WButtonChip",{attrs:{text:n.btnText,rippleColor:n.btnRippleColor,paddingStyle:n.btnPaddingStyle,textColor:n.btnTextColor,textColorHover:n.btnTextColorHover,textColorActive:n.btnTextColorActive,textFontSize:n.btnTextFontSize,borderRadius:n.btnBorderRadius,_borderColor:"btnBorderColor",_borderColorHover:"btnBorderColorHover",_borderColorActive:"btnBorderColorActive",backgroundColor:n.btnBackgroundColor,backgroundColorHover:n.btnBackgroundColorHover,backgroundColorActive:n.btnBackgroundColorActive,shadow:n.btnShadow},on:{click:n.clickColor}})],1)])])]},proxy:!0}]),model:{value:n.show,callback:function(e){n.show=e},expression:"show"}})};Wc._withStripped=!0;const Mc=e({render:Wc,staticRenderFns:[]},function(n){n&&n("data-v-4462e481_0",{source:"\n.icon-spinner[data-v-4462e481] {\r\n animation: spin-animation-data-v-4462e481 1.5s infinite;\r\n display: inline-block;\n}\n@keyframes spin-animation-data-v-4462e481 {\n0% {\r\n transform: rotate(0deg);\n}\n100% {\r\n transform: rotate(359deg);\n}\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\node_modules\\w-component-vue\\src\\components\\WColorSelect.vue"],names:[],mappings:";AA42BA;IACA,uDAAA;IACA,qBAAA;AACA;AACA;AACA;QACA,uBAAA;AACA;AACA;QACA,yBAAA;AACA;AACA",file:"WColorSelect.vue",sourcesContent:["<template>\r\n <WPopup\r\n :minWidth=\"null\"\r\n :maxWidth=\"null\"\r\n :autoFitMinWidth=\"false\"\r\n :autoFitMaxWidth=\"false\"\r\n :placementDistY=\"popupPlacementDist\"\r\n :editable=\"editable\"\r\n :labelContent=\"labelContent\"\r\n :cmpZIndex=\"cmpZIndex\"\r\n v-model=\"show\"\r\n :changeValue=\"changeValue\"\r\n :changeType=\"changeType\"\r\n v-domresize\r\n @domresize=\"resize\"\r\n @placement-change=\"onPlacementChange\"\r\n >\r\n\r\n <template v-slot:trigger>\r\n\r\n <div style=\"\">\r\n \x3c!-- 盡量不要讓display:flex暴露至外層 --\x3e\r\n <div\r\n style=\"display:flex; align-items:center; cursor:pointer; outline:none;\"\r\n @click=\"clickColor\"\r\n >\r\n\r\n <div :style=\"`border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor}; width:${colorBlockSize}px; height:${colorBlockSize}px; box-sizing:border-box; background:${valueOri};`\"></div>\r\n\r\n <template v-if=\"showColorText\">\r\n\r\n <div :style=\"`padding-left:5px;`\"></div>\r\n\r\n <div :style=\"`font-size:${colorTextFontSize}; color:${useColorTextColor};`\">\r\n {{valueOri}}\r\n </div>\r\n\r\n </template>\r\n\r\n </div>\r\n </div>\r\n\r\n </template>\r\n\r\n <template v-slot:content>\r\n\r\n <div\r\n ref=\"ct\"\r\n :style=\"`background:${usePanelBackgroundColor}; ${usePanelOverflowAndHeight}`\"\r\n v-domresize\r\n @domresize=\"resizeContent\"\r\n >\r\n\r\n \x3c!-- 上方選單區 --\x3e\r\n <div :style=\"`display:flex; padding:${space}px; border-bottom:1px solid ${useBorderColor}; background:${useToolBackgroundColor};`\">\r\n\r\n <div style=\"\">\r\n <WIcon\r\n style=\"cursor:pointer;\"\r\n :icon=\"menuIconHsva\"\r\n :color=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColor\"\r\n :colorHover=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColorHover\"\r\n :size=\"menuIconSize\"\r\n @click=\"typeTrans='HSVA';$emit('update:type','HSVA')\"\r\n ></WIcon>\r\n </div>\r\n\r\n <div style=\"\">\r\n <WIcon\r\n style=\"cursor:pointer;\"\r\n :icon=\"menuIconLump\"\r\n :color=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColor\"\r\n :colorHover=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColorHover\"\r\n :size=\"menuIconSize\"\r\n @click=\"typeTrans='LUMP';$emit('update:type','LUMP')\"\r\n ></WIcon>\r\n </div>\r\n\r\n <div style=\"\" v-if=\"hasEyeDropper\">\r\n <WIcon\r\n :class=\"{'icon-spinner':loadingEyeDropper}\"\r\n style=\"cursor:pointer;\"\r\n :icon=\"loadingEyeDropper?mdiLoading:menuIconEyeDropper\"\r\n :color=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n :colorHover=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n :size=\"menuIconSize\"\r\n @click=\"openEyeDropper\"\r\n ></WIcon>\r\n </div>\r\n\r\n <div :style=\"`width:100%;`\"></div>\r\n\r\n <div\r\n ref=\"mtb\"\r\n :style=\"`display:flex; align-items:center;`\"\r\n >\r\n\r\n <div :style=\"`display:flex; align-items:center; border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor};`\">\r\n\r\n <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueOri};`\"></div>\r\n\r\n <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueNew};`\"></div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div :style=\"`padding:${space}px;`\">\r\n\r\n \x3c!-- 顏色選擇區 --\x3e\r\n <div\r\n style=\"display:flex;\"\r\n v-domresize\r\n @domresize=\"resizeSelectPanel\"\r\n >\r\n <WColorSelectPanel\r\n :type=\"typeTrans\"\r\n :size=\"size\"\r\n :space=\"0\"\r\n :backgroundColor=\"'transparent'\"\r\n :menuIconLump=\"menuIconLump\"\r\n :menuIconHsva=\"menuIconHsva\"\r\n :menuIconColor=\"menuIconColor\"\r\n :menuIconColorHover=\"menuIconColorHover\"\r\n :menuIconColorActive=\"menuIconColorActive\"\r\n :menuIconSize=\"menuIconSize\"\r\n v-model=\"valueNew\"\r\n ></WColorSelectPanel>\r\n </div>\r\n\r\n <div :style=\"`height:${space}px;`\"></div>\r\n\r\n \x3c!-- 顏色數值區 --\x3e\r\n <div\r\n style=\"display:flex;\"\r\n v-domresize\r\n @domresize=\"resizeSelectInput\"\r\n >\r\n <WColorSelectInput\r\n :size=\"Math.max(size-22,0)\"\r\n :backgroundColor=\"'transparent'\"\r\n :borderColor=\"borderColor\"\r\n :borderColorHover=\"borderColorHover\"\r\n :borderColorActive=\"borderColorActive\"\r\n :menuBorderRadius=\"menuBorderRadius\"\r\n :menuBackgroundColor=\"menuBackgroundColor\"\r\n :menuBackgroundColorHover=\"menuBackgroundColorHover\"\r\n :menuBackgroundColorActive=\"menuBackgroundColorActive\"\r\n :menuTextColor=\"menuTextColor\"\r\n :menuTextColorHover=\"menuTextColorHover\"\r\n :menuTextColorActive=\"menuTextColorActive\"\r\n :menuTextFontSize=\"menuTextFontSize\"\r\n :inputBorderRadius=\"inputBorderRadius\"\r\n :inputBorderColor=\"inputBorderColor\"\r\n :inputBorderColorHover=\"inputBorderColorHover\"\r\n :inputBorderColorActive=\"inputBorderColorActive\"\r\n :inputBackgroundColor=\"inputBackgroundColor\"\r\n :inputBackgroundColorHover=\"inputBackgroundColorHover\"\r\n :inputBackgroundColorActive=\"inputBackgroundColorActive\"\r\n :inputTextColor=\"inputTextColor\"\r\n :inputTextFontSize=\"inputTextFontSize\"\r\n :inputTextWidth=\"inputTextWidth\"\r\n :inputTextHeight=\"inputTextHeight\"\r\n :inputLabelWidth=\"inputLabelWidth\"\r\n :inputLabelColor=\"inputLabelColor\"\r\n :inputLabelFontSize=\"inputLabelFontSize\"\r\n :barProgHeight=\"barProgHeight\"\r\n :barProgColor=\"barProgColor\"\r\n :barProgBackgroundColor=\"barProgBackgroundColor\"\r\n :barSliderSize=\"barSliderSize\"\r\n :barSliderBackgroundColor=\"barSliderBackgroundColor\"\r\n :barSliderBackgroundColorHover=\"barSliderBackgroundColorHover\"\r\n v-model=\"valueNew\"\r\n ></WColorSelectInput>\r\n </div>\r\n\r\n <div :style=\"`height:${space}px;`\"></div>\r\n\r\n \x3c!-- 確認按鈕區 --\x3e\r\n <div style=\"text-align:right;\">\r\n\r\n <WButtonChip\r\n :text=\"btnText\"\r\n :rippleColor=\"btnRippleColor\"\r\n :paddingStyle=\"btnPaddingStyle\"\r\n :textColor=\"btnTextColor\"\r\n :textColorHover=\"btnTextColorHover\"\r\n :textColorActive=\"btnTextColorActive\"\r\n :textFontSize=\"btnTextFontSize\"\r\n :borderRadius=\"btnBorderRadius\"\r\n _borderColor=\"btnBorderColor\"\r\n _borderColorHover=\"btnBorderColorHover\"\r\n _borderColorActive=\"btnBorderColorActive\"\r\n :backgroundColor=\"btnBackgroundColor\"\r\n :backgroundColorHover=\"btnBackgroundColorHover\"\r\n :backgroundColorActive=\"btnBackgroundColorActive\"\r\n :shadow=\"btnShadow\"\r\n @click=\"clickColor\"\r\n ></WButtonChip>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </template>\r\n\r\n </WPopup>\r\n</template>\r\n\r\n<script>\r\nimport { mdiHexagonSlice6, mdiViewParallel, mdiEyedropper, mdiLoading } from '@mdi/js'\r\nimport get from 'lodash-es/get.js'\r\nimport isfun from 'wsemi/src/isfun.mjs'\r\nimport domGetBoudRect from 'wsemi/src/domGetBoudRect.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport WPopup from './WPopup.vue'\r\nimport WColorSelectPanel from './WColorSelectPanel.vue'\r\nimport WColorSelectInput from './WColorSelectInput.vue'\r\nimport WButtonChip from './WButtonChip.vue'\r\nimport WIcon from './WIcon.vue'\r\n\r\n\r\n/**\r\n * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'\r\n * @vue-prop {String} [type='HSVA'] 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'HSVA'\r\n * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200\r\n * @vue-prop {Number} [space=10] 輸入子組件間距數字，單位px，預設10\r\n * @vue-prop {Number} [colorBlockSize=20] 輸入色塊長與寬度數字，單位px，預設20\r\n * @vue-prop {Number} [colorBlockBorderWidth=1] 輸入色塊框線寬度數字，單位px，預設1\r\n * @vue-prop {String} [colorBlockBorderColor='#ddd'] 輸入色塊框線顏色字串，預設'#ddd'\r\n * @vue-prop {Boolean} [showColorText=true] 輸入是否顯示當前RGBA顏色文字布林值，預設true\r\n * @vue-prop {String} [colorTextColor='#000'] 輸入當前RGBA顏色文字顏色字串，預設'#000'\r\n * @vue-prop {String} [colorTextFontSize='0.8rem'] 輸入當前RGBA顏色文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [panelBackgroundColor='#fff'] 輸入彈窗背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [toolBackgroundColor='#f5f5f5'] 輸入彈窗背景顏色字串，預設'#f5f5f5'\r\n * @vue-prop {String} [menuIconLump=mdiHexagonSlice6] 輸入選單LUMP模式圖標字串，預設mdiHexagonSlice6\r\n * @vue-prop {String} [menuIconHsva=mdiViewParallel] mdiViewParallel\r\n * @vue-prop {String} [menuIconEyeDropper=mdiEyedropper] 輸入取色滴管圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiEyedropper)\r\n * @vue-prop {String} [menuIconColor='#aaa'] 輸入選單圖標顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColorHover='#999'] 輸入滑鼠移入時選單圖標顏色字串，預設'#999'\r\n * @vue-prop {String} [menuIconColorActive='#666'] 輸入主動模式時選單圖標顏色字串，預設'#666'\r\n * @vue-prop {Number} [menuIconSize=20] 輸入選單圖標尺寸數字，單位為px，預設20\r\n * @vue-prop {String} [borderColor='#ddd'] 輸入邊框顏色字串，預設'#ddd'\r\n * @vue-prop {String} [borderColorHover='#ccc'] 輸入滑鼠移入時邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [borderColorActive='#777'] 輸入主動模式時邊框顏色字串，預設'#777'\r\n * @vue-prop {Number} [menuBorderRadius=4] 輸入框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [menuTextColor='#444'] 輸入選單文字顏色字串，預設'#444'\r\n * @vue-prop {String} [menuTextColorHover='#222'] 輸入滑鼠移入時選單文字顏色字串，預設'#222'\r\n * @vue-prop {String} [menuTextColorActive='#000'] 輸入主動模式時選單文字顏色字串，預設'#000'\r\n * @vue-prop {String} [menuTextFontSize='0.8rem'] 輸入選單文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [menuBackgroundColor='#fff'] 輸入選單背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [menuBackgroundColorHover='#f9f9f9'] 輸入滑鼠移入時選單背景顏色字串，預設'#f9f9f9'\r\n * @vue-prop {String} [menuBackgroundColorActive='#f2f2f2'] 輸入主動模式時選單背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {Number} [inputBorderRadius=4] 輸入顏色數字輸入區邊框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [inputBorderColor='#ccc'] 輸入顏色數字輸入區邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [inputBorderColorHover='#b5b5b5'] 輸入滑鼠移入時顏色數字輸入區邊框顏色字串，預設'#b5b5b5'\r\n * @vue-prop {String} [inputBorderColorActive='#aaa'] 輸入主動模式時顏色數字輸入區邊框顏色字串，預設'#aaa'\r\n * @vue-prop {String} [inputBackgroundColor='#fff'] 輸入顏色數字輸入區背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [inputBackgroundColorHover='#fafafa'] 輸入滑鼠移入時顏色數字輸入區背景顏色字串，預設'#fafafa'\r\n * @vue-prop {String} [inputBackgroundColorActive='#f2f2f2'] 輸入主動模式時顏色數字輸入區背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {String} [inputTextColor='#000'] 輸入顏色數字輸入區文字顏色字串，預設'#000'\r\n * @vue-prop {String} [inputTextFontSize='0.8rem'] 輸入顏色數字輸入區文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [inputTextWidth=38] 輸入顏色數字輸入區寬度數字，單位為px，預設38\r\n * @vue-prop {Number} [inputTextHeight=18] 輸入顏色數字輸入區高度數字，單位為px，預設18\r\n * @vue-prop {Number} [inputLabelWidth=12] 輸入顏色數字輸入區標題寬度數字，單位為px，預設12\r\n * @vue-prop {String} [inputLabelColor='#666'] 輸入文字顏色字串，預設'#666'\r\n * @vue-prop {String} [inputLabelFontSize='0.8rem'] 輸入文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [barProgHeight=4] 輸入值域條高度數字，單位為px，預設4\r\n * @vue-prop {String} [barProgColor='#74a4d9'] 輸入值域條顏色字串，預設'#74a4d9'\r\n * @vue-prop {String} [barProgBackgroundColor='#eee'] 輸入值域條背景顏色字串，預設'#eee'\r\n * @vue-prop {Number} [barSliderSize=10] 輸入拖曳球尺寸數字，單位為px，預設10\r\n * @vue-prop {String} [barSliderBackgroundColor='#1565C0'] 輸入拖曳球背景顏色字串，預設'#1565C0'\r\n * @vue-prop {String} [barSliderBackgroundColorHover='#1976D2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'\r\n * @vue-prop {Number} [popupPlacementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5\r\n * @vue-prop {String} [btnText='Confirm'] 輸入確認按鈕之文字字串，預設'Confirm'\r\n * @vue-prop {String} [btnRippleColor='rgba(255,255,255,0.4)'] 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'\r\n * @vue-prop {Object} [btnPaddingStyle={v:1,h:5}] 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}\r\n * @vue-prop {String} [btnTextColor='#000'] 輸入確認按鈕之文字顏色字串，預設'#000'\r\n * @vue-prop {String} [btnTextColorHover='#222'] 輸入滑鼠移入時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextColorActive='#222'] 輸入主動模式時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextFontSize='0.8rem'] 輸入確認按鈕之文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [btnBorderRadius=4] 輸入確認按鈕之框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [btnBackgroundColor='rgb(241,241,241)'] 輸入確認按鈕之背景顏色字串，預設'rgb(241,241,241)'\r\n * @vue-prop {String} [btnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {String} [btnBackgroundColorActive='rgb(236,236,236)'] 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {Boolean} [btnShadow=true] 輸入確認按鈕之是否顯示陰影布林值，預設true\r\n * @vue-prop {String} [labelContent=null] 輸入針對teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null\r\n * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n directives: {\r\n domresize: domResize(),\r\n },\r\n components: {\r\n WPopup,\r\n WColorSelectPanel,\r\n WColorSelectInput,\r\n WButtonChip,\r\n WIcon,\r\n },\r\n props: {\r\n value: {\r\n type: String,\r\n default: '#FFFFFF',\r\n },\r\n type: {\r\n type: String,\r\n default: 'HSVA',\r\n },\r\n size: {\r\n type: Number,\r\n default: 200,\r\n },\r\n space: {\r\n type: Number,\r\n default: 10,\r\n },\r\n colorBlockSize: {\r\n type: Number,\r\n default: 20,\r\n },\r\n colorBlockBorderWidth: {\r\n type: Number,\r\n default: 1,\r\n },\r\n colorBlockBorderColor: {\r\n type: String,\r\n default: '#ddd',\r\n },\r\n showColorText: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n colorTextColor: {\r\n type: String,\r\n default: '#000',\r\n },\r\n colorTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n panelBackgroundColor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n toolBackgroundColor: {\r\n type: String,\r\n default: '#f5f5f5',\r\n },\r\n menuIconLump: {\r\n type: String,\r\n default: mdiHexagonSlice6,\r\n },\r\n menuIconHsva: {\r\n type: String,\r\n default: mdiViewParallel,\r\n },\r\n menuIconEyeDropper: {\r\n type: String,\r\n default: mdiEyedropper,\r\n },\r\n menuIconColor: {\r\n type: String,\r\n default: '#aaa',\r\n },\r\n menuIconColorHover: {\r\n type: String,\r\n default: '#999',\r\n },\r\n menuIconColorActive: {\r\n type: String,\r\n default: '#666',\r\n },\r\n menuIconSize: {\r\n type: Number,\r\n default: 20,\r\n },\r\n borderColor: {\r\n type: String,\r\n default: '#ddd',\r\n },\r\n borderColorHover: {\r\n type: String,\r\n default: '#ccc',\r\n },\r\n borderColorActive: {\r\n type: String,\r\n default: '#777',\r\n },\r\n menuBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n menuTextColor: {\r\n type: String,\r\n default: '#444',\r\n },\r\n menuTextColorHover: {\r\n type: String,\r\n default: '#222',\r\n },\r\n menuTextColorActive: {\r\n type: String,\r\n default: '#000',\r\n },\r\n menuTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n menuBackgroundColor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n menuBackgroundColorHover: {\r\n type: String,\r\n default: '#f9f9f9',\r\n },\r\n menuBackgroundColorActive: {\r\n type: String,\r\n default: '#f2f2f2',\r\n },\r\n inputBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n inputBorderColor: {\r\n type: String,\r\n default: '#ccc',\r\n },\r\n inputBorderColorHover: {\r\n type: String,\r\n default: '#b5b5b5',\r\n },\r\n inputBorderColorActive: {\r\n type: String,\r\n default: '#aaa',\r\n },\r\n inputBackgroundColor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n inputBackgroundColorHover: {\r\n type: String,\r\n default: '#fafafa',\r\n },\r\n inputBackgroundColorActive: {\r\n type: String,\r\n default: '#f2f2f2',\r\n },\r\n inputTextColor: {\r\n type: String,\r\n default: '#000',\r\n },\r\n inputTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n inputTextWidth: {\r\n type: Number,\r\n default: 38,\r\n },\r\n inputTextHeight: {\r\n type: Number,\r\n default: 18,\r\n },\r\n inputLabelWidth: {\r\n type: Number,\r\n default: 12,\r\n },\r\n inputLabelColor: {\r\n type: String,\r\n default: '#666',\r\n },\r\n inputLabelFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n barProgHeight: {\r\n type: Number,\r\n default: 4,\r\n },\r\n barProgColor: {\r\n type: String,\r\n default: '#74a4d9',\r\n },\r\n barProgBackgroundColor: {\r\n type: String,\r\n default: '#eee',\r\n },\r\n barSliderSize: {\r\n type: Number,\r\n default: 10,\r\n },\r\n barSliderBackgroundColor: {\r\n type: String,\r\n default: '#1565C0',\r\n },\r\n barSliderBackgroundColorHover: {\r\n type: String,\r\n default: '#1976D2',\r\n },\r\n popupPlacementDist: {\r\n type: Number,\r\n default: 5,\r\n },\r\n btnText: {\r\n type: String,\r\n default: 'Confirm',\r\n },\r\n btnRippleColor: {\r\n type: String,\r\n default: 'rgba(255,255,255,0.4)',\r\n },\r\n btnPaddingStyle: {\r\n type: Object,\r\n default: () => {\r\n return {\r\n v: 1,\r\n h: 5,\r\n }\r\n },\r\n },\r\n btnTextColor: {\r\n type: String,\r\n default: '#000',\r\n },\r\n btnTextColorHover: {\r\n type: String,\r\n default: '#222',\r\n },\r\n btnTextColorActive: {\r\n type: String,\r\n default: '#222',\r\n },\r\n btnTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n btnBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n btnBackgroundColor: {\r\n type: String,\r\n default: 'rgb(241,241,241)',\r\n },\r\n btnBackgroundColorHover: {\r\n type: String,\r\n default: 'rgb(236,236,236)',\r\n },\r\n btnBackgroundColorActive: {\r\n type: String,\r\n default: 'rgb(236,236,236)',\r\n },\r\n btnShadow: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n labelContent: {\r\n type: String,\r\n default: null,\r\n },\r\n cmpZIndex: {\r\n type: Number,\r\n default: 3000,\r\n },\r\n editable: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n data: function() {\r\n return {\r\n mdiLoading,\r\n\r\n show: false,\r\n\r\n typeTrans: 'HSVA',\r\n\r\n loadingEyeDropper: false,\r\n\r\n layoutType: 'horizontal',\r\n layoutShowScrollY: false,\r\n layoutMinHeight: 300,\r\n layoutMaxHeight: 300,\r\n\r\n selectPanelHeight: 0,\r\n selectInputHeight: 0,\r\n\r\n valueOri: null,\r\n valueNew: null,\r\n popperPlacement: null,\r\n\r\n }\r\n },\r\n watch: {\r\n\r\n show: function(b) {\r\n let vo = this\r\n if (b) {\r\n //以最小高度顯示時, 讓Popper.js先決定方向\r\n vo.popperPlacement = null\r\n vo.layoutShowScrollY = true\r\n vo.layoutMaxHeight = vo.layoutMinHeight\r\n // 等 Popper.js 定位完成後重算可用空間\r\n vo.$nextTick(() => {\r\n vo.$nextTick(() => {\r\n vo.adjustMaxHeight()\r\n })\r\n })\r\n }\r\n },\r\n\r\n },\r\n computed: {\r\n\r\n changeValue: function() {\r\n let vo = this\r\n vo.valueOri = convertColor(vo.value)\r\n vo.valueNew = vo.valueOri\r\n return ''\r\n },\r\n\r\n changeType: function() {\r\n let vo = this\r\n vo.typeTrans = vo.type\r\n return ''\r\n },\r\n\r\n hasEyeDropper: function() {\r\n // let vo = this\r\n let b = isfun(window.EyeDropper)\r\n // console.log('window.EyeDropper', window.EyeDropper)\r\n return b\r\n },\r\n\r\n useColorBlockBorderColor: function() {\r\n let vo = this\r\n return convertColor(vo.colorBlockBorderColor)\r\n },\r\n\r\n useColorTextColor: function() {\r\n let vo = this\r\n return convertColor(vo.colorTextColor)\r\n },\r\n\r\n usePanelBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.panelBackgroundColor)\r\n },\r\n\r\n useToolBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.toolBackgroundColor)\r\n },\r\n\r\n useBorderColor: function() {\r\n let vo = this\r\n return convertColor(vo.borderColor)\r\n },\r\n\r\n usePanelOverflowAndHeight: function() {\r\n let vo = this\r\n let of = `overflow-y:auto; min-height:${vo.layoutMinHeight}px;`\r\n if (vo.layoutShowScrollY) {\r\n of += `max-height:${vo.layoutMaxHeight}px;`\r\n }\r\n return of\r\n },\r\n\r\n },\r\n methods: {\r\n\r\n resize: function(msg) {\r\n // console.log('methods resize', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n let w = get(msg, 'snew.windowWidth', 0)\r\n // let h = get(msg, 'snew.windowHeight', 0)\r\n // console.log('w', w, 'h', h, b)\r\n\r\n //layoutType\r\n let b = w >= 2 * (vo.size + 20) + 3 * vo.space //20為組件設定, 不提供外部更改故可直接給\r\n vo.layoutType = b ? 'horizontal' : 'vertical'\r\n // console.log('layoutType', vo.layoutType)\r\n\r\n },\r\n\r\n resizeContent: function(msg) {\r\n // console.log('methods resizeContent', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n //adjustMaxHeight\r\n vo.adjustMaxHeight()\r\n\r\n },\r\n\r\n onPlacementChange: function(placement) {\r\n let vo = this\r\n vo.popperPlacement = placement\r\n vo.adjustMaxHeight()\r\n },\r\n\r\n adjustMaxHeight: function() {\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n try {\r\n\r\n //ct\r\n let ct = vo.$refs.ct\r\n if (!ct) {\r\n return\r\n }\r\n\r\n //windowHeight\r\n let h = window.innerHeight\r\n\r\n //placement\r\n let placement = vo.popperPlacement\r\n\r\n //Popper.js尚未定位完成, 保持初始限制高度\r\n if (!placement) {\r\n return\r\n }\r\n\r\n //rt\r\n let rt = domGetBoudRect(ct)\r\n\r\n //hc, 實際內容高度\r\n let hc = ct.scrollHeight\r\n\r\n //根據方向計算可用空間\r\n let margin = 30\r\n let hca\r\n if (placement.startsWith('top')) {\r\n //彈窗在上方, 底部對齊觸發元素往上延伸\r\n hca = rt.bottom - margin\r\n }\r\n else {\r\n //預設彈窗在下方, 頂部對齊觸發元素下方往下延伸\r\n hca = h - rt.top - margin\r\n }\r\n\r\n //layoutShowScrollYNew\r\n let layoutShowScrollYNew = hc > hca\r\n\r\n //layoutMaxHeightNew\r\n let layoutMaxHeightNew = Math.max(hca, vo.layoutMinHeight)\r\n\r\n //check, 避免微小的數值抖動導致迴圈\r\n if (layoutShowScrollYNew === vo.layoutShowScrollY && Math.abs(layoutMaxHeightNew - vo.layoutMaxHeight) < 2) {\r\n return\r\n }\r\n\r\n //layoutShowScrollY\r\n vo.layoutShowScrollY = layoutShowScrollYNew\r\n // console.log('layoutShowScrollY', vo.layoutShowScrollY)\r\n\r\n //layoutMaxHeight\r\n vo.layoutMaxHeight = layoutMaxHeightNew\r\n // console.log('layoutMaxHeight', vo.layoutMaxHeight)\r\n\r\n }\r\n catch (err) {}\r\n\r\n },\r\n\r\n resizeSelectPanel: function(msg) {\r\n // console.log('methods resizeSelectPanel', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n //save\r\n vo.selectPanelHeight = h\r\n\r\n },\r\n\r\n resizeSelectInput: function(msg) {\r\n // console.log('methods resizeSelectInput', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n //save\r\n vo.selectInputHeight = h\r\n\r\n },\r\n\r\n openEyeDropper: function() {\r\n // console.log('methods openEyeDropper')\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.hasEyeDropper) {\r\n return\r\n }\r\n\r\n vo.loadingEyeDropper = true\r\n\r\n let eyeDropper = new window.EyeDropper()\r\n eyeDropper\r\n .open()\r\n .then((res) => {\r\n // console.log('res', res)\r\n let hex = get(res, 'sRGBHex', '#fff')\r\n vo.valueNew = hex\r\n })\r\n .catch((err) => {\r\n console.log(err)\r\n })\r\n .finally(() => {\r\n vo.loadingEyeDropper = false\r\n })\r\n\r\n },\r\n\r\n clickColor: function() {\r\n // console.log('methods clickColor')\r\n\r\n let vo = this\r\n\r\n //check, 不可編輯時跳出\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //emit\r\n vo.$emit('input', vo.valueNew)\r\n\r\n //hide\r\n vo.show = false\r\n\r\n },\r\n\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.icon-spinner {\r\n animation: spin-animation 1.5s infinite;\r\n display: inline-block;\r\n}\r\n@keyframes spin-animation {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(359deg);\r\n }\r\n}\r\n</style>\r\n"]},media:void 0})},Nc,"data-v-4462e481",false,void 0,!1,o,void 0,void 0);const Lc={components:{WColorSelect:Mc},props:{node:{type:Object,required:!0},defNode:{type:Object,required:!0},textFontSize:{type:String,default:""},excludes:{type:Array,default:()=>[]}},data:()=>({confirmDelete:!1}),computed:{formStyle(){let n={};return this.textFontSize&&(n.fontSize=this.textFontSize),n}},methods:{isEx(n){return this.excludes.indexOf(n)>=0},onFontSizeInput(n){let e=Number(n),t=this.defNode;!n||isNaN(e)||e<t.fontSizeMin||(e>t.fontSizeMax&&(e=t.fontSizeMax),this.$emit("update","fontSize",e))},onEdgeWidthInput(n){let e=Number(n);!n||isNaN(e)||e<1||(e>24&&(e=24),this.$emit("update","edgeWidth",e))}}};var Dc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-flow__settings-form",style:n.formStyle},[n.isEx("name")?n._e():t("label",[n._v("Name\n "),t("input",{attrs:{type:"text"},domProps:{value:n.node.name||""},on:{input:function(e){return n.$emit("update","name",e.target.value)}}})]),n._v(" "),n.isEx("description")?n._e():t("label",[n._v("Description\n "),t("input",{attrs:{type:"text"},domProps:{value:n.node.description||""},on:{input:function(e){return n.$emit("update","description",e.target.value)}}})]),n._v(" "),n.isEx("type")?n._e():t("label",[n._v("Type\n "),t("select",{domProps:{value:n.node.type||n.defNode.type},on:{input:function(e){return n.$emit("update","type",e.target.value)}}},[t("option",{attrs:{value:"input"}},[n._v("Input")]),n._v(" "),t("option",{attrs:{value:"basic"}},[n._v("Basic")]),n._v(" "),t("option",{attrs:{value:"output"}},[n._v("Output")])])]),n._v(" "),n.isEx("shape")?n._e():t("label",[n._v("Shape\n "),t("select",{domProps:{value:n.node.shape||n.defNode.shape},on:{input:function(e){return n.$emit("update","shape",e.target.value)}}},[t("option",{attrs:{value:"rectangle"}},[n._v("Rectangle")]),n._v(" "),t("option",{attrs:{value:"diamond"}},[n._v("Diamond")]),n._v(" "),t("option",{attrs:{value:"ellipse"}},[n._v("Ellipse")]),n._v(" "),t("option",{attrs:{value:"triangle"}},[n._v("Triangle ▲")]),n._v(" "),t("option",{attrs:{value:"triangle-right"}},[n._v("Triangle ▶")]),n._v(" "),t("option",{attrs:{value:"triangle-down"}},[n._v("Triangle ▼")]),n._v(" "),t("option",{attrs:{value:"triangle-left"}},[n._v("Triangle ◀")])])]),n._v(" "),n.isEx("popupDirection")?n._e():t("label",[n._v("Popup Direction\n "),t("select",{domProps:{value:n.node.popupDirection||n.defNode.popupDirection},on:{input:function(e){return n.$emit("update","popupDirection",e.target.value)}}},[t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("fontSize")?n._e():t("label",[n._v("Font Size\n "),t("input",{attrs:{type:"number",min:n.defNode.fontSizeMin,max:n.defNode.fontSizeMax},domProps:{value:n.node.fontSize||n.defNode.fontSize},on:{input:function(e){return n.onFontSizeInput(e.target.value)}}})]),n._v(" "),n.isEx("fontColor")?n._e():t("label",[n._v("Font Color\n "),t("WColorSelect",{attrs:{value:n.node.fontColor||n.defNode.fontColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","fontColor",e)}}})],1),n._v(" "),n.isEx("faceColor")?n._e():t("label",[n._v("Face Color\n "),t("WColorSelect",{attrs:{value:n.node.faceColor||n.defNode.faceColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","faceColor",e)}}})],1),n._v(" "),n.isEx("edgeColor")?n._e():t("label",[n._v("Edge Color\n "),t("WColorSelect",{attrs:{value:n.node.edgeColor||n.defNode.edgeColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","edgeColor",e)}}})],1),n._v(" "),n.isEx("edgeWidth")?n._e():t("label",[n._v("Edge Width\n "),t("input",{attrs:{type:"number",min:"1",max:"24"},domProps:{value:void 0!==n.node.edgeWidth?n.node.edgeWidth:n.defNode.edgeWidth},on:{input:function(e){return n.onEdgeWidthInput(e.target.value)}}})]),n._v(" "),n.isEx("fromPosition")||"output"!==n.node.type&&"basic"!==n.node.type?n._e():t("label",[n._v("From Handle\n "),t("select",{domProps:{value:n.node.fromPosition||n.defNode.fromPosition},on:{input:function(e){return n.$emit("update","fromPosition",e.target.value)}}},[t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("toPosition")||"input"!==n.node.type&&"basic"!==n.node.type?n._e():t("label",[n._v("To Handle\n "),t("select",{domProps:{value:n.node.toPosition||n.defNode.toPosition},on:{input:function(e){return n.$emit("update","toPosition",e.target.value)}}},[t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),t("div",{staticClass:"vue-flow__delete-area"},[n.confirmDelete?[t("span",{staticClass:"vue-flow__delete-warn"},[n._v("確定刪除？相關連線也會一併刪除")]),n._v(" "),t("div",{staticClass:"vue-flow__delete-confirm-row"},[t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){return n.$emit("delete")}}},[n._v("確認刪除")]),n._v(" "),t("button",{staticClass:"vue-flow__delete-btn vue-flow__delete-btn--cancel",on:{click:function(e){n.confirmDelete=!1}}},[n._v("取消")])])]:t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){n.confirmDelete=!0}}},[n._v("刪除節點")])],2)])};Dc._withStripped=!0;var Rc={name:"NodeWrapper",components:{NodeBody:N,NodeSettingsForm:e({render:Dc,staticRenderFns:[]},function(n){n&&n("data-v-e6c99e84_0",{source:'\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\n}\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\n}\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\n}\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\n}\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\n}\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\n}\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\n}\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\n}\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\n}\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\n}\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\n}\r\n',map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\ui\\NodeSettingsForm.vue"],names:[],mappings:";AAyHA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,QAAA;EACA,eAAA;AACA;AACA;;;EAGA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;AACA;AACA;EACA,cAAA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AACA;AACA;EACA,aAAA;EACA,QAAA;AACA;AACA;EACA,iBAAA;EACA,eAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,mBAAA;EACA,qBAAA;AACA;AACA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;AACA;AACA;EACA,mBAAA;EACA,kBAAA;AACA",file:"NodeSettingsForm.vue",sourcesContent:['<template>\r\n <div class="vue-flow__settings-form" :style="formStyle">\r\n <label v-if="!isEx(\'name\')">Name\r\n <input type="text" :value="node.name || \'\'" @input="$emit(\'update\', \'name\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'description\')">Description\r\n <input type="text" :value="node.description || \'\'" @input="$emit(\'update\', \'description\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'type\')">Type\r\n <select :value="node.type || defNode.type" @input="$emit(\'update\', \'type\', $event.target.value)">\r\n <option value="input">Input</option>\r\n <option value="basic">Basic</option>\r\n <option value="output">Output</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'shape\')">Shape\r\n <select :value="node.shape || defNode.shape" @input="$emit(\'update\', \'shape\', $event.target.value)">\r\n <option value="rectangle">Rectangle</option>\r\n <option value="diamond">Diamond</option>\r\n <option value="ellipse">Ellipse</option>\r\n <option value="triangle">Triangle ▲</option>\r\n <option value="triangle-right">Triangle ▶</option>\r\n <option value="triangle-down">Triangle ▼</option>\r\n <option value="triangle-left">Triangle ◀</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'popupDirection\')">Popup Direction\r\n <select :value="node.popupDirection || defNode.popupDirection" @input="$emit(\'update\', \'popupDirection\', $event.target.value)">\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'fontSize\')">Font Size\r\n <input type="number" :value="node.fontSize || defNode.fontSize" :min="defNode.fontSizeMin" :max="defNode.fontSizeMax" @input="onFontSizeInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'fontColor\')">Font Color\r\n <WColorSelect :value="node.fontColor || defNode.fontColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'fontColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'faceColor\')">Face Color\r\n <WColorSelect :value="node.faceColor || defNode.faceColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'faceColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'edgeColor\')">Edge Color\r\n <WColorSelect :value="node.edgeColor || defNode.edgeColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'edgeColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'edgeWidth\')">Edge Width\r\n <input type="number" :value="node.edgeWidth !== undefined ? node.edgeWidth : defNode.edgeWidth" min="1" max="24" @input="onEdgeWidthInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'fromPosition\') && (node.type === \'output\' || node.type === \'basic\')">From Handle\r\n <select :value="node.fromPosition || defNode.fromPosition" @input="$emit(\'update\', \'fromPosition\', $event.target.value)">\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'toPosition\') && (node.type === \'input\' || node.type === \'basic\')">To Handle\r\n <select :value="node.toPosition || defNode.toPosition" @input="$emit(\'update\', \'toPosition\', $event.target.value)">\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <div class="vue-flow__delete-area">\r\n <button v-if="!confirmDelete" class="vue-flow__delete-btn" @click="confirmDelete = true">刪除節點</button>\r\n <template v-else>\r\n <span class="vue-flow__delete-warn">確定刪除？相關連線也會一併刪除</span>\r\n <div class="vue-flow__delete-confirm-row">\r\n <button class="vue-flow__delete-btn" @click="$emit(\'delete\')">確認刪除</button>\r\n <button class="vue-flow__delete-btn vue-flow__delete-btn--cancel" @click="confirmDelete = false">取消</button>\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport WColorSelect from \'w-component-vue/src/components/WColorSelect.vue\'\r\n\r\nexport default {\r\n components: { WColorSelect },\r\n props: {\r\n node: { type: Object, required: true },\r\n defNode: { type: Object, required: true },\r\n textFontSize: { type: String, default: \'\' },\r\n excludes: { type: Array, default: () => [] },\r\n },\r\n data() {\r\n return { confirmDelete: false }\r\n },\r\n computed: {\r\n formStyle() {\r\n let s = {}\r\n if (this.textFontSize) s.fontSize = this.textFontSize\r\n return s\r\n },\r\n },\r\n methods: {\r\n isEx(key) {\r\n return this.excludes.indexOf(key) >= 0\r\n },\r\n onFontSizeInput(val) {\r\n let n = Number(val)\r\n let d = this.defNode\r\n if (!val || isNaN(n) || n < d.fontSizeMin) return\r\n if (n > d.fontSizeMax) n = d.fontSizeMax\r\n this.$emit(\'update\', \'fontSize\', n)\r\n },\r\n onEdgeWidthInput(val) {\r\n let n = Number(val)\r\n if (!val || isNaN(n) || n < 1) return\r\n if (n > 24) n = 24\r\n this.$emit(\'update\', \'edgeWidth\', n)\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\r\n}\r\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n}\r\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n}\r\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n}\r\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n}\r\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\r\n}\r\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\r\n}\r\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\r\n}\r\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\r\n}\r\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\r\n}\r\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\r\n}\r\n</style>\r\n']},media:void 0})},Lc,void 0,false,void 0,!1,o,void 0,void 0),WPopup:La},inject:{getDefNode:{default:()=>()=>({})},getDragGhost:{default:()=>()=>null}},props:{node:{type:Object,required:!0},selected:{type:Boolean,default:!1},draggable:{type:Boolean,default:!0},connectable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},snapGridSize:{type:Number,default:null},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},computed:{dn(){return this.getDefNode()},isDiamond(){return"diamond"===this.node.shape},isEllipse(){return"ellipse"===this.node.shape},isTriangle(){let n=this.node.shape;return"triangle"===n||"triangle-right"===n||"triangle-down"===n||"triangle-left"===n},isSvgShape(){return this.isDiamond||this.isEllipse||this.isTriangle},classes(){const n=this.node.class?Array.isArray(this.node.class)?this.node.class:[this.node.class]:[];return["vue-flow__node",`vue-flow__node-${this.node.type||"basic"}`,...n,{"vue-flow__node--selected":this.selected,"vue-flow__node--dragging":this.isDragging,"vue-flow__node--locked":this.locked,"vue-flow__node--diamond":this.isDiamond,"vue-flow__node--ellipse":this.isEllipse,"vue-flow__node--triangle":this.isTriangle}]},wrapperStyle(){const n=this.dn,e=this.node,t=this.getDragGhost(e.id),o=t?t.x:e.position.x,r=t?t.y:e.position.y,i=t&&void 0!==t.width?t.width:e.width,a=t&&void 0!==t.height?t.height:e.height,l={transform:`translate(${o}px, ${r}px)`,zIndex:e.zIndex||0,...i?{whiteSpace:"pre-line"}:{},...e.style||{}};if(i&&(l.width="number"==typeof i?`${i}px`:i),a&&(l.height="number"==typeof a?`${a}px`:a),!this.isSvgShape){let t=e.faceColor||n.faceColor;t&&(l.background=t);let o=e.edgeColor||n.edgeColor;o&&(l.borderColor=o);let r=void 0!==e.edgeWidth?e.edgeWidth:n.edgeWidth;void 0!==r&&(l.borderWidth=r+"px")}let s=e.fontSize||n.fontSize;s&&(l.fontSize=s+"px");let u=e.fontColor||n.fontColor;return u&&(l.color=u),l}},data:()=>({isDragging:!1,hovered:!1,infoPopupShow:!1,infoPopupEditable:!0,settingsPopupShow:!1,cachedW:0,cachedH:0}),watch:{settingsPopupShow(n){n&&(this.infoPopupShow=!1)},infoPopupShow(n){n&&(this.settingsPopupShow=!1)}},mounted(){this.$nextTick(()=>this.reportDimensions())},updated(){this.reportDimensions()},methods:{reportDimensions(){if(!this.$el)return;const n=this.$el.offsetWidth,e=this.$el.offsetHeight;n===this.cachedW&&e===this.cachedH||(this.cachedW=n,this.cachedH=e,this.$emit("dimensions",{nodeId:this.node.id,width:n,height:e}))},onMouseDown(n){if(n.target.closest&&n.target.closest(".vue-flow__node-settings-anchor"))return void(this._mouseDownPos=null);if(this._mouseDownPos={x:n.clientX,y:n.clientY},!this.draggable)return;if(this.node.dragHandle){if(!n.target.closest(this.node.dragHandle))return}this.infoPopupShow=!1,this.$emit("drag-start",{node:this.node,event:n});const e=n.clientX,t=n.clientY,o=n=>{(Math.abs(n.clientX-e)>2||Math.abs(n.clientY-t)>2)&&(this.infoPopupEditable=!1,document.removeEventListener("mousemove",o))},r=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",r),this.infoPopupEditable||setTimeout(()=>{this.infoPopupEditable=!0},0)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",r)},onMouseUp(n){if(!this._mouseDownPos)return;const e=n.clientX-this._mouseDownPos.x,t=n.clientY-this._mouseDownPos.y;this._mouseDownPos=null,Math.abs(e)<3&&Math.abs(t)<3&&this.$emit("node-click",{node:this.node,event:n})},onDoubleClick(n){this.$emit("node-double-click",{node:this.node,event:n})},openInfoPopup(){this.infoPopupShow=!0},onContextMenu(n){this.$emit("node-context-menu",{node:this.node,event:n})},onConnectStart(n){this.$emit("connect-start",{...n,nodeId:this.node.id})},onMouseEnter(n){this.hovered=!0,this.$emit("node-mouseenter",{node:this.node,event:n})},onMouseLeave(n){this.hovered=!1,this.$emit("node-mouseleave",{node:this.node,event:n})},onSettingsUpdate(n,e){this.$emit("node-settings-update",{node:this.node,key:n,value:e})},onSettingsDelete(){this.$emit("node-settings-delete",{node:this.node})},onResizeStart(n,e){this.infoPopupShow=!1,this.$nextTick(()=>{this.infoPopupEditable=!1}),n.preventDefault();const t={"top-left":"nwse-resize","bottom-right":"nwse-resize","top-right":"nesw-resize","bottom-left":"nesw-resize"}[e]||"default",o=document.createElement("style");o.textContent="* { cursor: "+t+" !important; }",document.head.appendChild(o);const r=n.clientX,i=n.clientY,a=this.node.width||this.$el.offsetWidth,l=this.node.height||this.$el.offsetHeight,s=this.node.position.x,u=this.node.position.y,d=this.snapGridSize,c=d||10,p=this.$el.closest(".vue-flow__viewport"),f=p?parseFloat(p.style.transform.match(/scale\(([^)]+)\)/)?.[1]||1):1,h=n=>d?Math.max(d,Math.round(n/d)*d):Math.max(c,Math.round(n)),g=n=>h(a+n),v=n=>{const e=h(a-n);return{w:e,x:s+(a-e)}},m=n=>h(l+n),A=n=>{const e=h(l-n);return{h:e,y:u+(l-e)}},b=n=>{const t=(n.clientX-r)/f,o=(n.clientY-i)/f;let d=a,c=l,p=s,h=u;if("top-left"===e){let n=v(t);d=n.w,p=n.x;let e=A(o);c=e.h,h=e.y}else if("top-right"===e){d=g(t);let n=A(o);c=n.h,h=n.y}else if("bottom-left"===e){let n=v(t);d=n.w,p=n.x,c=m(o)}else"bottom-right"===e&&(d=g(t),c=m(o));y=d,C=c,x=p,w=h,this.$emit("node-resize",{nodeId:this.node.id,width:d,height:c,x:p,y:h})};let y=a,C=l,x=s,w=u;const S=()=>{document.removeEventListener("mousemove",b),document.removeEventListener("mouseup",S),document.head.removeChild(o),setTimeout(()=>{this.infoPopupEditable=!0},0),this.$emit("node-resize-end",{nodeId:this.node.id,width:y,height:C,x:x,y:w})};document.addEventListener("mousemove",b),document.addEventListener("mouseup",S)}}};const jc=Rc;var Oc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return n.node.hidden?n._e():t("div",{class:n.classes,style:n.wrapperStyle,attrs:{"data-id":n.node.id},on:{mousedown:n.onMouseDown,mouseup:n.onMouseUp,mouseenter:n.onMouseEnter,mouseleave:n.onMouseLeave,dblclick:function(e){return e.stopPropagation(),n.onDoubleClick.apply(null,arguments)},contextmenu:function(e){return e.stopPropagation(),n.onContextMenu.apply(null,arguments)}}},[t("WPopup",{attrs:{placement:"bottom",modeHide:"mousedown",editable:n.infoPopupEditable,minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.inforPopupBackgroundColor,textFontSize:n.inforPopupTitleTextFontSize,paddingStyle:{v:8,h:12}},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("NodeBody",{attrs:{node:n.node,connectable:n.connectable,selected:n.selected,resizable:n.resizable,locked:n.locked,hovered:n.hovered,lastW:n.cachedW,lastH:n.cachedH},on:{"resize-start":function(e){return n.onResizeStart(e.event,e.edge)},"connect-start":n.onConnectStart}})]},proxy:!0},{key:"content",fn:function(){return[n._t("node-popup",function(){return[n.node.name||n.node.description?t("div",{staticStyle:{"min-width":"120px"}},[n.node.name?t("div",{style:{fontSize:n.inforPopupTitleTextFontSize,color:n.inforPopupTitleTextColor,fontWeight:500}},[n._v(n._s(n.node.name))]):n._e(),n._v(" "),n.node.description?t("div",{style:{fontSize:n.inforPopupDescriptionTextFontSize,color:n.inforPopupDescriptionTextColor,marginTop:"4px"}},[n._v(n._s(n.node.description))]):n._e()]):n._e()]},{node:n.node})]},proxy:!0}],null,!0),model:{value:n.infoPopupShow,callback:function(e){n.infoPopupShow=e},expression:"infoPopupShow"}}),n._v(" "),t("transition",{attrs:{name:"vue-flow__fade"}},[(n.hovered||n.settingsPopupShow)&&n.draggable&&!n.locked&&n.settingsEnabled?t("div",{staticClass:"vue-flow__node-settings-anchor"},[t("WPopup",{attrs:{placement:"right-start",modeHide:"mousedown",minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.settingsPopupBackgroundColor,textColor:n.settingsPopupTextColor,paddingStyle:{v:8,h:8}},on:{show:function(e){return n.$emit("node-settings-click",{node:n.node})}},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{staticClass:"vue-flow__node-settings"},[t("svg",{attrs:{viewBox:"0 0 20 20",width:"14",height:"14",fill:"currentColor"}},[t("path",{attrs:{d:"M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z",transform:"translate(0 3)"}})])])]},proxy:!0},{key:"content",fn:function(){return[t("NodeSettingsForm",{attrs:{node:n.node,"def-node":n.dn,"text-font-size":n.settingsPopupTextFontSize,excludes:n.settingsExcludes},on:{update:n.onSettingsUpdate,delete:n.onSettingsDelete}})]},proxy:!0}],null,!1,4123440218),model:{value:n.settingsPopupShow,callback:function(e){n.settingsPopupShow=e},expression:"settingsPopupShow"}})],1):n._e()])],1)};Oc._withStripped=!0;const Vc={name:"NodeRenderer",components:{NodeWrapper:e({render:Oc,staticRenderFns:[]},function(n){n&&n("data-v-088e6a01_0",{source:"\n.vue-flow__node[data-v-088e6a01] {\r\n position: absolute;\r\n cursor: grab;\r\n user-select: none;\r\n pointer-events: all;\r\n box-sizing: border-box;\r\n border: 1px solid #bbb;\r\n border-radius: 3px;\r\n background: #fff;\r\n font-family: 'Microsoft JhengHei', '微軟正黑體', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n font-size: 12px;\r\n text-align: center;\r\n white-space: nowrap;\r\n transition: border-color 0.2s ease, box-shadow 0.3s ease;\n}\n.vue-flow__node[data-v-088e6a01]:hover {\r\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n}\n.vue-flow__node--selected[data-v-088e6a01] {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\n}\n.vue-flow__node--selected[data-v-088e6a01]:hover {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\n}\n.vue-flow__node--dragging[data-v-088e6a01] {\r\n cursor: grabbing;\r\n z-index: 1000 !important;\n}\r\n\r\n/* Settings icon anchor (positioning only) */\n.vue-flow__node-settings-anchor[data-v-088e6a01] {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\n}\r\n/* Settings icon (appearance only) */\n.vue-flow__node-settings[data-v-088e6a01] {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: border-color 0.15s ease, background 0.15s ease;\r\n color: #888;\n}\n.vue-flow__node-settings[data-v-088e6a01]:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\n}\r\n\r\n\r\n/* Shared SVG shape base styles */\n.vue-flow__node--diamond[data-v-088e6a01],\r\n.vue-flow__node--ellipse[data-v-088e6a01],\r\n.vue-flow__node--triangle[data-v-088e6a01] {\r\n background: transparent !important;\r\n border-color: transparent !important;\r\n border-radius: 0 !important;\n}\n.vue-flow__node--diamond[data-v-088e6a01]:hover,\r\n.vue-flow__node--ellipse[data-v-088e6a01]:hover,\r\n.vue-flow__node--triangle[data-v-088e6a01]:hover {\r\n box-shadow: none !important;\n}\n.vue-flow__node--diamond.vue-flow__node--selected[data-v-088e6a01],\r\n.vue-flow__node--ellipse.vue-flow__node--selected[data-v-088e6a01],\r\n.vue-flow__node--triangle.vue-flow__node--selected[data-v-088e6a01] {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\n}\n.vue-flow__node--diamond.vue-flow__node--selected[data-v-088e6a01]:hover,\r\n.vue-flow__node--ellipse.vue-flow__node--selected[data-v-088e6a01]:hover,\r\n.vue-flow__node--triangle.vue-flow__node--selected[data-v-088e6a01]:hover {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\n}\r\n/* SVG shape hover */\r\n/* polygon/ellipse live inside the NodeFace child component, so ::v-deep is\r\n required — a plain scoped selector would pin this component's data-v\r\n attribute onto the child's inner elements and never match. */\n.vue-flow__node--diamond[data-v-088e6a01]:hover .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle[data-v-088e6a01]:hover .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse[data-v-088e6a01]:hover .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));\n}\r\n/* SVG shape selected: red shadow */\n.vue-flow__node--diamond.vue-flow__node--selected[data-v-088e6a01] .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle.vue-flow__node--selected[data-v-088e6a01] .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse.vue-flow__node--selected[data-v-088e6a01] .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6));\n}\r\n/* Fade transition for settings icon and resize handles */\n.vue-flow__fade-enter-active[data-v-088e6a01],\r\n.vue-flow__fade-leave-active[data-v-088e6a01] {\r\n transition: opacity 0.15s ease;\n}\n.vue-flow__fade-enter[data-v-088e6a01],\r\n.vue-flow__fade-leave-to[data-v-088e6a01] {\r\n opacity: 0;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\nodes\\NodeWrapper.vue"],names:[],mappings:";AAiZA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,sBAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,6GAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,wDAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,8CAAA;AACA;AACA;EACA,8CAAA;AACA;AACA;EACA,gBAAA;EACA,wBAAA;AACA;;AAEA,4CAAA;AACA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,UAAA;EACA,mBAAA;AACA;AACA,oCAAA;AACA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,0DAAA;EACA,WAAA;AACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;AACA;;;AAGA,iCAAA;AACA;;;EAGA,kCAAA;EACA,oCAAA;EACA,2BAAA;AACA;AACA;;;EAGA,2BAAA;AACA;AACA;;;EAGA,oCAAA;EACA,2BAAA;AACA;AACA;;;EAGA,oCAAA;EACA,2BAAA;AACA;AACA,oBAAA;AACA;;+DAEA;AACA;;;EAGA,kDAAA;AACA;AACA,mCAAA;AACA;;;EAGA,mDAAA;AACA;AACA,yDAAA;AACA;;EAEA,8BAAA;AACA;AACA;;EAEA,UAAA;AACA",file:"NodeWrapper.vue",sourcesContent:["<template>\r\n <div\r\n v-if=\"!node.hidden\"\r\n :class=\"classes\"\r\n :style=\"wrapperStyle\"\r\n :data-id=\"node.id\"\r\n @mousedown=\"onMouseDown\"\r\n @mouseup=\"onMouseUp\"\r\n @mouseenter=\"onMouseEnter\"\r\n @mouseleave=\"onMouseLeave\"\r\n @dblclick.stop=\"onDoubleClick\"\r\n @contextmenu.stop=\"onContextMenu\"\r\n >\r\n <WPopup\r\n v-model=\"infoPopupShow\"\r\n placement=\"bottom\"\r\n modeHide=\"mousedown\"\r\n :editable=\"infoPopupEditable\"\r\n :minWidth=\"null\"\r\n :maxWidth=\"null\"\r\n :autoFitMinWidth=\"false\"\r\n :autoFitMaxWidth=\"false\"\r\n :backgroundColor=\"inforPopupBackgroundColor\"\r\n :textFontSize=\"inforPopupTitleTextFontSize\"\r\n :paddingStyle=\"{v:8,h:12}\"\r\n >\r\n <template v-slot:trigger>\r\n <NodeBody\r\n :node=\"node\"\r\n :connectable=\"connectable\"\r\n :selected=\"selected\"\r\n :resizable=\"resizable\"\r\n :locked=\"locked\"\r\n :hovered=\"hovered\"\r\n :lastW=\"cachedW\"\r\n :lastH=\"cachedH\"\r\n @resize-start=\"onResizeStart($event.event, $event.edge)\"\r\n @connect-start=\"onConnectStart\"\r\n />\r\n </template>\r\n <template v-slot:content>\r\n <slot name=\"node-popup\" :node=\"node\">\r\n <div v-if=\"node.name || node.description\" style=\"min-width:120px\">\r\n <div v-if=\"node.name\" :style=\"{ fontSize: inforPopupTitleTextFontSize, color: inforPopupTitleTextColor, fontWeight: 500 }\">{{ node.name }}</div>\r\n <div v-if=\"node.description\" :style=\"{ fontSize: inforPopupDescriptionTextFontSize, color: inforPopupDescriptionTextColor, marginTop: '4px' }\">{{ node.description }}</div>\r\n </div>\r\n </slot>\r\n </template>\r\n </WPopup>\r\n \x3c!-- Settings popup --\x3e\r\n <transition name=\"vue-flow__fade\">\r\n <div v-if=\"(hovered || settingsPopupShow) && draggable && !locked && settingsEnabled\" class=\"vue-flow__node-settings-anchor\">\r\n <WPopup\r\n v-model=\"settingsPopupShow\"\r\n placement=\"right-start\"\r\n modeHide=\"mousedown\"\r\n :minWidth=\"null\"\r\n :maxWidth=\"null\"\r\n :autoFitMinWidth=\"false\"\r\n :autoFitMaxWidth=\"false\"\r\n :backgroundColor=\"settingsPopupBackgroundColor\"\r\n :textColor=\"settingsPopupTextColor\"\r\n :paddingStyle=\"{v:8,h:8}\"\r\n @show=\"$emit('node-settings-click', { node: node })\"\r\n >\r\n <template v-slot:trigger>\r\n <div class=\"vue-flow__node-settings\">\r\n <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" fill=\"currentColor\">\r\n <path d=\"M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z\" transform=\"translate(0 3)\"/>\r\n </svg>\r\n </div>\r\n </template>\r\n <template v-slot:content>\r\n <NodeSettingsForm\r\n :node=\"node\"\r\n :def-node=\"dn\"\r\n :text-font-size=\"settingsPopupTextFontSize\"\r\n :excludes=\"settingsExcludes\"\r\n @update=\"onSettingsUpdate\"\r\n @delete=\"onSettingsDelete\"\r\n />\r\n </template>\r\n </WPopup>\r\n </div>\r\n </transition>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport NodeBody from './NodeBody.vue'\r\nimport NodeSettingsForm from '../ui/NodeSettingsForm.vue'\r\nimport WPopup from 'w-component-vue/src/components/WPopup.vue'\r\n\r\nexport default {\r\n name: 'NodeWrapper',\r\n components: { NodeBody, NodeSettingsForm, WPopup },\r\n inject: { getDefNode: { default: () => () => ({}) }, getDragGhost: { default: () => () => null } },\r\n props: {\r\n node: { type: Object, required: true },\r\n selected: { type: Boolean, default: false },\r\n draggable: { type: Boolean, default: true },\r\n connectable: { type: Boolean, default: true },\r\n resizable: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: '#fff' },\r\n settingsPopupTextColor: { type: String, default: '#333' },\r\n settingsPopupTextFontSize: { type: String, default: '12px' },\r\n inforPopupBackgroundColor: { type: String, default: '#fff' },\r\n inforPopupTitleTextColor: { type: String, default: '#333' },\r\n inforPopupTitleTextFontSize: { type: String, default: '12px' },\r\n inforPopupDescriptionTextColor: { type: String, default: '#888' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: '10px' },\r\n snapGridSize: { type: Number, default: null },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n computed: {\r\n dn() {\r\n return this.getDefNode()\r\n },\r\n isDiamond() {\r\n return this.node.shape === 'diamond'\r\n },\r\n isEllipse() {\r\n return this.node.shape === 'ellipse'\r\n },\r\n isTriangle() {\r\n let s = this.node.shape\r\n return s === 'triangle' || s === 'triangle-right' || s === 'triangle-down' || s === 'triangle-left'\r\n },\r\n isSvgShape() {\r\n return this.isDiamond || this.isEllipse || this.isTriangle\r\n },\r\n classes() {\r\n const nodeClasses = this.node.class\r\n ? (Array.isArray(this.node.class) ? this.node.class : [this.node.class])\r\n : []\r\n return [\r\n 'vue-flow__node',\r\n `vue-flow__node-${this.node.type || 'basic'}`,\r\n ...nodeClasses,\r\n {\r\n 'vue-flow__node--selected': this.selected,\r\n 'vue-flow__node--dragging': this.isDragging,\r\n 'vue-flow__node--locked': this.locked,\r\n 'vue-flow__node--diamond': this.isDiamond,\r\n 'vue-flow__node--ellipse': this.isEllipse,\r\n 'vue-flow__node--triangle': this.isTriangle,\r\n },\r\n ]\r\n },\r\n wrapperStyle() {\r\n const d = this.dn\r\n const n = this.node\r\n //拖曳/縮放ghost(細粒度): 進行中之暫時幾何優先(per-key反應式, 只有本節點被拖/縮放時才觸發重渲染)\r\n const g = this.getDragGhost(n.id)\r\n const px = g ? g.x : n.position.x\r\n const py = g ? g.y : n.position.y\r\n const w = (g && g.width !== undefined) ? g.width : n.width\r\n const h = (g && g.height !== undefined) ? g.height : n.height\r\n const style = {\r\n transform: `translate(${px}px, ${py}px)`,\r\n zIndex: n.zIndex || 0,\r\n // Nodes with an explicit width wrap long names instead of\r\n // overflowing (base CSS is nowrap); per-node style can override.\r\n ...(w ? { whiteSpace: 'pre-line' } : {}),\r\n ...(n.style || {}),\r\n }\r\n if (w) style.width = typeof w === 'number' ? `${w}px` : w\r\n if (h) style.height = typeof h === 'number' ? `${h}px` : h\r\n if (!this.isSvgShape) {\r\n let fColor = n.faceColor || d.faceColor\r\n if (fColor) style.background = fColor\r\n let eColor = n.edgeColor || d.edgeColor\r\n if (eColor) style.borderColor = eColor\r\n let eWidth = n.edgeWidth !== undefined ? n.edgeWidth : d.edgeWidth\r\n if (eWidth !== undefined) style.borderWidth = eWidth + 'px'\r\n }\r\n let fs = n.fontSize || d.fontSize\r\n if (fs) style.fontSize = fs + 'px'\r\n let fc = n.fontColor || d.fontColor\r\n if (fc) style.color = fc\r\n return style\r\n },\r\n },\r\n data() {\r\n return {\r\n isDragging: false,\r\n hovered: false,\r\n infoPopupShow: false,\r\n infoPopupEditable: true,\r\n settingsPopupShow: false,\r\n cachedW: 0,\r\n cachedH: 0,\r\n }\r\n },\r\n watch: {\r\n settingsPopupShow(val) {\r\n if (val) this.infoPopupShow = false\r\n },\r\n infoPopupShow(val) {\r\n if (val) this.settingsPopupShow = false\r\n },\r\n },\r\n mounted() {\r\n this.$nextTick(() => this.reportDimensions())\r\n },\r\n updated() {\r\n this.reportDimensions()\r\n },\r\n methods: {\r\n reportDimensions() {\r\n if (!this.$el) return\r\n const w = this.$el.offsetWidth\r\n const h = this.$el.offsetHeight\r\n if (w === this.cachedW && h === this.cachedH) return\r\n this.cachedW = w\r\n this.cachedH = h\r\n this.$emit('dimensions', { nodeId: this.node.id, width: w, height: h })\r\n },\r\n onMouseDown(event) {\r\n //點設定齒輪(及其popup錨區)不啟動節點拖曳/點擊: 齒輪刻意不用@mousedown.stop(stopPropagation會擋掉window層WPopup互斥協調),\r\n //故於此明確排除, 使點齒輪只開設定popup、不移動節點座標(避免尚未變更設定就先改到座標→誤觸發變更儲存)\r\n if (event.target.closest && event.target.closest('.vue-flow__node-settings-anchor')) {\r\n this._mouseDownPos = null\r\n return\r\n }\r\n this._mouseDownPos = { x: event.clientX, y: event.clientY }\r\n if (!this.draggable) return\r\n if (this.node.dragHandle) {\r\n const handle = event.target.closest(this.node.dragHandle)\r\n if (!handle) return\r\n }\r\n this.infoPopupShow = false\r\n this.$emit('drag-start', { node: this.node, event })\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const onDragMove = (e) => {\r\n if (Math.abs(e.clientX - startX) > 2 || Math.abs(e.clientY - startY) > 2) {\r\n this.infoPopupEditable = false\r\n document.removeEventListener('mousemove', onDragMove)\r\n }\r\n }\r\n const onDragEnd = () => {\r\n document.removeEventListener('mousemove', onDragMove)\r\n document.removeEventListener('mouseup', onDragEnd)\r\n if (!this.infoPopupEditable) {\r\n setTimeout(() => {\r\n this.infoPopupEditable = true\r\n }, 0)\r\n }\r\n }\r\n document.addEventListener('mousemove', onDragMove)\r\n document.addEventListener('mouseup', onDragEnd)\r\n },\r\n onMouseUp(event) {\r\n if (!this._mouseDownPos) return\r\n const dx = event.clientX - this._mouseDownPos.x\r\n const dy = event.clientY - this._mouseDownPos.y\r\n this._mouseDownPos = null\r\n if (Math.abs(dx) < 3 && Math.abs(dy) < 3) {\r\n this.$emit('node-click', { node: this.node, event })\r\n }\r\n },\r\n onDoubleClick(event) {\r\n this.$emit('node-double-click', { node: this.node, event })\r\n },\r\n openInfoPopup() {\r\n this.infoPopupShow = true\r\n },\r\n onContextMenu(event) {\r\n this.$emit('node-context-menu', { node: this.node, event })\r\n },\r\n onConnectStart(payload) {\r\n this.$emit('connect-start', { ...payload, nodeId: this.node.id })\r\n },\r\n onMouseEnter(event) {\r\n this.hovered = true\r\n this.$emit('node-mouseenter', { node: this.node, event })\r\n },\r\n onMouseLeave(event) {\r\n this.hovered = false\r\n this.$emit('node-mouseleave', { node: this.node, event })\r\n },\r\n onSettingsUpdate(key, value) {\r\n this.$emit('node-settings-update', { node: this.node, key, value })\r\n },\r\n onSettingsDelete() {\r\n this.$emit('node-settings-delete', { node: this.node })\r\n },\r\n onResizeStart(event, edge) {\r\n this.infoPopupShow = false\r\n this.$nextTick(() => {\r\n this.infoPopupEditable = false\r\n })\r\n event.preventDefault()\r\n\r\n // Lock cursor for the entire drag duration\r\n const cursorMap = {\r\n 'top-left': 'nwse-resize',\r\n 'bottom-right': 'nwse-resize',\r\n 'top-right': 'nesw-resize',\r\n 'bottom-left': 'nesw-resize',\r\n }\r\n const lockedCursor = cursorMap[edge] || 'default'\r\n const cursorStyle = document.createElement('style')\r\n cursorStyle.textContent = '* { cursor: ' + lockedCursor + ' !important; }'\r\n document.head.appendChild(cursorStyle)\r\n\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const startW = this.node.width || this.$el.offsetWidth\r\n const startH = this.node.height || this.$el.offsetHeight\r\n const startPosX = this.node.position.x\r\n const startPosY = this.node.position.y\r\n const snap = this.snapGridSize\r\n const minSize = snap || 10\r\n // Get zoom from the viewport transform\r\n const viewport = this.$el.closest('.vue-flow__viewport')\r\n const zoom = viewport ? parseFloat(viewport.style.transform.match(/scale\\(([^)]+)\\)/)?.[1] || 1) : 1\r\n\r\n const snapVal = (v) => snap ? Math.max(snap, Math.round(v / snap) * snap) : Math.max(minSize, Math.round(v))\r\n\r\n const resizeRight = (dx) => snapVal(startW + dx)\r\n const resizeLeft = (dx) => {\r\n const newW = snapVal(startW - dx)\r\n return { w: newW, x: startPosX + (startW - newW) }\r\n }\r\n const resizeBottom = (dy) => snapVal(startH + dy)\r\n const resizeTop = (dy) => {\r\n const newH = snapVal(startH - dy)\r\n return { h: newH, y: startPosY + (startH - newH) }\r\n }\r\n\r\n const onMouseMove = (e) => {\r\n const dx = (e.clientX - startX) / zoom\r\n const dy = (e.clientY - startY) / zoom\r\n let newW = startW; let newH = startH; let newX = startPosX; let newY = startPosY\r\n\r\n if (edge === 'top-left') {\r\n let rl2 = resizeLeft(dx); newW = rl2.w; newX = rl2.x\r\n let rt2 = resizeTop(dy); newH = rt2.h; newY = rt2.y\r\n }\r\n else if (edge === 'top-right') {\r\n newW = resizeRight(dx)\r\n let rt3 = resizeTop(dy); newH = rt3.h; newY = rt3.y\r\n }\r\n else if (edge === 'bottom-left') {\r\n let rl3 = resizeLeft(dx); newW = rl3.w; newX = rl3.x\r\n newH = resizeBottom(dy)\r\n }\r\n else if (edge === 'bottom-right') {\r\n newW = resizeRight(dx)\r\n newH = resizeBottom(dy)\r\n }\r\n\r\n //closure追蹤縮放最終值供resize-end發送\r\n //why: 縮放中node本體不變動(ghost僅作用於視覺), this.node.*是原值, 不可作為結果\r\n lastW = newW\r\n lastH = newH\r\n lastX = newX\r\n lastY = newY\r\n\r\n this.$emit('node-resize', {\r\n nodeId: this.node.id,\r\n width: newW,\r\n height: newH,\r\n x: newX,\r\n y: newY,\r\n })\r\n }\r\n\r\n let lastW = startW\r\n let lastH = startH\r\n let lastX = startPosX\r\n let lastY = startPosY\r\n\r\n const onMouseUp = () => {\r\n document.removeEventListener('mousemove', onMouseMove)\r\n document.removeEventListener('mouseup', onMouseUp)\r\n document.head.removeChild(cursorStyle)\r\n setTimeout(() => {\r\n this.infoPopupEditable = true\r\n }, 0)\r\n this.$emit('node-resize-end', {\r\n nodeId: this.node.id,\r\n width: lastW,\r\n height: lastH,\r\n x: lastX,\r\n y: lastY,\r\n })\r\n }\r\n\r\n document.addEventListener('mousemove', onMouseMove)\r\n document.addEventListener('mouseup', onMouseUp)\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__node {\r\n position: absolute;\r\n cursor: grab;\r\n user-select: none;\r\n pointer-events: all;\r\n box-sizing: border-box;\r\n border: 1px solid #bbb;\r\n border-radius: 3px;\r\n background: #fff;\r\n font-family: 'Microsoft JhengHei', '微軟正黑體', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n font-size: 12px;\r\n text-align: center;\r\n white-space: nowrap;\r\n transition: border-color 0.2s ease, box-shadow 0.3s ease;\r\n}\r\n.vue-flow__node:hover {\r\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\r\n}\r\n.vue-flow__node--selected {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\r\n}\r\n.vue-flow__node--selected:hover {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\r\n}\r\n.vue-flow__node--dragging {\r\n cursor: grabbing;\r\n z-index: 1000 !important;\r\n}\r\n\r\n/* Settings icon anchor (positioning only) */\r\n.vue-flow__node-settings-anchor {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\r\n}\r\n/* Settings icon (appearance only) */\r\n.vue-flow__node-settings {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: border-color 0.15s ease, background 0.15s ease;\r\n color: #888;\r\n}\r\n.vue-flow__node-settings:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n\r\n/* Shared SVG shape base styles */\r\n.vue-flow__node--diamond,\r\n.vue-flow__node--ellipse,\r\n.vue-flow__node--triangle {\r\n background: transparent !important;\r\n border-color: transparent !important;\r\n border-radius: 0 !important;\r\n}\r\n.vue-flow__node--diamond:hover,\r\n.vue-flow__node--ellipse:hover,\r\n.vue-flow__node--triangle:hover {\r\n box-shadow: none !important;\r\n}\r\n.vue-flow__node--diamond.vue-flow__node--selected,\r\n.vue-flow__node--ellipse.vue-flow__node--selected,\r\n.vue-flow__node--triangle.vue-flow__node--selected {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n.vue-flow__node--diamond.vue-flow__node--selected:hover,\r\n.vue-flow__node--ellipse.vue-flow__node--selected:hover,\r\n.vue-flow__node--triangle.vue-flow__node--selected:hover {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n/* SVG shape hover */\r\n/* polygon/ellipse live inside the NodeFace child component, so ::v-deep is\r\n required — a plain scoped selector would pin this component's data-v\r\n attribute onto the child's inner elements and never match. */\r\n.vue-flow__node--diamond:hover ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle:hover ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse:hover ::v-deep .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));\r\n}\r\n/* SVG shape selected: red shadow */\r\n.vue-flow__node--diamond.vue-flow__node--selected ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle.vue-flow__node--selected ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse.vue-flow__node--selected ::v-deep .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6));\r\n}\r\n/* Fade transition for settings icon and resize handles */\r\n.vue-flow__fade-enter-active,\r\n.vue-flow__fade-leave-active {\r\n transition: opacity 0.15s ease;\r\n}\r\n.vue-flow__fade-enter,\r\n.vue-flow__fade-leave-to {\r\n opacity: 0;\r\n}\r\n</style>\r\n"]},media:void 0})},jc,"data-v-088e6a01",false,void 0,!1,o,void 0,void 0)},props:{nodes:{type:Array,default:()=>[]},selectedNodeIds:{type:Array,default:()=>[]},nodesDraggable:{type:Boolean,default:!0},nodesConnectable:{type:Boolean,default:!0},nodesResizable:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},snapGridSize:{type:Number,default:null},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},computed:{visibleNodes(){return this.nodes.filter(n=>!n.hidden)}},methods:{isSelected(n){return this.selectedNodeIds.includes(n)},isDraggable(n){return void 0!==n.draggable?n.draggable:this.nodesDraggable},isConnectable(n){return void 0!==n.connectable?n.connectable:this.nodesConnectable},isResizable(n){return void 0!==n.resizable?n.resizable:this.nodesResizable},openNodeInfoPopup(n){let e=(this.$refs.wrappers||[]).find(e=>e.node&&e.node.id===n);return!!e&&(e.openInfoPopup(),!0)}}};var Yc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-flow__nodes"},n._l(n.visibleNodes,function(e){return t("NodeWrapper",{key:e.id,ref:"wrappers",refInFor:!0,attrs:{node:e,selected:n.isSelected(e.id),draggable:n.isDraggable(e),connectable:n.isConnectable(e),resizable:n.isResizable(e),locked:n.locked,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"snap-grid-size":n.snapGridSize,"settings-enabled":n.settingsEnabled,"settings-excludes":n.settingsExcludes},on:{"drag-start":function(e){return n.$emit("drag-start",e)},"node-click":function(e){return n.$emit("node-click",e)},"node-double-click":function(e){return n.$emit("node-double-click",e)},"node-context-menu":function(e){return n.$emit("node-context-menu",e)},"node-settings-click":function(e){return n.$emit("node-settings-click",e)},"node-settings-update":function(e){return n.$emit("node-settings-update",e)},"node-settings-delete":function(e){return n.$emit("node-settings-delete",e)},"node-mouseenter":function(e){return n.$emit("node-mouseenter",e)},"node-mouseleave":function(e){return n.$emit("node-mouseleave",e)},"connect-start":function(e){return n.$emit("connect-start",e)},dimensions:function(e){return n.$emit("dimensions",e)},"node-resize":function(e){return n.$emit("node-resize",e)},"node-resize-end":function(e){return n.$emit("node-resize-end",e)}},scopedSlots:n._u([n.$scopedSlots["node-popup"]?{key:"node-popup",fn:function(e){return[n._t("node-popup",null,null,e)]}}:null],null,!0)})}),1)};Yc._withStripped=!0;const Uc=e({render:Yc,staticRenderFns:[]},function(n){n&&n("data-v-ddb0e4d0_0",{source:"\n.vue-flow__nodes[data-v-ddb0e4d0] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 0;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\nodes\\NodeRenderer.vue"],names:[],mappings:";AAmGA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AACA",file:"NodeRenderer.vue",sourcesContent:['<template>\r\n <div class="vue-flow__nodes">\r\n <NodeWrapper\r\n v-for="node in visibleNodes"\r\n ref="wrappers"\r\n :key="node.id"\r\n :node="node"\r\n :selected="isSelected(node.id)"\r\n :draggable="isDraggable(node)"\r\n :connectable="isConnectable(node)"\r\n :resizable="isResizable(node)"\r\n :locked="locked"\r\n :settings-popup-background-color="settingsPopupBackgroundColor"\r\n :settings-popup-text-color="settingsPopupTextColor"\r\n :settings-popup-text-font-size="settingsPopupTextFontSize"\r\n :infor-popup-background-color="inforPopupBackgroundColor"\r\n :infor-popup-title-text-color="inforPopupTitleTextColor"\r\n :infor-popup-title-text-font-size="inforPopupTitleTextFontSize"\r\n :infor-popup-description-text-color="inforPopupDescriptionTextColor"\r\n :infor-popup-description-text-font-size="inforPopupDescriptionTextFontSize"\r\n :snap-grid-size="snapGridSize"\r\n :settings-enabled="settingsEnabled"\r\n :settings-excludes="settingsExcludes"\r\n @drag-start="$emit(\'drag-start\', $event)"\r\n @node-click="$emit(\'node-click\', $event)"\r\n @node-double-click="$emit(\'node-double-click\', $event)"\r\n @node-context-menu="$emit(\'node-context-menu\', $event)"\r\n @node-settings-click="$emit(\'node-settings-click\', $event)"\r\n @node-settings-update="$emit(\'node-settings-update\', $event)"\r\n @node-settings-delete="$emit(\'node-settings-delete\', $event)"\r\n @node-mouseenter="$emit(\'node-mouseenter\', $event)"\r\n @node-mouseleave="$emit(\'node-mouseleave\', $event)"\r\n @connect-start="$emit(\'connect-start\', $event)"\r\n @dimensions="$emit(\'dimensions\', $event)"\r\n @node-resize="$emit(\'node-resize\', $event)"\r\n @node-resize-end="$emit(\'node-resize-end\', $event)"\r\n >\r\n <template v-if="$scopedSlots[\'node-popup\']" v-slot:node-popup="scope">\r\n <slot name="node-popup" v-bind="scope" />\r\n </template>\r\n </NodeWrapper>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport NodeWrapper from \'./NodeWrapper.vue\'\r\n\r\nexport default {\r\n name: \'NodeRenderer\',\r\n components: { NodeWrapper },\r\n props: {\r\n nodes: { type: Array, default: () => [] },\r\n selectedNodeIds: { type: Array, default: () => [] },\r\n nodesDraggable: { type: Boolean, default: true },\r\n nodesConnectable: { type: Boolean, default: true },\r\n nodesResizable: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n settingsPopupTextColor: { type: String, default: \'#333\' },\r\n settingsPopupTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n inforPopupTitleTextColor: { type: String, default: \'#333\' },\r\n inforPopupTitleTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupDescriptionTextColor: { type: String, default: \'#888\' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: \'10px\' },\r\n snapGridSize: { type: Number, default: null },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n computed: {\r\n visibleNodes() {\r\n return this.nodes.filter(n => !n.hidden)\r\n },\r\n },\r\n methods: {\r\n isSelected(id) {\r\n return this.selectedNodeIds.includes(id)\r\n },\r\n isDraggable(node) {\r\n return node.draggable !== undefined ? node.draggable : this.nodesDraggable\r\n },\r\n isConnectable(node) {\r\n return node.connectable !== undefined ? node.connectable : this.nodesConnectable\r\n },\r\n isResizable(node) {\r\n return node.resizable !== undefined ? node.resizable : this.nodesResizable\r\n },\r\n openNodeInfoPopup(nodeId) {\r\n let wrappers = this.$refs.wrappers || []\r\n let w = wrappers.find(c => c.node && c.node.id === nodeId)\r\n if (!w) return false\r\n w.openInfoPopup()\r\n return true\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__nodes {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 0;\r\n}\r\n</style>\r\n']},media:void 0})},Vc,"data-v-ddb0e4d0",false,void 0,!1,o,void 0,void 0);let Xc=new Map,Gc=-1;function Zc(){Xc.clear(),Gc=-1}function qc(n,e,t,o,r,i,a,l,s,u,d){let c=Math.floor(Date.now()/16);c!==Gc&&(Xc.clear(),Gc=c);let p=Math.round(n/10)+","+Math.round(e/10)+","+Math.round(o/10)+","+Math.round(r/10)+","+t+","+i,f=Xc.get(p);if(f)return f;let h=[];if(l&&l.length>0){let n=s||{};for(let e=0;e<l.length;e++){let t=l[e];if(t.hidden)continue;let o=n[t.id]&&n[t.id].width||t.width||100,r=n[t.id]&&n[t.id].height||t.height||40;h.push({l:t.position.x,t:t.position.y,r:t.position.x+o,b:t.position.y+r})}}let g=Qc(h,n,e),v=Qc(h,o,r),m=function(n,e,t,o,r,i,a,l,s){if(!a||!l)return null;let u=sp(t),d=sp(i),c=[[a.l,a.t,a.r-a.l,a.b-a.t],[l.l,l.t,l.r-l.l,l.b-l.t]],p=n-o,f=e-r,h=2*s;if(p*p+f*f<h*h)return null;let g=[[],[]];for(let n=0;n<2;n++)g[n][1]=c[n][0]-s,g[n][2]=c[n][1]-s,g[n][4]=c[n][0]+c[n][2]+s,g[n][8]=c[n][1]+c[n][3]+s;let v=[[.5,.5],[.5,.5]],m=c[0][2]||1,A=c[0][3]||1,b=c[1][2]||1,y=c[1][3]||1;v[0][0]=(n-c[0][0])/m,v[0][1]=(e-c[0][1])/A,v[1][0]=(o-c[1][0])/b,v[1][1]=(r-c[1][1])/y;let C=c[0][0]+c[0][2]/2,x=c[0][1]+c[0][3]/2,w=c[1][0]+c[1][2]/2,S=c[1][1]+c[1][3]/2,k=C-w,_=x-S,B=0;k<0?B=_<0?2:1:_<=0&&(B=0===k?2:3);let T=[];T[1]=Math.max(c[0][0]-(c[1][0]+c[1][2])-h,0),T[2]=Math.max(c[0][1]-(c[1][1]+c[1][3])-h,0),T[3]=Math.max(c[1][0]-(c[0][0]+c[0][2])-h,0),T[4]=Math.max(c[1][1]-(c[0][1]+c[0][3])-h,0);let P=u===ep?3:u,z=d===ep?3:d;P-=B,z-=B,P<1&&(P+=4);z<1&&(z+=4);let E=lp[P-1][z-1],I=[];for(let n=0;n<12;n++)I[n]=[0,0];switch(I[0][0]=c[0][0],I[0][1]=c[0][1],u){case Jc:I[0][0]-=s,I[0][1]+=v[0][1]*c[0][3];break;case np:I[0][0]+=v[0][0]*c[0][2],I[0][1]+=c[0][3]+s;break;case ep:I[0][0]+=c[0][2]+s,I[0][1]+=v[0][1]*c[0][3];break;case Kc:I[0][0]+=v[0][0]*c[0][2],I[0][1]-=s}let F=0,$=(u&(ep|Jc))>0?0:1,H=$;for(let n=0;n<E.length;n++){let e=15&E[n],t=e===ep?3:e;t+=B,t>4&&(t-=4);let o=ap[t-1],r=t%2>0?0:1;r!==$&&(F++,I[F]=[I[F-1][0],I[F-1][1]]);let i=(E[n]&ip)>0,a=(E[n]&rp)>0,l=(E[n]&tp)>>5;l<<=B,l>15&&(l>>=4);let s=(E[n]&op)>0;if((a||i)&&l<9){let n,e=a?0:1;if(n=s&&0===r?c[e][0]+v[e][0]*c[e][2]:s?c[e][1]+v[e][1]*c[e][3]:g[e][l],0===r){let e=(n-I[F][0])*o[0];e>0&&(I[F][0]+=o[0]*e)}else{let e=(n-I[F][1])*o[1];e>0&&(I[F][1]+=o[1]*e)}}else s&&(I[F][0]+=o[0]*Math.abs(T[t]/2),I[F][1]+=o[1]*Math.abs(T[t]/2));F>0&&I[F][r]===I[F-1][r]?F--:$=r}let N=[{x:n,y:e}],W=((d&(ep|Jc))>0?0:1)===H?0:1;for(let n=0;n<=F&&(n!==F||W===(F+1)%2);n++)N.push({x:Math.round(10*I[n][0])/10,y:Math.round(10*I[n][1])/10});N.push({x:o,y:r});let M=[N[0]];for(let n=1;n<N.length;n++)(Math.abs(N[n].x-M[M.length-1].x)>.5||Math.abs(N[n].y-M[M.length-1].y)>.5)&&M.push(N[n]);return M}(n,e,t,o,r,i,g,v,a||24);return m||(m=function(n,e,t,o,r,i){let a=[{x:n,y:e}];i&&t>=i.l&&t<=i.r&&e>=i.t&&e<=i.b?r&&n>=r.l&&n<=r.r&&o>=r.t&&o<=r.b||a.push({x:n,y:o}):n!==t&&e!==o&&a.push({x:t,y:e});return a.push({x:t,y:o}),a}(n,e,o,r,g,v)),Xc.size>200&&Xc.clear(),Xc.set(p,m),m}function Qc(n,e,t){for(let o=0;o<n.length;o++){let r=n[o];if(e>=r.l-5&&e<=r.r+5&&t>=r.t-5&&t<=r.b+5)return r}return null}let Jc=1,Kc=2,np=4,ep=8,tp=480,op=512,rp=1024,ip=2048,ap=[[-1,0],[0,-1],[1,0],[0,1],[-1,0],[0,-1],[1,0]],lp=[[[513,2308,2081,2562],[513,1090,514,2184,2114,2561],[513,1090,514,2564,2184,2562],[513,2308,2561,1090,514,2568,2308]],[[514,1057,513,2308,2081,2562],[514,2184,2114,2561],[514,2184,2562,1057,513,2564,2184],[514,1057,513,2568,2308,2561]],[[1090,514,1057,513,2308,2081,2562],[2114,2561],[1090,2562,1057,513,2564,2184],[1090,514,1057,513,2308,2561,2568]],[[2081,2562],[1057,513,1090,514,2184,2114,2561],[1057,513,1090,514,2184,2562,2564],[1057,2561,1090,514,2568,2308]]];function sp(n){switch(n){case"left":return Jc;case"top":return Kc;case"right":return ep;default:return np}}function up(n){if(!Array.isArray(n)||0===n.length)return null;const e=[];for(const t of n){let n=null,o=null;if(Array.isArray(t)&&t.length>=2?(n=Number(t[0]),o=Number(t[1])):t&&"object"==typeof t&&(n=Number(t.x),o=Number(t.y)),!Number.isFinite(n)||!Number.isFinite(o))return null;e.push({x:n,y:o})}return e}function dp(n,e,t,o,r,i,a){const l=[{x:n,y:e}],s=n=>{const e=l[l.length-1];(Math.abs(n.x-e.x)>.5||Math.abs(n.y-e.y)>.5)&&l.push({x:n.x,y:n.y})};let u="left"===t||"right"===t;for(let n=0;n<a.length;n++){const e=a[n],t=l[l.length-1],o=Math.abs(e.x-t.x),r=Math.abs(e.y-t.y);let i;o>.5&&r>.5?(s(u?{x:e.x,y:t.y}:{x:t.x,y:e.y}),i=!u):i=o>.5,s(e),u=!i}const d=l[l.length-1],c="left"===i||"right"===i;return Math.abs(o-d.x)>.5&&Math.abs(r-d.y)>.5&&s(c?{x:d.x,y:r}:{x:o,y:d.y}),s({x:o,y:r}),l}function cp(n,e){switch(e){case"top":return{x:0,y:-n};case"bottom":return{x:0,y:n};case"left":return{x:-n,y:0};case"right":return{x:n,y:0};default:return{x:0,y:0}}}function pp({sourceX:n,sourceY:e,sourcePosition:t="bottom",targetX:o,targetY:r,targetPosition:i="top",curvature:a=.25,points:l}){const s=up(l);if(s){const t=[{x:n,y:e},...s,{x:o,y:r}];let i=`M ${t[0].x},${t[0].y}`;for(let n=0;n<t.length-1;n++){const e=t[n-1]||t[n],o=t[n],r=t[n+1],a=t[n+2]||r;i+=` C ${o.x+(r.x-e.x)/6},${o.y+(r.y-e.y)/6} ${r.x-(a.x-o.x)/6},${r.y-(a.y-o.y)/6} ${r.x},${r.y}`}const a=vp(t);return{path:i,labelX:a.x,labelY:a.y}}const u=Math.sqrt(Math.pow(o-n,2)+Math.pow(r-e,2)),d=Math.max(u*a,25),c=cp(d,t),p=cp(d,i),f=n+c.x,h=e+c.y,g=o+p.x,v=r+p.y;return{path:`M ${n},${e} C ${f},${h} ${g},${v} ${o},${r}`,labelX:(n+f+g+o)/4,labelY:(e+h+v+r)/4}}function fp({sourceX:n,sourceY:e,targetX:t,targetY:o,points:r}){const i=up(r);if(i){const r=[{x:n,y:e},...i,{x:t,y:o}],a=r.map((n,e)=>`${0===e?"M":"L"} ${n.x},${n.y}`).join(" "),l=vp(r);return{path:a,labelX:l.x,labelY:l.y}}return{path:`M ${n},${e} L ${t},${o}`,labelX:(n+t)/2,labelY:(e+o)/2}}function hp({sourceX:n,sourceY:e,sourcePosition:t="bottom",targetX:o,targetY:r,targetPosition:i="top",offset:a=20,allNodes:l,nodeInternals:s,connFromId:u,connToId:d,points:c}){const p=up(c),f=p?dp(n,e,t,o,r,i,p):qc(n,e,t,o,r,i,a,l,s),h=f.map((n,e)=>`${0===e?"M":"L"} ${n.x},${n.y}`).join(" "),g=vp(f);return{path:h,labelX:g.x,labelY:g.y}}function gp({sourceX:n,sourceY:e,sourcePosition:t="bottom",targetX:o,targetY:r,targetPosition:i="top",borderRadius:a=5,offset:l=20,allNodes:s,nodeInternals:u,connFromId:d,connToId:c,points:p}){const f=up(p);return function(n,e){if(n.length<=2)return{path:`M ${n[0].x},${n[0].y} L ${n[1].x},${n[1].y}`,labelX:(n[0].x+n[1].x)/2,labelY:(n[0].y+n[1].y)/2};let t=`M ${n[0].x},${n[0].y}`;for(let o=1;o<n.length-1;o++){const r=n[o-1],i=n[o],a=n[o+1],l=i.x-r.x,s=i.y-r.y,u=a.x-i.x,d=a.y-i.y,c=Math.sqrt(l*l+s*s),p=Math.sqrt(u*u+d*d);if(0===c||0===p){t+=` L ${i.x},${i.y}`;continue}const f=Math.min(e,c/2,p/2),h=i.x-l/c*f,g=i.y-s/c*f,v=i.x+u/p*f,m=i.y+d/p*f;t+=` L ${h},${g} Q ${i.x},${i.y} ${v},${m}`}t+=` L ${n[n.length-1].x},${n[n.length-1].y}`;const o=vp(n);return{path:t,labelX:o.x,labelY:o.y}}(f?dp(n,e,t,o,r,i,f):qc(n,e,t,o,r,i,l,s,u),a)}function vp(n){if(n.length<2)return{x:n[0].x,y:n[0].y};let e=0;for(let t=0;t<n.length-1;t++)e+=Math.abs(n[t+1].x-n[t].x)+Math.abs(n[t+1].y-n[t].y);let t=e/2,o=0;for(let e=0;e<n.length-1;e++){let r=Math.abs(n[e+1].x-n[e].x)+Math.abs(n[e+1].y-n[e].y);if(o+r>=t){let i=r>0?(t-o)/r:0;return{x:n[e].x+(n[e+1].x-n[e].x)*i,y:n[e].y+(n[e+1].y-n[e].y)*i}}o+=r}return{x:n[n.length-1].x,y:n[n.length-1].y}}function mp(n,e,t,o){const r=t||{},i=r.width||n.width||150,a=r.height||n.height||40,l=n.position.x,s=n.position.y,u="diamond"===n.shape,d="ellipse"===n.shape,c=n.shape,p="triangle"===c||"triangle-right"===c||"triangle-down"===c||"triangle-left"===c,f="basic"===n.type&&(n.toPosition||"bottom")===(n.fromPosition||"top");let h=.5;if(f&&"target"===o&&(h=.33),f&&"source"===o&&(h=.67),u&&f)return function(n,e,t,o,r,i){let a=t/2,l=o/2;switch(r){case"top":if(i<=.5){let t=2*i;return{x:n+t*a,y:e+l-t*l}}{let t=2*(i-.5);return{x:n+a+t*a,y:e+t*l}}case"bottom":if(i<=.5){let t=2*i;return{x:n+t*a,y:e+l+t*l}}{let t=2*(i-.5);return{x:n+a+t*a,y:e+o-t*l}}case"left":if(i<=.5){let t=2*i;return{x:n+a-t*a,y:e+t*l}}{let t=2*(i-.5);return{x:n+t*a,y:e+l+t*l}}case"right":if(i<=.5){let t=2*i;return{x:n+a+t*a,y:e+t*l}}{let o=2*(i-.5);return{x:n+t-o*a,y:e+l+o*l}}default:return{x:n+a,y:e+o}}}(l,s,i,a,e,h);if(d)return function(n,e,t,o,r,i){let a,l=n+t/2,s=e+o/2,u=t/2,d=o/2;switch(r){case"top":a=Math.PI*(1-i);break;case"bottom":a=Math.PI*(i-1);break;case"left":a=Math.PI*(.5+i);break;case"right":a=Math.PI*(.5-i);break;default:a=0}return{x:l+u*Math.cos(a),y:s-d*Math.sin(a)}}(l,s,i,a,e,h);if(p)return function(n,e,t,o,r,i,a){let l,s,u,d,c,p,f;"triangle-right"===a?(l={x:n+t,y:e+o/2},s={x:n,y:e},u={x:n,y:e+o},d="right",c="left",p="top",f="bottom"):"triangle-down"===a?(l={x:n+t/2,y:e+o},s={x:n,y:e},u={x:n+t,y:e},d="bottom",c="top",p="left",f="right"):"triangle-left"===a?(l={x:n,y:e+o/2},s={x:n+t,y:e},u={x:n+t,y:e+o},d="left",c="right",p="top",f="bottom"):(l={x:n+t/2,y:e},s={x:n,y:e+o},u={x:n+t,y:e+o},d="top",c="bottom",p="left",f="right");if(r===d){if(i<=.5){let n=2*i;return{x:s.x+(l.x-s.x)*n,y:s.y+(l.y-s.y)*n}}{let n=2*(i-.5);return{x:l.x+(u.x-l.x)*n,y:l.y+(u.y-l.y)*n}}}if(r===c)return{x:s.x+(u.x-s.x)*i,y:s.y+(u.y-s.y)*i};if(r===p)return{x:l.x+(s.x-l.x)*i,y:l.y+(s.y-l.y)*i};if(r===f)return{x:l.x+(u.x-l.x)*i,y:l.y+(u.y-l.y)*i};return{x:n+t/2,y:e+o/2}}(l,s,i,a,e,h,c);switch(e){case"top":return{x:l+i*h,y:s};case"bottom":return{x:l+i*h,y:s+a};case"left":return{x:l,y:s+a*h};case"right":return{x:l+i,y:s+a*h};default:return{x:l+i/2,y:s+a}}}function Ap(n,e){return e?{x:Math.round(n.x/e)*e,y:Math.round(n.y/e)*e}:n}var bp={components:{WColorSelect:Mc},props:{conn:{type:Object,required:!0},defConn:{type:Object,required:!0},textFontSize:{type:String,default:""},excludes:{type:Array,default:()=>[]},defaultPoint:{type:Object,default:null},targetPoint:{type:Object,default:null}},data(){return{confirmDelete:!1,ptsLocal:this.normalizePoints(this.conn.points)}},computed:{formStyle(){let n={};return this.textFontSize&&(n.fontSize=this.textFontSize),n}},watch:{"conn.points":function(n){JSON.stringify(this.normalizePoints(n))!==JSON.stringify(this.ptsLocal)&&(this.ptsLocal=this.normalizePoints(n))}},methods:{isEx(n){return this.excludes.indexOf(n)>=0},normalizePoints(n){if(!Array.isArray(n))return[];const e=[];for(const t of n)Array.isArray(t)&&t.length>=2?e.push([Number(t[0])||0,Number(t[1])||0]):t&&"object"==typeof t&&e.push([Number(t.x)||0,Number(t.y)||0]);return e},emitWaypoints(){this.$emit("update","points",this.ptsLocal.length?this.ptsLocal.map(n=>[n[0],n[1]]):null)},addWaypoint(){const n=this.ptsLocal[this.ptsLocal.length-1];let e;e=n?this.targetPoint?[Math.round((n[0]+this.targetPoint.x)/2),Math.round((n[1]+this.targetPoint.y)/2)]:[n[0]+40,n[1]+40]:this.defaultPoint?[Math.round(this.defaultPoint.x),Math.round(this.defaultPoint.y)]:this.targetPoint?[Math.round(this.targetPoint.x)-40,Math.round(this.targetPoint.y)-40]:[0,0],this.ptsLocal.push(e),this.emitWaypoints()},removeWaypoint(n){this.ptsLocal.splice(n,1),this.emitWaypoints()},onWaypointInput(n,e,t){const o=Number(t);""===t||isNaN(o)||(this.$set(this.ptsLocal[n],e,o),this.emitWaypoints())},onFontSizeInput(n){let e=Number(n),t=this.defConn;!n||isNaN(e)||e<t.fontSizeMin||(e>t.fontSizeMax&&(e=t.fontSizeMax),this.$emit("update","fontSize",e))},onEdgeWidthInput(n){let e=Number(n);!n||isNaN(e)||e<1||(e>24&&(e=24),this.$emit("update","edgeWidth",e))}}};const yp=bp;var Cp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-flow__settings-form",style:n.formStyle},[n.isEx("name")?n._e():t("label",[n._v("Name\n "),t("input",{attrs:{type:"text"},domProps:{value:n.conn.name||""},on:{input:function(e){return n.$emit("update","name",e.target.value)}}})]),n._v(" "),n.isEx("description")?n._e():t("label",[n._v("Description\n "),t("input",{attrs:{type:"text"},domProps:{value:n.conn.description||""},on:{input:function(e){return n.$emit("update","description",e.target.value)}}})]),n._v(" "),n.isEx("type")?n._e():t("label",[n._v("Type\n "),t("select",{domProps:{value:n.conn.type||n.defConn.type},on:{input:function(e){return n.$emit("update","type",e.target.value)}}},[t("option",{attrs:{value:"bezier"}},[n._v("Bezier")]),n._v(" "),t("option",{attrs:{value:"straight"}},[n._v("Straight")]),n._v(" "),t("option",{attrs:{value:"step"}},[n._v("Step")]),n._v(" "),t("option",{attrs:{value:"smoothstep"}},[n._v("Smooth Step")])])]),n._v(" "),n.isEx("fontSize")?n._e():t("label",[n._v("Font Size\n "),t("input",{attrs:{type:"number",min:n.defConn.fontSizeMin,max:n.defConn.fontSizeMax},domProps:{value:n.conn.fontSize||n.defConn.fontSize},on:{input:function(e){return n.onFontSizeInput(e.target.value)}}})]),n._v(" "),n.isEx("fontColor")?n._e():t("label",[n._v("Font Color\n "),t("WColorSelect",{attrs:{value:n.conn.fontColor||n.defConn.fontColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","fontColor",e)}}})],1),n._v(" "),n.isEx("animated")?n._e():t("label",[n._v("Animated\n "),t("input",{attrs:{type:"checkbox"},domProps:{checked:!!n.conn.animated},on:{change:function(e){return n.$emit("update","animated",e.target.checked)}}})]),n._v(" "),n.isEx("edgeColor")?n._e():t("label",[n._v("Edge Color\n "),t("WColorSelect",{attrs:{value:n.conn.edgeColor||n.defConn.edgeColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","edgeColor",e)}}})],1),n._v(" "),n.isEx("edgeWidth")?n._e():t("label",[n._v("Edge Width\n "),t("input",{attrs:{type:"number",min:"1",max:"24"},domProps:{value:void 0!==n.conn.edgeWidth?n.conn.edgeWidth:n.defConn.edgeWidth},on:{input:function(e){return n.onEdgeWidthInput(e.target.value)}}})]),n._v(" "),n.isEx("markerEnd")?n._e():t("label",[n._v("Marker End\n "),t("select",{domProps:{value:n.conn.markerEnd||n.defConn.markerEnd},on:{input:function(e){return n.$emit("update","markerEnd",e.target.value||void 0)}}},[t("option",{attrs:{value:""}},[n._v("None")]),n._v(" "),t("option",{attrs:{value:"arrow"}},[n._v("Arrow")]),n._v(" "),t("option",{attrs:{value:"arrowclosed"}},[n._v("Arrow Closed")])])]),n._v(" "),n.isEx("fromPosition")?n._e():t("label",[n._v("From Anchor\n "),t("select",{domProps:{value:n.conn.fromPosition||""},on:{input:function(e){return n.$emit("update","fromPosition",e.target.value||void 0)}}},[t("option",{attrs:{value:""}},[n._v("Auto")]),n._v(" "),t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("toPosition")?n._e():t("label",[n._v("To Anchor\n "),t("select",{domProps:{value:n.conn.toPosition||""},on:{input:function(e){return n.$emit("update","toPosition",e.target.value||void 0)}}},[t("option",{attrs:{value:""}},[n._v("Auto")]),n._v(" "),t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("points")?n._e():t("div",{staticClass:"vue-flow__waypoints"},[t("div",{staticClass:"vue-flow__waypoints-head"},[t("span",[n._v("Waypoints")]),n._v(" "),t("button",{staticClass:"vue-flow__waypoints-add",attrs:{title:"新增轉折點"},on:{click:n.addWaypoint}},[n._v("＋")])]),n._v(" "),n._l(n.ptsLocal,function(e,o){return t("div",{key:"wp"+o,staticClass:"vue-flow__waypoints-row"},[t("span",{staticClass:"vue-flow__waypoints-idx"},[n._v(n._s(o+1))]),n._v(" "),t("input",{attrs:{type:"number",title:"X"},domProps:{value:e[0]},on:{input:function(e){return n.onWaypointInput(o,0,e.target.value)}}}),n._v(" "),t("input",{attrs:{type:"number",title:"Y"},domProps:{value:e[1]},on:{input:function(e){return n.onWaypointInput(o,1,e.target.value)}}}),n._v(" "),t("button",{staticClass:"vue-flow__waypoints-del",attrs:{title:"移除此轉折點"},on:{click:function(e){return n.removeWaypoint(o)}}},[n._v("×")])])}),n._v(" "),n.ptsLocal.length?n._e():t("div",{staticClass:"vue-flow__waypoints-empty"},[n._v("無(自動路由)")])],2),n._v(" "),t("div",{staticClass:"vue-flow__delete-area"},[n.confirmDelete?[t("span",{staticClass:"vue-flow__delete-warn"},[n._v("確定要刪除此連接線？")]),n._v(" "),t("div",{staticClass:"vue-flow__delete-confirm-row"},[t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){return n.$emit("delete")}}},[n._v("確認刪除")]),n._v(" "),t("button",{staticClass:"vue-flow__delete-btn vue-flow__delete-btn--cancel",on:{click:function(e){n.confirmDelete=!1}}},[n._v("取消")])])]:t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){n.confirmDelete=!0}}},[n._v("刪除連接線")])],2)])};Cp._withStripped=!0;const xp=e({render:Cp,staticRenderFns:[]},function(n){n&&n("data-v-c733b55c_0",{source:'\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\n}\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\n}\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\n}\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\n}\n.vue-flow__waypoints {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n padding-top: 6px;\r\n border-top: 1px solid #eee;\r\n font-size: 12px;\n}\n.vue-flow__waypoints-head {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.vue-flow__waypoints-add {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #666;\r\n cursor: pointer;\r\n font-size: 12px;\r\n line-height: 1;\n}\n.vue-flow__waypoints-add:hover {\r\n border-color: #666;\r\n color: #333;\n}\n.vue-flow__waypoints-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\n}\n.vue-flow__waypoints-idx {\r\n width: 14px;\r\n color: #999;\r\n font-size: 11px;\r\n text-align: right;\n}\n.vue-flow__waypoints-row input[type="number"] {\r\n width: 62px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\n}\n.vue-flow__waypoints-del {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #999;\r\n cursor: pointer;\r\n font-size: 13px;\r\n line-height: 1;\r\n flex-shrink: 0;\n}\n.vue-flow__waypoints-del:hover {\r\n border-color: #dc2626;\r\n color: #dc2626;\n}\n.vue-flow__waypoints-empty {\r\n color: #aaa;\r\n font-size: 11px;\n}\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\n}\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\n}\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\n}\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\n}\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\n}\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\n}\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\n}\r\n',map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\ui\\ConnSettingsForm.vue"],names:[],mappings:";AAsLA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,QAAA;EACA,eAAA;AACA;AACA;;;EAGA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,gBAAA;EACA,0BAAA;EACA,eAAA;AACA;AACA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;AACA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,WAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AACA;AACA;EACA,WAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;AACA;AACA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;AACA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,cAAA;EACA,cAAA;AACA;AACA;EACA,qBAAA;EACA,cAAA;AACA;AACA;EACA,WAAA;EACA,eAAA;AACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;AACA;AACA;EACA,cAAA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AACA;AACA;EACA,aAAA;EACA,QAAA;AACA;AACA;EACA,iBAAA;EACA,eAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,mBAAA;EACA,qBAAA;AACA;AACA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;AACA;AACA;EACA,mBAAA;EACA,kBAAA;AACA",file:"ConnSettingsForm.vue",sourcesContent:['<template>\r\n <div class="vue-flow__settings-form" :style="formStyle">\r\n <label v-if="!isEx(\'name\')">Name\r\n <input type="text" :value="conn.name || \'\'" @input="$emit(\'update\', \'name\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'description\')">Description\r\n <input type="text" :value="conn.description || \'\'" @input="$emit(\'update\', \'description\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'type\')">Type\r\n <select :value="conn.type || defConn.type" @input="$emit(\'update\', \'type\', $event.target.value)">\r\n <option value="bezier">Bezier</option>\r\n <option value="straight">Straight</option>\r\n <option value="step">Step</option>\r\n <option value="smoothstep">Smooth Step</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'fontSize\')">Font Size\r\n <input type="number" :value="conn.fontSize || defConn.fontSize" :min="defConn.fontSizeMin" :max="defConn.fontSizeMax" @input="onFontSizeInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'fontColor\')">Font Color\r\n <WColorSelect :value="conn.fontColor || defConn.fontColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'fontColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'animated\')">Animated\r\n <input type="checkbox" :checked="!!conn.animated" @change="$emit(\'update\', \'animated\', $event.target.checked)">\r\n </label>\r\n <label v-if="!isEx(\'edgeColor\')">Edge Color\r\n <WColorSelect :value="conn.edgeColor || defConn.edgeColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'edgeColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'edgeWidth\')">Edge Width\r\n <input type="number" :value="conn.edgeWidth !== undefined ? conn.edgeWidth : defConn.edgeWidth" min="1" max="24" @input="onEdgeWidthInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'markerEnd\')">Marker End\r\n <select :value="conn.markerEnd || defConn.markerEnd" @input="$emit(\'update\', \'markerEnd\', $event.target.value || undefined)">\r\n <option value="">None</option>\r\n <option value="arrow">Arrow</option>\r\n <option value="arrowclosed">Arrow Closed</option>\r\n </select>\r\n </label>\r\n \x3c!-- 逐邊錨點方位: 此連線於起點節點之連出方位/迄點節點之連入方位; Auto=回退節點層級/預設 --\x3e\r\n <label v-if="!isEx(\'fromPosition\')">From Anchor\r\n <select :value="conn.fromPosition || \'\'" @input="$emit(\'update\', \'fromPosition\', $event.target.value || undefined)">\r\n <option value="">Auto</option>\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'toPosition\')">To Anchor\r\n <select :value="conn.toPosition || \'\'" @input="$emit(\'update\', \'toPosition\', $event.target.value || undefined)">\r\n <option value="">Auto</option>\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <div v-if="!isEx(\'points\')" class="vue-flow__waypoints">\r\n <div class="vue-flow__waypoints-head">\r\n <span>Waypoints</span>\r\n <button class="vue-flow__waypoints-add" title="新增轉折點" @click="addWaypoint">＋</button>\r\n </div>\r\n <div v-for="(p, i) in ptsLocal" :key="\'wp\' + i" class="vue-flow__waypoints-row">\r\n <span class="vue-flow__waypoints-idx">{{ i + 1 }}</span>\r\n <input type="number" :value="p[0]" title="X" @input="onWaypointInput(i, 0, $event.target.value)">\r\n <input type="number" :value="p[1]" title="Y" @input="onWaypointInput(i, 1, $event.target.value)">\r\n <button class="vue-flow__waypoints-del" title="移除此轉折點" @click="removeWaypoint(i)">×</button>\r\n </div>\r\n <div v-if="!ptsLocal.length" class="vue-flow__waypoints-empty">無(自動路由)</div>\r\n </div>\r\n <div class="vue-flow__delete-area">\r\n <button v-if="!confirmDelete" class="vue-flow__delete-btn" @click="confirmDelete = true">刪除連接線</button>\r\n <template v-else>\r\n <span class="vue-flow__delete-warn">確定要刪除此連接線？</span>\r\n <div class="vue-flow__delete-confirm-row">\r\n <button class="vue-flow__delete-btn" @click="$emit(\'delete\')">確認刪除</button>\r\n <button class="vue-flow__delete-btn vue-flow__delete-btn--cancel" @click="confirmDelete = false">取消</button>\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport WColorSelect from \'w-component-vue/src/components/WColorSelect.vue\'\r\n\r\nexport default {\r\n components: { WColorSelect },\r\n props: {\r\n conn: { type: Object, required: true },\r\n defConn: { type: Object, required: true },\r\n textFontSize: { type: String, default: \'\' },\r\n excludes: { type: Array, default: () => [] },\r\n defaultPoint: { type: Object, default: null }, //首個轉折點預設位置(建議傳路徑中點, 新點落於既有線上不跳動)\r\n targetPoint: { type: Object, default: null }, //迄點錨位置(後續新增以「末點與迄點中點」細分)\r\n },\r\n data() {\r\n return {\r\n confirmDelete: false,\r\n ptsLocal: this.normalizePoints(this.conn.points), //轉折點本地編輯態(打字中不被外部回寫干擾)\r\n }\r\n },\r\n computed: {\r\n formStyle() {\r\n let s = {}\r\n if (this.textFontSize) s.fontSize = this.textFontSize\r\n return s\r\n },\r\n },\r\n watch: {\r\n //外部(如存檔回寫)變更時重同步本地態; 與本地序列化相同則不動(避免打字被清)\r\n \'conn.points\': function(val) {\r\n const ext = JSON.stringify(this.normalizePoints(val))\r\n if (ext !== JSON.stringify(this.ptsLocal)) {\r\n this.ptsLocal = this.normalizePoints(val)\r\n }\r\n },\r\n },\r\n methods: {\r\n isEx(key) {\r\n return this.excludes.indexOf(key) >= 0\r\n },\r\n normalizePoints(pts) {\r\n if (!Array.isArray(pts)) return []\r\n const r = []\r\n for (const p of pts) {\r\n if (Array.isArray(p) && p.length >= 2) r.push([Number(p[0]) || 0, Number(p[1]) || 0])\r\n else if (p && typeof p === \'object\') r.push([Number(p.x) || 0, Number(p.y) || 0])\r\n }\r\n return r\r\n },\r\n emitWaypoints() {\r\n //空陣列送null表示移除轉折點(回歸自動路由)\r\n this.$emit(\'update\', \'points\', this.ptsLocal.length ? this.ptsLocal.map(p => [p[0], p[1]]) : null)\r\n },\r\n addWaypoint() {\r\n const last = this.ptsLocal[this.ptsLocal.length - 1]\r\n let p\r\n if (!last) {\r\n //首點=路徑中點(落於既有線上, 路徑不跳動); 無提示時退而取迄點附近, 再無則(0,0)\r\n if (this.defaultPoint) p = [Math.round(this.defaultPoint.x), Math.round(this.defaultPoint.y)]\r\n else if (this.targetPoint) p = [Math.round(this.targetPoint.x) - 40, Math.round(this.targetPoint.y) - 40]\r\n else p = [0, 0]\r\n }\r\n else if (this.targetPoint) {\r\n //後續新增=末點與迄點錨之中點(向迄點細分)\r\n p = [Math.round((last[0] + this.targetPoint.x) / 2), Math.round((last[1] + this.targetPoint.y) / 2)]\r\n }\r\n else {\r\n p = [last[0] + 40, last[1] + 40]\r\n }\r\n this.ptsLocal.push(p)\r\n this.emitWaypoints()\r\n },\r\n removeWaypoint(i) {\r\n this.ptsLocal.splice(i, 1)\r\n this.emitWaypoints()\r\n },\r\n onWaypointInput(i, axis, val) {\r\n const n = Number(val)\r\n if (val === \'\' || isNaN(n)) return\r\n this.$set(this.ptsLocal[i], axis, n)\r\n this.emitWaypoints()\r\n },\r\n onFontSizeInput(val) {\r\n let n = Number(val)\r\n let d = this.defConn\r\n if (!val || isNaN(n) || n < d.fontSizeMin) return\r\n if (n > d.fontSizeMax) n = d.fontSizeMax\r\n this.$emit(\'update\', \'fontSize\', n)\r\n },\r\n onEdgeWidthInput(val) {\r\n let n = Number(val)\r\n if (!val || isNaN(n) || n < 1) return\r\n if (n > 24) n = 24\r\n this.$emit(\'update\', \'edgeWidth\', n)\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\r\n}\r\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n}\r\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n}\r\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n}\r\n.vue-flow__waypoints {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n padding-top: 6px;\r\n border-top: 1px solid #eee;\r\n font-size: 12px;\r\n}\r\n.vue-flow__waypoints-head {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.vue-flow__waypoints-add {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #666;\r\n cursor: pointer;\r\n font-size: 12px;\r\n line-height: 1;\r\n}\r\n.vue-flow__waypoints-add:hover {\r\n border-color: #666;\r\n color: #333;\r\n}\r\n.vue-flow__waypoints-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n.vue-flow__waypoints-idx {\r\n width: 14px;\r\n color: #999;\r\n font-size: 11px;\r\n text-align: right;\r\n}\r\n.vue-flow__waypoints-row input[type="number"] {\r\n width: 62px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n}\r\n.vue-flow__waypoints-del {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #999;\r\n cursor: pointer;\r\n font-size: 13px;\r\n line-height: 1;\r\n flex-shrink: 0;\r\n}\r\n.vue-flow__waypoints-del:hover {\r\n border-color: #dc2626;\r\n color: #dc2626;\r\n}\r\n.vue-flow__waypoints-empty {\r\n color: #aaa;\r\n font-size: 11px;\r\n}\r\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n}\r\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\r\n}\r\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\r\n}\r\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\r\n}\r\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\r\n}\r\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\r\n}\r\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\r\n}\r\n</style>\r\n']},media:void 0})},yp,void 0,false,void 0,!1,o,void 0,void 0),wp={bezier:pp,straight:fp,step:hp,smoothstep:gp};var Sp={name:"EdgeWrapper",mixins:[{beforeCreate(){this.$vnode&&"svg"===this.$vnode.ns&&(this.$vnode.ns=void 0)},beforeMount(){this.$vnode&&"svg"===this.$vnode.ns&&(this.$vnode.ns=void 0)},beforeUpdate(){this.$vnode&&"svg"===this.$vnode.ns&&(this.$vnode.ns=void 0)}}],components:{ConnSettingsForm:xp,WPopup:La},inject:{getDefConn:{default:()=>()=>({})},getDragGhost:{default:()=>()=>null}},props:{conn:{type:Object,required:!0},sourceNode:{type:Object,default:null},targetNode:{type:Object,default:null},selected:{type:Boolean,default:!1},interactive:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},allNodes:{type:Array,default:()=>[]},nodeInternals:{type:Object,default:()=>({})},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},data:()=>({hovered:!1,infoPopupShow:!1,infoPopupEditable:!0,settingsPopupShow:!1,dragPts:null}),watch:{settingsPopupShow(n){n&&(this.infoPopupShow=!1)},infoPopupShow(n){n&&(this.settingsPopupShow=!1)}},computed:{dc(){return this.getDefConn()},hasInfoPopup(){return!!(this.conn.name||this.conn.description||this.$scopedSlots["conn-popup"])},sourcePosition(){return this.conn.fromPosition||this.sourceNode&&this.sourceNode.toPosition||"bottom"},targetPosition(){return this.conn.toPosition||this.targetNode&&this.targetNode.fromPosition||"top"},effSourceNode(){return this.effNode(this.sourceNode)},effTargetNode(){return this.effNode(this.targetNode)},sourcePoint(){const n=this.effSourceNode;return n?mp(n,this.sourcePosition,this.nodeInternals[n.id]||{},"source"):{x:0,y:0}},targetPoint(){const n=this.effTargetNode;return n?mp(n,this.targetPosition,this.nodeInternals[n.id]||{},"target"):{x:0,y:0}},sourceX(){return this.sourcePoint.x},sourceY(){return this.sourcePoint.y},targetX(){return this.targetPoint.x},targetY(){return this.targetPoint.y},routingNodes(){const n=[];return this.effSourceNode&&n.push(this.effSourceNode),this.effTargetNode&&n.push(this.effTargetNode),n},effPoints(){return this.dragPts||this.conn.points},waypointPts(){const n=this.effPoints;if(!Array.isArray(n)||0===n.length)return[];const e=[];for(const t of n){let n=null,o=null;if(Array.isArray(t)&&t.length>=2?(n=Number(t[0]),o=Number(t[1])):t&&"object"==typeof t&&(n=Number(t.x),o=Number(t.y)),!Number.isFinite(n)||!Number.isFinite(o))return[];e.push({x:n,y:o})}return e},showWaypoints(){return this.settingsEnabled&&this.interactive&&!this.locked&&this.waypointPts.length>0},waypointDefaultPoint(){return{x:Math.round(this.pathData.labelX),y:Math.round(this.pathData.labelY)}},waypointTargetPoint(){return{x:Math.round(this.targetX),y:Math.round(this.targetY)}},classes(){const n=this.conn.class?Array.isArray(this.conn.class)?this.conn.class:[this.conn.class]:[];return["vue-flow__edge",`vue-flow__edge-${this.conn.type||this.dc.type||"bezier"}`,...n,{"vue-flow__edge--selected":this.selected,"vue-flow__edge--animated":this.conn.animated}]},pathData(){const n=this.conn.type||this.dc.type||"bezier";return(wp[n]||wp.bezier)({sourceX:this.sourceX,sourceY:this.sourceY,sourcePosition:this.sourcePosition,targetX:this.targetX,targetY:this.targetY,targetPosition:this.targetPosition,curvature:this.conn.curvature,points:this.effPoints,allNodes:this.routingNodes,nodeInternals:this.nodeInternals,connFromId:this.conn.from,connToId:this.conn.to,offset:this.dc.defOffset})},connStyle(){const n=this.dc,e=this.conn.style?{...this.conn.style}:{};e.stroke=this.conn.edgeColor||n.edgeColor||"#b1b1b7",void 0!==this.conn.edgeWidth?e.strokeWidth=this.conn.edgeWidth:void 0!==n.edgeWidth&&(e.strokeWidth=n.edgeWidth);let t=void 0!==this.conn.edgeDasharray?this.conn.edgeDasharray:n.edgeDasharray;return t&&(e.strokeDasharray=t),e},markerStartUrl(){return this.getMarkerUrl(this.conn.markerStart)},markerEndUrl(){return this.getMarkerUrl(this.conn.markerEnd||this.dc.markerEnd)},labelStyle(){const n=this.dc,e={},t=this.conn.fontSize||n.fontSize,o=this.conn.fontColor||n.fontColor;return t&&(e.fontSize=t+"px"),o&&(e.color=o),e}},methods:{effNode(n){if(!n)return null;const e=this.getDragGhost(n.id);return e?{...n,position:{x:e.x,y:e.y},width:void 0!==e.width?e.width:n.width,height:void 0!==e.height?e.height:n.height}:n},getMarkerUrl(n){if(!n)return null;const e="string"==typeof n?{type:n}:n,t=e.color||this.conn.edgeColor||this.dc.edgeColor||"#b1b1b7";return`url(#vue-flow__${e.type}_${t.replace("#","")})`},onGroupMouseEnter(n){this.hovered=!0,this.$emit("conn-mouseenter",{conn:this.conn,event:n})},onGroupMouseLeave(n){this.hovered=!1,this.$emit("conn-mouseleave",{conn:this.conn,event:n})},onClick(n){this.hasInfoPopup&&(this.infoPopupShow=!0),this.$emit("conn-click",{conn:this.conn,event:n})},openInfoPopup(){this.infoPopupShow=!0},onDoubleClick(n){this.$emit("conn-double-click",{conn:this.conn,event:n})},onContextMenu(n){this.$emit("conn-context-menu",{conn:this.conn,event:n})},onLabelMouseDown(n){this.infoPopupShow=!1;const e=n.clientX,t=n.clientY,o=n=>{(Math.abs(n.clientX-e)>2||Math.abs(n.clientY-t)>2)&&(this.infoPopupEditable=!1,document.removeEventListener("mousemove",o))},r=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",r),this.infoPopupEditable||setTimeout(()=>{this.infoPopupEditable=!0},0)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",r)},onSettingsUpdate(n,e){this.$emit("conn-settings-update",{conn:this.conn,key:n,value:e})},onWaypointMouseDown(n,e){if(!this.interactive||this.locked||!this.settingsEnabled)return;e.preventDefault();const t=document.createElement("style");t.textContent="* { cursor: move !important; }",document.head.appendChild(t);const o=e.clientX,r=e.clientY,i=this.waypointPts.map(n=>[n.x,n.y]),a=this.$el.closest(".vue-flow__viewport"),l=a?parseFloat(a.style.transform.match(/scale\(([^)]+)\)/)?.[1]||1):1,s=e=>{const t=(e.clientX-o)/l,a=(e.clientY-r)/l,s=i.map(n=>[n[0],n[1]]);s[n]=[Math.round(i[n][0]+t),Math.round(i[n][1]+a)],this.dragPts=s},u=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",u),document.head.removeChild(t);const n=this.waypointPts.map(n=>[n.x,n.y]);this.$emit("conn-settings-update",{conn:this.conn,key:"points",value:n}),this.dragPts=null};document.addEventListener("mousemove",s),document.addEventListener("mouseup",u)},onSettingsDelete(){this.$emit("conn-settings-delete",{conn:this.conn})}}};const kp=Sp;var _p=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("g",{class:n.classes,attrs:{"data-id":n.conn.id},on:{mouseenter:n.onGroupMouseEnter,mouseleave:n.onGroupMouseLeave}},[t("rect",{attrs:{x:n.pathData.labelX-60,y:n.pathData.labelY-18,width:"120",height:"36",fill:"transparent","pointer-events":"all"},on:{click:function(e){return e.stopPropagation(),n.onClick.apply(null,arguments)}}}),n._v(" "),t("path",{staticClass:"vue-flow__edge-interaction",attrs:{d:n.pathData.path},on:{click:function(e){return e.stopPropagation(),n.onClick.apply(null,arguments)},dblclick:function(e){return e.stopPropagation(),n.onDoubleClick.apply(null,arguments)},contextmenu:function(e){return e.stopPropagation(),n.onContextMenu.apply(null,arguments)}}}),n._v(" "),t("path",{style:n.connStyle,attrs:{d:n.pathData.path,"marker-start":n.markerStartUrl,"marker-end":n.markerEndUrl}}),n._v(" "),n.showWaypoints?n._l(n.waypointPts,function(e,o){return t("circle",{key:"wp"+o,staticClass:"vue-flow__edge-waypoint",attrs:{cx:e.x,cy:e.y,r:"4"},on:{mousedown:function(e){return n.onWaypointMouseDown(o,e)}}})}):n._e(),n._v(" "),t("foreignObject",{staticStyle:{overflow:"visible","pointer-events":"none"},attrs:{x:n.pathData.labelX-100,y:n.pathData.labelY-18,width:"200",height:"36"}},[t("div",{staticClass:"vue-flow__edge-label-area",attrs:{xmlns:"http://www.w3.org/1999/xhtml"}},[t("span",{staticClass:"vue-flow__edge-label-group"},[n.hasInfoPopup?t("WPopup",{attrs:{placement:"bottom",modeHide:"mousedown",editable:n.infoPopupEditable,minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.inforPopupBackgroundColor,textFontSize:n.inforPopupTitleTextFontSize,paddingStyle:{v:8,h:12}},scopedSlots:n._u([{key:"trigger",fn:function(){return[n.conn.name?t("span",{staticClass:"vue-flow__edge-label",style:n.labelStyle,on:{mousedown:n.onLabelMouseDown}},[n._v(n._s(n.conn.name))]):t("span",{staticClass:"vue-flow__edge-popup-anchor"})]},proxy:!0},{key:"content",fn:function(){return[n._t("conn-popup",function(){return[n.conn.name||n.conn.description?t("div",{staticStyle:{"min-width":"120px"}},[n.conn.name?t("div",{style:{fontSize:n.inforPopupTitleTextFontSize,color:n.inforPopupTitleTextColor,fontWeight:500}},[n._v(n._s(n.conn.name))]):n._e(),n._v(" "),n.conn.description?t("div",{style:{fontSize:n.inforPopupDescriptionTextFontSize,color:n.inforPopupDescriptionTextColor,marginTop:"4px"}},[n._v(n._s(n.conn.description))]):n._e()]):n._e()]},{conn:n.conn})]},proxy:!0}],null,!0),model:{value:n.infoPopupShow,callback:function(e){n.infoPopupShow=e},expression:"infoPopupShow"}}):n._e(),n._v(" "),t("transition",{attrs:{name:"vue-flow__fade"}},[(n.hovered||n.settingsPopupShow)&&n.interactive&&!n.locked&&n.settingsEnabled?t("span",{staticClass:"vue-flow__edge-settings-anchor"},[t("WPopup",{attrs:{placement:"right-start",modeHide:"mousedown",minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.settingsPopupBackgroundColor,textColor:n.settingsPopupTextColor,paddingStyle:{v:8,h:8}},on:{show:function(e){return n.$emit("conn-settings-click",{conn:n.conn})}},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("span",{staticClass:"vue-flow__edge-settings"},[t("svg",{attrs:{viewBox:"0 0 20 20",width:"14",height:"14",fill:"currentColor"}},[t("path",{attrs:{d:"M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z",transform:"translate(0 3)"}})])])]},proxy:!0},{key:"content",fn:function(){return[t("ConnSettingsForm",{attrs:{conn:n.conn,"def-conn":n.dc,"text-font-size":n.settingsPopupTextFontSize,excludes:n.settingsExcludes,"default-point":n.waypointDefaultPoint,"target-point":n.waypointTargetPoint},on:{update:n.onSettingsUpdate,delete:n.onSettingsDelete}})]},proxy:!0}],null,!1,1928985475),model:{value:n.settingsPopupShow,callback:function(e){n.settingsPopupShow=e},expression:"settingsPopupShow"}})],1):n._e()])],1)])])],2)};_p._withStripped=!0;const Bp=e({render:_p,staticRenderFns:[]},function(n){n&&n("data-v-265c95c3_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* Only target direct-child paths (edge paths), not SVG paths inside settings icon */\n.vue-flow__edge > path[data-v-265c95c3] {\r\n stroke: #b1b1b7;\r\n stroke-width: 1;\r\n fill: none;\r\n pointer-events: none;\r\n transition: stroke 0.3s ease, filter 0.18s ease;\n}\n.vue-flow__edge-interaction[data-v-265c95c3] {\r\n stroke: transparent !important;\r\n stroke-width: 20 !important;\r\n fill: none;\r\n pointer-events: stroke !important;\r\n cursor: pointer;\n}\n.vue-flow__edge-waypoint[data-v-265c95c3] {\r\n fill: #9e9e9e;\r\n stroke: #fff;\r\n stroke-width: 1.5;\r\n pointer-events: all;\r\n cursor: grab;\n}\n.vue-flow__edge-waypoint[data-v-265c95c3]:hover {\r\n fill: #616161;\r\n stroke-width: 2;\n}\n.vue-flow__edge-waypoint[data-v-265c95c3]:active {\r\n cursor: grabbing;\n}\n.vue-flow__edge:hover > path[data-v-265c95c3] {\r\n stroke: #555;\n}\n.vue-flow__edge--selected > path[data-v-265c95c3],\r\n.vue-flow__edge--selected:hover > path[data-v-265c95c3] {\r\n filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.8)) drop-shadow(0 0 4px rgba(220, 38, 38, 0.5)) drop-shadow(0 0 6px rgba(220, 38, 38, 0.25));\n}\n.vue-flow__edge--animated > path[data-v-265c95c3]:not(.vue-flow__edge-interaction) {\r\n stroke-dasharray: 5;\r\n animation: vue-flow-dash-data-v-265c95c3 0.5s linear infinite;\n}\n@keyframes vue-flow-dash-data-v-265c95c3 {\nto { stroke-dashoffset: -10;\n}\n}\n.vue-flow__edge-label-area[data-v-265c95c3] {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\n}\n.vue-flow__edge-label-group[data-v-265c95c3] {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n pointer-events: all;\n}\n.vue-flow__edge-label[data-v-265c95c3] {\r\n pointer-events: all;\r\n cursor: pointer;\r\n font-family: 'Microsoft JhengHei', '微軟正黑體', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n font-size: 10px;\r\n background: #fff;\r\n padding: 2px 4px;\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n user-select: none;\r\n text-align: center;\r\n display: inline-block;\n}\n.vue-flow__edge-popup-anchor[data-v-265c95c3] {\r\n display: inline-block;\r\n width: 0;\r\n height: 0;\n}\n.vue-flow__edge-settings-anchor[data-v-265c95c3] {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\n}\n.vue-flow__edge-settings[data-v-265c95c3] {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: #888;\r\n pointer-events: all;\r\n transition: border-color 0.15s ease, background 0.15s ease;\n}\n.vue-flow__edge-settings[data-v-265c95c3]:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\n}\r\n/* Fade transition for settings icon */\n.vue-flow__fade-enter-active[data-v-265c95c3],\r\n.vue-flow__fade-leave-active[data-v-265c95c3] {\r\n transition: opacity 0.15s ease;\n}\n.vue-flow__fade-enter[data-v-265c95c3],\r\n.vue-flow__fade-leave-to[data-v-265c95c3] {\r\n opacity: 0;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\edges\\EdgeWrapper.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2bA,oFAAA;AACA;EACA,eAAA;EACA,eAAA;EACA,UAAA;EACA,oBAAA;EACA,+CAAA;AACA;AACA;EACA,8BAAA;EACA,2BAAA;EACA,UAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA;EACA,aAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA;AACA;AACA;EACA,aAAA;EACA,eAAA;AACA;AACA;EACA,gBAAA;AACA;AACA;EACA,YAAA;AACA;AACA;;EAEA,4IAAA;AACA;AACA;EACA,mBAAA;EACA,6DAAA;AACA;AACA;AACA,KAAA,sBAAA;AAAA;AACA;AACA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;AACA;AACA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,mBAAA;AACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,6GAAA;EACA,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;AACA;AACA;EACA,qBAAA;EACA,QAAA;EACA,SAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,UAAA;EACA,mBAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;EACA,0DAAA;AACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;AACA;AACA,sCAAA;AACA;;EAEA,8BAAA;AACA;AACA;;EAEA,UAAA;AACA",file:"EdgeWrapper.vue",sourcesContent:['<template>\r\n <g\r\n :class="classes"\r\n :data-id="conn.id"\r\n @mouseenter="onGroupMouseEnter"\r\n @mouseleave="onGroupMouseLeave"\r\n >\r\n \x3c!-- Hover zone around label + settings icon area (below interaction path in z-order) --\x3e\r\n <rect\r\n :x="pathData.labelX - 60"\r\n :y="pathData.labelY - 18"\r\n width="120"\r\n height="36"\r\n fill="transparent"\r\n pointer-events="all"\r\n @click.stop="onClick"\r\n />\r\n \x3c!-- Interaction path (wider, invisible) --\x3e\r\n <path\r\n :d="pathData.path"\r\n class="vue-flow__edge-interaction"\r\n @click.stop="onClick"\r\n @dblclick.stop="onDoubleClick"\r\n @contextmenu.stop="onContextMenu"\r\n />\r\n \x3c!-- Visible path --\x3e\r\n <path\r\n :d="pathData.path"\r\n :style="connStyle"\r\n :marker-start="markerStartUrl"\r\n :marker-end="markerEndUrl"\r\n />\r\n \x3c!-- 強制轉折點標記(編輯模式顯示, 可直接拖曳移動座標; 亦可經齒輪設定表單編修) --\x3e\r\n <template v-if="showWaypoints">\r\n \x3c!-- 不用@mousedown.stop: stopPropagation會擋掉window層WPopup互斥協調(致已開之node/conn資訊popup不關); 防canvas startPan改由onCanvasMouseDown排除.vue-flow__edge-waypoint處理 --\x3e\r\n <circle\r\n v-for="(p, i) in waypointPts"\r\n :key="\'wp\' + i"\r\n :cx="p.x"\r\n :cy="p.y"\r\n r="4"\r\n class="vue-flow__edge-waypoint"\r\n @mousedown="onWaypointMouseDown(i, $event)"\r\n />\r\n </template>\r\n \x3c!-- Label + Settings icon (merged into one foreignObject for correct relative positioning) --\x3e\r\n <foreignObject\r\n :x="pathData.labelX - 100"\r\n :y="pathData.labelY - 18"\r\n width="200"\r\n height="36"\r\n style="overflow: visible; pointer-events: none;"\r\n >\r\n <div class="vue-flow__edge-label-area" xmlns="http://www.w3.org/1999/xhtml">\r\n <span class="vue-flow__edge-label-group">\r\n <WPopup\r\n v-if="hasInfoPopup"\r\n v-model="infoPopupShow"\r\n placement="bottom"\r\n modeHide="mousedown"\r\n :editable="infoPopupEditable"\r\n :minWidth="null"\r\n :maxWidth="null"\r\n :autoFitMinWidth="false"\r\n :autoFitMaxWidth="false"\r\n :backgroundColor="inforPopupBackgroundColor"\r\n :textFontSize="inforPopupTitleTextFontSize"\r\n :paddingStyle="{v:8,h:12}"\r\n >\r\n <template v-slot:trigger>\r\n <span v-if="conn.name" class="vue-flow__edge-label" :style="labelStyle" @mousedown="onLabelMouseDown">{{ conn.name }}</span>\r\n \x3c!-- Zero-size anchor keeps the popup positioned at the label midpoint when the conn has no name --\x3e\r\n <span v-else class="vue-flow__edge-popup-anchor"></span>\r\n </template>\r\n <template v-slot:content>\r\n <slot name="conn-popup" :conn="conn">\r\n <div v-if="conn.name || conn.description" style="min-width:120px">\r\n <div v-if="conn.name" :style="{ fontSize: inforPopupTitleTextFontSize, color: inforPopupTitleTextColor, fontWeight: 500 }">{{ conn.name }}</div>\r\n <div v-if="conn.description" :style="{ fontSize: inforPopupDescriptionTextFontSize, color: inforPopupDescriptionTextColor, marginTop: \'4px\' }">{{ conn.description }}</div>\r\n </div>\r\n </slot>\r\n </template>\r\n </WPopup>\r\n <transition name="vue-flow__fade">\r\n <span v-if="(hovered || settingsPopupShow) && interactive && !locked && settingsEnabled" class="vue-flow__edge-settings-anchor">\r\n <WPopup\r\n v-model="settingsPopupShow"\r\n placement="right-start"\r\n modeHide="mousedown"\r\n :minWidth="null"\r\n :maxWidth="null"\r\n :autoFitMinWidth="false"\r\n :autoFitMaxWidth="false"\r\n :backgroundColor="settingsPopupBackgroundColor"\r\n :textColor="settingsPopupTextColor"\r\n :paddingStyle="{v:8,h:8}"\r\n @show="$emit(\'conn-settings-click\', { conn: conn })"\r\n >\r\n <template v-slot:trigger>\r\n \x3c!-- 不用@mousedown.stop: stopPropagation會連window層popup互斥協調一併擋掉(致其他popup無法關閉); 防canvas startPan改由onCanvasMouseDown排除.vue-flow__edge-settings處理 --\x3e\r\n <span class="vue-flow__edge-settings">\r\n <svg viewBox="0 0 20 20" width="14" height="14" fill="currentColor">\r\n <path d="M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" transform="translate(0 3)"/>\r\n </svg>\r\n </span>\r\n </template>\r\n <template v-slot:content>\r\n <ConnSettingsForm\r\n :conn="conn"\r\n :def-conn="dc"\r\n :text-font-size="settingsPopupTextFontSize"\r\n :excludes="settingsExcludes"\r\n :default-point="waypointDefaultPoint"\r\n :target-point="waypointTargetPoint"\r\n @update="onSettingsUpdate"\r\n @delete="onSettingsDelete"\r\n />\r\n </template>\r\n </WPopup>\r\n </span>\r\n </transition>\r\n </span>\r\n </div>\r\n </foreignObject>\r\n </g>\r\n</template>\r\n\r\n<script>\r\nimport { getBezierPath, getStraightPath, getStepPath, getSmoothStepPath } from \'../../js/edgePath\'\r\nimport { getHandlePosition } from \'../../js/geometry\'\r\nimport ConnSettingsForm from \'../ui/ConnSettingsForm.vue\'\r\nimport WPopup from \'w-component-vue/src/components/WPopup.vue\'\r\nimport fixSvgNs from \'../../js/fixSvgNs.mjs\'\r\n\r\nconst pathFunctions = {\r\n bezier: getBezierPath,\r\n straight: getStraightPath,\r\n step: getStepPath,\r\n smoothstep: getSmoothStepPath,\r\n}\r\n\r\nexport default {\r\n name: \'EdgeWrapper\',\r\n //修Vue2 #7330: 本元件位於<svg>內且含foreignObject, 需清除$vnode.ns否則其內HTML元素(含WPopup之slot內容)被建為SVGElement而0x0不可見\r\n mixins: [fixSvgNs],\r\n components: { ConnSettingsForm, WPopup },\r\n inject: { getDefConn: { default: () => () => ({}) }, getDragGhost: { default: () => () => null } },\r\n props: {\r\n conn: { type: Object, required: true },\r\n sourceNode: { type: Object, default: null },\r\n targetNode: { type: Object, default: null },\r\n selected: { type: Boolean, default: false },\r\n interactive: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n settingsPopupTextColor: { type: String, default: \'#333\' },\r\n settingsPopupTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n inforPopupTitleTextColor: { type: String, default: \'#333\' },\r\n inforPopupTitleTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupDescriptionTextColor: { type: String, default: \'#888\' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: \'10px\' },\r\n allNodes: { type: Array, default: () => [] },\r\n nodeInternals: { type: Object, default: () => ({}) },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n data() {\r\n return {\r\n hovered: false,\r\n infoPopupShow: false,\r\n infoPopupEditable: true,\r\n settingsPopupShow: false,\r\n dragPts: null, //轉折點拖曳中之暫時座標([[x,y],...]), 比照節點拖曳之ghost: 不改conn.points(prop), 放開才emit由宿主寫回\r\n }\r\n },\r\n watch: {\r\n settingsPopupShow(val) {\r\n if (val) this.infoPopupShow = false\r\n },\r\n infoPopupShow(val) {\r\n if (val) this.settingsPopupShow = false\r\n },\r\n },\r\n computed: {\r\n dc() {\r\n return this.getDefConn()\r\n },\r\n hasInfoPopup() {\r\n return !!(this.conn.name || this.conn.description || this.$scopedSlots[\'conn-popup\'])\r\n },\r\n //(效能重構)錨點方位/座標自算(原由EdgeRenderer解析後以props傳入):\r\n // 含拖曳/縮放ghost(細粒度反應式), 僅本邊兩端節點變動時本元件才重渲染\r\n sourcePosition() {\r\n return this.conn.fromPosition || (this.sourceNode && this.sourceNode.toPosition) || \'bottom\' //conn層級覆寫優先\r\n },\r\n targetPosition() {\r\n return this.conn.toPosition || (this.targetNode && this.targetNode.fromPosition) || \'top\'\r\n },\r\n effSourceNode() {\r\n return this.effNode(this.sourceNode)\r\n },\r\n effTargetNode() {\r\n return this.effNode(this.targetNode)\r\n },\r\n sourcePoint() {\r\n const n = this.effSourceNode\r\n if (!n) return { x: 0, y: 0 }\r\n return getHandlePosition(n, this.sourcePosition, this.nodeInternals[n.id] || {}, \'source\')\r\n },\r\n targetPoint() {\r\n const n = this.effTargetNode\r\n if (!n) return { x: 0, y: 0 }\r\n return getHandlePosition(n, this.targetPosition, this.nodeInternals[n.id] || {}, \'target\')\r\n },\r\n sourceX() {\r\n return this.sourcePoint.x\r\n },\r\n sourceY() {\r\n return this.sourcePoint.y\r\n },\r\n targetX() {\r\n return this.targetPoint.x\r\n },\r\n targetY() {\r\n return this.targetPoint.y\r\n },\r\n //自動路由(step/smoothstep)用之節點矩形: 僅取起訖兩節點且套用拖曳/縮放ghost。\r\n //why: OrthConnector之calculateStepPoints僅以「起訖兩節點矩形」決定路徑(allNodes原僅供findObstacleAt依端點座標定位該兩矩形, 不做跨節點避讓);\r\n // 若沿用store之allNodes, 拖曳時端點已隨ghost移動、但矩形仍為舊位→findObstacleAt找不到起訖矩形→退化為fallback直角短線, 放開後allNodes更新才恢復正交繞行→路徑跳動。\r\n // 改用effSource/effTargetNode(含ghost)即拖曳中與放開後同一計算、路徑不跳; 靜止時eff=原節點, 與原本傳全部節點所得之起訖矩形一致(版面不重疊), 放開後路由不變。\r\n routingNodes() {\r\n const r = []\r\n if (this.effSourceNode) r.push(this.effSourceNode)\r\n if (this.effTargetNode) r.push(this.effTargetNode)\r\n return r\r\n },\r\n //拖曳中優先取暫時座標(ghost), 靜止時取conn.points\r\n effPoints() {\r\n return this.dragPts || this.conn.points\r\n },\r\n // 強制轉折點正規化([[x,y],...]或[{x,y},...]皆可), 無效回空陣列\r\n waypointPts() {\r\n const pts = this.effPoints\r\n if (!Array.isArray(pts) || pts.length === 0) return []\r\n const r = []\r\n for (const p of pts) {\r\n let x = null\r\n let y = null\r\n if (Array.isArray(p) && p.length >= 2) {\r\n x = Number(p[0]); y = Number(p[1])\r\n }\r\n else if (p && typeof p === \'object\') {\r\n x = Number(p.x); y = Number(p.y)\r\n }\r\n if (!Number.isFinite(x) || !Number.isFinite(y)) return []\r\n r.push({ x, y })\r\n }\r\n return r\r\n },\r\n showWaypoints() {\r\n return this.settingsEnabled && this.interactive && !this.locked && this.waypointPts.length > 0\r\n },\r\n //新增轉折點之預設位置=路徑中點(新點落於既有線上, 路徑幾乎不變不跳動)\r\n waypointDefaultPoint() {\r\n return { x: Math.round(this.pathData.labelX), y: Math.round(this.pathData.labelY) }\r\n },\r\n //後續新增以「末點與迄點錨中點」細分(供表單計算)\r\n waypointTargetPoint() {\r\n return { x: Math.round(this.targetX), y: Math.round(this.targetY) }\r\n },\r\n classes() {\r\n const connClasses = this.conn.class\r\n ? (Array.isArray(this.conn.class) ? this.conn.class : [this.conn.class])\r\n : []\r\n return [\r\n \'vue-flow__edge\',\r\n `vue-flow__edge-${this.conn.type || this.dc.type || \'bezier\'}`,\r\n ...connClasses,\r\n {\r\n \'vue-flow__edge--selected\': this.selected,\r\n \'vue-flow__edge--animated\': this.conn.animated,\r\n },\r\n ]\r\n },\r\n pathData() {\r\n const type = this.conn.type || this.dc.type || \'bezier\'\r\n const fn = pathFunctions[type] || pathFunctions.bezier\r\n return fn({\r\n sourceX: this.sourceX,\r\n sourceY: this.sourceY,\r\n sourcePosition: this.sourcePosition,\r\n targetX: this.targetX,\r\n targetY: this.targetY,\r\n targetPosition: this.targetPosition,\r\n curvature: this.conn.curvature,\r\n points: this.effPoints, //強制轉折點([[x,y],...]或[{x,y},...]), 有給即取代自動路由(兩端錨點方位仍生效); 拖曳中為ghost座標\r\n allNodes: this.routingNodes, //僅起訖兩節點且含ghost, 修拖曳中路徑與放開後不一致(見routingNodes說明)\r\n\r\n nodeInternals: this.nodeInternals,\r\n connFromId: this.conn.from,\r\n connToId: this.conn.to,\r\n offset: this.dc.defOffset,\r\n })\r\n },\r\n connStyle() {\r\n const d = this.dc\r\n const base = this.conn.style ? { ...this.conn.style } : {}\r\n base.stroke = this.conn.edgeColor || d.edgeColor || \'#b1b1b7\'\r\n if (this.conn.edgeWidth !== undefined) base.strokeWidth = this.conn.edgeWidth\r\n else if (d.edgeWidth !== undefined) base.strokeWidth = d.edgeWidth\r\n let dash = this.conn.edgeDasharray !== undefined ? this.conn.edgeDasharray : d.edgeDasharray\r\n if (dash) base.strokeDasharray = dash\r\n return base\r\n },\r\n markerStartUrl() {\r\n return this.getMarkerUrl(this.conn.markerStart)\r\n },\r\n markerEndUrl() {\r\n return this.getMarkerUrl(this.conn.markerEnd || this.dc.markerEnd)\r\n },\r\n labelStyle() {\r\n const d = this.dc\r\n const s = {}\r\n const fontSize = this.conn.fontSize || d.fontSize\r\n const fontColor = this.conn.fontColor || d.fontColor\r\n if (fontSize) s.fontSize = fontSize + \'px\'\r\n if (fontColor) s.color = fontColor\r\n return s\r\n },\r\n },\r\n methods: {\r\n //拖曳/縮放ghost套用: 有進行中之暫時幾何則以其構成有效節點(不改原節點物件)\r\n effNode(node) {\r\n if (!node) return null\r\n const g = this.getDragGhost(node.id)\r\n if (!g) return node\r\n return {\r\n ...node,\r\n position: { x: g.x, y: g.y },\r\n width: g.width !== undefined ? g.width : node.width,\r\n height: g.height !== undefined ? g.height : node.height,\r\n }\r\n },\r\n getMarkerUrl(marker) {\r\n if (!marker) return null\r\n const config = typeof marker === \'string\' ? { type: marker } : marker\r\n // Fallback chain must match EdgeMarkerDefs so the generated ids agree.\r\n const color = config.color || this.conn.edgeColor || this.dc.edgeColor || \'#b1b1b7\'\r\n return `url(#vue-flow__${config.type}_${color.replace(\'#\', \'\')})`\r\n },\r\n onGroupMouseEnter(event) {\r\n this.hovered = true\r\n this.$emit(\'conn-mouseenter\', { conn: this.conn, event })\r\n },\r\n onGroupMouseLeave(event) {\r\n this.hovered = false\r\n this.$emit(\'conn-mouseleave\', { conn: this.conn, event })\r\n },\r\n onClick(event) {\r\n if (this.hasInfoPopup) {\r\n this.infoPopupShow = true\r\n }\r\n this.$emit(\'conn-click\', { conn: this.conn, event })\r\n },\r\n openInfoPopup() {\r\n this.infoPopupShow = true\r\n },\r\n onDoubleClick(event) {\r\n this.$emit(\'conn-double-click\', { conn: this.conn, event })\r\n },\r\n onContextMenu(event) {\r\n this.$emit(\'conn-context-menu\', { conn: this.conn, event })\r\n },\r\n onLabelMouseDown(event) {\r\n this.infoPopupShow = false\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const onMove = (e) => {\r\n if (Math.abs(e.clientX - startX) > 2 || Math.abs(e.clientY - startY) > 2) {\r\n this.infoPopupEditable = false\r\n document.removeEventListener(\'mousemove\', onMove)\r\n }\r\n }\r\n const onUp = () => {\r\n document.removeEventListener(\'mousemove\', onMove)\r\n document.removeEventListener(\'mouseup\', onUp)\r\n if (!this.infoPopupEditable) {\r\n setTimeout(() => {\r\n this.infoPopupEditable = true\r\n }, 0)\r\n }\r\n }\r\n document.addEventListener(\'mousemove\', onMove)\r\n document.addEventListener(\'mouseup\', onUp)\r\n },\r\n onSettingsUpdate(key, value) {\r\n this.$emit(\'conn-settings-update\', { conn: this.conn, key, value })\r\n },\r\n onWaypointMouseDown(i, event) {\r\n if (!this.interactive || this.locked || !this.settingsEnabled) return\r\n event.preventDefault()\r\n\r\n // 鎖定拖曳游標\r\n const cursorStyle = document.createElement(\'style\')\r\n cursorStyle.textContent = \'* { cursor: move !important; }\'\r\n document.head.appendChild(cursorStyle)\r\n\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const pts0 = this.waypointPts.map(p => [p.x, p.y]) //拖曳起始快照\r\n // Get zoom from the viewport transform(同 NodeWrapper 拖曳之換算)\r\n const viewport = this.$el.closest(\'.vue-flow__viewport\')\r\n const zoom = viewport ? parseFloat(viewport.style.transform.match(/scale\\(([^)]+)\\)/)?.[1] || 1) : 1\r\n\r\n const onMouseMove = (e) => {\r\n const dx = (e.clientX - startX) / zoom\r\n const dy = (e.clientY - startY) / zoom\r\n const np = pts0.map(p => [p[0], p[1]])\r\n np[i] = [Math.round(pts0[i][0] + dx), Math.round(pts0[i][1] + dy)]\r\n //僅更新本元件之ghost, 路徑即時重繪; 不mutate conn.points(prop)以免波及宿主之deep watcher\r\n this.dragPts = np\r\n }\r\n const onMouseUp = () => {\r\n document.removeEventListener(\'mousemove\', onMouseMove)\r\n document.removeEventListener(\'mouseup\', onMouseUp)\r\n document.head.removeChild(cursorStyle)\r\n //放開才發更新事件(與齒輪表單同一事件流, 由宿主持久化); 事件流為同步, 回來時conn.points已更新故可安全清ghost\r\n const value = this.waypointPts.map(p => [p.x, p.y])\r\n this.$emit(\'conn-settings-update\', { conn: this.conn, key: \'points\', value })\r\n this.dragPts = null\r\n }\r\n document.addEventListener(\'mousemove\', onMouseMove)\r\n document.addEventListener(\'mouseup\', onMouseUp)\r\n },\r\n onSettingsDelete() {\r\n this.$emit(\'conn-settings-delete\', { conn: this.conn })\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n/* Only target direct-child paths (edge paths), not SVG paths inside settings icon */\r\n.vue-flow__edge > path {\r\n stroke: #b1b1b7;\r\n stroke-width: 1;\r\n fill: none;\r\n pointer-events: none;\r\n transition: stroke 0.3s ease, filter 0.18s ease;\r\n}\r\n.vue-flow__edge-interaction {\r\n stroke: transparent !important;\r\n stroke-width: 20 !important;\r\n fill: none;\r\n pointer-events: stroke !important;\r\n cursor: pointer;\r\n}\r\n.vue-flow__edge-waypoint {\r\n fill: #9e9e9e;\r\n stroke: #fff;\r\n stroke-width: 1.5;\r\n pointer-events: all;\r\n cursor: grab;\r\n}\r\n.vue-flow__edge-waypoint:hover {\r\n fill: #616161;\r\n stroke-width: 2;\r\n}\r\n.vue-flow__edge-waypoint:active {\r\n cursor: grabbing;\r\n}\r\n.vue-flow__edge:hover > path {\r\n stroke: #555;\r\n}\r\n.vue-flow__edge--selected > path,\r\n.vue-flow__edge--selected:hover > path {\r\n filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.8)) drop-shadow(0 0 4px rgba(220, 38, 38, 0.5)) drop-shadow(0 0 6px rgba(220, 38, 38, 0.25));\r\n}\r\n.vue-flow__edge--animated > path:not(.vue-flow__edge-interaction) {\r\n stroke-dasharray: 5;\r\n animation: vue-flow-dash 0.5s linear infinite;\r\n}\r\n@keyframes vue-flow-dash {\r\n to { stroke-dashoffset: -10; }\r\n}\r\n.vue-flow__edge-label-area {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n}\r\n.vue-flow__edge-label-group {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n pointer-events: all;\r\n}\r\n.vue-flow__edge-label {\r\n pointer-events: all;\r\n cursor: pointer;\r\n font-family: \'Microsoft JhengHei\', \'微軟正黑體\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;\r\n font-size: 10px;\r\n background: #fff;\r\n padding: 2px 4px;\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n user-select: none;\r\n text-align: center;\r\n display: inline-block;\r\n}\r\n.vue-flow__edge-popup-anchor {\r\n display: inline-block;\r\n width: 0;\r\n height: 0;\r\n}\r\n.vue-flow__edge-settings-anchor {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\r\n}\r\n.vue-flow__edge-settings {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: #888;\r\n pointer-events: all;\r\n transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.vue-flow__edge-settings:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\r\n}\r\n/* Fade transition for settings icon */\r\n.vue-flow__fade-enter-active,\r\n.vue-flow__fade-leave-active {\r\n transition: opacity 0.15s ease;\r\n}\r\n.vue-flow__fade-enter,\r\n.vue-flow__fade-leave-to {\r\n opacity: 0;\r\n}\r\n</style>\r\n']},media:void 0})},kp,"data-v-265c95c3",false,void 0,!1,o,void 0,void 0);var Tp={name:"EdgeMarkerDefs",inject:{getDefConn:{default:()=>()=>({})}},props:{conns:{type:Array,default:()=>[]}},computed:{markers(){const n=new Map,e=this.getDefConn();return this.conns.forEach(t=>{const o=t.edgeColor||e.edgeColor;this.collectMarker(t.markerStart,n,o),this.collectMarker(t.markerEnd||e.markerEnd,n,o)}),Array.from(n.values())}},methods:{collectMarker(n,e,t){if(!n)return;const o="string"==typeof n?{type:n}:n,r=o.color||t||"#b1b1b7",i=this.getMarkerId(o,r);e.has(i)||("arrowclosed"===o.type?e.set(i,{id:i,viewBox:"0 0 12.5 12.5",path:"M 0 0 L 10 5 L 0 10 z",fill:r,stroke:r}):e.set(i,{id:i,viewBox:"0 0 12.5 12.5",path:"M 0 0 L 10 5 L 0 10",fill:"none",stroke:r}))},getMarkerId:(n,e)=>`vue-flow__${"string"==typeof n?n:n.type}_${e.replace("#","")}`}};const Pp=Tp;var zp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("defs",n._l(n.markers,function(n){return t("marker",{key:n.id,attrs:{id:n.id,markerWidth:"12.5",markerHeight:"12.5",viewBox:n.viewBox,refX:"10",refY:"5",orient:"auto-start-reverse",markerUnits:"strokeWidth"}},[t("path",{attrs:{d:n.path,fill:n.fill,stroke:n.stroke,"stroke-width":"1"}})])}),0)};zp._withStripped=!0;var Ep={name:"EdgeRenderer",components:{EdgeWrapper:Bp,EdgeMarkerDefs:e({render:zp,staticRenderFns:[]},void 0,Pp,void 0,false,void 0,!1,void 0,void 0,void 0)},props:{conns:{type:Array,default:()=>[]},nodes:{type:Array,default:()=>[]},nodeInternals:{type:Object,default:()=>({})},selectedConnIds:{type:Array,default:()=>[]},interactive:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},computed:{visibleConns(){const n=new Set(this.nodes.filter(n=>!n.hidden).map(n=>n.id)),e=this.conns.filter(e=>!e.hidden&&n.has(e.from)&&n.has(e.to)),t=this.selectedConnIds||[];return t.length?[...e.filter(n=>t.indexOf(n.id)<0),...e.filter(n=>t.indexOf(n.id)>=0)]:e},nodeMap(){const n={};return this.nodes.forEach(e=>{n[e.id]=e}),n}},methods:{isSelected(n){return this.selectedConnIds.includes(n)},openConnInfoPopup(n){let e=(this.$refs.wrappers||[]).find(e=>e.conn&&e.conn.id===n);return!!e&&(e.openInfoPopup(),!0)}}};const Ip=Ep;var Fp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("svg",{staticClass:"vue-flow__edges"},[t("EdgeMarkerDefs",{attrs:{conns:n.conns}}),n._v(" "),n._l(n.visibleConns,function(e){return t("EdgeWrapper",{key:e.id,ref:"wrappers",refInFor:!0,attrs:{conn:e,"source-node":n.nodeMap[e.from],"target-node":n.nodeMap[e.to],selected:n.isSelected(e.id),"all-nodes":n.nodes,"node-internals":n.nodeInternals,interactive:n.interactive,locked:n.locked,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"settings-enabled":n.settingsEnabled,"settings-excludes":n.settingsExcludes},on:{"conn-click":function(e){return n.$emit("conn-click",e)},"conn-double-click":function(e){return n.$emit("conn-double-click",e)},"conn-context-menu":function(e){return n.$emit("conn-context-menu",e)},"conn-mouseenter":function(e){return n.$emit("conn-mouseenter",e)},"conn-mouseleave":function(e){return n.$emit("conn-mouseleave",e)},"conn-settings-click":function(e){return n.$emit("conn-settings-click",e)},"conn-settings-update":function(e){return n.$emit("conn-settings-update",e)},"conn-settings-delete":function(e){return n.$emit("conn-settings-delete",e)}},scopedSlots:n._u([n.$scopedSlots["conn-popup"]?{key:"conn-popup",fn:function(e){return[n._t("conn-popup",null,null,e)]}}:null],null,!0)})})],2)};Fp._withStripped=!0;const $p=e({render:Fp,staticRenderFns:[]},function(n){n&&n("data-v-b3f9275a_0",{source:"\n.vue-flow__edges[data-v-b3f9275a] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n pointer-events: none;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\edges\\EdgeRenderer.vue"],names:[],mappings:";AAuGA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,oBAAA;AACA",file:"EdgeRenderer.vue",sourcesContent:['<template>\r\n <svg class="vue-flow__edges">\r\n <EdgeMarkerDefs :conns="conns" />\r\n <EdgeWrapper\r\n v-for="conn in visibleConns"\r\n ref="wrappers"\r\n :key="conn.id"\r\n :conn="conn"\r\n :source-node="nodeMap[conn.from]"\r\n :target-node="nodeMap[conn.to]"\r\n :selected="isSelected(conn.id)"\r\n :all-nodes="nodes"\r\n :node-internals="nodeInternals"\r\n :interactive="interactive"\r\n :locked="locked"\r\n :settings-popup-background-color="settingsPopupBackgroundColor"\r\n :settings-popup-text-color="settingsPopupTextColor"\r\n :settings-popup-text-font-size="settingsPopupTextFontSize"\r\n :infor-popup-background-color="inforPopupBackgroundColor"\r\n :infor-popup-title-text-color="inforPopupTitleTextColor"\r\n :infor-popup-title-text-font-size="inforPopupTitleTextFontSize"\r\n :infor-popup-description-text-color="inforPopupDescriptionTextColor"\r\n :infor-popup-description-text-font-size="inforPopupDescriptionTextFontSize"\r\n :settings-enabled="settingsEnabled"\r\n :settings-excludes="settingsExcludes"\r\n @conn-click="$emit(\'conn-click\', $event)"\r\n @conn-double-click="$emit(\'conn-double-click\', $event)"\r\n @conn-context-menu="$emit(\'conn-context-menu\', $event)"\r\n @conn-mouseenter="$emit(\'conn-mouseenter\', $event)"\r\n @conn-mouseleave="$emit(\'conn-mouseleave\', $event)"\r\n @conn-settings-click="$emit(\'conn-settings-click\', $event)"\r\n @conn-settings-update="$emit(\'conn-settings-update\', $event)"\r\n @conn-settings-delete="$emit(\'conn-settings-delete\', $event)"\r\n >\r\n <template v-if="$scopedSlots[\'conn-popup\']" v-slot:conn-popup="scope">\r\n <slot name="conn-popup" v-bind="scope" />\r\n </template>\r\n </EdgeWrapper>\r\n </svg>\r\n</template>\r\n\r\n<script>\r\nimport EdgeWrapper from \'./EdgeWrapper.vue\'\r\nimport EdgeMarkerDefs from \'./EdgeMarkerDefs.vue\'\r\n\r\nexport default {\r\n name: \'EdgeRenderer\', // lock support\r\n components: { EdgeWrapper, EdgeMarkerDefs },\r\n props: {\r\n conns: { type: Array, default: () => [] },\r\n nodes: { type: Array, default: () => [] },\r\n nodeInternals: { type: Object, default: () => ({}) },\r\n selectedConnIds: { type: Array, default: () => [] },\r\n interactive: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n settingsPopupTextColor: { type: String, default: \'#333\' },\r\n settingsPopupTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n inforPopupTitleTextColor: { type: String, default: \'#333\' },\r\n inforPopupTitleTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupDescriptionTextColor: { type: String, default: \'#888\' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: \'10px\' },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n computed: {\r\n visibleConns() {\r\n const visibleNodeIds = new Set(this.nodes.filter(n => !n.hidden).map(n => n.id))\r\n const list = this.conns.filter(\r\n e => !e.hidden && visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to)\r\n )\r\n //選取之連線移至最後渲染(SVG疊序=文件順序即置頂): 該線與其轉折點不被其他線遮擋, 便於檢視與編修\r\n const sel = this.selectedConnIds || []\r\n if (!sel.length) return list\r\n return [...list.filter(c => sel.indexOf(c.id) < 0), ...list.filter(c => sel.indexOf(c.id) >= 0)]\r\n },\r\n nodeMap() {\r\n const map = {}\r\n this.nodes.forEach(n => {\r\n map[n.id] = n\r\n })\r\n return map\r\n },\r\n },\r\n methods: {\r\n //(效能重構)錨點座標/方位解析下沉至EdgeWrapper自算(含拖曳ghost):\r\n // 本層render不再讀取各節點position, 拖曳節點時EdgeRenderer不重渲染, 僅相連邊之EdgeWrapper更新\r\n isSelected(id) {\r\n return this.selectedConnIds.includes(id)\r\n },\r\n openConnInfoPopup(connId) {\r\n let wrappers = this.$refs.wrappers || []\r\n let w = wrappers.find(c => c.conn && c.conn.id === connId)\r\n if (!w) return false\r\n w.openInfoPopup()\r\n return true\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__edges {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n pointer-events: none;\r\n}\r\n</style>\r\n']},media:void 0})},Ip,"data-v-b3f9275a",false,void 0,!1,o,void 0,void 0),Hp={bezier:pp,straight:fp,step:hp,smoothstep:gp};const Np={name:"ConnectionLine",props:{active:{type:Boolean,default:!1},sourceX:{type:Number,default:0},sourceY:{type:Number,default:0},sourcePosition:{type:String,default:"bottom"},targetX:{type:Number,default:0},targetY:{type:Number,default:0},type:{type:String,default:"bezier"},lineStyle:{type:Object,default:null}},computed:{pathD(){return(Hp[this.type]||Hp.bezier)({sourceX:this.sourceX,sourceY:this.sourceY,sourcePosition:this.sourcePosition,targetX:this.targetX,targetY:this.targetY,targetPosition:"top"}).path},computedLineStyle(){return this.lineStyle||{}}}};var Wp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return n.active?t("svg",{staticClass:"vue-flow__connection-line"},[t("path",{staticClass:"vue-flow__connection-path",style:n.computedLineStyle,attrs:{d:n.pathD}})]):n._e()};Wp._withStripped=!0;const Mp=e({render:Wp,staticRenderFns:[]},function(n){n&&n("data-v-a322aa0e_0",{source:"\n.vue-flow__connection-line[data-v-a322aa0e] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\n.vue-flow__connection-path[data-v-a322aa0e] {\n stroke: #b1b1b7;\n stroke-width: 1;\n stroke-dasharray: 5 5;\n fill: none;\n}\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\edges\\ConnectionLine.vue"],names:[],mappings:";AAiDA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,oBAAA;AACA;AACA;EACA,eAAA;EACA,eAAA;EACA,qBAAA;EACA,UAAA;AACA",file:"ConnectionLine.vue",sourcesContent:["<template>\n <svg v-if=\"active\" class=\"vue-flow__connection-line\">\n <path class=\"vue-flow__connection-path\" :d=\"pathD\" :style=\"computedLineStyle\" />\n </svg>\n</template>\n\n<script>\nimport { getBezierPath, getStraightPath, getStepPath, getSmoothStepPath } from '../../js/edgePath'\n\nconst pathFunctions = {\n bezier: getBezierPath,\n straight: getStraightPath,\n step: getStepPath,\n smoothstep: getSmoothStepPath,\n}\n\nexport default {\n name: 'ConnectionLine',\n props: {\n active: { type: Boolean, default: false },\n sourceX: { type: Number, default: 0 },\n sourceY: { type: Number, default: 0 },\n sourcePosition: { type: String, default: 'bottom' },\n targetX: { type: Number, default: 0 },\n targetY: { type: Number, default: 0 },\n type: { type: String, default: 'bezier' },\n lineStyle: { type: Object, default: null },\n },\n computed: {\n pathD() {\n const fn = pathFunctions[this.type] || pathFunctions.bezier\n const result = fn({\n sourceX: this.sourceX,\n sourceY: this.sourceY,\n sourcePosition: this.sourcePosition,\n targetX: this.targetX,\n targetY: this.targetY,\n targetPosition: 'top',\n })\n return result.path\n },\n computedLineStyle() {\n return this.lineStyle || {}\n },\n },\n}\n<\/script>\n\n<style scoped>\n.vue-flow__connection-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\n.vue-flow__connection-path {\n stroke: #b1b1b7;\n stroke-width: 1;\n stroke-dasharray: 5 5;\n fill: none;\n}\n</style>\n"]},media:void 0})},Np,"data-v-a322aa0e",false,void 0,!1,o,void 0,void 0);var Lp={components:{WIcon:yu,WIconLoading:wu,WTooltip:Na},props:{tooltip:{type:String,default:""},icon:{type:String,default:""},iconSize:{type:Number,default:22},iconColor:{type:String,default:"grey darken-1"},iconColorHover:{type:String,default:"grey darken-2"},iconColorFocus:{type:String,default:"grey darken-3"},iconColorActive:{type:String,default:"grey darken-3"},borderRadius:{type:[Number,String],default:"50%"},borderRadiusStyle:{type:Object,default:()=>({left:!0,right:!0})},borderWidth:{type:Number,default:0},borderColor:{type:String,default:"transparent"},borderColorHover:{type:String,default:"transparent"},borderColorFocus:{type:String,default:"transparent"},borderColorActive:{type:String,default:"transparent"},backgroundColor:{type:String,default:"rgb(241,241,241)"},backgroundColorHover:{type:String,default:"rgb(236,236,236)"},backgroundColorFocus:{type:String,default:"rgb(230,230,230)"},backgroundColorActive:{type:String,default:"rgb(230,230,230)"},tooltipBorderRadius:{type:Number,default:4},tooltipPaddingStyle:{type:Object,default:()=>({v:5,h:8})},tooltipTextFontSize:{type:String,default:"0.85rem"},tooltipTextColor:{type:String,default:"white"},tooltipBackgroundColor:{type:String,default:"rgba(60,60,60,0.75)"},rippleColor:{type:String,default:"rgba(255, 255, 255, 0.5)"},paddingStyle:{type:Object,default:()=>({v:4,h:4})},shadow:{type:Boolean,default:!0},shadowStyle:{type:String,default:"0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"},active:{type:Boolean,default:!1},cursorPointer:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingColor:{type:String,default:"grey darken-2"},promiseUnlock:{type:Boolean,default:!1},role:{type:String,default:"button"},editable:{type:Boolean,default:!0},disabledColor:{type:String,default:"rgba(255,255,255,0.5)"}},data:function(){return{activeTrans:!1,hoverTrans:!1,focusTrans:!1,loadingTrans:!1}},mounted:function(){},computed:{changeActive:function(){return this.activeTrans=this.active,""},changeLoading:function(){return this.loadingTrans=this.loading,""},effIconColor:function(){return qt(this.iconColor)},effIconColorHover:function(){return qt(this.iconColorHover)},effIconColorFocus:function(){return qt(this.iconColorFocus)},effIconColorActive:function(){return qt(this.iconColorActive)},useIconColor:function(){let n,e=this;return e.loadingTrans?e.effIconColor:(n=e.activeTrans?e.effIconColorActive:e.focusTrans?e.effIconColorFocus:e.hoverTrans?e.effIconColorHover:e.effIconColor,e.editable||(n=e.activeTrans?e.effIconColorActive:e.effIconColor),n)},useBorderRadius:function(){let n=this,e="0px";if(uo(n.borderRadius)){e=`${co(n.borderRadius)}px;`}else Gt(n.borderRadius)&&(e=n.borderRadius);let t="0px",o="0px",r="0px",i="0px";return!0===On(n,"borderRadiusStyle.left")&&(t=e,r=e),!0===On(n,"borderRadiusStyle.right")&&(o=e,i=e),!0===On(n,"borderRadiusStyle.top")&&(t=e,o=e),!0===On(n,"borderRadiusStyle.bottom")&&(r=e,i=e),!0!==On(n,"borderRadiusStyle.topLeft")&&!0!==On(n,"borderRadiusStyle.top-left")||(t=e),!0!==On(n,"borderRadiusStyle.topRight")&&!0!==On(n,"borderRadiusStyle.top-right")||(o=e),!0!==On(n,"borderRadiusStyle.bottomLeft")&&!0!==On(n,"borderRadiusStyle.bottom-left")||(r=e),!0!==On(n,"borderRadiusStyle.bottomRight")&&!0!==On(n,"borderRadiusStyle.bottom-right")||(i=e),`border-top-left-radius:${t}; border-top-right-radius:${o}; border-bottom-left-radius:${r}; border-bottom-right-radius:${i};`},effBorderColor:function(){return qt(this.borderColor)},effBorderColorHover:function(){return qt(this.borderColorHover)},effBorderColorFocus:function(){return qt(this.borderColorFocus)},effBorderColorActive:function(){return qt(this.borderColorActive)},useBorderColor:function(){let n,e=this;return e.loadingTrans?e.effBorderColor:(n=e.activeTrans?e.effBorderColorActive:e.focusTrans?e.effBorderColorFocus:e.hoverTrans?e.effBorderColorHover:e.effBorderColor,e.editable||(n=e.activeTrans?e.effBorderColorActive:e.effBorderColor),n)},effBackgroundColor:function(){return qt(this.backgroundColor)},effBackgroundColorHover:function(){return qt(this.backgroundColorHover)},effBackgroundColorFocus:function(){return qt(this.backgroundColorFocus)},effBackgroundColorActive:function(){return qt(this.backgroundColorActive)},useBackgroundColor:function(){let n,e=this;return e.loadingTrans?e.effBackgroundColor:(n=e.activeTrans?e.effBackgroundColorActive:e.focusTrans?e.effBackgroundColorFocus:e.hoverTrans?e.effBackgroundColorHover:e.effBackgroundColor,e.editable||(n=e.activeTrans?e.effBackgroundColorActive:e.effBackgroundColor),n)},effRippleColor:function(){return qt(this.rippleColor)},effLoadingColor:function(){return qt(this.loadingColor)},effDisabledColor:function(){return qt(this.disabledColor)},usePadding:function(){return`padding:${ri(this.paddingStyle,{ext:{}})};`},useShadow:function(){let n=this;return n.shadow&&Gt(n.shadowStyle)?"box-shadow:"+function(n,e,t){let o=ut(n=qr(n,"}","{"),"{");return o=dl(o,n=>{if(n.indexOf(e)>=0){let e=wl(n,"=")[1];return e=uo(e)?co(e):.2,function(n,e){let t=qt(n),o=Ts.toRgba(t);return o.a=e,Ts.toRgbaString(o)}(t,e)}return n}),Hs(o,"")}(n.shadowStyle,"backgroundColorAlpha",n.backgroundColor):""},hasTooltop:function(){return Gt(this.tooltip)}},methods:{ripple:function(n){let e=this;e.editable&&(e.loadingTrans||e.$nextTick(()=>{mu(n.currentTarget,n,{color:e.effRippleColor,timeDuration:500})}))},clickBtn:function(n){let e=this;if(e.editable&&!e.loadingTrans)if(e.promiseUnlock){e.loadingTrans=!0,e.$nextTick(()=>{e.$emit("update:loading",e.loadingTrans)});let n=tu();e.$nextTick(()=>{e.$emit("click",{pm:n})}),n.catch().finally(()=>{e.loadingTrans=!1,e.$nextTick(()=>{e.$emit("update:loading",e.loadingTrans)})})}else e.$nextTick(()=>{e.$emit("click")})}}};const Dp=Lp;var Rp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{display:"inline-block","vertical-align":"middle",outline:"none","user-select":"none"},attrs:{role:n.editable?n.role:"",changeActive:n.changeActive,changeLoading:n.changeLoading}},[t("WTooltip",{attrs:{displayType:"line",isolated:!0,borderRadius:n.tooltipBorderRadius,paddingStyle:n.tooltipPaddingStyle,textFontSize:n.tooltipTextFontSize,textColor:n.tooltipTextColor,backgroundColor:n.tooltipBackgroundColor,editable:n.hasTooltop},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{style:"position:relative; transition:all 0.3s; "+n.usePadding+" "+n.useBorderRadius+" border:"+n.borderWidth+"px solid "+n.useBorderColor+"; background:"+n.useBackgroundColor+"; "+(n.editable&&n.cursorPointer?"cursor:pointer;":"")+" "+n.useShadow+"; outline:none; user-select:none; overflow:hidden;",attrs:{tabindex:"0"},on:{mouseenter:function(e){n.hoverTrans=!0,n.$emit("mouseenter",e)},mouseleave:function(e){n.hoverTrans=!1,n.$emit("mouseleave",e)},focus:function(e){n.focusTrans=!0},blur:function(e){n.focusTrans=!1},keyup:function(e){return!e.type.indexOf("key")&&n._k(e.keyCode,"enter",13,e.key,"Enter")?null:n.clickBtn(e)},click:function(e){n.ripple(e),n.clickBtn(e)}}},[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"center"}},[n.loadingTrans?n._e():t("WIcon",{attrs:{icon:n.icon,color:n.useIconColor,colorHover:n.useIconColor,size:n.iconSize}}),n._v(" "),n.loadingTrans?t("WIconLoading",{attrs:{name:"cir-rotate",color:n.effLoadingColor,size:n.iconSize}}):n._e()],1),n._v(" "),n.editable?n._e():t("div",{staticStyle:{position:"absolute",left:"0",right:"0",top:"0",bottom:"0"}},[t("div",{style:n.useBorderRadius+" overflow:hidden; width:100%; height:100%;"},[t("div",{style:"background:"+n.effDisabledColor+"; height:100%;"})])])])]},proxy:!0},{key:"content",fn:function(){return[n._v("\n "+n._s(n.tooltip)+"\n ")]},proxy:!0}])})],1)};Rp._withStripped=!0;var jp={components:{WButtonCircle:e({render:Rp,staticRenderFns:[]},function(n){n&&n("data-v-b9ce631c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WButtonCircle.vue"},media:void 0})},Dp,"data-v-b9ce631c",false,void 0,!1,o,void 0,void 0)},props:{multiCheck:{type:Boolean,default:!0},items:{type:Array,default:()=>[]},value:{type:[Array,Object],default:null},keyIcon:{type:String,default:"icon"},keyTooltip:{type:String,default:"tooltip"},dir:{type:String,default:"horizontal"},iconColor:{type:String,default:"#222"},iconColorHover:{type:String,default:"#444"},iconColorFocus:{type:String,default:"#666"},iconColorActive:{type:String,default:"#333"},iconSize:{type:Number,default:22},borderWidth:{type:Number,default:0},borderRadius:{type:Number,default:4},borderColor:{type:String,default:"transparent"},borderColorHover:{type:String,default:"transparent"},borderColorFocus:{type:String,default:"transparent"},borderColorActive:{type:String,default:"transparent"},backgroundColor:{type:String,default:"#f2f2f2"},backgroundColorHover:{type:String,default:"#eaeaea"},backgroundColorFocus:{type:String,default:"#e2e2e2"},backgroundColorActive:{type:String,default:"#cecece"},seplineWidth:{type:Number,default:1},seplineColor:{type:String,default:"#ddd"},tooltipBorderRadius:{type:Number,default:4},tooltipPaddingStyle:{type:Object,default:()=>({v:5,h:8})},tooltipTextFontSize:{type:String,default:"0.85rem"},tooltipTextColor:{type:String,default:"white"},tooltipBackgroundColor:{type:String,default:"rgba(60,60,60,0.75)"},rippleColor:{type:String,default:"rgba(255, 255, 255, 0.5)"},paddingStyle:{type:Object,default:()=>({v:4,h:4})},shadow:{type:Boolean,default:!1},shadowStyle:{type:String,default:"0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"},editable:{type:Boolean,default:!0}},data:function(){return{get:On,itemsTrans:[]}},mounted:function(){},computed:{changeItems:function(){let n=this;let e=zr(n.items),t=dl(e,e=>{let t=function(e){let t;return t=n.multiCheck?hu(n.value,e):pu(e,n.value),t}(e);return{active:t,hover:!1}}),o=dl(e,(n,e)=>{let o={data:n},r=t[e];return o.ia=r,o.active=r.active,o.hover=!1,o});return n.itemsTrans=o,""},useFlexDirection:function(){return"horizontal"===this.dir?"row":"column"},useSeplineStype:function(){let n=this,e="";return e="horizontal"===n.dir?`height:100%; border-left:${n.seplineWidth}px solid ${n.useSeplineColor};`:`width:100%; border-top:${n.seplineWidth}px solid ${n.useSeplineColor};`,e},useSeplineColor:function(){return qt(this.seplineColor)},useShadow:function(){let n=this;return n.shadow&&Gt(n.shadowStyle)?"box-shadow:"+function(n,e,t){let o=ut(n=qr(n,"}","{"),"{");return o=dl(o,n=>{if(n.indexOf(e)>=0){let e=wl(n,"=")[1];return e=uo(e)?co(e):.2,function(n,e){let t=qt(n),o=Ts.toRgba(t);return o.a=e,Ts.toRgbaString(o)}(t,e)}return n}),Hs(o,"")}(n.shadowStyle,"backgroundColorAlpha",n.backgroundColor):""}},methods:{getBorderRadiusStyle:function(n){let e=Ut(this.itemsTrans)-1,t={};return"horizontal"===this.dir?(0===n&&(t={...t,topLeft:!0,bottomLeft:!0}),n===e&&(t={...t,topRight:!0,bottomRight:!0})):(0===n&&(t={...t,topLeft:!0,topRight:!0}),n===e&&(t={...t,bottomLeft:!0,bottomRight:!0})),t},toggleState:function(n){let e=this;if(!1!==e.editable)if(e.multiCheck){let t=zr(e.value);if(n.active){let e=[];di(t,t=>{pu(t,n.data)||e.push(t)}),t=e}else t.push(n.data);e.$nextTick(()=>{e.$emit("input",t),e.$emit("click",n.data,""+(n.active?"hide":"show"))})}else e.$nextTick(()=>{e.$emit("input",n.data),e.$emit("click",n.data)})}}};const Op=jp;var Vp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{attrs:{changeItems:n.changeItems}},[t("div",{style:"display:inline-block; border-radius:"+n.borderRadius+"px; "+n.useShadow},[t("div",{style:"display:flex; flex-direction:"+n.useFlexDirection+";"},[n._l(n.itemsTrans,function(e,o){return[t("div",{key:"kitem-"+o,style:"display:flex; flex-direction:"+n.useFlexDirection+"; align-items:stretch;"},[o>0?t("div",{style:""+n.useSeplineStype}):n._e(),n._v(" "),t("WButtonCircle",{key:o,attrs:{tooltip:n.get(e,"data."+n.keyTooltip),icon:n.get(e,"data."+n.keyIcon),iconColor:n.iconColor,iconColorHover:n.iconColorHover,iconColorFocus:n.iconColorFocus,iconColorActive:n.iconColorActive,iconSize:n.iconSize,borderWidth:n.borderWidth,borderRadius:n.borderRadius,borderRadiusStyle:n.getBorderRadiusStyle(o),borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorFocus:n.borderColorFocus,borderColorActive:n.borderColorActive,backgroundColor:n.backgroundColor,backgroundColorHover:n.backgroundColorHover,backgroundColorFocus:n.backgroundColorFocus,backgroundColorActive:n.backgroundColorActive,tooltipBorderRadius:n.tooltipBorderRadius,tooltipPaddingStyle:n.tooltipPaddingStyle,tooltipTextFontSize:n.tooltipTextFontSize,tooltipTextColor:n.tooltipTextColor,tooltipBackgroundColor:n.tooltipBackgroundColor,rippleColor:n.rippleColor,paddingStyle:n.paddingStyle,shadow:!1,_shadowStyle:"shadowStyle",editable:n.editable,disabledColor:"rgba(255,255,255,0.4)",active:e.active},on:{click:function(t){return n.toggleState(e)}}})],1)]})],2)])])};Vp._withStripped=!0;let Yp={useMenu:!0,menuPosition:"top-left",menuYShift:0,useSetting:!0,menuSettingIcon:"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z",menuSettingTooltip:"Settings",useMenuItemZoomIn:!0,menuZoomInIcon:"M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z",menuZoomInTooltip:"Zoom In",useMenuItemZoomOut:!0,menuZoomOutIcon:"M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z",menuZoomOutTooltip:"Zoom Out",useMenuItemFitView:!0,menuFitViewIcon:"M20,2H4C2.89,2 2,2.89 2,4V20C2,21.11 2.89,22 4,22H20C21.11,22 22,21.11 22,20V4C22,2.89 21.11,2 20,2M20,20H4V4H20M13,8V10H11V8H9L12,5L15,8M16,15V13H14V11H16V9L19,12M10,13H8V15L5,12L8,9V11H10M15,16L12,19L9,16H11V14H13V16",menuFitViewTooltip:"Fit View",useMenuItemLock:!0,menuLockIcon:"M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17S8 16.11 8 15 8.9 13 10 13M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.9 2 10V20C2 21.1 2.9 22 4 22H16C17.1 22 18 21.1 18 20V10C18 8.9 17.1 8 16 8H15V6C15 4.34 16.34 3 18 3S21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M16 10V20H4V10H16Z",menuLockTooltip:"Lock",menuLockIconLocked:"M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z",menuLockTooltipLocked:"Unlock",menuIconColor:"#555",menuIconColorHover:"#222",menuIconColorFocus:"#222",menuIconSize:22,menuBackgroundColor:"#fefefe",menuBackgroundColorHover:"#f0f0f0",menuBackgroundColorFocus:"#f0f0f0",menuSeparatorColor:"#e6e6e6",menuShadow:!0,menuTooltipTextColor:"white",menuTooltipTextFontSize:"0.7rem",menuTooltipBackgroundColor:"rgba(60,60,60,0.75)"},Up=["top-left","top-right","bottom-left","bottom-right"];function Xp(n,e){let t=Yp[n];return"string"==typeof t?"string"==typeof e&&""!==e?e:t:"boolean"==typeof t?"boolean"==typeof e?e:t:"number"==typeof t&&"number"==typeof e&&isFinite(e)?e:t}const Gp={name:"FlowControls",components:{WGroupIconCheck:e({render:Vp,staticRenderFns:[]},function(n){n&&n("data-v-4390c218_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WGroupIconCheck.vue"},media:void 0})},Op,"data-v-4390c218",false,void 0,!1,o,void 0,void 0)},props:{menu:{type:Object,default:()=>({})},locked:{type:Boolean,default:!1}},data(){return{useSetting:Xp("useSetting",(this.menu||{}).useSetting)}},computed:{cfg(){let n=this.menu||{},e={};for(let t in Yp)e[t]=Xp(t,n[t]);return Up.indexOf(e.menuPosition)<0&&(e.menuPosition=Yp.menuPosition),e},allItems(){let n=this.cfg,e=[{id:"setting",icon:n.menuSettingIcon,tooltip:n.menuSettingTooltip}];return n.useMenuItemZoomIn&&e.push({id:"zoomIn",icon:n.menuZoomInIcon,tooltip:n.menuZoomInTooltip}),n.useMenuItemZoomOut&&e.push({id:"zoomOut",icon:n.menuZoomOutIcon,tooltip:n.menuZoomOutTooltip}),n.useMenuItemFitView&&e.push({id:"fitView",icon:n.menuFitViewIcon,tooltip:n.menuFitViewTooltip}),n.useMenuItemLock&&e.push({id:"interactive",icon:this.locked?n.menuLockIconLocked:n.menuLockIcon,tooltip:this.locked?n.menuLockTooltipLocked:n.menuLockTooltip}),e},useItems(){return this.useSetting?this.allItems:[this.allItems[0]]},panelStyle(){let n="z-index:5;";return this.cfg.menuPosition.indexOf("bottom")>=0?n+=`margin-bottom:${this.cfg.menuYShift}px;`:n+=`margin-top:${this.cfg.menuYShift}px;`,n}},methods:{onClickItem(n){let e=n&&n.id||"";"setting"===e?this.useSetting=!this.useSetting:"zoomIn"===e?this.$emit("zoom-in"):"zoomOut"===e?this.$emit("zoom-out"):"fitView"===e?this.$emit("fit-view"):"interactive"===e&&this.$emit("toggle-interactive")}}};var Zp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return n.cfg.useMenu?t("div",{class:["vue-flow__panel","vue-flow__panel--"+n.cfg.menuPosition],style:n.panelStyle},[t("WGroupIconCheck",{attrs:{items:n.useItems,dir:"vertical",iconColor:n.cfg.menuIconColor,iconColorHover:n.cfg.menuIconColorHover,iconColorFocus:n.cfg.menuIconColorFocus,iconSize:n.cfg.menuIconSize,backgroundColor:n.cfg.menuBackgroundColor,backgroundColorHover:n.cfg.menuBackgroundColorHover,backgroundColorFocus:n.cfg.menuBackgroundColorFocus,seplineColor:n.cfg.menuSeparatorColor,shadow:n.cfg.menuShadow,tooltipTextColor:n.cfg.menuTooltipTextColor,tooltipTextFontSize:n.cfg.menuTooltipTextFontSize,tooltipBackgroundColor:n.cfg.menuTooltipBackgroundColor,value:[]},on:{click:n.onClickItem}})],1):n._e()};Zp._withStripped=!0;let qp=0;const Qp={type:"basic",shape:"rectangle",width:100,height:40,fontSize:12,fontSizeMin:1,fontSizeMax:72,fontColor:"#333333",faceColor:"#ffffff",edgeColor:"#bbbbbb",edgeWidth:1,toPosition:"bottom",fromPosition:"top",popupDirection:"right"},Jp={type:"bezier",fontSize:10,fontSizeMin:1,fontSizeMax:72,fontColor:"#333333",edgeColor:"#b1b1b7",edgeWidth:1,markerEnd:"",animated:!1,defOffset:24};var Kp={components:{FlowCanvas:s,ViewportTransform:c,BackgroundLayer:h,SelectionBox:m,NodeRenderer:Uc,EdgeRenderer:$p,ConnectionLine:Mp,Controls:e({render:Zp,staticRenderFns:[]},function(n){n&&n("data-v-78fc6f50_0",{source:"\n.vue-flow__panel[data-v-78fc6f50] {\r\n position: absolute;\r\n z-index: 5;\n}\n.vue-flow__panel--top-left[data-v-78fc6f50] { top: 10px; left: 10px;\n}\n.vue-flow__panel--top-right[data-v-78fc6f50] { top: 10px; right: 10px;\n}\n.vue-flow__panel--bottom-left[data-v-78fc6f50] { bottom: 10px; left: 10px;\n}\n.vue-flow__panel--bottom-right[data-v-78fc6f50] { bottom: 10px; right: 10px;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\ui\\Controls.vue"],names:[],mappings:";AAqMA;EACA,kBAAA;EACA,UAAA;AACA;AACA,8CAAA,SAAA,EAAA,UAAA;AAAA;AACA,+CAAA,SAAA,EAAA,WAAA;AAAA;AACA,iDAAA,YAAA,EAAA,UAAA;AAAA;AACA,kDAAA,YAAA,EAAA,WAAA;AAAA",file:"Controls.vue",sourcesContent:["<template>\r\n \x3c!-- 垂直選單: 改用w-threejs-vue同款組件WGroupIconCheck(:dir='vertical'), 最頂為設定鈕, 收合時僅顯示設定鈕, 展開才顯示其餘按鈕 --\x3e\r\n <div\r\n v-if=\"cfg.useMenu\"\r\n :class=\"['vue-flow__panel', `vue-flow__panel--${cfg.menuPosition}`]\"\r\n :style=\"panelStyle\"\r\n >\r\n \x3c!-- 淺色系配色(w-flow-vue圖台為白底, 沿用原Controls之#fefefe白底/深灰icon風格; iconSize預設22, 按鈕寬=22+左右padding8=30px與w-threejs-vue選單一致) --\x3e\r\n \x3c!-- 全數為一般動作鈕(不用active態): 鎖頭點擊即切換上鎖/解鎖並換icon(比照fitView等), 不留固定灰底; value恆空故無任一鈕呈active, 故不開放*ColorActive類選項 --\x3e\r\n <WGroupIconCheck\r\n :items=\"useItems\"\r\n :dir=\"'vertical'\"\r\n :iconColor=\"cfg.menuIconColor\"\r\n :iconColorHover=\"cfg.menuIconColorHover\"\r\n :iconColorFocus=\"cfg.menuIconColorFocus\"\r\n :iconSize=\"cfg.menuIconSize\"\r\n :backgroundColor=\"cfg.menuBackgroundColor\"\r\n :backgroundColorHover=\"cfg.menuBackgroundColorHover\"\r\n :backgroundColorFocus=\"cfg.menuBackgroundColorFocus\"\r\n :seplineColor=\"cfg.menuSeparatorColor\"\r\n :shadow=\"cfg.menuShadow\"\r\n :tooltipTextColor=\"cfg.menuTooltipTextColor\"\r\n :tooltipTextFontSize=\"cfg.menuTooltipTextFontSize\"\r\n :tooltipBackgroundColor=\"cfg.menuTooltipBackgroundColor\"\r\n :value=\"[]\"\r\n @click=\"onClickItem\"\r\n ></WGroupIconCheck>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport WGroupIconCheck from 'w-component-vue/src/components/WGroupIconCheck.vue'\r\nimport { mdiCogOutline, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiFitToPageOutline, mdiLockOutline, mdiLockOpenVariantOutline } from '@mdi/js/mdi.js'\r\n\r\n//menuDef, 選單各項之預設值, 未被opt覆寫者沿用之\r\n//注意: menuIconSize, menuTooltipTextColor, menuTooltipBackgroundColor原為WGroupIconCheck之預設值,\r\n//因w-component-vue為浮動相依(^2.5.2), 子套件改預設會靜默改變本套件外觀, 故於此明寫鎖住現值\r\nlet menuDef = {\r\n\r\n //整體\r\n useMenu: true,\r\n menuPosition: 'top-left',\r\n menuYShift: 0,\r\n useSetting: true,\r\n\r\n //設定鈕(收合/展開)\r\n menuSettingIcon: mdiCogOutline,\r\n menuSettingTooltip: 'Settings',\r\n\r\n //放大\r\n useMenuItemZoomIn: true,\r\n menuZoomInIcon: mdiMagnifyPlusOutline,\r\n menuZoomInTooltip: 'Zoom In',\r\n\r\n //縮小\r\n useMenuItemZoomOut: true,\r\n menuZoomOutIcon: mdiMagnifyMinusOutline,\r\n menuZoomOutTooltip: 'Zoom Out',\r\n\r\n //全圖\r\n useMenuItemFitView: true,\r\n menuFitViewIcon: mdiFitToPageOutline,\r\n menuFitViewTooltip: 'Fit View',\r\n\r\n //鎖定(雙態: 無後綴為未鎖態, Locked後綴為已鎖態)\r\n useMenuItemLock: true,\r\n menuLockIcon: mdiLockOpenVariantOutline,\r\n menuLockTooltip: 'Lock',\r\n menuLockIconLocked: mdiLockOutline,\r\n menuLockTooltipLocked: 'Unlock',\r\n\r\n //樣式\r\n menuIconColor: '#555',\r\n menuIconColorHover: '#222',\r\n menuIconColorFocus: '#222',\r\n menuIconSize: 22,\r\n menuBackgroundColor: '#fefefe',\r\n menuBackgroundColorHover: '#f0f0f0',\r\n menuBackgroundColorFocus: '#f0f0f0',\r\n menuSeparatorColor: '#e6e6e6',\r\n menuShadow: true,\r\n menuTooltipTextColor: 'white',\r\n menuTooltipTextFontSize: '0.7rem',\r\n menuTooltipBackgroundColor: 'rgba(60,60,60,0.75)',\r\n\r\n}\r\n\r\n//menuPositions, menuPosition之允許值, 不在其中者回退預設\r\nlet menuPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right']\r\n\r\n/**\r\n * 取單項設定值, 型別與menuDef同型且有效才採用, 否則回退menuDef\r\n */\r\nfunction pickMenuValue(k, v) {\r\n let d = menuDef[k]\r\n if (typeof d === 'string') {\r\n return (typeof v === 'string' && v !== '') ? v : d\r\n }\r\n if (typeof d === 'boolean') {\r\n return (typeof v === 'boolean') ? v : d\r\n }\r\n if (typeof d === 'number') {\r\n return (typeof v === 'number' && isFinite(v)) ? v : d\r\n }\r\n return d\r\n}\r\n\r\nexport default {\r\n name: 'FlowControls',\r\n components: { WGroupIconCheck },\r\n props: {\r\n //選單設定物件, 鍵值同menuDef, 由WFlowVue自opt原樣取出後傳入; 各鍵未給或型別不符即回退menuDef\r\n menu: { type: Object, default: () => ({}) },\r\n locked: { type: Boolean, default: false },\r\n },\r\n data() {\r\n return {\r\n //設定鈕展開狀態(收合時僅顯示設定鈕, 展開才顯示其餘按鈕), 比照w-threejs-vue; 初值取menu.useSetting\r\n useSetting: pickMenuValue('useSetting', (this.menu || {}).useSetting),\r\n }\r\n },\r\n computed: {\r\n cfg() {\r\n let m = this.menu || {}\r\n let r = {}\r\n for (let k in menuDef) {\r\n r[k] = pickMenuValue(k, m[k])\r\n }\r\n //menuPosition另檢核列舉值\r\n if (menuPositions.indexOf(r.menuPosition) < 0) {\r\n r.menuPosition = menuDef.menuPosition\r\n }\r\n return r\r\n },\r\n allItems() {\r\n let c = this.cfg\r\n let rs = [\r\n { id: 'setting', icon: c.menuSettingIcon, tooltip: c.menuSettingTooltip },\r\n ]\r\n if (c.useMenuItemZoomIn) {\r\n rs.push({ id: 'zoomIn', icon: c.menuZoomInIcon, tooltip: c.menuZoomInTooltip })\r\n }\r\n if (c.useMenuItemZoomOut) {\r\n rs.push({ id: 'zoomOut', icon: c.menuZoomOutIcon, tooltip: c.menuZoomOutTooltip })\r\n }\r\n if (c.useMenuItemFitView) {\r\n rs.push({ id: 'fitView', icon: c.menuFitViewIcon, tooltip: c.menuFitViewTooltip })\r\n }\r\n if (c.useMenuItemLock) {\r\n rs.push({ id: 'interactive', icon: this.locked ? c.menuLockIconLocked : c.menuLockIcon, tooltip: this.locked ? c.menuLockTooltipLocked : c.menuLockTooltip })\r\n }\r\n return rs\r\n },\r\n useItems() {\r\n //設定鈕恆在最頂; 收合時僅顯示設定鈕\r\n if (this.useSetting) {\r\n return this.allItems\r\n }\r\n return [this.allItems[0]]\r\n },\r\n panelStyle() {\r\n //向下偏移: top-*位置加margin-top, bottom-*位置加margin-bottom(margin於絕對定位元素上等同再位移該側)\r\n //故menuYShift之語義為[正值使選單遠離其錨定邊]: top-*向下, bottom-*向上\r\n let s = 'z-index:5;'\r\n if (this.cfg.menuPosition.indexOf('bottom') >= 0) {\r\n s += `margin-bottom:${this.cfg.menuYShift}px;`\r\n }\r\n else {\r\n s += `margin-top:${this.cfg.menuYShift}px;`\r\n }\r\n return s\r\n },\r\n },\r\n methods: {\r\n onClickItem(item) {\r\n let id = (item && item.id) || ''\r\n if (id === 'setting') {\r\n this.useSetting = !this.useSetting\r\n }\r\n else if (id === 'zoomIn') {\r\n this.$emit('zoom-in')\r\n }\r\n else if (id === 'zoomOut') {\r\n this.$emit('zoom-out')\r\n }\r\n else if (id === 'fitView') {\r\n this.$emit('fit-view')\r\n }\r\n else if (id === 'interactive') {\r\n this.$emit('toggle-interactive')\r\n }\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__panel {\r\n position: absolute;\r\n z-index: 5;\r\n}\r\n.vue-flow__panel--top-left { top: 10px; left: 10px; }\r\n.vue-flow__panel--top-right { top: 10px; right: 10px; }\r\n.vue-flow__panel--bottom-left { bottom: 10px; left: 10px; }\r\n.vue-flow__panel--bottom-right { bottom: 10px; right: 10px; }\r\n</style>\r\n"]},media:void 0})},Gp,"data-v-78fc6f50",false,void 0,!1,o,void 0,void 0)},props:{opt:{type:Object,default:()=>({})}},provide(){return{getDefNode:()=>this.defNode,getDefConn:()=>this.defConn,getConns:()=>this.conns,getDragGhost:n=>this.dragPositions[n]||null}},data(){return{inited:!1,viewport:{x:0,y:0,zoom:1},selectedNodes:[],selectedConns:[],selectionBox:null,nodeInternals:{},locked:!0===this.opt.locked,isDraggingNode:!1,draggingNodeId:null,dragStartPos:null,dragNodeStartPositions:null,dragPositions:{},isPanning:!1,panStartPos:null,isConnecting:!1,connectingFrom:null,connLineFromX:0,connLineFromY:0,connLineFromPosition:"bottom",connLineToX:0,connLineToY:0,isSelecting:!1,selectionStartPos:null,keysPressed:{}}},watch:{nodes:{immediate:!0,handler(n){for(const e of n||[])e.id in this.dragPositions||this.$set(this.dragPositions,e.id,null)}},opt:{handler(){if(!this.inited){this.inited=!0;let n=this.center;n&&(this.viewport.x=n[0]||0,this.viewport.y=n[1]||0),this.viewport.zoom=this.zoom,this.$emit("init")}},immediate:!0}},mounted(){document.addEventListener("keydown",this.onKeyDown),document.addEventListener("keyup",this.onKeyUp),document.addEventListener("mousemove",this.onDocMouseMove),document.addEventListener("mouseup",this.onDocMouseUp)},beforeDestroy(){this._panAnimId&&(cancelAnimationFrame(this._panAnimId),this._panAnimId=null),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("keyup",this.onKeyUp),document.removeEventListener("mousemove",this.onDocMouseMove),document.removeEventListener("mouseup",this.onDocMouseUp)},computed:{widthInp(){return this.opt.width||800},heightInp(){return this.opt.height||600},nodes(){return this.opt.nodes||[]},conns(){return this.opt.conns||[]},nodesDraggable(){return void 0===this.opt.nodesDraggable||this.opt.nodesDraggable},menuInp(){let n=this.opt;return{useMenu:n.useMenu,menuPosition:n.menuPosition,menuYShift:n.menuYShift,useSetting:n.useSetting,menuSettingIcon:n.menuSettingIcon,menuSettingTooltip:n.menuSettingTooltip,useMenuItemZoomIn:n.useMenuItemZoomIn,menuZoomInIcon:n.menuZoomInIcon,menuZoomInTooltip:n.menuZoomInTooltip,useMenuItemZoomOut:n.useMenuItemZoomOut,menuZoomOutIcon:n.menuZoomOutIcon,menuZoomOutTooltip:n.menuZoomOutTooltip,useMenuItemFitView:n.useMenuItemFitView,menuFitViewIcon:n.menuFitViewIcon,menuFitViewTooltip:n.menuFitViewTooltip,useMenuItemLock:n.useMenuItemLock,menuLockIcon:n.menuLockIcon,menuLockTooltip:n.menuLockTooltip,menuLockIconLocked:n.menuLockIconLocked,menuLockTooltipLocked:n.menuLockTooltipLocked,menuIconColor:n.menuIconColor,menuIconColorHover:n.menuIconColorHover,menuIconColorFocus:n.menuIconColorFocus,menuIconSize:n.menuIconSize,menuBackgroundColor:n.menuBackgroundColor,menuBackgroundColorHover:n.menuBackgroundColorHover,menuBackgroundColorFocus:n.menuBackgroundColorFocus,menuSeparatorColor:n.menuSeparatorColor,menuShadow:n.menuShadow,menuTooltipTextColor:n.menuTooltipTextColor,menuTooltipTextFontSize:n.menuTooltipTextFontSize,menuTooltipBackgroundColor:n.menuTooltipBackgroundColor}},nodesConnectable(){return void 0===this.opt.nodesConnectable||this.opt.nodesConnectable},nodesResizable(){return void 0===this.opt.nodesResizable||this.opt.nodesResizable},elementsSelectable(){return void 0===this.opt.elementsSelectable||this.opt.elementsSelectable},nodesSettingsEnabled(){return void 0===this.opt.nodesSettingsEnabled||this.opt.nodesSettingsEnabled},connsSettingsEnabled(){return void 0===this.opt.connsSettingsEnabled||this.opt.connsSettingsEnabled},nodesSettingsExcludes(){return this.opt.nodesSettingsExcludes||[]},connsSettingsExcludes(){return this.opt.connsSettingsExcludes||[]},selectNodesOnDrag(){return void 0===this.opt.selectNodesOnDrag||this.opt.selectNodesOnDrag},deleteKeyEnabled(){return void 0!==this.opt.deleteKeyEnabled&&this.opt.deleteKeyEnabled},deleteKeyCode(){return this.opt.deleteKeyCode||"Backspace"},defConnCreatingType(){return this.opt.defConnCreatingType||"bezier"},defConnCreatingEdgeColor(){return this.opt.defConnCreatingEdgeColor||"#b1b1b7"},defConnCreatingEdgeWidth(){return void 0!==this.opt.defConnCreatingEdgeWidth?this.opt.defConnCreatingEdgeWidth:1},defConnCreatingEdgeDasharray(){return this.opt.defConnCreatingEdgeDasharray||"5 5"},defConnCreatingStyle(){return{stroke:this.defConnCreatingEdgeColor,strokeWidth:this.defConnCreatingEdgeWidth,strokeDasharray:this.defConnCreatingEdgeDasharray}},zoomOnScroll(){return void 0===this.opt.zoomOnScroll||this.opt.zoomOnScroll},panOnDrag(){return void 0===this.opt.panOnDrag||this.opt.panOnDrag},zoomMin(){return void 0!==this.opt.zoomMin?this.opt.zoomMin:.5},zoomMax(){return void 0!==this.opt.zoomMax?this.opt.zoomMax:2},center(){return this.opt.center||[0,0]},zoom(){return void 0!==this.opt.zoom?this.opt.zoom:1},panLimits(){return this.opt.panLimits||null},multiSelectEnabled(){return void 0===this.opt.multiSelectEnabled||this.opt.multiSelectEnabled},boxSelectionKeyCode(){return this.opt.boxSelectionKeyCode||"Shift"},multiSelectionKeyCode(){return this.opt.multiSelectionKeyCode||"Shift"},snapToGrid(){return void 0!==this.opt.snapToGrid&&this.opt.snapToGrid},snapGridSize(){return this.opt.snapGridSize||20},platformBackgroundPatternType(){return this.opt.platformBackgroundPatternType||"dots"},platformBackgroundPatternGap(){return void 0!==this.opt.platformBackgroundPatternGap?this.opt.platformBackgroundPatternGap:20},platformBackgroundPatternSize(){return void 0!==this.opt.platformBackgroundPatternSize?this.opt.platformBackgroundPatternSize:1},platformBackgroundPatternColor(){return this.opt.platformBackgroundPatternColor||"#81818a"},platformBackgroundColor(){return this.opt.platformBackgroundColor||"#fff"},settingsPopupBackgroundColor(){return this.opt.settingsPopupBackgroundColor||"#fff"},settingsPopupTextColor(){return this.opt.settingsPopupTextColor||"#333"},settingsPopupTextFontSize(){return this.opt.settingsPopupTextFontSize||"12px"},inforPopupBackgroundColor(){return this.opt.inforPopupBackgroundColor||"#fff"},inforPopupTitleTextColor(){return this.opt.inforPopupTitleTextColor||"#333"},inforPopupTitleTextFontSize(){return this.opt.inforPopupTitleTextFontSize||"12px"},inforPopupDescriptionTextColor(){return this.opt.inforPopupDescriptionTextColor||"#888"},inforPopupDescriptionTextFontSize(){return this.opt.inforPopupDescriptionTextFontSize||"10px"},funValidConnCreating(){return this.opt.funValidConnCreating||null},defNode(){let n=this.opt,e=Qp;return{type:n.defNodeType||e.type,shape:n.defNodeShape||e.shape,width:n.defNodeWidth||e.width,height:n.defNodeHeight||e.height,fontSize:n.defNodeFontSize||e.fontSize,fontSizeMin:n.defNodeFontSizeMin||e.fontSizeMin,fontSizeMax:n.defNodeFontSizeMax||e.fontSizeMax,fontColor:n.defNodeFontColor||e.fontColor,faceColor:n.defNodeFaceColor||e.faceColor,edgeColor:n.defNodeEdgeColor||e.edgeColor,edgeWidth:void 0!==n.defNodeEdgeWidth?n.defNodeEdgeWidth:e.edgeWidth,toPosition:n.defNodeToPosition||e.toPosition,fromPosition:n.defNodeFromPosition||e.fromPosition,popupDirection:n.defNodePopupDirection||e.popupDirection}},defConn(){let n=this.opt,e=Jp;return{type:n.defConnType||e.type,fontSize:n.defConnFontSize||e.fontSize,fontSizeMin:n.defConnFontSizeMin||e.fontSizeMin,fontSizeMax:n.defConnFontSizeMax||e.fontSizeMax,fontColor:n.defConnFontColor||e.fontColor,edgeColor:n.defConnEdgeColor||e.edgeColor,edgeWidth:void 0!==n.defConnEdgeWidth?n.defConnEdgeWidth:e.edgeWidth,edgeDasharray:n.defConnEdgeDasharray||"",markerEnd:n.defConnMarkerEnd||e.markerEnd,animated:void 0!==n.defConnAnimated?n.defConnAnimated:e.animated,defOffset:null!=n.defOffset?n.defOffset:e.defOffset}},isBoxSelectPressed(){return this.multiSelectEnabled&&!!this.keysPressed[this.boxSelectionKeyCode]},isMultiSelectPressed(){return this.multiSelectEnabled&&!!this.keysPressed[this.multiSelectionKeyCode]}},methods:{nodeById(n){return this.nodes.find(e=>e.id===n)||null},connById(n){return this.conns.find(e=>e.id===n)||null},setSelectedNodes(n){this.selectedNodes.splice(0,this.selectedNodes.length,...n)},setSelectedConns(n){this.selectedConns.splice(0,this.selectedConns.length,...n)},clearSelection(){this.selectedNodes.splice(0,this.selectedNodes.length),this.selectedConns.splice(0,this.selectedConns.length)},removeNode(n){let e=this.nodes,t=e.findIndex(e=>e.id===n);if(-1===t)return;e.splice(t,1);let o=this.conns;for(let e=o.length-1;e>=0;e--)o[e].from!==n&&o[e].to!==n||o.splice(e,1);let r=this.selectedNodes.indexOf(n);-1!==r&&this.selectedNodes.splice(r,1)},removeConn(n){let e=this.conns,t=e.findIndex(e=>e.id===n);if(-1===t)return;e.splice(t,1);let o=this.selectedConns.indexOf(n);-1!==o&&this.selectedConns.splice(o,1)},addConn(n){n.id&&n.from&&n.to&&(this.connById(n.id)||this.nodeById(n.from)&&this.nodeById(n.to)&&this.conns.push(n))},updateNodeInternals(n,e){let t=this.nodeInternals[n];t&&t.width===e.width&&t.height===e.height||this.$set(this.nodeInternals,n,e)},setViewport({x:n,y:e,zoom:t}){void 0!==n&&(this.viewport.x=n),void 0!==e&&(this.viewport.y=e),void 0!==t&&(this.viewport.zoom=t)},onKeyDown(n){this.keysPressed={...this.keysPressed,[n.key]:!0},this.locked||!this.deleteKeyEnabled||n.key!==this.deleteKeyCode&&"Delete"!==n.key||this.deleteSelectedElements()},onKeyUp(n){const e={...this.keysPressed};delete e[n.key],this.keysPressed=e},onCanvasClick(n){n.target.closest(".vue-flow__popup")||n.target.closest(".vue-flow__node")||n.target.closest(".vue-flow__edge")||(this.clearSelection(),this.$emit("pane-click",n))},onCanvasContextMenu(n){this.$emit("pane-context-menu",n)},onCanvasDblClick(n){const e=this.$refs.canvas.getContainerRect();if(!e)return;const t=this.viewport,o=(n.clientX-e.left-t.x)/t.zoom,r=(n.clientY-e.top-t.y)/t.zoom;this.$emit("canvas-dblclick",{event:n,flowX:o,flowY:r,clientX:n.clientX,clientY:n.clientY})},onCanvasMouseDown(n){if(!n.target.closest||!n.target.closest(".vue-flow__popup"))if(this.locked||!this.isBoxSelectPressed){if(this.panOnDrag&&0===n.button){const e=n.target,t=e.closest&&e.closest(".vue-flow__node"),o=e.closest&&e.closest(".vue-flow__handle"),r=e.closest&&e.closest(".vue-flow__node-settings, .vue-flow__edge-settings, .vue-flow__panel, .vue-flow__edge-waypoint");t||o||r||this.startPan(n)}}else this.startSelection(n)},onCanvasMouseMove(n){},onCanvasMouseUp(n){},onCanvasWheel(n){if(!this.zoomOnScroll)return;const e=.001*-n.deltaY,t=this.viewport.zoom,o=Math.min(this.zoomMin,t),r=Math.max(o,Math.min(this.zoomMax,t+e*t)),i=this.$refs.canvas.getContainerRect();if(!i)return;const a=n.clientX-i.left,l=n.clientY-i.top,s=this.viewport,u=r/t,d=a-(a-s.x)*u,c=l-(l-s.y)*u;this.setViewport({x:d,y:c,zoom:r}),this.emitViewportChange()},onDocMouseMove(n){this.isPanning?this.doPan(n):this.isDraggingNode?this.doDrag(n):this.isConnecting?this.doConnect(n):this.isSelecting&&this.doSelection(n)},onDocMouseUp(n){this.isPanning&&this.endPan(),this.isDraggingNode&&this.endDrag(n),this.isConnecting&&this.endConnect(n),this.isSelecting&&this.endSelection(n)},startPan(n){this.isPanning=!0,this.panStartPos={x:n.clientX,y:n.clientY}},doPan(n){const e=n.clientX-this.panStartPos.x,t=n.clientY-this.panStartPos.y;this.panStartPos={x:n.clientX,y:n.clientY};let o=this.viewport.x+e,r=this.viewport.y+t;if(this.panLimits){const n=(i={x:o,y:r},(a=this.panLimits)?{x:Math.max(a[0][0],Math.min(a[1][0],i.x)),y:Math.max(a[0][1],Math.min(a[1][1],i.y))}:i);o=n.x,r=n.y}var i,a;this.viewport.x=o,this.viewport.y=r},endPan(){this.isPanning=!1,this.panStartPos=null,this.emitViewportChange()},onNodeDragStart({node:n,event:e}){if(this.locked||!this.nodesDraggable)return;this.isDraggingNode=!0,this.draggingNodeId=n.id,this.dragStartPos={x:e.clientX,y:e.clientY},this.selectNodesOnDrag&&!this.isMultiSelectPressed&&(this.setSelectedNodes([n.id]),this.setSelectedConns([]));const t={};if(this.selectedNodes.forEach(n=>{const e=this.nodeById(n);e&&(t[n]={x:e.position.x,y:e.position.y})}),!t[n.id]){const e=this.nodeById(n.id);e&&(t[n.id]={x:e.position.x,y:e.position.y})}this.dragNodeStartPositions=t;for(let n in t)n in this.dragPositions||this.$set(this.dragPositions,n,null),this.dragPositions[n]={x:t[n].x,y:t[n].y};this.$emit("node-drag-start",{node:n,event:e})},doDrag(n){const e=this.viewport.zoom,t=(n.clientX-this.dragStartPos.x)/e,o=(n.clientY-this.dragStartPos.y)/e,r=this.snapToGrid;for(let n in this.dragNodeStartPositions){const e=this.dragNodeStartPositions[n];let i=e.x+t,a=e.y+o;if(r){const n=Ap({x:i,y:a},this.snapGridSize);i=n.x,a=n.y}const l=this.dragPositions&&this.dragPositions[n];l&&(l.x=i,l.y=a)}},endDrag(n){if(this.dragNodeStartPositions)for(let n in this.dragNodeStartPositions){let e=this.dragPositions[n],t=this.nodeById(n);t&&e&&(t.position.x=e.x,t.position.y=e.y),this.dragPositions[n]=null}const e=this.nodeById(this.draggingNodeId);this.isDraggingNode=!1,this.draggingNodeId=null,this.dragStartPos=null,this.dragNodeStartPositions=null,Zc(),e&&this.$emit("node-drag-stop",{node:e,event:n}),this.emitNodesUpdate()},onConnectStart(n){if(this.locked||!this.nodesConnectable)return;if("source"!==n.handleType)return;this.isConnecting=!0,this.connectingFrom=n,this._connectCursorStyle=document.createElement("style"),this._connectCursorStyle.textContent="* { cursor: default !important; } .vue-flow__handle { cursor: crosshair !important; } .vue-flow__node-settings, .vue-flow__edge-settings, .vue-flow__resize { opacity: 0 !important; pointer-events: none !important; }",document.head.appendChild(this._connectCursorStyle);const e=this.nodeById(n.nodeId);if(!e)return;const t=mp(e,n.handlePosition,this.nodeInternals[n.nodeId]||{});this.connLineFromX=t.x,this.connLineFromY=t.y,this.connLineFromPosition=n.handlePosition,this.connLineToX=t.x,this.connLineToY=t.y,this.$emit("connect-start",{nodeId:n.nodeId,handleId:n.handleId,handleType:n.handleType})},doConnect(n){const e=this.$refs.canvas.getContainerRect();if(!e)return;const t=this.viewport;this.connLineToX=(n.clientX-e.left-t.x)/t.zoom,this.connLineToY=(n.clientY-e.top-t.y)/t.zoom},endConnect(n){const e=document.elementFromPoint(n.clientX,n.clientY),t=e&&e.closest&&e.closest(".vue-flow__handle");if(t&&this.connectingFrom&&"target"===t.dataset.handleType){const n=t.closest(".vue-flow__node"),e=n?n.dataset.id:null;if(e){const n={from:this.connectingFrom.nodeId,to:e,...this.connectingFrom.handlePosition?{fromPosition:this.connectingFrom.handlePosition}:{},...t.dataset.handlePosition?{toPosition:t.dataset.handlePosition}:{}},o=function(n,e,t,o){if(!n.from||!n.to)return!1;if(n.from===n.to)return!1;const r=e.find(e=>e.id===n.from),i=e.find(e=>e.id===n.to);return(!r||"output"!==r.type)&&((!i||"input"!==i.type)&&!(t.find(e=>e.from===n.from&&e.to===n.to)||o&&!o(n)))}(n,this.nodes,this.conns,this.funValidConnCreating);if(o){const e=`e${n.from}-${n.to}`,t={id:this.connById(e)?(qp++,`${Date.now()}-${qp}-${Math.random().toString(36).slice(2,7)}`):e,...n};this.addConn(t),this.emitConnsUpdate(),this.$emit("connect",n)}}}this.$emit("connect-end",n),this.isConnecting=!1,this.connectingFrom=null,this._connectCursorStyle&&(document.head.removeChild(this._connectCursorStyle),this._connectCursorStyle=null)},onNodeClick({node:n,event:e}){if(this.elementsSelectable){if(this.isMultiSelectPressed){const e=this.selectedNodes.indexOf(n.id);-1===e?this.selectedNodes.push(n.id):this.selectedNodes.splice(e,1)}else this.setSelectedNodes([n.id]),this.setSelectedConns([]);this.emitSelectionChange(),this.$emit("node-click",{node:n,event:e})}},onNodeDoubleClick(n){this.$emit("node-double-click",n)},onNodeContextMenu(n){this.$emit("node-context-menu",n)},onNodeSettingsClick(n){this.$emit("node-settings-click",n)},onNodeSettingsUpdate({node:n,key:e,value:t}){let o=this.nodeById(n.id);if(!o)return;let r=o.type;if(this.$set(o,e,t),"type"===e&&r!==t){let n=o.id,e="input"===t||"basic"===t,r="output"===t||"basic"===t,i=this.conns;for(let t=i.length-1;t>=0;t--){let o=i[t];(!e&&o.from===n||!r&&o.to===n)&&i.splice(t,1)}}this.$emit("node-settings-update",{node:o,key:e,value:t})},onNodeSettingsDelete({node:n}){this.removeNode(n.id),Zc(),this.emitNodesUpdate(),this.emitConnsUpdate(),this.$emit("node-settings-delete",{node:n})},onNodeMouseEnter({node:n,event:e}){this.$emit("node-mouseenter",{node:n,event:e})},onNodeMouseLeave({node:n,event:e}){this.$emit("node-mouseleave",{node:n,event:e})},onConnClick({conn:n,event:e}){if(this.elementsSelectable){if(this.isMultiSelectPressed){const e=this.selectedConns.indexOf(n.id);-1===e?this.selectedConns.push(n.id):this.selectedConns.splice(e,1)}else this.setSelectedConns([n.id]),this.setSelectedNodes([]);this.emitSelectionChange(),this.$emit("conn-click",{conn:n,event:e})}},onConnDoubleClick(n){this.$emit("conn-double-click",n)},onConnContextMenu(n){this.$emit("conn-context-menu",n)},onConnMouseEnter({conn:n,event:e}){this.$emit("conn-mouseenter",{conn:n,event:e})},onConnMouseLeave({conn:n,event:e}){this.$emit("conn-mouseleave",{conn:n,event:e})},onConnSettingsClick(n){this.$emit("conn-settings-click",n)},onConnSettingsUpdate({conn:n,key:e,value:t}){let o=this.connById(n.id);o&&(this.$set(o,e,t),this.$emit("conn-settings-update",{conn:o,key:e,value:t}))},onConnSettingsDelete({conn:n}){this.removeConn(n.id),Zc(),this.emitConnsUpdate(),this.$emit("conn-settings-delete",{conn:n})},startSelection(n){this.isSelecting=!0;const e=this.$refs.canvas.getContainerRect();e&&(this.selectionStartPos={x:n.clientX-e.left,y:n.clientY-e.top},this.selectionBox={x:this.selectionStartPos.x,y:this.selectionStartPos.y,width:0,height:0})},doSelection(n){const e=this.$refs.canvas.getContainerRect();if(!e)return;const t=n.clientX-e.left,o=n.clientY-e.top,r=Math.min(this.selectionStartPos.x,t),i=Math.min(this.selectionStartPos.y,o),a=Math.abs(t-this.selectionStartPos.x),l=Math.abs(o-this.selectionStartPos.y);this.selectionBox={x:r,y:i,width:a,height:l}},endSelection(){if(this.selectionBox){const o=this.selectionBox,r=this.viewport,i={x:(o.x-r.x)/r.zoom,y:(o.y-r.y)/r.zoom,width:o.width/r.zoom,height:o.height/r.zoom},a=(n=i,e=this.nodes,t=this.nodeInternals,e.filter(e=>{const o=t&&t[e.id]||{},r=o.width||e.width||150,i=o.height||e.height||40;return l={x:e.position.x,y:e.position.y,width:r,height:i},(a=n).x<l.x+l.width&&a.x+a.width>l.x&&a.y<l.y+l.height&&a.y+a.height>l.y;var a,l})).map(n=>n.id);this.setSelectedNodes(a);let l=new Set(a),s=this.conns.filter(n=>l.has(n.from)&&l.has(n.to)).map(n=>n.id);this.setSelectedConns(s),this.emitSelectionChange()}var n,e,t;this.isSelecting=!1,this.selectionStartPos=null,this.selectionBox=null},deleteSelectedElements(){const{nodes:n,conns:e}=this.getSelectedElements();0===n.length&&0===e.length||(n.forEach(n=>{!1!==n.deletable&&this.removeNode(n.id)}),e.forEach(n=>{!1!==n.deletable&&this.removeConn(n.id)}),this.clearSelection(),this.$emit("delete",{nodes:n,conns:e}),this.emitNodesUpdate(),this.emitConnsUpdate())},onNodeDimensions({nodeId:n,width:e,height:t}){this.updateNodeInternals(n,{width:e,height:t})},onNodeResize({nodeId:n,width:e,height:t,x:o,y:r}){if(this.locked)return;n in this.dragPositions||this.$set(this.dragPositions,n,null);const i=this.dragPositions[n];i?(i.x=o,i.y=r,i.width=e,i.height=t):this.dragPositions[n]={x:o,y:r,width:e,height:t},this.updateNodeInternals(n,{width:e,height:t})},onNodeResizeEnd({nodeId:n,width:e,height:t,x:o,y:r}){let i=this.nodeById(n);i&&(i.width=e,i.height=t,i.position.x=o,i.position.y=r),this.dragPositions[n]=null,Zc(),this.emitNodesUpdate()},updateNodePosition(n,e){let t=this.nodeById(n);t&&(t.position.x=e.x,t.position.y=e.y)},getSelectedElements(){return{nodes:this.nodes.filter(n=>this.selectedNodes.includes(n.id)),conns:this.conns.filter(n=>this.selectedConns.includes(n.id))}},emitNodesUpdate(){this.$emit("update:nodes",[...this.nodes])},emitConnsUpdate(){this.$emit("update:conns",[...this.conns])},emitViewportChange(){this.$emit("viewport-change",{...this.viewport})},emitSelectionChange(){this.$emit("selection-change",this.getSelectedElements())},fitView(n){n=n||50;let e=this.nodes.filter(n=>!n.hidden);if(0===e.length)return;let t=this.nodeInternals,o=1/0,r=1/0,i=-1/0,a=-1/0;e.forEach(n=>{let e=t[n.id]&&t[n.id].width||n.width||150,l=t[n.id]&&t[n.id].height||n.height||40;o=Math.min(o,n.position.x),r=Math.min(r,n.position.y),i=Math.max(i,n.position.x+e),a=Math.max(a,n.position.y+l)});let l=this.$refs.canvas?this.$refs.canvas.getContainerRect():null,s=l?l.width:this.widthInp,u=l?l.height:this.heightInp,d=i-o+2*n,c=a-r+2*n,p=Math.min(s/d,u/c,2);this.viewport.zoom=p,this.viewport.x=(s-(i+o)*p)/2,this.viewport.y=(u-(a+r)*p)/2,this.emitViewportChange()},zoomAtCenter(n){const e=this.viewport.zoom,t=Math.min(this.zoomMin,e),o=Math.max(t,Math.min(this.zoomMax,e*n)),r=this.$refs.canvas?this.$refs.canvas.getContainerRect():null,i=r?r.width/2:this.widthInp/2,a=r?r.height/2:this.heightInp/2,l=this.viewport,s=o/e;this.setViewport({x:i-(i-l.x)*s,y:a-(a-l.y)*s,zoom:o}),this.emitViewportChange()},zoomIn(){this.zoomAtCenter(1.2)},zoomOut(){this.zoomAtCenter(1/1.2)},toggleInteractive(){this.locked=!this.locked,this.$emit("toggle-interactive",this.locked)},panToNode(n,e){e=e||{};let t=this.nodeById(n);if(!t)return!1;let o=this.nodeInternals[n],r=o&&o.width||t.width||150,i=o&&o.height||t.height||40,a=t.position.x+r/2,l=t.position.y+i/2,s=this.$refs.canvas?this.$refs.canvas.getContainerRect():null,u=s&&s.width||this.widthInp,d=s&&s.height||this.heightInp,c=void 0!==e.zoom?e.zoom:this.viewport.zoom,p=void 0!==e.duration?e.duration:400,f={x:u/2-a*c,y:d/2-l*c,zoom:c};this._panAnimId&&(cancelAnimationFrame(this._panAnimId),this._panAnimId=null);let h=()=>{this.setViewport(f),this.emitViewportChange(),!0===e.openPopup&&this.$nextTick(()=>this.openNodeInfoPopup(n))};if(!(p>0))return h(),!0;let g=this.viewport.x,v=this.viewport.y,m=this.viewport.zoom,A=null,b=n=>{null===A&&(A=n);let e=Math.min((n-A)/p,1),t=(n=>n<.5?4*n*n*n:1-Math.pow(-2*n+2,3)/2)(e);this.setViewport({x:g+(f.x-g)*t,y:v+(f.y-v)*t,zoom:m+(f.zoom-m)*t}),e<1?this._panAnimId=requestAnimationFrame(b):(this._panAnimId=null,h())};return this._panAnimId=requestAnimationFrame(b),!0},openNodeInfoPopup(n){let e=this.$refs.nodeRenderer;return!!e&&e.openNodeInfoPopup(n)},openConnInfoPopup(n){let e=this.$refs.edgeRenderer;return!!e&&e.openConnInfoPopup(n)},getFlowData(){return{nodes:JSON.parse(JSON.stringify(this.nodes)),conns:JSON.parse(JSON.stringify(this.conns))}}}};const nf=Kp;var ef=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"width:"+n.widthInp+"px; height:"+n.heightInp+"px;"},[n.inited?t("FlowCanvas",{ref:"canvas",on:{"canvas-mousedown":n.onCanvasMouseDown,"canvas-mousemove":n.onCanvasMouseMove,"canvas-mouseup":n.onCanvasMouseUp,"canvas-wheel":n.onCanvasWheel,"canvas-dblclick":n.onCanvasDblClick,"canvas-click":n.onCanvasClick,"canvas-contextmenu":n.onCanvasContextMenu}},[t("BackgroundLayer",{attrs:{variant:n.platformBackgroundPatternType,gap:n.platformBackgroundPatternGap,size:n.platformBackgroundPatternSize,"pattern-color":n.platformBackgroundPatternColor,"bg-color":n.platformBackgroundColor,viewport:n.viewport}}),n._v(" "),t("ViewportTransform",{attrs:{viewport:n.viewport}},[t("EdgeRenderer",{ref:"edgeRenderer",attrs:{conns:n.conns,nodes:n.nodes,"node-internals":n.nodeInternals,"selected-conn-ids":n.selectedConns,interactive:n.elementsSelectable,locked:n.locked,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"settings-enabled":n.connsSettingsEnabled,"settings-excludes":n.connsSettingsExcludes},on:{"conn-click":n.onConnClick,"conn-double-click":n.onConnDoubleClick,"conn-context-menu":n.onConnContextMenu,"conn-mouseenter":n.onConnMouseEnter,"conn-mouseleave":n.onConnMouseLeave,"conn-settings-click":n.onConnSettingsClick,"conn-settings-update":n.onConnSettingsUpdate,"conn-settings-delete":n.onConnSettingsDelete},scopedSlots:n._u([n.$scopedSlots["conn-popup"]?{key:"conn-popup",fn:function(e){return[n._t("conn-popup",null,null,e)]}}:null],null,!0)}),n._v(" "),t("NodeRenderer",{ref:"nodeRenderer",attrs:{nodes:n.nodes,"selected-node-ids":n.selectedNodes,"nodes-draggable":n.nodesDraggable,"nodes-connectable":n.nodesConnectable,locked:n.locked,"nodes-resizable":n.nodesResizable,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"snap-grid-size":n.snapToGrid?n.snapGridSize:null,"settings-enabled":n.nodesSettingsEnabled,"settings-excludes":n.nodesSettingsExcludes},on:{"drag-start":n.onNodeDragStart,"node-click":n.onNodeClick,"node-double-click":n.onNodeDoubleClick,"node-context-menu":n.onNodeContextMenu,"node-settings-click":n.onNodeSettingsClick,"node-settings-update":n.onNodeSettingsUpdate,"node-settings-delete":n.onNodeSettingsDelete,"node-mouseenter":n.onNodeMouseEnter,"node-mouseleave":n.onNodeMouseLeave,"connect-start":n.onConnectStart,dimensions:n.onNodeDimensions,"node-resize":n.onNodeResize,"node-resize-end":n.onNodeResizeEnd},scopedSlots:n._u([n.$scopedSlots["node-popup"]?{key:"node-popup",fn:function(e){return[n._t("node-popup",null,null,e)]}}:null],null,!0)}),n._v(" "),t("ConnectionLine",{attrs:{active:n.isConnecting,"source-x":n.connLineFromX,"source-y":n.connLineFromY,"source-position":n.connLineFromPosition,"target-x":n.connLineToX,"target-y":n.connLineToY,type:n.defConnCreatingType,"line-style":n.defConnCreatingStyle}}),n._v(" "),n._t("viewport-overlay")],2),n._v(" "),t("SelectionBox",{attrs:{box:n.selectionBox}}),n._v(" "),t("Controls",{attrs:{locked:n.locked,menu:n.menuInp},on:{"zoom-in":n.zoomIn,"zoom-out":n.zoomOut,"fit-view":n.fitView,"toggle-interactive":n.toggleInteractive}})],1):n._e()],1)};ef._withStripped=!0;return e({render:ef,staticRenderFns:[]},function(n){n&&n("data-v-db4421a4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WFlowVue.vue"},media:void 0})},nf,"data-v-db4421a4",false,void 0,!1,o,void 0,void 0)});
14
+ var Gu,Zu,qu=9e15,Qu=1e9,Ju="0123456789abcdef",Ku="2.3025850929940456840179914546843642076011014886287729760333279009675726096773524802359972050895982983419677840422862486334095254650828067566662873690987816894829072083255546808437998948262331985283935053089653777326288461633662222876982198867465436674744042432743651550489343149393914796194044002221051017141748003688084012647080685567743216228355220114804663715659121373450747856947683463616792101806445070648000277502684916746550586856935673420670581136429224554405758925724208241314695689016758940256776311356919292033376587141660230105703089634572075440370847469940168269282808481184289314848524948644871927809676271275775397027668605952496716674183485704422507197965004714951050492214776567636938662976979522110718264549734772662425709429322582798502585509785265383207606726317164309505995087807523710333101197857547331541421808427543863591778117054309827482385045648019095610299291824318237525357709750539565187697510374970888692180205189339507238539205144634197265287286965110862571492198849978748873771345686209167058",nd="3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491298336733624406566430860213949463952247371907021798609437027705392171762931767523846748184676694051320005681271452635608277857713427577896091736371787214684409012249534301465495853710507922796892589235420199561121290219608640344181598136297747713099605187072113499999983729780499510597317328160963185950244594553469083026425223082533446850352619311881710100031378387528865875332083814206171776691473035982534904287554687311595628638823537875937519577818577805321712268066130019278766111959092164201989380952572010654858632789",ed={precision:20,rounding:4,modulo:1,toExpNeg:-7,toExpPos:21,minE:-qu,maxE:qu,crypto:!1},td=!0,od="[DecimalError] ",rd=od+"Invalid argument: ",id=od+"Precision limit exceeded",ad=od+"crypto unavailable",ld="[object Decimal]",sd=Math.floor,ud=Math.pow,dd=/^0b([01]+(\.[01]*)?|\.[01]+)(p[+-]?\d+)?$/i,cd=/^0x([0-9a-f]+(\.[0-9a-f]*)?|\.[0-9a-f]+)(p[+-]?\d+)?$/i,pd=/^0o([0-7]+(\.[0-7]*)?|\.[0-7]+)(p[+-]?\d+)?$/i,fd=/^(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,hd=1e7,gd=Ku.length-1,vd=nd.length-1,md={toStringTag:ld};function Ad(n){var e,t,o,r=n.length-1,i="",a=n[0];if(r>0){for(i+=a,e=1;e<r;e++)(t=7-(o=n[e]+"").length)&&(i+=Pd(t)),i+=o;(t=7-(o=(a=n[e])+"").length)&&(i+=Pd(t))}else if(0===a)return"0";for(;a%10==0;)a/=10;return i+a}function bd(n,e,t){if(n!==~~n||n<e||n>t)throw Error(rd+n)}function yd(n,e,t,o){var r,i,a,l;for(i=n[0];i>=10;i/=10)--e;return--e<0?(e+=7,r=0):(r=Math.ceil((e+1)/7),e%=7),i=ud(10,7-e),l=n[r]%i|0,null==o?e<3?(0==e?l=l/100|0:1==e&&(l=l/10|0),a=t<4&&99999==l||t>3&&49999==l||5e4==l||0==l):a=(t<4&&l+1==i||t>3&&l+1==i/2)&&(n[r+1]/i/100|0)==ud(10,e-2)-1||(l==i/2||0==l)&&!(n[r+1]/i/100|0):e<4?(0==e?l=l/1e3|0:1==e?l=l/100|0:2==e&&(l=l/10|0),a=(o||t<4)&&9999==l||!o&&t>3&&4999==l):a=((o||t<4)&&l+1==i||!o&&t>3&&l+1==i/2)&&(n[r+1]/i/1e3|0)==ud(10,e-3)-1,a}function Cd(n,e,t){for(var o,r,i=[0],a=0,l=n.length;a<l;){for(r=i.length;r--;)i[r]*=e;for(i[0]+=Ju.indexOf(n.charAt(a++)),o=0;o<i.length;o++)i[o]>t-1&&(void 0===i[o+1]&&(i[o+1]=0),i[o+1]+=i[o]/t|0,i[o]%=t)}return i.reverse()}md.absoluteValue=md.abs=function(){var n=new this.constructor(this);return n.s<0&&(n.s=1),wd(n)},md.ceil=function(){return wd(new this.constructor(this),this.e+1,2)},md.clampedTo=md.clamp=function(n,e){var t=this,o=t.constructor;if(n=new o(n),e=new o(e),!n.s||!e.s)return new o(NaN);if(n.gt(e))throw Error(rd+e);return t.cmp(n)<0?n:t.cmp(e)>0?e:new o(t)},md.comparedTo=md.cmp=function(n){var e,t,o,r,i=this,a=i.d,l=(n=new i.constructor(n)).d,s=i.s,u=n.s;if(!a||!l)return s&&u?s!==u?s:a===l?0:!a^s<0?1:-1:NaN;if(!a[0]||!l[0])return a[0]?s:l[0]?-u:0;if(s!==u)return s;if(i.e!==n.e)return i.e>n.e^s<0?1:-1;for(e=0,t=(o=a.length)<(r=l.length)?o:r;e<t;++e)if(a[e]!==l[e])return a[e]>l[e]^s<0?1:-1;return o===r?0:o>r^s<0?1:-1},md.cosine=md.cos=function(){var n,e,t=this,o=t.constructor;return t.d?t.d[0]?(n=o.precision,e=o.rounding,o.precision=n+Math.max(t.e,t.sd())+7,o.rounding=1,t=function(n,e){var t,o,r;if(e.isZero())return e;o=e.d.length,o<32?r=(1/Ld(4,t=Math.ceil(o/3))).toString():(t=16,r="2.3283064365386962890625e-10");n.precision+=t,e=Md(n,1,e.times(r),new n(1));for(var i=t;i--;){var a=e.times(e);e=a.times(a).minus(a).times(8).plus(1)}return n.precision-=t,e}(o,Dd(o,t)),o.precision=n,o.rounding=e,wd(2==Zu||3==Zu?t.neg():t,n,e,!0)):new o(1):new o(NaN)},md.cubeRoot=md.cbrt=function(){var n,e,t,o,r,i,a,l,s,u,d=this,c=d.constructor;if(!d.isFinite()||d.isZero())return new c(d);for(td=!1,(i=d.s*ud(d.s*d,1/3))&&Math.abs(i)!=1/0?o=new c(i.toString()):(t=Ad(d.d),(i=((n=d.e)-t.length+1)%3)&&(t+=1==i||-2==i?"0":"00"),i=ud(t,1/3),n=sd((n+1)/3)-(n%3==(n<0?-1:2)),(o=new c(t=i==1/0?"5e"+n:(t=i.toExponential()).slice(0,t.indexOf("e")+1)+n)).s=d.s),a=(n=c.precision)+3;;)if(u=(s=(l=o).times(l).times(l)).plus(d),o=xd(u.plus(d).times(l),u.plus(s),a+2,1),Ad(l.d).slice(0,a)===(t=Ad(o.d)).slice(0,a)){if("9999"!=(t=t.slice(a-3,a+1))&&(r||"4999"!=t)){+t&&(+t.slice(1)||"5"!=t.charAt(0))||(wd(o,n+1,1),e=!o.times(o).times(o).eq(d));break}if(!r&&(wd(l,n+1,0),l.times(l).times(l).eq(d))){o=l;break}a+=4,r=1}return td=!0,wd(o,n,c.rounding,e)},md.decimalPlaces=md.dp=function(){var n,e=this.d,t=NaN;if(e){if(t=7*((n=e.length-1)-sd(this.e/7)),n=e[n])for(;n%10==0;n/=10)t--;t<0&&(t=0)}return t},md.dividedBy=md.div=function(n){return xd(this,new this.constructor(n))},md.dividedToIntegerBy=md.divToInt=function(n){var e=this.constructor;return wd(xd(this,new e(n),0,1,1),e.precision,e.rounding)},md.equals=md.eq=function(n){return 0===this.cmp(n)},md.floor=function(){return wd(new this.constructor(this),this.e+1,3)},md.greaterThan=md.gt=function(n){return this.cmp(n)>0},md.greaterThanOrEqualTo=md.gte=function(n){var e=this.cmp(n);return 1==e||0===e},md.hyperbolicCosine=md.cosh=function(){var n,e,t,o,r,i=this,a=i.constructor,l=new a(1);if(!i.isFinite())return new a(i.s?1/0:NaN);if(i.isZero())return l;t=a.precision,o=a.rounding,a.precision=t+Math.max(i.e,i.sd())+4,a.rounding=1,(r=i.d.length)<32?e=(1/Ld(4,n=Math.ceil(r/3))).toString():(n=16,e="2.3283064365386962890625e-10"),i=Md(a,1,i.times(e),new a(1),!0);for(var s,u=n,d=new a(8);u--;)s=i.times(i),i=l.minus(s.times(d.minus(s.times(d))));return wd(i,a.precision=t,a.rounding=o,!0)},md.hyperbolicSine=md.sinh=function(){var n,e,t,o,r=this,i=r.constructor;if(!r.isFinite()||r.isZero())return new i(r);if(e=i.precision,t=i.rounding,i.precision=e+Math.max(r.e,r.sd())+4,i.rounding=1,(o=r.d.length)<3)r=Md(i,2,r,r,!0);else{n=(n=1.4*Math.sqrt(o))>16?16:0|n,r=Md(i,2,r=r.times(1/Ld(5,n)),r,!0);for(var a,l=new i(5),s=new i(16),u=new i(20);n--;)a=r.times(r),r=r.times(l.plus(a.times(s.times(a).plus(u))))}return i.precision=e,i.rounding=t,wd(r,e,t,!0)},md.hyperbolicTangent=md.tanh=function(){var n,e,t=this,o=t.constructor;return t.isFinite()?t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+7,o.rounding=1,xd(t.sinh(),t.cosh(),o.precision=n,o.rounding=e)):new o(t.s)},md.inverseCosine=md.acos=function(){var n=this,e=n.constructor,t=n.abs().cmp(1),o=e.precision,r=e.rounding;return-1!==t?0===t?n.isNeg()?Bd(e,o,r):new e(0):new e(NaN):n.isZero()?Bd(e,o+4,r).times(.5):(e.precision=o+6,e.rounding=1,n=new e(1).minus(n).div(n.plus(1)).sqrt().atan(),e.precision=o,e.rounding=r,n.times(2))},md.inverseHyperbolicCosine=md.acosh=function(){var n,e,t=this,o=t.constructor;return t.lte(1)?new o(t.eq(1)?0:NaN):t.isFinite()?(n=o.precision,e=o.rounding,o.precision=n+Math.max(Math.abs(t.e),t.sd())+4,o.rounding=1,td=!1,t=t.times(t).minus(1).sqrt().plus(t),td=!0,o.precision=n,o.rounding=e,t.ln()):new o(t)},md.inverseHyperbolicSine=md.asinh=function(){var n,e,t=this,o=t.constructor;return!t.isFinite()||t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+2*Math.max(Math.abs(t.e),t.sd())+6,o.rounding=1,td=!1,t=t.times(t).plus(1).sqrt().plus(t),td=!0,o.precision=n,o.rounding=e,t.ln())},md.inverseHyperbolicTangent=md.atanh=function(){var n,e,t,o,r=this,i=r.constructor;return r.isFinite()?r.e>=0?new i(r.abs().eq(1)?r.s/0:r.isZero()?r:NaN):(n=i.precision,e=i.rounding,o=r.sd(),Math.max(o,n)<2*-r.e-1?wd(new i(r),n,e,!0):(i.precision=t=o-r.e,r=xd(r.plus(1),new i(1).minus(r),t+n,1),i.precision=n+4,i.rounding=1,r=r.ln(),i.precision=n,i.rounding=e,r.times(.5))):new i(NaN)},md.inverseSine=md.asin=function(){var n,e,t,o,r=this,i=r.constructor;return r.isZero()?new i(r):(e=r.abs().cmp(1),t=i.precision,o=i.rounding,-1!==e?0===e?((n=Bd(i,t+4,o).times(.5)).s=r.s,n):new i(NaN):(i.precision=t+6,i.rounding=1,r=r.div(new i(1).minus(r.times(r)).sqrt().plus(1)).atan(),i.precision=t,i.rounding=o,r.times(2)))},md.inverseTangent=md.atan=function(){var n,e,t,o,r,i,a,l,s,u=this,d=u.constructor,c=d.precision,p=d.rounding;if(u.isFinite()){if(u.isZero())return new d(u);if(u.abs().eq(1)&&c+4<=vd)return(a=Bd(d,c+4,p).times(.25)).s=u.s,a}else{if(!u.s)return new d(NaN);if(c+4<=vd)return(a=Bd(d,c+4,p).times(.5)).s=u.s,a}for(d.precision=l=c+10,d.rounding=1,n=t=Math.min(28,l/7+2|0);n;--n)u=u.div(u.times(u).plus(1).sqrt().plus(1));for(td=!1,e=Math.ceil(l/7),o=1,s=u.times(u),a=new d(u),r=u;-1!==n;)if(r=r.times(s),i=a.minus(r.div(o+=2)),r=r.times(s),void 0!==(a=i.plus(r.div(o+=2))).d[e])for(n=e;a.d[n]===i.d[n]&&n--;);return t&&(a=a.times(2<<t-1)),td=!0,wd(a,d.precision=c,d.rounding=p,!0)},md.isFinite=function(){return!!this.d},md.isInteger=md.isInt=function(){return!!this.d&&sd(this.e/7)>this.d.length-2},md.isNaN=function(){return!this.s},md.isNegative=md.isNeg=function(){return this.s<0},md.isPositive=md.isPos=function(){return this.s>0},md.isZero=function(){return!!this.d&&0===this.d[0]},md.lessThan=md.lt=function(n){return this.cmp(n)<0},md.lessThanOrEqualTo=md.lte=function(n){return this.cmp(n)<1},md.logarithm=md.log=function(n){var e,t,o,r,i,a,l,s,u=this,d=u.constructor,c=d.precision,p=d.rounding;if(null==n)n=new d(10),e=!0;else{if(t=(n=new d(n)).d,n.s<0||!t||!t[0]||n.eq(1))return new d(NaN);e=n.eq(10)}if(t=u.d,u.s<0||!t||!t[0]||u.eq(1))return new d(t&&!t[0]?-1/0:1!=u.s?NaN:t?0:1/0);if(e)if(t.length>1)i=!0;else{for(r=t[0];r%10==0;)r/=10;i=1!==r}if(td=!1,a=$d(u,l=c+5),o=e?_d(d,l+10):$d(n,l),yd((s=xd(a,o,l,1)).d,r=c,p))do{if(a=$d(u,l+=10),o=e?_d(d,l+10):$d(n,l),s=xd(a,o,l,1),!i){+Ad(s.d).slice(r+1,r+15)+1==1e14&&(s=wd(s,c+1,0));break}}while(yd(s.d,r+=10,p));return td=!0,wd(s,c,p)},md.minus=md.sub=function(n){var e,t,o,r,i,a,l,s,u,d,c,p,f=this,h=f.constructor;if(n=new h(n),!f.d||!n.d)return f.s&&n.s?f.d?n.s=-n.s:n=new h(n.d||f.s!==n.s?f:NaN):n=new h(NaN),n;if(f.s!=n.s)return n.s=-n.s,f.plus(n);if(u=f.d,p=n.d,l=h.precision,s=h.rounding,!u[0]||!p[0]){if(p[0])n.s=-n.s;else{if(!u[0])return new h(3===s?-0:0);n=new h(f)}return td?wd(n,l,s):n}if(t=sd(n.e/7),d=sd(f.e/7),u=u.slice(),i=d-t){for((c=i<0)?(e=u,i=-i,a=p.length):(e=p,t=d,a=u.length),i>(o=Math.max(Math.ceil(l/7),a)+2)&&(i=o,e.length=1),e.reverse(),o=i;o--;)e.push(0);e.reverse()}else{for((c=(o=u.length)<(a=p.length))&&(a=o),o=0;o<a;o++)if(u[o]!=p[o]){c=u[o]<p[o];break}i=0}for(c&&(e=u,u=p,p=e,n.s=-n.s),a=u.length,o=p.length-a;o>0;--o)u[a++]=0;for(o=p.length;o>i;){if(u[--o]<p[o]){for(r=o;r&&0===u[--r];)u[r]=hd-1;--u[r],u[o]+=hd}u[o]-=p[o]}for(;0===u[--a];)u.pop();for(;0===u[0];u.shift())--t;return u[0]?(n.d=u,n.e=kd(u,t),td?wd(n,l,s):n):new h(3===s?-0:0)},md.modulo=md.mod=function(n){var e,t=this,o=t.constructor;return n=new o(n),!t.d||!n.s||n.d&&!n.d[0]?new o(NaN):!n.d||t.d&&!t.d[0]?wd(new o(t),o.precision,o.rounding):(td=!1,9==o.modulo?(e=xd(t,n.abs(),0,3,1)).s*=n.s:e=xd(t,n,0,o.modulo,1),e=e.times(n),td=!0,t.minus(e))},md.naturalExponential=md.exp=function(){return Fd(this)},md.naturalLogarithm=md.ln=function(){return $d(this)},md.negated=md.neg=function(){var n=new this.constructor(this);return n.s=-n.s,wd(n)},md.plus=md.add=function(n){var e,t,o,r,i,a,l,s,u,d,c=this,p=c.constructor;if(n=new p(n),!c.d||!n.d)return c.s&&n.s?c.d||(n=new p(n.d||c.s===n.s?c:NaN)):n=new p(NaN),n;if(c.s!=n.s)return n.s=-n.s,c.minus(n);if(u=c.d,d=n.d,l=p.precision,s=p.rounding,!u[0]||!d[0])return d[0]||(n=new p(c)),td?wd(n,l,s):n;if(i=sd(c.e/7),o=sd(n.e/7),u=u.slice(),r=i-o){for(r<0?(t=u,r=-r,a=d.length):(t=d,o=i,a=u.length),r>(a=(i=Math.ceil(l/7))>a?i+1:a+1)&&(r=a,t.length=1),t.reverse();r--;)t.push(0);t.reverse()}for((a=u.length)-(r=d.length)<0&&(r=a,t=d,d=u,u=t),e=0;r;)e=(u[--r]=u[r]+d[r]+e)/hd|0,u[r]%=hd;for(e&&(u.unshift(e),++o),a=u.length;0==u[--a];)u.pop();return n.d=u,n.e=kd(u,o),td?wd(n,l,s):n},md.precision=md.sd=function(n){var e,t=this;if(void 0!==n&&n!==!!n&&1!==n&&0!==n)throw Error(rd+n);return t.d?(e=Td(t.d),n&&t.e+1>e&&(e=t.e+1)):e=NaN,e},md.round=function(){var n=this,e=n.constructor;return wd(new e(n),n.e+1,e.rounding)},md.sine=md.sin=function(){var n,e,t=this,o=t.constructor;return t.isFinite()?t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+Math.max(t.e,t.sd())+7,o.rounding=1,t=function(n,e){var t,o=e.d.length;if(o<3)return e.isZero()?e:Md(n,2,e,e);t=(t=1.4*Math.sqrt(o))>16?16:0|t,e=e.times(1/Ld(5,t)),e=Md(n,2,e,e);for(var r,i=new n(5),a=new n(16),l=new n(20);t--;)r=e.times(e),e=e.times(i.plus(r.times(a.times(r).minus(l))));return e}(o,Dd(o,t)),o.precision=n,o.rounding=e,wd(Zu>2?t.neg():t,n,e,!0)):new o(NaN)},md.squareRoot=md.sqrt=function(){var n,e,t,o,r,i,a=this,l=a.d,s=a.e,u=a.s,d=a.constructor;if(1!==u||!l||!l[0])return new d(!u||u<0&&(!l||l[0])?NaN:l?a:1/0);for(td=!1,0==(u=Math.sqrt(+a))||u==1/0?(((e=Ad(l)).length+s)%2==0&&(e+="0"),u=Math.sqrt(e),s=sd((s+1)/2)-(s<0||s%2),o=new d(e=u==1/0?"5e"+s:(e=u.toExponential()).slice(0,e.indexOf("e")+1)+s)):o=new d(u.toString()),t=(s=d.precision)+3;;)if(o=(i=o).plus(xd(a,i,t+2,1)).times(.5),Ad(i.d).slice(0,t)===(e=Ad(o.d)).slice(0,t)){if("9999"!=(e=e.slice(t-3,t+1))&&(r||"4999"!=e)){+e&&(+e.slice(1)||"5"!=e.charAt(0))||(wd(o,s+1,1),n=!o.times(o).eq(a));break}if(!r&&(wd(i,s+1,0),i.times(i).eq(a))){o=i;break}t+=4,r=1}return td=!0,wd(o,s,d.rounding,n)},md.tangent=md.tan=function(){var n,e,t=this,o=t.constructor;return t.isFinite()?t.isZero()?new o(t):(n=o.precision,e=o.rounding,o.precision=n+10,o.rounding=1,(t=t.sin()).s=1,t=xd(t,new o(1).minus(t.times(t)).sqrt(),n+10,0),o.precision=n,o.rounding=e,wd(2==Zu||4==Zu?t.neg():t,n,e,!0)):new o(NaN)},md.times=md.mul=function(n){var e,t,o,r,i,a,l,s,u,d=this,c=d.constructor,p=d.d,f=(n=new c(n)).d;if(n.s*=d.s,!(p&&p[0]&&f&&f[0]))return new c(!n.s||p&&!p[0]&&!f||f&&!f[0]&&!p?NaN:p&&f?0*n.s:n.s/0);for(t=sd(d.e/7)+sd(n.e/7),(s=p.length)<(u=f.length)&&(i=p,p=f,f=i,a=s,s=u,u=a),i=[],o=a=s+u;o--;)i.push(0);for(o=u;--o>=0;){for(e=0,r=s+o;r>o;)l=i[r]+f[o]*p[r-o-1]+e,i[r--]=l%hd|0,e=l/hd|0;i[r]=(i[r]+e)%hd|0}for(;!i[--a];)i.pop();return e?++t:i.shift(),n.d=i,n.e=kd(i,t),td?wd(n,c.precision,c.rounding):n},md.toBinary=function(n,e){return Rd(this,2,n,e)},md.toDecimalPlaces=md.toDP=function(n,e){var t=this,o=t.constructor;return t=new o(t),void 0===n?t:(bd(n,0,Qu),void 0===e?e=o.rounding:bd(e,0,8),wd(t,n+t.e+1,e))},md.toExponential=function(n,e){var t,o=this,r=o.constructor;return void 0===n?t=Sd(o,!0):(bd(n,0,Qu),void 0===e?e=r.rounding:bd(e,0,8),t=Sd(o=wd(new r(o),n+1,e),!0,n+1)),o.isNeg()&&!o.isZero()?"-"+t:t},md.toFixed=function(n,e){var t,o,r=this,i=r.constructor;return void 0===n?t=Sd(r):(bd(n,0,Qu),void 0===e?e=i.rounding:bd(e,0,8),t=Sd(o=wd(new i(r),n+r.e+1,e),!1,n+o.e+1)),r.isNeg()&&!r.isZero()?"-"+t:t},md.toFraction=function(n){var e,t,o,r,i,a,l,s,u,d,c,p,f=this,h=f.d,g=f.constructor;if(!h)return new g(f);if(u=t=new g(1),o=s=new g(0),a=(i=(e=new g(o)).e=Td(h)-f.e-1)%7,e.d[0]=ud(10,a<0?7+a:a),null==n)n=i>0?e:u;else{if(!(l=new g(n)).isInt()||l.lt(u))throw Error(rd+l);n=l.gt(e)?i>0?e:u:l}for(td=!1,l=new g(Ad(h)),d=g.precision,g.precision=i=7*h.length*2;c=xd(l,e,0,1,1),1!=(r=t.plus(c.times(o))).cmp(n);)t=o,o=r,r=u,u=s.plus(c.times(r)),s=r,r=e,e=l.minus(c.times(r)),l=r;return r=xd(n.minus(t),o,0,1,1),s=s.plus(r.times(u)),t=t.plus(r.times(o)),s.s=u.s=f.s,p=xd(u,o,i,1).minus(f).abs().cmp(xd(s,t,i,1).minus(f).abs())<1?[u,o]:[s,t],g.precision=d,td=!0,p},md.toHexadecimal=md.toHex=function(n,e){return Rd(this,16,n,e)},md.toNearest=function(n,e){var t=this,o=t.constructor;if(t=new o(t),null==n){if(!t.d)return t;n=new o(1),e=o.rounding}else{if(n=new o(n),void 0===e?e=o.rounding:bd(e,0,8),!t.d)return n.s?t:n;if(!n.d)return n.s&&(n.s=t.s),n}return n.d[0]?(td=!1,t=xd(t,n,0,e,1).times(n),td=!0,wd(t)):(n.s=t.s,t=n),t},md.toNumber=function(){return+this},md.toOctal=function(n,e){return Rd(this,8,n,e)},md.toPower=md.pow=function(n){var e,t,o,r,i,a,l=this,s=l.constructor,u=+(n=new s(n));if(!(l.d&&n.d&&l.d[0]&&n.d[0]))return new s(ud(+l,u));if((l=new s(l)).eq(1))return l;if(o=s.precision,i=s.rounding,n.eq(1))return wd(l,o,i);if((e=sd(n.e/7))>=n.d.length-1&&(t=u<0?-u:u)<=9007199254740991)return r=zd(s,l,t,o),n.s<0?new s(1).div(r):wd(r,o,i);if((a=l.s)<0){if(e<n.d.length-1)return new s(NaN);if(1&n.d[e]||(a=1),0==l.e&&1==l.d[0]&&1==l.d.length)return l.s=a,l}return(e=0!=(t=ud(+l,u))&&isFinite(t)?new s(t+"").e:sd(u*(Math.log("0."+Ad(l.d))/Math.LN10+l.e+1)))>s.maxE+1||e<s.minE-1?new s(e>0?a/0:0):(td=!1,s.rounding=l.s=1,t=Math.min(12,(e+"").length),(r=Fd(n.times($d(l,o+t)),o)).d&&yd((r=wd(r,o+5,1)).d,o,i)&&(e=o+10,+Ad((r=wd(Fd(n.times($d(l,e+t)),e),e+5,1)).d).slice(o+1,o+15)+1==1e14&&(r=wd(r,o+1,0))),r.s=a,td=!0,s.rounding=i,wd(r,o,i))},md.toPrecision=function(n,e){var t,o=this,r=o.constructor;return void 0===n?t=Sd(o,o.e<=r.toExpNeg||o.e>=r.toExpPos):(bd(n,1,Qu),void 0===e?e=r.rounding:bd(e,0,8),t=Sd(o=wd(new r(o),n,e),n<=o.e||o.e<=r.toExpNeg,n)),o.isNeg()&&!o.isZero()?"-"+t:t},md.toSignificantDigits=md.toSD=function(n,e){var t=this.constructor;return void 0===n?(n=t.precision,e=t.rounding):(bd(n,1,Qu),void 0===e?e=t.rounding:bd(e,0,8)),wd(new t(this),n,e)},md.toString=function(){var n=this,e=n.constructor,t=Sd(n,n.e<=e.toExpNeg||n.e>=e.toExpPos);return n.isNeg()&&!n.isZero()?"-"+t:t},md.truncated=md.trunc=function(){return wd(new this.constructor(this),this.e+1,1)},md.valueOf=md.toJSON=function(){var n=this,e=n.constructor,t=Sd(n,n.e<=e.toExpNeg||n.e>=e.toExpPos);return n.isNeg()?"-"+t:t};var xd=function(){function n(n,e,t){var o,r=0,i=n.length;for(n=n.slice();i--;)o=n[i]*e+r,n[i]=o%t|0,r=o/t|0;return r&&n.unshift(r),n}function e(n,e,t,o){var r,i;if(t!=o)i=t>o?1:-1;else for(r=i=0;r<t;r++)if(n[r]!=e[r]){i=n[r]>e[r]?1:-1;break}return i}function t(n,e,t,o){for(var r=0;t--;)n[t]-=r,r=n[t]<e[t]?1:0,n[t]=r*o+n[t]-e[t];for(;!n[0]&&n.length>1;)n.shift()}return function(o,r,i,a,l,s){var u,d,c,p,f,h,g,v,m,A,b,y,C,x,w,S,k,_,B,T,P=o.constructor,z=o.s==r.s?1:-1,E=o.d,I=r.d;if(!(E&&E[0]&&I&&I[0]))return new P(o.s&&r.s&&(E?!I||E[0]!=I[0]:I)?E&&0==E[0]||!I?0*z:z/0:NaN);for(s?(f=1,d=o.e-r.e):(s=hd,f=7,d=sd(o.e/f)-sd(r.e/f)),B=I.length,k=E.length,A=(m=new P(z)).d=[],c=0;I[c]==(E[c]||0);c++);if(I[c]>(E[c]||0)&&d--,null==i?(x=i=P.precision,a=P.rounding):x=l?i+(o.e-r.e)+1:i,x<0)A.push(1),h=!0;else{if(x=x/f+2|0,c=0,1==B){for(p=0,I=I[0],x++;(c<k||p)&&x--;c++)w=p*s+(E[c]||0),A[c]=w/I|0,p=w%I|0;h=p||c<k}else{for((p=s/(I[0]+1)|0)>1&&(I=n(I,p,s),E=n(E,p,s),B=I.length,k=E.length),S=B,y=(b=E.slice(0,B)).length;y<B;)b[y++]=0;(T=I.slice()).unshift(0),_=I[0],I[1]>=s/2&&++_;do{p=0,(u=e(I,b,B,y))<0?(C=b[0],B!=y&&(C=C*s+(b[1]||0)),(p=C/_|0)>1?(p>=s&&(p=s-1),1==(u=e(g=n(I,p,s),b,v=g.length,y=b.length))&&(p--,t(g,B<v?T:I,v,s))):(0==p&&(u=p=1),g=I.slice()),(v=g.length)<y&&g.unshift(0),t(b,g,y,s),-1==u&&(u=e(I,b,B,y=b.length))<1&&(p++,t(b,B<y?T:I,y,s)),y=b.length):0===u&&(p++,b=[0]),A[c++]=p,u&&b[0]?b[y++]=E[S]||0:(b=[E[S]],y=1)}while((S++<k||void 0!==b[0])&&x--);h=void 0!==b[0]}A[0]||A.shift()}if(1==f)m.e=d,Gu=h;else{for(c=1,p=A[0];p>=10;p/=10)c++;m.e=c+d*f-1,wd(m,l?i+m.e+1:i,a,h)}return m}}();function wd(n,e,t,o){var r,i,a,l,s,u,d,c,p,f=n.constructor;n:if(null!=e){if(!(c=n.d))return n;for(r=1,l=c[0];l>=10;l/=10)r++;if((i=e-r)<0)i+=7,a=e,s=(d=c[p=0])/ud(10,r-a-1)%10|0;else if((p=Math.ceil((i+1)/7))>=(l=c.length)){if(!o)break n;for(;l++<=p;)c.push(0);d=s=0,r=1,a=(i%=7)-7+1}else{for(d=l=c[p],r=1;l>=10;l/=10)r++;s=(a=(i%=7)-7+r)<0?0:d/ud(10,r-a-1)%10|0}if(o=o||e<0||void 0!==c[p+1]||(a<0?d:d%ud(10,r-a-1)),u=t<4?(s||o)&&(0==t||t==(n.s<0?3:2)):s>5||5==s&&(4==t||o||6==t&&(i>0?a>0?d/ud(10,r-a):0:c[p-1])%10&1||t==(n.s<0?8:7)),e<1||!c[0])return c.length=0,u?(e-=n.e+1,c[0]=ud(10,(7-e%7)%7),n.e=-e||0):c[0]=n.e=0,n;if(0==i?(c.length=p,l=1,p--):(c.length=p+1,l=ud(10,7-i),c[p]=a>0?(d/ud(10,r-a)%ud(10,a)|0)*l:0),u)for(;;){if(0==p){for(i=1,a=c[0];a>=10;a/=10)i++;for(a=c[0]+=l,l=1;a>=10;a/=10)l++;i!=l&&(n.e++,c[0]==hd&&(c[0]=1));break}if(c[p]+=l,c[p]!=hd)break;c[p--]=0,l=1}for(i=c.length;0===c[--i];)c.pop()}return td&&(n.e>f.maxE?(n.d=null,n.e=NaN):n.e<f.minE&&(n.e=0,n.d=[0])),n}function Sd(n,e,t){if(!n.isFinite())return Hd(n);var o,r=n.e,i=Ad(n.d),a=i.length;return e?(t&&(o=t-a)>0?i=i.charAt(0)+"."+i.slice(1)+Pd(o):a>1&&(i=i.charAt(0)+"."+i.slice(1)),i=i+(n.e<0?"e":"e+")+n.e):r<0?(i="0."+Pd(-r-1)+i,t&&(o=t-a)>0&&(i+=Pd(o))):r>=a?(i+=Pd(r+1-a),t&&(o=t-r-1)>0&&(i=i+"."+Pd(o))):((o=r+1)<a&&(i=i.slice(0,o)+"."+i.slice(o)),t&&(o=t-a)>0&&(r+1===a&&(i+="."),i+=Pd(o))),i}function kd(n,e){var t=n[0];for(e*=7;t>=10;t/=10)e++;return e}function _d(n,e,t){if(e>gd)throw td=!0,t&&(n.precision=t),Error(id);return wd(new n(Ku),e,1,!0)}function Bd(n,e,t){if(e>vd)throw Error(id);return wd(new n(nd),e,t,!0)}function Td(n){var e=n.length-1,t=7*e+1;if(e=n[e]){for(;e%10==0;e/=10)t--;for(e=n[0];e>=10;e/=10)t++}return t}function Pd(n){for(var e="";n--;)e+="0";return e}function zd(n,e,t,o){var r,i=new n(1),a=Math.ceil(o/7+4);for(td=!1;;){if(t%2&&jd((i=i.times(e)).d,a)&&(r=!0),0===(t=sd(t/2))){t=i.d.length-1,r&&0===i.d[t]&&++i.d[t];break}jd((e=e.times(e)).d,a)}return td=!0,i}function Ed(n){return 1&n.d[n.d.length-1]}function Id(n,e,t){for(var o,r,i=new n(e[0]),a=0;++a<e.length;){if(!(r=new n(e[a])).s){i=r;break}((o=i.cmp(r))===t||0===o&&i.s===t)&&(i=r)}return i}function Fd(n,e){var t,o,r,i,a,l,s,u=0,d=0,c=0,p=n.constructor,f=p.rounding,h=p.precision;if(!n.d||!n.d[0]||n.e>17)return new p(n.d?n.d[0]?n.s<0?0:1/0:1:n.s?n.s<0?0:n:NaN);for(null==e?(td=!1,s=h):s=e,l=new p(.03125);n.e>-2;)n=n.times(l),c+=5;for(s+=o=Math.log(ud(2,c))/Math.LN10*2+5|0,t=i=a=new p(1),p.precision=s;;){if(i=wd(i.times(n),s,1),t=t.times(++d),Ad((l=a.plus(xd(i,t,s,1))).d).slice(0,s)===Ad(a.d).slice(0,s)){for(r=c;r--;)a=wd(a.times(a),s,1);if(null!=e)return p.precision=h,a;if(!(u<3&&yd(a.d,s-o,f,u)))return wd(a,p.precision=h,f,td=!0);p.precision=s+=10,t=i=l=new p(1),d=0,u++}a=l}}function $d(n,e){var t,o,r,i,a,l,s,u,d,c,p,f=1,h=n,g=h.d,v=h.constructor,m=v.rounding,A=v.precision;if(h.s<0||!g||!g[0]||!h.e&&1==g[0]&&1==g.length)return new v(g&&!g[0]?-1/0:1!=h.s?NaN:g?0:h);if(null==e?(td=!1,d=A):d=e,v.precision=d+=10,o=(t=Ad(g)).charAt(0),!(Math.abs(i=h.e)<15e14))return u=_d(v,d+2,A).times(i+""),h=$d(new v(o+"."+t.slice(1)),d-10).plus(u),v.precision=A,null==e?wd(h,A,m,td=!0):h;for(;o<7&&1!=o||1==o&&t.charAt(1)>3;)o=(t=Ad((h=h.times(n)).d)).charAt(0),f++;for(i=h.e,o>1?(h=new v("0."+t),i++):h=new v(o+"."+t.slice(1)),c=h,s=a=h=xd(h.minus(1),h.plus(1),d,1),p=wd(h.times(h),d,1),r=3;;){if(a=wd(a.times(p),d,1),Ad((u=s.plus(xd(a,new v(r),d,1))).d).slice(0,d)===Ad(s.d).slice(0,d)){if(s=s.times(2),0!==i&&(s=s.plus(_d(v,d+2,A).times(i+""))),s=xd(s,new v(f),d,1),null!=e)return v.precision=A,s;if(!yd(s.d,d-10,m,l))return wd(s,v.precision=A,m,td=!0);v.precision=d+=10,u=a=h=xd(c.minus(1),c.plus(1),d,1),p=wd(h.times(h),d,1),r=l=1}s=u,r+=2}}function Hd(n){return String(n.s*n.s/0)}function Nd(n,e){var t,o,r;for((t=e.indexOf("."))>-1&&(e=e.replace(".","")),(o=e.search(/e/i))>0?(t<0&&(t=o),t+=+e.slice(o+1),e=e.substring(0,o)):t<0&&(t=e.length),o=0;48===e.charCodeAt(o);o++);for(r=e.length;48===e.charCodeAt(r-1);--r);if(e=e.slice(o,r)){if(r-=o,n.e=t=t-o-1,n.d=[],o=(t+1)%7,t<0&&(o+=7),o<r){for(o&&n.d.push(+e.slice(0,o)),r-=7;o<r;)n.d.push(+e.slice(o,o+=7));o=7-(e=e.slice(o)).length}else o-=r;for(;o--;)e+="0";n.d.push(+e),td&&(n.e>n.constructor.maxE?(n.d=null,n.e=NaN):n.e<n.constructor.minE&&(n.e=0,n.d=[0]))}else n.e=0,n.d=[0];return n}function Wd(n,e){var t,o,r,i,a,l,s,u,d;if(e.indexOf("_")>-1){if(e=e.replace(/(\d)_(?=\d)/g,"$1"),fd.test(e))return Nd(n,e)}else if("Infinity"===e||"NaN"===e)return+e||(n.s=NaN),n.e=NaN,n.d=null,n;if(cd.test(e))t=16,e=e.toLowerCase();else if(dd.test(e))t=2;else{if(!pd.test(e))throw Error(rd+e);t=8}for((i=e.search(/p/i))>0?(s=+e.slice(i+1),e=e.substring(2,i)):e=e.slice(2),a=(i=e.indexOf("."))>=0,o=n.constructor,a&&(i=(l=(e=e.replace(".","")).length)-i,r=zd(o,new o(t),i,2*i)),i=d=(u=Cd(e,t,hd)).length-1;0===u[i];--i)u.pop();return i<0?new o(0*n.s):(n.e=kd(u,d),n.d=u,td=!1,a&&(n=xd(n,r,4*l)),s&&(n=n.times(Math.abs(s)<54?ud(2,s):Pc.pow(2,s))),td=!0,n)}function Md(n,e,t,o,r){var i,a,l,s,u=n.precision,d=Math.ceil(u/7);for(td=!1,s=t.times(t),l=new n(o);;){if(a=xd(l.times(s),new n(e++*e++),u,1),l=r?o.plus(a):o.minus(a),o=xd(a.times(s),new n(e++*e++),u,1),void 0!==(a=l.plus(o)).d[d]){for(i=d;a.d[i]===l.d[i]&&i--;);if(-1==i)break}i=l,l=o,o=a,a=i}return td=!0,a.d.length=d+1,a}function Ld(n,e){for(var t=n;--e;)t*=n;return t}function Dd(n,e){var t,o=e.s<0,r=Bd(n,n.precision,1),i=r.times(.5);if((e=e.abs()).lte(i))return Zu=o?4:1,e;if((t=e.divToInt(r)).isZero())Zu=o?3:2;else{if((e=e.minus(t.times(r))).lte(i))return Zu=Ed(t)?o?2:3:o?4:1,e;Zu=Ed(t)?o?1:4:o?3:2}return e.minus(r).abs()}function Rd(n,e,t,o){var r,i,a,l,s,u,d,c,p,f=n.constructor,h=void 0!==t;if(h?(bd(t,1,Qu),void 0===o?o=f.rounding:bd(o,0,8)):(t=f.precision,o=f.rounding),n.isFinite()){for(h?(r=2,16==e?t=4*t-3:8==e&&(t=3*t-2)):r=e,(a=(d=Sd(n)).indexOf("."))>=0&&(d=d.replace(".",""),(p=new f(1)).e=d.length-a,p.d=Cd(Sd(p),10,r),p.e=p.d.length),i=s=(c=Cd(d,10,r)).length;0==c[--s];)c.pop();if(c[0]){if(a<0?i--:((n=new f(n)).d=c,n.e=i,c=(n=xd(n,p,t,o,0,r)).d,i=n.e,u=Gu),a=c[t],l=r/2,u=u||void 0!==c[t+1],u=o<4?(void 0!==a||u)&&(0===o||o===(n.s<0?3:2)):a>l||a===l&&(4===o||u||6===o&&1&c[t-1]||o===(n.s<0?8:7)),c.length=t,u)for(;++c[--t]>r-1;)c[t]=0,t||(++i,c.unshift(1));for(s=c.length;!c[s-1];--s);for(a=0,d="";a<s;a++)d+=Ju.charAt(c[a]);if(h){if(s>1)if(16==e||8==e){for(a=16==e?4:3,--s;s%a;s++)d+="0";for(s=(c=Cd(d,r,e)).length;!c[s-1];--s);for(a=1,d="1.";a<s;a++)d+=Ju.charAt(c[a])}else d=d.charAt(0)+"."+d.slice(1);d=d+(i<0?"p":"p+")+i}else if(i<0){for(;++i;)d="0"+d;d="0."+d}else if(++i>s)for(i-=s;i--;)d+="0";else i<s&&(d=d.slice(0,i)+"."+d.slice(i))}else d=h?"0p+0":"0";d=(16==e?"0x":2==e?"0b":8==e?"0o":"")+d}else d=Hd(n);return n.s<0?"-"+d:d}function jd(n,e){if(n.length>e)return n.length=e,!0}function Od(n){return new this(n).abs()}function Vd(n){return new this(n).acos()}function Yd(n){return new this(n).acosh()}function Ud(n,e){return new this(n).plus(e)}function Xd(n){return new this(n).asin()}function Gd(n){return new this(n).asinh()}function Zd(n){return new this(n).atan()}function qd(n){return new this(n).atanh()}function Qd(n,e){n=new this(n),e=new this(e);var t,o=this.precision,r=this.rounding,i=o+4;return n.s&&e.s?n.d||e.d?!e.d||n.isZero()?(t=e.s<0?Bd(this,o,r):new this(0)).s=n.s:!n.d||e.isZero()?(t=Bd(this,i,1).times(.5)).s=n.s:e.s<0?(this.precision=i,this.rounding=1,t=this.atan(xd(n,e,i,1)),e=Bd(this,i,1),this.precision=o,this.rounding=r,t=n.s<0?t.minus(e):t.plus(e)):t=this.atan(xd(n,e,i,1)):(t=Bd(this,i,1).times(e.s>0?.25:.75)).s=n.s:t=new this(NaN),t}function Jd(n){return new this(n).cbrt()}function Kd(n){return wd(n=new this(n),n.e+1,2)}function nc(n,e,t){return new this(n).clamp(e,t)}function ec(n){if(!n||"object"!=typeof n)throw Error(od+"Object expected");var e,t,o,r=!0===n.defaults,i=["precision",1,Qu,"rounding",0,8,"toExpNeg",-qu,0,"toExpPos",0,qu,"maxE",0,qu,"minE",-qu,0,"modulo",0,9];for(e=0;e<i.length;e+=3)if(t=i[e],r&&(this[t]=ed[t]),void 0!==(o=n[t])){if(!(sd(o)===o&&o>=i[e+1]&&o<=i[e+2]))throw Error(rd+t+": "+o);this[t]=o}if(t="crypto",r&&(this[t]=ed[t]),void 0!==(o=n[t])){if(!0!==o&&!1!==o&&0!==o&&1!==o)throw Error(rd+t+": "+o);if(o){if("undefined"==typeof crypto||!crypto||!crypto.getRandomValues&&!crypto.randomBytes)throw Error(ad);this[t]=!0}else this[t]=!1}return this}function tc(n){return new this(n).cos()}function oc(n){return new this(n).cosh()}function rc(n,e){return new this(n).div(e)}function ic(n){return new this(n).exp()}function ac(n){return wd(n=new this(n),n.e+1,3)}function lc(){var n,e,t=new this(0);for(td=!1,n=0;n<arguments.length;)if((e=new this(arguments[n++])).d)t.d&&(t=t.plus(e.times(e)));else{if(e.s)return td=!0,new this(1/0);t=e}return td=!0,t.sqrt()}function sc(n){return n instanceof Pc||n&&n.toStringTag===ld||!1}function uc(n){return new this(n).ln()}function dc(n,e){return new this(n).log(e)}function cc(n){return new this(n).log(2)}function pc(n){return new this(n).log(10)}function fc(){return Id(this,arguments,-1)}function hc(){return Id(this,arguments,1)}function gc(n,e){return new this(n).mod(e)}function vc(n,e){return new this(n).mul(e)}function mc(n,e){return new this(n).pow(e)}function Ac(n){var e,t,o,r,i=0,a=new this(1),l=[];if(void 0===n?n=this.precision:bd(n,1,Qu),o=Math.ceil(n/7),this.crypto)if(crypto.getRandomValues)for(e=crypto.getRandomValues(new Uint32Array(o));i<o;)(r=e[i])>=429e7?e[i]=crypto.getRandomValues(new Uint32Array(1))[0]:l[i++]=r%1e7;else{if(!crypto.randomBytes)throw Error(ad);for(e=crypto.randomBytes(o*=4);i<o;)(r=e[i]+(e[i+1]<<8)+(e[i+2]<<16)+((127&e[i+3])<<24))>=214e7?crypto.randomBytes(4).copy(e,i):(l.push(r%1e7),i+=4);i=o/4}else for(;i<o;)l[i++]=1e7*Math.random()|0;for(n%=7,(o=l[--i])&&n&&(r=ud(10,7-n),l[i]=(o/r|0)*r);0===l[i];i--)l.pop();if(i<0)t=0,l=[0];else{for(t=-1;0===l[0];t-=7)l.shift();for(o=1,r=l[0];r>=10;r/=10)o++;o<7&&(t-=7-o)}return a.e=t,a.d=l,a}function bc(n){return wd(n=new this(n),n.e+1,this.rounding)}function yc(n){return(n=new this(n)).d?n.d[0]?n.s:0*n.s:n.s||NaN}function Cc(n){return new this(n).sin()}function xc(n){return new this(n).sinh()}function wc(n){return new this(n).sqrt()}function Sc(n,e){return new this(n).sub(e)}function kc(){var n=0,e=arguments,t=new this(e[n]);for(td=!1;t.s&&++n<e.length;)t=t.plus(e[n]);return td=!0,wd(t,this.precision,this.rounding)}function _c(n){return new this(n).tan()}function Bc(n){return new this(n).tanh()}function Tc(n){return wd(n=new this(n),n.e+1,1)}md[Symbol.for("nodejs.util.inspect.custom")]=md.toString,md[Symbol.toStringTag]="Decimal";var Pc=md.constructor=function n(e){var t,o,r;function i(n){var e,t,o,r=this;if(!(r instanceof i))return new i(n);if(r.constructor=i,sc(n))return r.s=n.s,void(td?!n.d||n.e>i.maxE?(r.e=NaN,r.d=null):n.e<i.minE?(r.e=0,r.d=[0]):(r.e=n.e,r.d=n.d.slice()):(r.e=n.e,r.d=n.d?n.d.slice():n.d));if("number"===(o=typeof n)){if(0===n)return r.s=1/n<0?-1:1,r.e=0,void(r.d=[0]);if(n<0?(n=-n,r.s=-1):r.s=1,n===~~n&&n<1e7){for(e=0,t=n;t>=10;t/=10)e++;return void(td?e>i.maxE?(r.e=NaN,r.d=null):e<i.minE?(r.e=0,r.d=[0]):(r.e=e,r.d=[n]):(r.e=e,r.d=[n]))}return 0*n!=0?(n||(r.s=NaN),r.e=NaN,void(r.d=null)):Nd(r,n.toString())}if("string"===o)return 45===(t=n.charCodeAt(0))?(n=n.slice(1),r.s=-1):(43===t&&(n=n.slice(1)),r.s=1),fd.test(n)?Nd(r,n):Wd(r,n);if("bigint"===o)return n<0?(n=-n,r.s=-1):r.s=1,Nd(r,n.toString());throw Error(rd+n)}if(i.prototype=md,i.ROUND_UP=0,i.ROUND_DOWN=1,i.ROUND_CEIL=2,i.ROUND_FLOOR=3,i.ROUND_HALF_UP=4,i.ROUND_HALF_DOWN=5,i.ROUND_HALF_EVEN=6,i.ROUND_HALF_CEIL=7,i.ROUND_HALF_FLOOR=8,i.EUCLID=9,i.config=i.set=ec,i.clone=n,i.isDecimal=sc,i.abs=Od,i.acos=Vd,i.acosh=Yd,i.add=Ud,i.asin=Xd,i.asinh=Gd,i.atan=Zd,i.atanh=qd,i.atan2=Qd,i.cbrt=Jd,i.ceil=Kd,i.clamp=nc,i.cos=tc,i.cosh=oc,i.div=rc,i.exp=ic,i.floor=ac,i.hypot=lc,i.ln=uc,i.log=dc,i.log10=pc,i.log2=cc,i.max=fc,i.min=hc,i.mod=gc,i.mul=vc,i.pow=mc,i.random=Ac,i.round=bc,i.sign=yc,i.sin=Cc,i.sinh=xc,i.sqrt=wc,i.sub=Sc,i.sum=kc,i.tan=_c,i.tanh=Bc,i.trunc=Tc,void 0===e&&(e={}),e&&!0!==e.defaults)for(r=["precision","rounding","toExpNeg","toExpPos","maxE","minE","modulo","crypto"],t=0;t<r.length;)e.hasOwnProperty(o=r[t++])||(e[o]=this[o]);return i.config(e),i}(ed);Ku=new Pc(Ku),nd=new Pc(nd);var zc={name:"arrow",enabled:!0,phase:"main",fn:function(n){var e,t=n.state,o=n.name,r=n.options,i=t.elements.arrow,a=t.modifiersData.popperOffsets,l=ea(t.placement),s=oa(l),u=[Di,Li].indexOf(l)>=0?"height":"width";if(i&&a){var d=function(n,e){return ia("number"!=typeof(n="function"==typeof n?n(Object.assign({},e.rects,{placement:e.placement})):n)?n:aa(n,ji))}(r.padding,t),c=zi(i),p="y"===s?Wi:Di,f="y"===s?Mi:Li,h=t.rects.reference[u]+t.rects.reference[s]-a[s]-t.rects.popper[u],g=a[s]-t.rects.reference[s],v=Ni(i),m=v?"y"===s?v.clientHeight||0:v.clientWidth||0:0,A=h/2-g/2,b=d[p],y=m-c[u]-d[f],C=m/2-c[u]/2+A,x=Ba(b,C,y),w=s;t.modifiersData[o]=((e={})[w]=x,e.centerOffset=x-C,e)}},effect:function(n){var e=n.state,t=n.options.element,o=void 0===t?"[data-popper-arrow]":t;null!=o&&("string"!=typeof o||(o=e.elements.popper.querySelector(o)))&&Qi(e.elements.popper,o)&&(e.elements.arrow=o)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};const Ec={directives:{domresize:Hr()},components:{},props:{value:{type:Number,default:0},valueMin:{type:Number,default:0},valueMax:{type:Number,default:100},valueStep:{type:Number,default:1},valueDecimal:{type:Number,default:0},progBorderRadius:{type:Number,default:5},progHeight:{type:Number,default:4},progColor:{type:String,default:"#74a4d9"},progColorDisabled:{type:String,default:"#c5c5c5"},progBackgroundColor:{type:String,default:"#eee"},progBackgroundColorDisabled:{type:String,default:"#f2f2f2"},sliderSize:{type:Number,default:20},sliderBackgroundColor:{type:String,default:"blue darken-3"},sliderBackgroundColorHover:{type:String,default:"blue darken-2"},sliderBackgroundColorDisabled:{type:String,default:"#aaa"},cmpZIndex:{type:Number,default:3e3},tooltipPlacementDist:{type:Number,default:5},tooltipBorderRadius:{type:Number,default:4},tooltipTextFontSize:{type:String,default:"0.85rem"},tooltipTextColor:{type:String,default:"white"},tooltipBackgroundColor:{type:String,default:"#666"},editable:{type:Boolean,default:!0}},data:function(){return{panelWidth:0,panelHeight:0,das:null,hoverTrans:!1,dragTrans:!1,popperInstance:null,popperShow:!1,r:null,rt:null}},mounted:function(){let n=this,e=function(n,e,t={}){let o=null,r=null,i=null,a=null,l=null,s=null,u=null,d=null,c=null,p=null,f=null,h=null,g=null,v=null,m=null,A=!1,b=On(t,"getHeighRatio",null);en(b)||(b=()=>1);let y=On(t,"getWidthRatio",null);en(y)||(y=()=>1);let C=On(t,"stopScrollPropagationForPanel",null);ni(C)||(C=!1);let x=On(t,"stopTouchDragPropagationForPanel",null);ni(x)||(x=!1);let w=On(t,"useTouchDragForPanel",null);ni(w)||(w=!0);let S=n,k=e,_=$r();return o=n=>{let e=n.deltaY/Math.abs(n.deltaY),t=n.deltaX/Math.abs(n.deltaX);_.emit("scrollPanel",{ratioY:e,ratioX:t}),C&&gu(n)},S.addEventListener("wheel",o),r=n=>{if(w){let e=On(n,"touches.0.clientY",0),t=On(n,"touches.0.clientX",0),o=-e*b(),r=-t*y();A=!0,_.emit("pressBar",{clientY:o,clientX:r}),x&&gu(n)}},S.addEventListener("touchstart",r),i=n=>{if(w&&A){let e=On(n,"touches.0.clientY",0),t=On(n,"touches.0.clientX",0),o=-e*b(),r=-t*y();_.emit("dragBar",{clientY:o,clientX:r}),x&&gu(n)}},S.addEventListener("touchmove",i,{passive:!1}),a=n=>{w&&A&&(A=!1,_.emit("freeBar"),x&&gu(n))},S.addEventListener("touchend",a),l=n=>{A=!0,_.emit("pressBar",{clientY:n.clientY,clientX:n.clientX})},k.addEventListener("mousedown",l),s=n=>{A&&(A=!1,_.emit("freeBar"))},k.addEventListener("mouseup",s),u=n=>{A=!0,_.emit("pressBar",{clientY:n.touches[0].clientY,clientX:n.touches[0].clientX})},k.addEventListener("touchstart",u),d=n=>{A&&(_.emit("dragBar",{clientY:n.touches[0].clientY,clientX:n.touches[0].clientX}),gu(n))},k.addEventListener("touchmove",d,{passive:!1}),c=n=>{A&&(A=!1,_.emit("freeBar"))},k.addEventListener("touchend",c),p=n=>{A&&_.emit("dragBar",{clientY:n.clientY,clientX:n.clientX})},window.addEventListener("mousemove",p),f=n=>{A&&(A=!1,_.emit("freeBar"),C&&gu(n))},window.addEventListener("mouseup",f),h=n=>{},window.addEventListener("scroll",h,{passive:!1}),g=n=>{},window.addEventListener("wheel",g,{passive:!1}),v=n=>{},document.addEventListener("scroll",v,{passive:!1}),m=n=>{},document.addEventListener("wheel",m,{passive:!1}),_.clear=function(){S.removeEventListener("wheel",o),S.removeEventListener("touchstart",r),S.removeEventListener("touchmove",i),S.removeEventListener("touchend",a),k.removeEventListener("mousedown",l),k.removeEventListener("mouseup",s),k.removeEventListener("touchstart",u),k.removeEventListener("touchmove",d),k.removeEventListener("touchend",c),window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",f),window.removeEventListener("scroll",h),window.removeEventListener("wheel",g),document.removeEventListener("scroll",v),document.removeEventListener("wheel",m)},_}(n.$refs.divPanel,n.$refs.divBar,{useTouchDragForPanel:!1});e.on("dragBar",n.dragBar),e.on("pressBar",n.pressBar),e.on("freeBar",n.freeBar),n.das=e},beforeDestroy:function(){let n=this;n.das&&n.das.clear()},computed:{changeParam:function(){let n=this,e=0;try{e=(n.value-n.valueMin)/(n.valueMax-n.valueMin)}catch(n){}e=n.limitRatio(e);let t=n.tickRatio(e);return n.r=e,n.rt=t,""},heightCir:function(){return this.sliderSize},widthCir:function(){return this.heightCir},effecting:function(){let n=this;if(!n.editable)return;let e=n.hoverTrans||n.dragTrans;return e?n.showPopper():(n.hidePopper(),n.r=n.rt),e},progWidth:function(){return this.panelWidth-this.sliderSize},useProgBorderRadius:function(){return`border-radius:${this.progBorderRadius}px;`},effProgColor:function(){return qt(this.progColor)},effProgColorDisabled:function(){return qt(this.progColorDisabled)},useProgColor:function(){let n=this;return n.editable?n.effProgColor:n.effProgColorDisabled},effProgBackgroundColor:function(){return qt(this.progBackgroundColor)},effProgBackgroundColorDisabled:function(){return qt(this.progBackgroundColorDisabled)},useProgBackgroundColor:function(){let n=this;return n.editable?n.effProgBackgroundColor:n.effProgBackgroundColorDisabled},effSliderBackgroundColor:function(){return qt(this.sliderBackgroundColor)},effSliderBackgroundColorHover:function(){return qt(this.sliderBackgroundColorHover)},effSliderBackgroundColorDisabled:function(){return qt(this.sliderBackgroundColorDisabled)},useSliderBackgroundColor:function(){let n=this;return n.editable?n.effecting?n.effSliderBackgroundColorHover:n.effSliderBackgroundColor:n.effSliderBackgroundColorDisabled},useTooltipBorderRadius:function(){let n=this;return Zr(n.tooltipBorderRadius)?`border-radius:${n.tooltipBorderRadius}px;`:""},useTooltipTextFontSize:function(){let n=this.tooltipTextFontSize;return n=qr(n,";",""),`font-size:${n};`},useTooltipTextColor:function(){return qt(this.tooltipTextColor)},useTooltipBackgroundColor:function(){return qt(this.tooltipBackgroundColor)},valueDig:function(){let n=this;return function(n,e=0){return uo(n)&&yl(e)?(n=co(n),vo(n,e).toFixed(e)):""}(n.rt*(n.valueMax-n.valueMin)+n.valueMin,n.valueDecimal)}},methods:{resizePanel:function(n){this.panelWidth=n.snew.offsetWidth,this.panelHeight=n.snew.offsetHeight},limitRatio:function(n){return n=Math.min(n,1),n=Math.max(n,0)},tickRatio:function(n){let e=this,t=0;try{let o=e.valueMax-e.valueMin,r=e.valueStep/o;t=function(n,e=0,t={}){yl(e)||(e=0),e=mo(e);let o=On(t,"rounding","");return"ROUND_HALF_UP"!==o&&"ROUND_HALF_EVEN"!==o&&(o="ROUND_HALF_UP"),uo(n)?new Pc(n).toDecimalPlaces(e,Pc[o]).toNumber():""}(n/r)*r}catch(n){}return t},dragBar:function(n){let e=this;if(!e.editable)return;let t=e.$el.getBoundingClientRect(),o=n.clientX-e.sliderSize/2,r=e.progWidth,i=0;r>0&&(i=(o-t.left)/r),i=e.limitRatio(i);let a=e.tickRatio(i);e.r=i,e.rt=a;let l=co(e.valueDig);e.updatePopper(),e.$emit("input",l)},pressBar:function(){this.dragTrans=!0},freeBar:function(){this.dragTrans=!1},showPopper:function(n){let e=this;if(!e.editable)return;let t=On(e,"$refs.divTrigger",null);if(null===t)return;let o=On(e,"$refs.divContent",null);if(null===o)return;let r={strategy:"fixed",placement:"top",modifiers:[zc,{name:"arrow",options:{padding:5}},xa,{name:"flip",options:{fallbackPlacements:["top","top-start","top-end","bottom","bottom-start","bottom-end"]}},wa,{name:"offset",options:{offset:({placement:n,reference:t,popper:o})=>[0,e.tooltipPlacementDist]}},_a]};e.popperInstance=va(t,o,r)},updatePopper:function(n){let e=this;e.editable&&e.popperInstance&&e.popperInstance.update()},hidePopper:function(n){let e=this;e.popperInstance&&(e.popperInstance.destroy(),e.popperInstance=null)}}};var Ic=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],style:"user-select:none;",attrs:{changeParam:n.changeParam},on:{domresize:n.resizePanel}},[t("div",{style:"position:relative; width:100%; height:"+n.sliderSize+"px;"},[t("div",{style:"position:absolute; top:"+(n.sliderSize/2-n.progHeight/2)+"px; left:"+n.sliderSize/2+"px; width:"+n.progWidth+"px;"},[t("div",{ref:"divPanel",style:"position:relative; width:"+n.progWidth+"px;",attrs:{_click:"clickProg"}},[t("div",{style:n.useProgBorderRadius+" overflow:hidden; width:"+n.progWidth+"px; height:"+n.progHeight+"px;"},[t("div",{style:"background:"+n.useProgBackgroundColor+"; height:"+n.progHeight+"px;"},[t("div",{style:"background:"+n.useProgColor+"; width:"+n.rt*n.progWidth+"px; height:"+n.progHeight+"px;"})])]),n._v(" "),t("div",{style:"position:absolute; left:"+(n.rt*n.progWidth-n.widthCir/2)+"px; top:"+(n.progHeight/2-n.heightCir/2)+"px; z-index:1; "+(n.editable?"cursor:pointer;":"")},[t("div",{ref:"divTrigger",staticClass:"ts bs",style:"width:"+n.widthCir+"px; height:"+n.heightCir+"px; border-radius:50%; background:"+n.useSliderBackgroundColor+"; outline:none;"})]),n._v(" "),t("div",{ref:"divBar",style:"position:absolute; left:"+(n.r*n.progWidth-n.widthCir/2)+"px; top:"+(n.progHeight/2-n.heightCir/2)+"px; z-index:2; "+(n.editable?"cursor:pointer;":"")},[t("div",{style:"width:"+n.widthCir+"px; height:"+n.heightCir+"px; border-radius:50%; opacity:0; outline:none;",on:{mouseenter:function(e){n.hoverTrans=!0},mouseleave:function(e){n.hoverTrans=!1}}})])])])]),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:n.effecting,expression:"effecting"},{name:"domresize",rawName:"v-domresize"}],ref:"divContent",staticClass:"WPopperFix",style:"z-index:"+n.cmpZIndex+";",on:{domresize:n.updatePopper}},[t("div",{style:"padding:2px 5px; font-size:0.8rem; "+n.useTooltipTextFontSize+" color:"+n.useTooltipTextColor+"; background:"+n.useTooltipBackgroundColor+"; "+n.useTooltipBorderRadius},[n._v("\n "+n._s(n.valueDig)+"\n "),t("div",{staticClass:"arrow",attrs:{"data-popper-arrow":""}})])])])};Ic._withStripped=!0;const Fc={components:{WGroupChipRadio:Iu,WPanelLabelItem:Hu,WText:Xu,WSlider:e({render:Ic,staticRenderFns:[]},function(n){n&&n("data-v-062a5ce9_0",{source:"\n.ts[data-v-062a5ce9] {\r\n transition:all 0.3s;\n}\n.bs[data-v-062a5ce9] {\r\n box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);\n}\n.WPopperFix[data-popper-reference-hidden][data-v-062a5ce9] {\r\n visibility: hidden;\r\n pointer-events: none;\n}\n.arrow[data-v-062a5ce9],\r\n.arrow[data-v-062a5ce9]::before {\r\n position: absolute;\r\n width: 5px;\r\n height: 5px;\r\n background: inherit;\n}\n.arrow[data-v-062a5ce9] {\r\n visibility: hidden;\n}\n.arrow[data-v-062a5ce9]::before {\r\n visibility: visible;\r\n content: '';\r\n transform: rotate(45deg);\n}\r\n/* .arrow::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n margin-left: -5px;\r\n border-width: 5px;\r\n border-style: solid;\r\n border-color: black transparent transparent transparent;\r\n} */\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\node_modules\\w-component-vue\\src\\components\\WSlider.vue"],names:[],mappings:";AA6qBA;IACA,mBAAA;AACA;AACA;IACA,kHAAA;AACA;AACA;IACA,kBAAA;IACA,oBAAA;AACA;AACA;;IAEA,kBAAA;IACA,UAAA;IACA,WAAA;IACA,mBAAA;AACA;AACA;IACA,kBAAA;AACA;AACA;IACA,mBAAA;IACA,WAAA;IACA,wBAAA;AACA;AACA;;;;;;;;;GASA",file:"WSlider.vue",sourcesContent:["<template>\r\n <div\r\n :style=\"`user-select:none;`\"\r\n :changeParam=\"changeParam\"\r\n v-domresize\r\n @domresize=\"resizePanel\"\r\n >\r\n\r\n <div\r\n :style=\"`position:relative; width:100%; height:${sliderSize}px;`\"\r\n >\r\n\r\n <div :style=\"`position:absolute; top:${sliderSize/2-progHeight/2}px; left:${sliderSize/2}px; width:${progWidth}px;`\">\r\n\r\n <div\r\n ref=\"divPanel\"\r\n :style=\"`position:relative; width:${progWidth}px;`\"\r\n _click=\"clickProg\"\r\n >\r\n\r\n <div :style=\"`${useProgBorderRadius} overflow:hidden; width:${progWidth}px; height:${progHeight}px;`\">\r\n <div :style=\"`background:${useProgBackgroundColor}; height:${progHeight}px;`\">\r\n <div :style=\"`background:${useProgColor}; width:${(rt)*progWidth}px; height:${progHeight}px;`\"></div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n :style=\"`position:absolute; left:${(rt)*progWidth-widthCir/2}px; top:${progHeight/2-heightCir/2}px; z-index:1; ${editable?'cursor:pointer;':''}`\"\r\n >\r\n\r\n <div\r\n ref=\"divTrigger\"\r\n class=\"ts bs\"\r\n :style=\"`width:${widthCir}px; height:${heightCir}px; border-radius:50%; background:${useSliderBackgroundColor}; outline:none;`\"\r\n ></div>\r\n\r\n </div>\r\n\r\n <div\r\n ref=\"divBar\"\r\n :style=\"`position:absolute; left:${(r)*progWidth-widthCir/2}px; top:${progHeight/2-heightCir/2}px; z-index:2; ${editable?'cursor:pointer;':''}`\"\r\n >\r\n\r\n <div\r\n :style=\"`width:${widthCir}px; height:${heightCir}px; border-radius:50%; opacity:0; outline:none;`\"\r\n @mouseenter=\"hoverTrans=true\"\r\n @mouseleave=\"hoverTrans=false\"\r\n ></div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n \x3c!-- 不能給予position因會被popupjs洗掉, 但可給z-index, 且popupjs會改用transform:translate定位 --\x3e\r\n \x3c!-- 若使用minWidth, 會使popupjs重算給予minWidth用以自動撐開彈窗寬度失效, 若於其內slot外添加div給予minWidth, 亦會使popupjs給予minWidth機制失效, 待研究 --\x3e\r\n <div\r\n ref=\"divContent\"\r\n class=\"WPopperFix\"\r\n :style=\"`z-index:${cmpZIndex};`\"\r\n v-show=\"effecting\"\r\n v-domresize\r\n @domresize=\"updatePopper\"\r\n >\r\n \x3c!-- 不使用v-if來重產dom, 因開啟arrow會有顯示後來不及定位問題 --\x3e\r\n <div\r\n :style=\"`padding:2px 5px; font-size:0.8rem; ${useTooltipTextFontSize} color:${useTooltipTextColor}; background:${useTooltipBackgroundColor}; ${useTooltipBorderRadius}`\"\r\n >\r\n {{valueDig}}\r\n <div class=\"arrow\" data-popper-arrow></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport get from 'lodash-es/get.js'\r\nimport isNumber from 'lodash-es/isNumber.js'\r\nimport dig from 'wsemi/src/dig.mjs'\r\nimport round from 'wsemi/src/round.mjs'\r\nimport cdbl from 'wsemi/src/cdbl.mjs'\r\nimport replace from 'wsemi/src/replace.mjs'\r\nimport domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport { createPopper } from '@popperjs/core/lib/popper-lite.js' //不用安裝@popperjs/core, 因wsemi安裝tippy.js內有依賴@popperjs/core\r\nimport flip from '@popperjs/core/lib/modifiers/flip.js'\r\nimport offset from '@popperjs/core/lib/modifiers/offset.js'\r\nimport arrow from '@popperjs/core/lib/modifiers/arrow.js'\r\nimport hide from '@popperjs/core/lib/modifiers/hide.js'\r\n//import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js'\r\n//import computeStyles from '@popperjs/core/lib/modifiers/computeStyles'\r\n\r\n\r\n/**\r\n * @vue-prop {Number} [value=0] 輸入值數字，介於valueMin與valueMax之間，預設0\r\n * @vue-prop {Number} [valueMin=0] 輸入最小值數字，預設0\r\n * @vue-prop {Number} [valueMax=100] 輸入最大值數字，預設100\r\n * @vue-prop {Number} [valueStep=1] 輸入間隔數字，預設1\r\n * @vue-prop {Number} [valueDecimal=0] 輸入值取小數位數字，用於可拖選值具有小數時，預設0\r\n * @vue-prop {Number} [progBorderRadius=5] 輸入值域條框圓角度數字，單位為px，預設5\r\n * @vue-prop {Number} [progHeight=4] 輸入值域條高度數字，單位為px，預設4\r\n * @vue-prop {String} [progColor='#74a4d9'] 輸入值域條顏色字串，預設'#74a4d9'\r\n * @vue-prop {String} [progColorDisabled='#c5c5c5'] 輸入不可編輯時值域條顏色字串，預設'#c5c5c5'\r\n * @vue-prop {String} [progBackgroundColor='#eee'] 輸入值域條背景顏色字串，預設'#eee'\r\n * @vue-prop {String} [progBackgroundColorDisabled='#f2f2f2'] 輸入不可編輯時值域條背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {Number} [sliderSize=20] 輸入拖曳球尺寸數字，單位為px，預設20\r\n * @vue-prop {String} [sliderBackgroundColor='blue darken-3'] 輸入拖曳球背景顏色字串，預設'blue darken-3'\r\n * @vue-prop {String} [sliderBackgroundColorHover='blue darken-2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'blue darken-2'\r\n * @vue-prop {String} [sliderBackgroundColorDisabled='#aaa'] 輸入不可編輯時拖曳球背景顏色字串，預設'#aaa'\r\n * @vue-prop {Number} [cmpZIndex=3000] 輸入提示窗使用z-index數字，預設3000\r\n * @vue-prop {Number} [tooltipPlacementDist=5] 輸入提示窗距離觸發元素距離數字，單位為px，預設5\r\n * @vue-prop {Number} [tooltipBorderRadius=5] 輸入提示窗框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [tooltipTextFontSize='0.85rem'] 輸入提示窗框文字字型大小字串，預設'0.85rem'\r\n * @vue-prop {String} [tooltipTextColor='white'] 輸入提示窗框文字顏色字串，預設'white'\r\n * @vue-prop {String} [tooltipBackgroundColor='#666'] 輸入值域條背景顏色字串，預設'#666'\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n directives: {\r\n domresize: domResize(),\r\n },\r\n components: {\r\n },\r\n props: {\r\n value: {\r\n type: Number,\r\n default: 0,\r\n },\r\n valueMin: {\r\n type: Number,\r\n default: 0,\r\n },\r\n valueMax: {\r\n type: Number,\r\n default: 100,\r\n },\r\n valueStep: {\r\n type: Number,\r\n default: 1,\r\n },\r\n valueDecimal: {\r\n type: Number,\r\n default: 0,\r\n },\r\n progBorderRadius: {\r\n type: Number,\r\n default: 5,\r\n },\r\n progHeight: {\r\n type: Number,\r\n default: 4,\r\n },\r\n progColor: {\r\n type: String,\r\n default: '#74a4d9',\r\n },\r\n progColorDisabled: {\r\n type: String,\r\n default: '#c5c5c5',\r\n },\r\n progBackgroundColor: {\r\n type: String,\r\n default: '#eee',\r\n },\r\n progBackgroundColorDisabled: {\r\n type: String,\r\n default: '#f2f2f2',\r\n },\r\n sliderSize: {\r\n type: Number,\r\n default: 20,\r\n },\r\n sliderBackgroundColor: {\r\n type: String,\r\n default: 'blue darken-3',\r\n },\r\n sliderBackgroundColorHover: {\r\n type: String,\r\n default: 'blue darken-2',\r\n },\r\n sliderBackgroundColorDisabled: {\r\n type: String,\r\n default: '#aaa',\r\n },\r\n cmpZIndex: {\r\n type: Number,\r\n default: 3000,\r\n },\r\n tooltipPlacementDist: {\r\n type: Number,\r\n default: 5,\r\n },\r\n tooltipBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n tooltipTextFontSize: {\r\n type: String,\r\n default: '0.85rem',\r\n },\r\n tooltipTextColor: {\r\n type: String,\r\n default: 'white',\r\n },\r\n tooltipBackgroundColor: {\r\n type: String,\r\n default: '#666', //rgba(60,60,60,0.75) //因arrow是通過div與旋轉成菱形來繪製, 因此可支援外部指定背景色, 但若有透明就會出現arrow的菱形問題\r\n },\r\n editable: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n data: function() {\r\n return {\r\n\r\n panelWidth: 0,\r\n panelHeight: 0,\r\n\r\n das: null,\r\n\r\n hoverTrans: false,\r\n dragTrans: false,\r\n\r\n popperInstance: null,\r\n popperShow: false,\r\n\r\n r: null,\r\n rt: null,\r\n\r\n }\r\n },\r\n mounted: function() {\r\n //console.log('mounted')\r\n\r\n let vo = this\r\n\r\n //das\r\n let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })\r\n das.on('dragBar', vo.dragBar)\r\n das.on('pressBar', vo.pressBar)\r\n das.on('freeBar', vo.freeBar)\r\n\r\n //save\r\n vo.das = das\r\n\r\n },\r\n beforeDestroy: function() {\r\n //console.log('beforeDestroy')\r\n\r\n let vo = this\r\n\r\n //clear\r\n if (vo.das) {\r\n vo.das.clear()\r\n }\r\n\r\n },\r\n computed: {\r\n\r\n changeParam: function() {\r\n // console.log('computed changeParam')\r\n\r\n let vo = this\r\n\r\n //ratio\r\n let r = 0\r\n try {\r\n r = (vo.value - vo.valueMin) / (vo.valueMax - vo.valueMin)\r\n }\r\n catch (err) {}\r\n\r\n //limitRatio\r\n r = vo.limitRatio(r)\r\n\r\n //rt\r\n let rt = vo.tickRatio(r)\r\n\r\n //save\r\n vo.r = r\r\n vo.rt = rt\r\n\r\n return ''\r\n },\r\n\r\n heightCir: function() {\r\n let vo = this\r\n return vo.sliderSize\r\n },\r\n\r\n widthCir: function() {\r\n let vo = this\r\n return vo.heightCir\r\n },\r\n\r\n effecting: function() {\r\n //console.log('computed effecting')\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //b\r\n let b = vo.hoverTrans || vo.dragTrans\r\n\r\n if (b) {\r\n\r\n //showPopper\r\n vo.showPopper()\r\n\r\n }\r\n else {\r\n\r\n //hidePopper\r\n vo.hidePopper()\r\n\r\n //同步\r\n vo.r = vo.rt\r\n\r\n }\r\n\r\n return b\r\n },\r\n\r\n progWidth: function() {\r\n let vo = this\r\n return vo.panelWidth - vo.sliderSize\r\n },\r\n\r\n useProgBorderRadius: function() {\r\n let vo = this\r\n return `border-radius:${vo.progBorderRadius}px;`\r\n },\r\n\r\n effProgColor: function() {\r\n let vo = this\r\n return convertColor(vo.progColor)\r\n },\r\n\r\n effProgColorDisabled: function() {\r\n let vo = this\r\n return convertColor(vo.progColorDisabled)\r\n },\r\n\r\n useProgColor: function() {\r\n let vo = this\r\n if (!vo.editable) {\r\n return vo.effProgColorDisabled\r\n }\r\n return vo.effProgColor\r\n },\r\n\r\n effProgBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.progBackgroundColor)\r\n },\r\n\r\n effProgBackgroundColorDisabled: function() {\r\n let vo = this\r\n return convertColor(vo.progBackgroundColorDisabled)\r\n },\r\n\r\n useProgBackgroundColor: function() {\r\n let vo = this\r\n if (!vo.editable) {\r\n return vo.effProgBackgroundColorDisabled\r\n }\r\n return vo.effProgBackgroundColor\r\n },\r\n\r\n effSliderBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.sliderBackgroundColor)\r\n },\r\n\r\n effSliderBackgroundColorHover: function() {\r\n let vo = this\r\n return convertColor(vo.sliderBackgroundColorHover)\r\n },\r\n\r\n effSliderBackgroundColorDisabled: function() {\r\n let vo = this\r\n return convertColor(vo.sliderBackgroundColorDisabled)\r\n },\r\n\r\n useSliderBackgroundColor: function() {\r\n let vo = this\r\n if (!vo.editable) {\r\n return vo.effSliderBackgroundColorDisabled\r\n }\r\n if (vo.effecting) {\r\n return vo.effSliderBackgroundColorHover\r\n }\r\n return vo.effSliderBackgroundColor\r\n },\r\n\r\n useTooltipBorderRadius: function() {\r\n //console.log('computed useTooltipBorderRadius')\r\n\r\n let vo = this\r\n\r\n if (isNumber(vo.tooltipBorderRadius)) {\r\n return `border-radius:${vo.tooltipBorderRadius}px;`\r\n }\r\n return ''\r\n },\r\n\r\n useTooltipTextFontSize: function() {\r\n let vo = this\r\n let s = vo.tooltipTextFontSize\r\n s = replace(s, ';', '')\r\n return `font-size:${s};`\r\n },\r\n\r\n useTooltipTextColor: function() {\r\n //console.log('computed useTooltipTextColor')\r\n\r\n let vo = this\r\n\r\n return convertColor(vo.tooltipTextColor)\r\n },\r\n\r\n useTooltipBackgroundColor: function() {\r\n //console.log('computed useTooltipBackgroundColor')\r\n\r\n let vo = this\r\n\r\n return convertColor(vo.tooltipBackgroundColor)\r\n },\r\n\r\n valueDig: function() {\r\n // console.log('computed valueDig')\r\n\r\n let vo = this\r\n\r\n //t\r\n let t = (vo.rt) * (vo.valueMax - vo.valueMin) + vo.valueMin\r\n\r\n //dig\r\n let c = dig(t, vo.valueDecimal)\r\n\r\n return c\r\n },\r\n\r\n },\r\n methods: {\r\n\r\n resizePanel: function(msg) {\r\n //console.log('methods resizePanel', msg)\r\n\r\n let vo = this\r\n\r\n //update\r\n vo.panelWidth = msg.snew.offsetWidth\r\n vo.panelHeight = msg.snew.offsetHeight\r\n\r\n // //emit\r\n // vo.$emit('resize', msg)\r\n\r\n },\r\n\r\n limitRatio: function(r) {\r\n // console.log('methods limitRatio', r)\r\n\r\n // let vo = this\r\n\r\n r = Math.min(r, 1)\r\n r = Math.max(r, 0)\r\n\r\n return r\r\n },\r\n\r\n tickRatio: function(r) {\r\n // console.log('methods tickRatio', r)\r\n\r\n let vo = this\r\n\r\n //rt\r\n let rt = 0\r\n try {\r\n\r\n //rtk\r\n let rng = vo.valueMax - vo.valueMin\r\n let rtk = vo.valueStep / rng\r\n\r\n //round\r\n let i = round(r / rtk)\r\n\r\n //rt\r\n rt = i * rtk\r\n // console.log('r', r, 'rt', rt)\r\n\r\n }\r\n catch (err) { }\r\n\r\n\r\n return rt\r\n },\r\n\r\n dragBar: function(msg) {\r\n // console.log('methods dragBar', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //r\r\n let bd = vo.$el.getBoundingClientRect()\r\n let x = msg.clientX - vo.sliderSize / 2\r\n let w = vo.progWidth //vo.$el.offsetWidth\r\n let r = 0\r\n if (w > 0) {\r\n r = (x - bd.left) / w //clientX需扣除元件的left位置\r\n }\r\n\r\n //limitRatio\r\n r = vo.limitRatio(r)\r\n // console.log(vo.r, 'r', r)\r\n\r\n //rt\r\n let rt = vo.tickRatio(r)\r\n\r\n //save\r\n vo.r = r\r\n vo.rt = rt\r\n\r\n //v\r\n let v = cdbl(vo.valueDig)\r\n\r\n //updatePopper\r\n vo.updatePopper()\r\n\r\n //emit\r\n vo.$emit('input', v)\r\n\r\n },\r\n\r\n pressBar: function() {\r\n let vo = this\r\n vo.dragTrans = true\r\n },\r\n\r\n freeBar: function() {\r\n let vo = this\r\n vo.dragTrans = false\r\n },\r\n\r\n showPopper: function(from) {\r\n // console.log('methods showPopper', from)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //divTrigger\r\n let divTrigger = get(vo, '$refs.divTrigger', null)\r\n if (divTrigger === null) {\r\n return //console.log('無法找到點擊區元素')\r\n }\r\n\r\n //divContent\r\n let divContent = get(vo, '$refs.divContent', null)\r\n\r\n //check\r\n if (divContent === null) {\r\n return //console.log('無法找到顯示元素')\r\n }\r\n\r\n //@popperjs/core 2.x\r\n let opt = {\r\n strategy: 'fixed', //盡量使用'fixed'而不用'absolute', 否則位於多層dialog或多層drawer內popup顯示會異常\r\n placement: 'top', //預設top, 因arrow不好給故僅提供top\r\n modifiers: [\r\n // preventOverflow,\r\n // computeStyles,\r\n // {\r\n // name: 'computeStyles',\r\n // options: {\r\n // gpuAcceleration: false, //預設true, 可關閉GPU加速\r\n // },\r\n // },\r\n arrow,\r\n {\r\n name: 'arrow',\r\n options: {\r\n padding: 5,\r\n },\r\n },\r\n flip,\r\n {\r\n name: 'flip',\r\n options: {\r\n fallbackPlacements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],\r\n },\r\n },\r\n offset,\r\n {\r\n name: 'offset',\r\n options: {\r\n // offset: [0, vo.tooltipPlacementDist], //[Skidding, Distance]\r\n // offset: [0, 5], //因popperjs會自動調位置, 故得通過callback函數處理指定位置時的偏移量\r\n offset: ({ placement, reference, popper }) => {\r\n // console.log('offset', placement, reference, popper, vo.tooltipPlacementDist)\r\n // if (placement === 'bottom-start' || placement === 'bottom' || placement === 'bottom-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else if (placement === 'top-start' || placement === 'top' || placement === 'top-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else if (placement === 'left-start' || placement === 'left' || placement === 'left-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else if (placement === 'right-start' || placement === 'right' || placement === 'right-end') {\r\n // return [0, vo.tooltipPlacementDist]\r\n // }\r\n // else {\r\n // return []\r\n // }\r\n return [0, vo.tooltipPlacementDist] //[Skidding, Distance]\r\n },\r\n },\r\n },\r\n hide,\r\n ],\r\n }\r\n vo.popperInstance = createPopper(divTrigger, divContent, opt)\r\n // console.log('popperInstance', vo.popperInstance)\r\n\r\n },\r\n\r\n updatePopper: function(msg) {\r\n //console.log('methods updatePopper', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //update\r\n if (vo.popperInstance) {\r\n vo.popperInstance.update()\r\n }\r\n\r\n // //emit\r\n // vo.$emit('resize', msg)\r\n\r\n },\r\n\r\n hidePopper: function(from) {\r\n // console.log('methods hidePopper', from, this.mmkey)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (vo.popperInstance) {\r\n\r\n //destroy\r\n vo.popperInstance.destroy()\r\n vo.popperInstance = null\r\n\r\n }\r\n\r\n },\r\n\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.ts {\r\n transition:all 0.3s;\r\n}\r\n.bs {\r\n box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);\r\n}\r\n.WPopperFix[data-popper-reference-hidden] {\r\n visibility: hidden;\r\n pointer-events: none;\r\n}\r\n.arrow,\r\n.arrow::before {\r\n position: absolute;\r\n width: 5px;\r\n height: 5px;\r\n background: inherit;\r\n}\r\n.arrow {\r\n visibility: hidden;\r\n}\r\n.arrow::before {\r\n visibility: visible;\r\n content: '';\r\n transform: rotate(45deg);\r\n}\r\n/* .arrow::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n margin-left: -5px;\r\n border-width: 5px;\r\n border-style: solid;\r\n border-color: black transparent transparent transparent;\r\n} */\r\n</style>\r\n"]},media:void 0})},Ec,"data-v-062a5ce9",false,void 0,!1,o,void 0,void 0)},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},backgroundColor:{type:String,default:"transparent"},menuBorderRadius:{type:Number,default:4},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"}},data:function(){return{methods:[{text:"RGBA"},{text:"HSVA"}],methodSelect:{text:"RGBA"},lock:!1,valueTrans:null,r:255,g:255,b:255,h:360,s:1,v:1,a:1,rt:255,gt:255,bt:255,ht:360,st:1,vt:1,at:1}},computed:{changeValue:function(){let n=this;n.valueTrans=qt(n.value);let e=Ts.toRgba(n.valueTrans),t=Ts.toHsva(n.valueTrans);return n.r=e.r,n.rt=e.r,n.g=e.g,n.gt=e.g,n.b=e.b,n.bt=e.b,n.a=e.a,n.at=e.a,n.h=t.h,n.ht=t.h,n.s=t.s,n.st=t.s,n.v=t.v,n.vt=t.v,""},sliderWidth:function(){let n=this,e=n.size-n.inputTextWidth-n.inputLabelWidth-13;return e=Math.max(e,0),e},useBorderColor:function(){return qt(this.borderColor)},useBackgroundColor:function(){return qt(this.backgroundColor)}},methods:{cki255:function(n){if(!yl(n))return 0;let e=n;return(n=mo(n))<0?n=0:n>255&&(n=255),n===mo(e)?e:n},cki360:function(n){if(!yl(n))return 0;let e=n;return(n=mo(n))<0?n=0:n>360&&(n=360),n===mo(e)?e:n},ckd1:function(n){if(!cu(n))return 0;let e=n;return(n=co(n))<0?n=0:n>1&&(n=1),n===co(e)?e:n},updateColorCore:function(){let n=this,e=!1,t=!1;{let t=mo(n.rt);n.r!==t&&(n.r=t,e=!0)}{let t=mo(n.gt);n.g!==t&&(n.g=t,e=!0)}{let t=mo(n.bt);n.b!==t&&(n.b=t,e=!0)}{let t=co(n.at);n.a!==t&&(n.a=t,e=!0)}{let e=mo(n.ht);n.h!==e&&(n.h=e,t=!0)}{let e=co(n.st);n.s!==e&&(n.s=e,t=!0)}{let e=co(n.vt);n.v!==e&&(n.v=e,t=!0)}let o=null;e?o={r:n.r,g:n.g,b:n.b,a:n.a}:t&&(o={h:n.h,s:n.s,v:n.v,a:n.a}),oi(o)&&(o=Ts.toRgbaString(o),n.valueTrans=o,n.$emit("input",o))},updateColor:function(n,e,t){let o=this;setTimeout(()=>{o.updateColorCore()},1)}}};var $c=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue}},[t("div",{style:"padding-left:10px; margin-bottom:-1px;"},[t("WGroupChipRadio",{attrs:{items:n.methods,paddingStyle:{v:1,h:6},group:!0,groupBorderRadiusStyle:{top:!0},groupShift:0,borderRadius:n.menuBorderRadius,borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,backgroundColor:n.menuBackgroundColor,backgroundColorHover:n.menuBackgroundColorHover,backgroundColorActive:n.menuBackgroundColorActive,textColor:n.menuTextColor,textColorHover:n.menuTextColorHover,textColorActive:n.menuTextColorActive,textFontSize:n.menuTextFontSize,marginStyle:{},shadowActive:!1},model:{value:n.methodSelect,callback:function(e){n.methodSelect=e},expression:"methodSelect"}})],1),n._v(" "),t("div",{style:"padding:10px; border:1px solid "+n.useBorderColor+"; background:"+n.useBackgroundColor+";"},[t("div",{directives:[{name:"show",rawName:"v-show",value:"RGBA"===n.methodSelect.text,expression:"methodSelect.text==='RGBA'"}]},[t("WPanelLabelItem",{attrs:{label:"R",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"r")}},model:{value:n.rt,callback:function(e){n.rt=e},expression:"rt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.r},on:{input:function(e){n.rt=e,n.updateColor(e,"","rs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"G",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"g")}},model:{value:n.gt,callback:function(e){n.gt=e},expression:"gt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.g},on:{input:function(e){n.gt=e,n.updateColor(e,"","gs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"B",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"b")}},model:{value:n.bt,callback:function(e){n.bt=e},expression:"bt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.b},on:{input:function(e){n.bt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:"HSVA"===n.methodSelect.text,expression:"methodSelect.text==='HSVA'"}]},[t("WPanelLabelItem",{attrs:{label:"H",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.cki360,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"h")}},model:{value:n.ht,callback:function(e){n.ht=e},expression:"ht"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:360,valueStep:1,valueDecimal:0,value:n.h},on:{input:function(e){n.ht=e,n.updateColor(e,"","hs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"S",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"s")}},model:{value:n.st,callback:function(e){n.st=e},expression:"st"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.s},on:{input:function(e){n.st=e,n.updateColor(e,"","ss")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"V",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"v")}},model:{value:n.vt,callback:function(e){n.vt=e},expression:"vt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.v},on:{input:function(e){n.vt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{funVerify:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1)])])};$c._withStripped=!0;const Hc=e({render:$c,staticRenderFns:[]},function(n){n&&n("data-v-05ab930f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectInput.vue"},media:void 0})},Fc,"data-v-05ab930f",false,void 0,!1,o,void 0,void 0);const Nc={directives:{domresize:Hr()},components:{WPopup:La,WColorSelectPanel:du,WColorSelectInput:Hc,WButtonChip:Bu,WIcon:yu},props:{value:{type:String,default:"#FFFFFF"},type:{type:String,default:"HSVA"},size:{type:Number,default:200},space:{type:Number,default:10},colorBlockSize:{type:Number,default:20},colorBlockBorderWidth:{type:Number,default:1},colorBlockBorderColor:{type:String,default:"#ddd"},showColorText:{type:Boolean,default:!0},colorTextColor:{type:String,default:"#000"},colorTextFontSize:{type:String,default:"0.8rem"},panelBackgroundColor:{type:String,default:"#fff"},toolBackgroundColor:{type:String,default:"#f5f5f5"},menuIconLump:{type:String,default:"M12,5.32L18,8.69V15.31L12,18.68L6,15.31V8.69L12,5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},menuIconHsva:{type:String,default:"M19 3V21H15V3H19M14 3V21H10V3H14M9 3V21H5V3H9Z"},menuIconEyeDropper:{type:String,default:"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z"},menuIconColor:{type:String,default:"#aaa"},menuIconColorHover:{type:String,default:"#999"},menuIconColorActive:{type:String,default:"#666"},menuIconSize:{type:Number,default:20},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},menuBorderRadius:{type:Number,default:4},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"},popupPlacementDist:{type:Number,default:5},btnText:{type:String,default:"Confirm"},btnRippleColor:{type:String,default:"rgba(255,255,255,0.4)"},btnPaddingStyle:{type:Object,default:()=>({v:1,h:5})},btnTextColor:{type:String,default:"#000"},btnTextColorHover:{type:String,default:"#222"},btnTextColorActive:{type:String,default:"#222"},btnTextFontSize:{type:String,default:"0.8rem"},btnBorderRadius:{type:Number,default:4},btnBackgroundColor:{type:String,default:"rgb(241,241,241)"},btnBackgroundColorHover:{type:String,default:"rgb(236,236,236)"},btnBackgroundColorActive:{type:String,default:"rgb(236,236,236)"},btnShadow:{type:Boolean,default:!0},labelContent:{type:String,default:null},cmpZIndex:{type:Number,default:3e3},editable:{type:Boolean,default:!0}},data:function(){return{mdiLoading:"M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z",show:!1,typeTrans:"HSVA",loadingEyeDropper:!1,layoutType:"horizontal",layoutShowScrollY:!1,layoutMinHeight:300,layoutMaxHeight:300,selectPanelHeight:0,selectInputHeight:0,valueOri:null,valueNew:null,popperPlacement:null}},watch:{show:function(n){let e=this;n&&(e.popperPlacement=null,e.layoutShowScrollY=!0,e.layoutMaxHeight=e.layoutMinHeight,e.$nextTick(()=>{e.$nextTick(()=>{e.adjustMaxHeight()})}))}},computed:{changeValue:function(){let n=this;return n.valueOri=qt(n.value),n.valueNew=n.valueOri,""},changeType:function(){return this.typeTrans=this.type,""},hasEyeDropper:function(){return Vn(window.EyeDropper)},useColorBlockBorderColor:function(){return qt(this.colorBlockBorderColor)},useColorTextColor:function(){return qt(this.colorTextColor)},usePanelBackgroundColor:function(){return qt(this.panelBackgroundColor)},useToolBackgroundColor:function(){return qt(this.toolBackgroundColor)},useBorderColor:function(){return qt(this.borderColor)},usePanelOverflowAndHeight:function(){let n=this,e=`overflow-y:auto; min-height:${n.layoutMinHeight}px;`;return n.layoutShowScrollY&&(e+=`max-height:${n.layoutMaxHeight}px;`),e}},methods:{resize:function(n){let e=this;if(!e.show)return;let t=On(n,"snew.windowWidth",0)>=2*(e.size+20)+3*e.space;e.layoutType=t?"horizontal":"vertical"},resizeContent:function(n){this.show&&this.adjustMaxHeight()},onPlacementChange:function(n){this.popperPlacement=n,this.adjustMaxHeight()},adjustMaxHeight:function(){let n=this;if(n.show)try{let e=n.$refs.ct;if(!e)return;let t=window.innerHeight,o=n.popperPlacement;if(!o)return;let r,i=function(n){if(!Kn(n))return null;try{return n.getBoundingClientRect()}catch(n){}return null}(e),a=e.scrollHeight,l=30;r=o.startsWith("top")?i.bottom-l:t-i.top-l;let s=a>r,u=Math.max(r,n.layoutMinHeight);if(s===n.layoutShowScrollY&&Math.abs(u-n.layoutMaxHeight)<2)return;n.layoutShowScrollY=s,n.layoutMaxHeight=u}catch(n){}},resizeSelectPanel:function(n){if(!this.show)return;let e=On(n,"snew.clientHeight",0);this.selectPanelHeight=e},resizeSelectInput:function(n){if(!this.show)return;let e=On(n,"snew.clientHeight",0);this.selectInputHeight=e},openEyeDropper:function(){let n=this;n.hasEyeDropper&&(n.loadingEyeDropper=!0,(new window.EyeDropper).open().then(e=>{let t=On(e,"sRGBHex","#fff");n.valueNew=t}).catch(n=>{console.log(n)}).finally(()=>{n.loadingEyeDropper=!1}))},clickColor:function(){let n=this;n.editable&&(n.$emit("input",n.valueNew),n.show=!1)}}};var Wc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("WPopup",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,placementDistY:n.popupPlacementDist,editable:n.editable,labelContent:n.labelContent,cmpZIndex:n.cmpZIndex,changeValue:n.changeValue,changeType:n.changeType},on:{domresize:n.resize,"placement-change":n.onPlacementChange},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{},[t("div",{staticStyle:{display:"flex","align-items":"center",cursor:"pointer",outline:"none"},on:{click:n.clickColor}},[t("div",{style:"border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+"; width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; box-sizing:border-box; background:"+n.valueOri+";"}),n._v(" "),n.showColorText?[t("div",{style:"padding-left:5px;"}),n._v(" "),t("div",{style:"font-size:"+n.colorTextFontSize+"; color:"+n.useColorTextColor+";"},[n._v("\n "+n._s(n.valueOri)+"\n ")])]:n._e()],2)])]},proxy:!0},{key:"content",fn:function(){return[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],ref:"ct",style:"background:"+n.usePanelBackgroundColor+"; "+n.usePanelOverflowAndHeight,on:{domresize:n.resizeContent}},[t("div",{style:"display:flex; padding:"+n.space+"px; border-bottom:1px solid "+n.useBorderColor+"; background:"+n.useToolBackgroundColor+";"},[t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconHsva,color:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="HSVA",n.$emit("update:type","HSVA")}}})],1),n._v(" "),t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconLump,color:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="LUMP",n.$emit("update:type","LUMP")}}})],1),n._v(" "),n.hasEyeDropper?t("div",{},[t("WIcon",{class:{"icon-spinner":n.loadingEyeDropper},staticStyle:{cursor:"pointer"},attrs:{icon:n.loadingEyeDropper?n.mdiLoading:n.menuIconEyeDropper,color:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,colorHover:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,size:n.menuIconSize},on:{click:n.openEyeDropper}})],1):n._e(),n._v(" "),t("div",{style:"width:100%;"}),n._v(" "),t("div",{ref:"mtb",style:"display:flex; align-items:center;"},[t("div",{style:"display:flex; align-items:center; border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+";"},[t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueOri+";"}),n._v(" "),t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueNew+";"})])])]),n._v(" "),t("div",{style:"padding:"+n.space+"px;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectPanel}},[t("WColorSelectPanel",{attrs:{type:n.typeTrans,size:n.size,space:0,backgroundColor:"transparent",menuIconLump:n.menuIconLump,menuIconHsva:n.menuIconHsva,menuIconColor:n.menuIconColor,menuIconColorHover:n.menuIconColorHover,menuIconColorActive:n.menuIconColorActive,menuIconSize:n.menuIconSize},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectInput}},[t("WColorSelectInput",{attrs:{size:Math.max(n.size-22,0),backgroundColor:"transparent",borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,menuBorderRadius:n.menuBorderRadius,menuBackgroundColor:n.menuBackgroundColor,menuBackgroundColorHover:n.menuBackgroundColorHover,menuBackgroundColorActive:n.menuBackgroundColorActive,menuTextColor:n.menuTextColor,menuTextColorHover:n.menuTextColorHover,menuTextColorActive:n.menuTextColorActive,menuTextFontSize:n.menuTextFontSize,inputBorderRadius:n.inputBorderRadius,inputBorderColor:n.inputBorderColor,inputBorderColorHover:n.inputBorderColorHover,inputBorderColorActive:n.inputBorderColorActive,inputBackgroundColor:n.inputBackgroundColor,inputBackgroundColorHover:n.inputBackgroundColorHover,inputBackgroundColorActive:n.inputBackgroundColorActive,inputTextColor:n.inputTextColor,inputTextFontSize:n.inputTextFontSize,inputTextWidth:n.inputTextWidth,inputTextHeight:n.inputTextHeight,inputLabelWidth:n.inputLabelWidth,inputLabelColor:n.inputLabelColor,inputLabelFontSize:n.inputLabelFontSize,barProgHeight:n.barProgHeight,barProgColor:n.barProgColor,barProgBackgroundColor:n.barProgBackgroundColor,barSliderSize:n.barSliderSize,barSliderBackgroundColor:n.barSliderBackgroundColor,barSliderBackgroundColorHover:n.barSliderBackgroundColorHover},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{"text-align":"right"}},[t("WButtonChip",{attrs:{text:n.btnText,rippleColor:n.btnRippleColor,paddingStyle:n.btnPaddingStyle,textColor:n.btnTextColor,textColorHover:n.btnTextColorHover,textColorActive:n.btnTextColorActive,textFontSize:n.btnTextFontSize,borderRadius:n.btnBorderRadius,_borderColor:"btnBorderColor",_borderColorHover:"btnBorderColorHover",_borderColorActive:"btnBorderColorActive",backgroundColor:n.btnBackgroundColor,backgroundColorHover:n.btnBackgroundColorHover,backgroundColorActive:n.btnBackgroundColorActive,shadow:n.btnShadow},on:{click:n.clickColor}})],1)])])]},proxy:!0}]),model:{value:n.show,callback:function(e){n.show=e},expression:"show"}})};Wc._withStripped=!0;const Mc=e({render:Wc,staticRenderFns:[]},function(n){n&&n("data-v-4462e481_0",{source:"\n.icon-spinner[data-v-4462e481] {\r\n animation: spin-animation-data-v-4462e481 1.5s infinite;\r\n display: inline-block;\n}\n@keyframes spin-animation-data-v-4462e481 {\n0% {\r\n transform: rotate(0deg);\n}\n100% {\r\n transform: rotate(359deg);\n}\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\node_modules\\w-component-vue\\src\\components\\WColorSelect.vue"],names:[],mappings:";AA42BA;IACA,uDAAA;IACA,qBAAA;AACA;AACA;AACA;QACA,uBAAA;AACA;AACA;QACA,yBAAA;AACA;AACA",file:"WColorSelect.vue",sourcesContent:["<template>\r\n <WPopup\r\n :minWidth=\"null\"\r\n :maxWidth=\"null\"\r\n :autoFitMinWidth=\"false\"\r\n :autoFitMaxWidth=\"false\"\r\n :placementDistY=\"popupPlacementDist\"\r\n :editable=\"editable\"\r\n :labelContent=\"labelContent\"\r\n :cmpZIndex=\"cmpZIndex\"\r\n v-model=\"show\"\r\n :changeValue=\"changeValue\"\r\n :changeType=\"changeType\"\r\n v-domresize\r\n @domresize=\"resize\"\r\n @placement-change=\"onPlacementChange\"\r\n >\r\n\r\n <template v-slot:trigger>\r\n\r\n <div style=\"\">\r\n \x3c!-- 盡量不要讓display:flex暴露至外層 --\x3e\r\n <div\r\n style=\"display:flex; align-items:center; cursor:pointer; outline:none;\"\r\n @click=\"clickColor\"\r\n >\r\n\r\n <div :style=\"`border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor}; width:${colorBlockSize}px; height:${colorBlockSize}px; box-sizing:border-box; background:${valueOri};`\"></div>\r\n\r\n <template v-if=\"showColorText\">\r\n\r\n <div :style=\"`padding-left:5px;`\"></div>\r\n\r\n <div :style=\"`font-size:${colorTextFontSize}; color:${useColorTextColor};`\">\r\n {{valueOri}}\r\n </div>\r\n\r\n </template>\r\n\r\n </div>\r\n </div>\r\n\r\n </template>\r\n\r\n <template v-slot:content>\r\n\r\n <div\r\n ref=\"ct\"\r\n :style=\"`background:${usePanelBackgroundColor}; ${usePanelOverflowAndHeight}`\"\r\n v-domresize\r\n @domresize=\"resizeContent\"\r\n >\r\n\r\n \x3c!-- 上方選單區 --\x3e\r\n <div :style=\"`display:flex; padding:${space}px; border-bottom:1px solid ${useBorderColor}; background:${useToolBackgroundColor};`\">\r\n\r\n <div style=\"\">\r\n <WIcon\r\n style=\"cursor:pointer;\"\r\n :icon=\"menuIconHsva\"\r\n :color=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColor\"\r\n :colorHover=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColorHover\"\r\n :size=\"menuIconSize\"\r\n @click=\"typeTrans='HSVA';$emit('update:type','HSVA')\"\r\n ></WIcon>\r\n </div>\r\n\r\n <div style=\"\">\r\n <WIcon\r\n style=\"cursor:pointer;\"\r\n :icon=\"menuIconLump\"\r\n :color=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColor\"\r\n :colorHover=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColorHover\"\r\n :size=\"menuIconSize\"\r\n @click=\"typeTrans='LUMP';$emit('update:type','LUMP')\"\r\n ></WIcon>\r\n </div>\r\n\r\n <div style=\"\" v-if=\"hasEyeDropper\">\r\n <WIcon\r\n :class=\"{'icon-spinner':loadingEyeDropper}\"\r\n style=\"cursor:pointer;\"\r\n :icon=\"loadingEyeDropper?mdiLoading:menuIconEyeDropper\"\r\n :color=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n :colorHover=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n :size=\"menuIconSize\"\r\n @click=\"openEyeDropper\"\r\n ></WIcon>\r\n </div>\r\n\r\n <div :style=\"`width:100%;`\"></div>\r\n\r\n <div\r\n ref=\"mtb\"\r\n :style=\"`display:flex; align-items:center;`\"\r\n >\r\n\r\n <div :style=\"`display:flex; align-items:center; border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor};`\">\r\n\r\n <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueOri};`\"></div>\r\n\r\n <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueNew};`\"></div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div :style=\"`padding:${space}px;`\">\r\n\r\n \x3c!-- 顏色選擇區 --\x3e\r\n <div\r\n style=\"display:flex;\"\r\n v-domresize\r\n @domresize=\"resizeSelectPanel\"\r\n >\r\n <WColorSelectPanel\r\n :type=\"typeTrans\"\r\n :size=\"size\"\r\n :space=\"0\"\r\n :backgroundColor=\"'transparent'\"\r\n :menuIconLump=\"menuIconLump\"\r\n :menuIconHsva=\"menuIconHsva\"\r\n :menuIconColor=\"menuIconColor\"\r\n :menuIconColorHover=\"menuIconColorHover\"\r\n :menuIconColorActive=\"menuIconColorActive\"\r\n :menuIconSize=\"menuIconSize\"\r\n v-model=\"valueNew\"\r\n ></WColorSelectPanel>\r\n </div>\r\n\r\n <div :style=\"`height:${space}px;`\"></div>\r\n\r\n \x3c!-- 顏色數值區 --\x3e\r\n <div\r\n style=\"display:flex;\"\r\n v-domresize\r\n @domresize=\"resizeSelectInput\"\r\n >\r\n <WColorSelectInput\r\n :size=\"Math.max(size-22,0)\"\r\n :backgroundColor=\"'transparent'\"\r\n :borderColor=\"borderColor\"\r\n :borderColorHover=\"borderColorHover\"\r\n :borderColorActive=\"borderColorActive\"\r\n :menuBorderRadius=\"menuBorderRadius\"\r\n :menuBackgroundColor=\"menuBackgroundColor\"\r\n :menuBackgroundColorHover=\"menuBackgroundColorHover\"\r\n :menuBackgroundColorActive=\"menuBackgroundColorActive\"\r\n :menuTextColor=\"menuTextColor\"\r\n :menuTextColorHover=\"menuTextColorHover\"\r\n :menuTextColorActive=\"menuTextColorActive\"\r\n :menuTextFontSize=\"menuTextFontSize\"\r\n :inputBorderRadius=\"inputBorderRadius\"\r\n :inputBorderColor=\"inputBorderColor\"\r\n :inputBorderColorHover=\"inputBorderColorHover\"\r\n :inputBorderColorActive=\"inputBorderColorActive\"\r\n :inputBackgroundColor=\"inputBackgroundColor\"\r\n :inputBackgroundColorHover=\"inputBackgroundColorHover\"\r\n :inputBackgroundColorActive=\"inputBackgroundColorActive\"\r\n :inputTextColor=\"inputTextColor\"\r\n :inputTextFontSize=\"inputTextFontSize\"\r\n :inputTextWidth=\"inputTextWidth\"\r\n :inputTextHeight=\"inputTextHeight\"\r\n :inputLabelWidth=\"inputLabelWidth\"\r\n :inputLabelColor=\"inputLabelColor\"\r\n :inputLabelFontSize=\"inputLabelFontSize\"\r\n :barProgHeight=\"barProgHeight\"\r\n :barProgColor=\"barProgColor\"\r\n :barProgBackgroundColor=\"barProgBackgroundColor\"\r\n :barSliderSize=\"barSliderSize\"\r\n :barSliderBackgroundColor=\"barSliderBackgroundColor\"\r\n :barSliderBackgroundColorHover=\"barSliderBackgroundColorHover\"\r\n v-model=\"valueNew\"\r\n ></WColorSelectInput>\r\n </div>\r\n\r\n <div :style=\"`height:${space}px;`\"></div>\r\n\r\n \x3c!-- 確認按鈕區 --\x3e\r\n <div style=\"text-align:right;\">\r\n\r\n <WButtonChip\r\n :text=\"btnText\"\r\n :rippleColor=\"btnRippleColor\"\r\n :paddingStyle=\"btnPaddingStyle\"\r\n :textColor=\"btnTextColor\"\r\n :textColorHover=\"btnTextColorHover\"\r\n :textColorActive=\"btnTextColorActive\"\r\n :textFontSize=\"btnTextFontSize\"\r\n :borderRadius=\"btnBorderRadius\"\r\n _borderColor=\"btnBorderColor\"\r\n _borderColorHover=\"btnBorderColorHover\"\r\n _borderColorActive=\"btnBorderColorActive\"\r\n :backgroundColor=\"btnBackgroundColor\"\r\n :backgroundColorHover=\"btnBackgroundColorHover\"\r\n :backgroundColorActive=\"btnBackgroundColorActive\"\r\n :shadow=\"btnShadow\"\r\n @click=\"clickColor\"\r\n ></WButtonChip>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </template>\r\n\r\n </WPopup>\r\n</template>\r\n\r\n<script>\r\nimport { mdiHexagonSlice6, mdiViewParallel, mdiEyedropper, mdiLoading } from '@mdi/js'\r\nimport get from 'lodash-es/get.js'\r\nimport isfun from 'wsemi/src/isfun.mjs'\r\nimport domGetBoudRect from 'wsemi/src/domGetBoudRect.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport WPopup from './WPopup.vue'\r\nimport WColorSelectPanel from './WColorSelectPanel.vue'\r\nimport WColorSelectInput from './WColorSelectInput.vue'\r\nimport WButtonChip from './WButtonChip.vue'\r\nimport WIcon from './WIcon.vue'\r\n\r\n\r\n/**\r\n * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'\r\n * @vue-prop {String} [type='HSVA'] 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'HSVA'\r\n * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200\r\n * @vue-prop {Number} [space=10] 輸入子組件間距數字，單位px，預設10\r\n * @vue-prop {Number} [colorBlockSize=20] 輸入色塊長與寬度數字，單位px，預設20\r\n * @vue-prop {Number} [colorBlockBorderWidth=1] 輸入色塊框線寬度數字，單位px，預設1\r\n * @vue-prop {String} [colorBlockBorderColor='#ddd'] 輸入色塊框線顏色字串，預設'#ddd'\r\n * @vue-prop {Boolean} [showColorText=true] 輸入是否顯示當前RGBA顏色文字布林值，預設true\r\n * @vue-prop {String} [colorTextColor='#000'] 輸入當前RGBA顏色文字顏色字串，預設'#000'\r\n * @vue-prop {String} [colorTextFontSize='0.8rem'] 輸入當前RGBA顏色文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [panelBackgroundColor='#fff'] 輸入彈窗背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [toolBackgroundColor='#f5f5f5'] 輸入彈窗背景顏色字串，預設'#f5f5f5'\r\n * @vue-prop {String} [menuIconLump=mdiHexagonSlice6] 輸入選單LUMP模式圖標字串，預設mdiHexagonSlice6\r\n * @vue-prop {String} [menuIconHsva=mdiViewParallel] mdiViewParallel\r\n * @vue-prop {String} [menuIconEyeDropper=mdiEyedropper] 輸入取色滴管圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiEyedropper)\r\n * @vue-prop {String} [menuIconColor='#aaa'] 輸入選單圖標顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColorHover='#999'] 輸入滑鼠移入時選單圖標顏色字串，預設'#999'\r\n * @vue-prop {String} [menuIconColorActive='#666'] 輸入主動模式時選單圖標顏色字串，預設'#666'\r\n * @vue-prop {Number} [menuIconSize=20] 輸入選單圖標尺寸數字，單位為px，預設20\r\n * @vue-prop {String} [borderColor='#ddd'] 輸入邊框顏色字串，預設'#ddd'\r\n * @vue-prop {String} [borderColorHover='#ccc'] 輸入滑鼠移入時邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [borderColorActive='#777'] 輸入主動模式時邊框顏色字串，預設'#777'\r\n * @vue-prop {Number} [menuBorderRadius=4] 輸入框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [menuTextColor='#444'] 輸入選單文字顏色字串，預設'#444'\r\n * @vue-prop {String} [menuTextColorHover='#222'] 輸入滑鼠移入時選單文字顏色字串，預設'#222'\r\n * @vue-prop {String} [menuTextColorActive='#000'] 輸入主動模式時選單文字顏色字串，預設'#000'\r\n * @vue-prop {String} [menuTextFontSize='0.8rem'] 輸入選單文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [menuBackgroundColor='#fff'] 輸入選單背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [menuBackgroundColorHover='#f9f9f9'] 輸入滑鼠移入時選單背景顏色字串，預設'#f9f9f9'\r\n * @vue-prop {String} [menuBackgroundColorActive='#f2f2f2'] 輸入主動模式時選單背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {Number} [inputBorderRadius=4] 輸入顏色數字輸入區邊框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [inputBorderColor='#ccc'] 輸入顏色數字輸入區邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [inputBorderColorHover='#b5b5b5'] 輸入滑鼠移入時顏色數字輸入區邊框顏色字串，預設'#b5b5b5'\r\n * @vue-prop {String} [inputBorderColorActive='#aaa'] 輸入主動模式時顏色數字輸入區邊框顏色字串，預設'#aaa'\r\n * @vue-prop {String} [inputBackgroundColor='#fff'] 輸入顏色數字輸入區背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [inputBackgroundColorHover='#fafafa'] 輸入滑鼠移入時顏色數字輸入區背景顏色字串，預設'#fafafa'\r\n * @vue-prop {String} [inputBackgroundColorActive='#f2f2f2'] 輸入主動模式時顏色數字輸入區背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {String} [inputTextColor='#000'] 輸入顏色數字輸入區文字顏色字串，預設'#000'\r\n * @vue-prop {String} [inputTextFontSize='0.8rem'] 輸入顏色數字輸入區文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [inputTextWidth=38] 輸入顏色數字輸入區寬度數字，單位為px，預設38\r\n * @vue-prop {Number} [inputTextHeight=18] 輸入顏色數字輸入區高度數字，單位為px，預設18\r\n * @vue-prop {Number} [inputLabelWidth=12] 輸入顏色數字輸入區標題寬度數字，單位為px，預設12\r\n * @vue-prop {String} [inputLabelColor='#666'] 輸入文字顏色字串，預設'#666'\r\n * @vue-prop {String} [inputLabelFontSize='0.8rem'] 輸入文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [barProgHeight=4] 輸入值域條高度數字，單位為px，預設4\r\n * @vue-prop {String} [barProgColor='#74a4d9'] 輸入值域條顏色字串，預設'#74a4d9'\r\n * @vue-prop {String} [barProgBackgroundColor='#eee'] 輸入值域條背景顏色字串，預設'#eee'\r\n * @vue-prop {Number} [barSliderSize=10] 輸入拖曳球尺寸數字，單位為px，預設10\r\n * @vue-prop {String} [barSliderBackgroundColor='#1565C0'] 輸入拖曳球背景顏色字串，預設'#1565C0'\r\n * @vue-prop {String} [barSliderBackgroundColorHover='#1976D2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'\r\n * @vue-prop {Number} [popupPlacementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5\r\n * @vue-prop {String} [btnText='Confirm'] 輸入確認按鈕之文字字串，預設'Confirm'\r\n * @vue-prop {String} [btnRippleColor='rgba(255,255,255,0.4)'] 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'\r\n * @vue-prop {Object} [btnPaddingStyle={v:1,h:5}] 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}\r\n * @vue-prop {String} [btnTextColor='#000'] 輸入確認按鈕之文字顏色字串，預設'#000'\r\n * @vue-prop {String} [btnTextColorHover='#222'] 輸入滑鼠移入時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextColorActive='#222'] 輸入主動模式時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextFontSize='0.8rem'] 輸入確認按鈕之文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [btnBorderRadius=4] 輸入確認按鈕之框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [btnBackgroundColor='rgb(241,241,241)'] 輸入確認按鈕之背景顏色字串，預設'rgb(241,241,241)'\r\n * @vue-prop {String} [btnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {String} [btnBackgroundColorActive='rgb(236,236,236)'] 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {Boolean} [btnShadow=true] 輸入確認按鈕之是否顯示陰影布林值，預設true\r\n * @vue-prop {String} [labelContent=null] 輸入針對teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null\r\n * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n directives: {\r\n domresize: domResize(),\r\n },\r\n components: {\r\n WPopup,\r\n WColorSelectPanel,\r\n WColorSelectInput,\r\n WButtonChip,\r\n WIcon,\r\n },\r\n props: {\r\n value: {\r\n type: String,\r\n default: '#FFFFFF',\r\n },\r\n type: {\r\n type: String,\r\n default: 'HSVA',\r\n },\r\n size: {\r\n type: Number,\r\n default: 200,\r\n },\r\n space: {\r\n type: Number,\r\n default: 10,\r\n },\r\n colorBlockSize: {\r\n type: Number,\r\n default: 20,\r\n },\r\n colorBlockBorderWidth: {\r\n type: Number,\r\n default: 1,\r\n },\r\n colorBlockBorderColor: {\r\n type: String,\r\n default: '#ddd',\r\n },\r\n showColorText: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n colorTextColor: {\r\n type: String,\r\n default: '#000',\r\n },\r\n colorTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n panelBackgroundColor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n toolBackgroundColor: {\r\n type: String,\r\n default: '#f5f5f5',\r\n },\r\n menuIconLump: {\r\n type: String,\r\n default: mdiHexagonSlice6,\r\n },\r\n menuIconHsva: {\r\n type: String,\r\n default: mdiViewParallel,\r\n },\r\n menuIconEyeDropper: {\r\n type: String,\r\n default: mdiEyedropper,\r\n },\r\n menuIconColor: {\r\n type: String,\r\n default: '#aaa',\r\n },\r\n menuIconColorHover: {\r\n type: String,\r\n default: '#999',\r\n },\r\n menuIconColorActive: {\r\n type: String,\r\n default: '#666',\r\n },\r\n menuIconSize: {\r\n type: Number,\r\n default: 20,\r\n },\r\n borderColor: {\r\n type: String,\r\n default: '#ddd',\r\n },\r\n borderColorHover: {\r\n type: String,\r\n default: '#ccc',\r\n },\r\n borderColorActive: {\r\n type: String,\r\n default: '#777',\r\n },\r\n menuBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n menuTextColor: {\r\n type: String,\r\n default: '#444',\r\n },\r\n menuTextColorHover: {\r\n type: String,\r\n default: '#222',\r\n },\r\n menuTextColorActive: {\r\n type: String,\r\n default: '#000',\r\n },\r\n menuTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n menuBackgroundColor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n menuBackgroundColorHover: {\r\n type: String,\r\n default: '#f9f9f9',\r\n },\r\n menuBackgroundColorActive: {\r\n type: String,\r\n default: '#f2f2f2',\r\n },\r\n inputBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n inputBorderColor: {\r\n type: String,\r\n default: '#ccc',\r\n },\r\n inputBorderColorHover: {\r\n type: String,\r\n default: '#b5b5b5',\r\n },\r\n inputBorderColorActive: {\r\n type: String,\r\n default: '#aaa',\r\n },\r\n inputBackgroundColor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n inputBackgroundColorHover: {\r\n type: String,\r\n default: '#fafafa',\r\n },\r\n inputBackgroundColorActive: {\r\n type: String,\r\n default: '#f2f2f2',\r\n },\r\n inputTextColor: {\r\n type: String,\r\n default: '#000',\r\n },\r\n inputTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n inputTextWidth: {\r\n type: Number,\r\n default: 38,\r\n },\r\n inputTextHeight: {\r\n type: Number,\r\n default: 18,\r\n },\r\n inputLabelWidth: {\r\n type: Number,\r\n default: 12,\r\n },\r\n inputLabelColor: {\r\n type: String,\r\n default: '#666',\r\n },\r\n inputLabelFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n barProgHeight: {\r\n type: Number,\r\n default: 4,\r\n },\r\n barProgColor: {\r\n type: String,\r\n default: '#74a4d9',\r\n },\r\n barProgBackgroundColor: {\r\n type: String,\r\n default: '#eee',\r\n },\r\n barSliderSize: {\r\n type: Number,\r\n default: 10,\r\n },\r\n barSliderBackgroundColor: {\r\n type: String,\r\n default: '#1565C0',\r\n },\r\n barSliderBackgroundColorHover: {\r\n type: String,\r\n default: '#1976D2',\r\n },\r\n popupPlacementDist: {\r\n type: Number,\r\n default: 5,\r\n },\r\n btnText: {\r\n type: String,\r\n default: 'Confirm',\r\n },\r\n btnRippleColor: {\r\n type: String,\r\n default: 'rgba(255,255,255,0.4)',\r\n },\r\n btnPaddingStyle: {\r\n type: Object,\r\n default: () => {\r\n return {\r\n v: 1,\r\n h: 5,\r\n }\r\n },\r\n },\r\n btnTextColor: {\r\n type: String,\r\n default: '#000',\r\n },\r\n btnTextColorHover: {\r\n type: String,\r\n default: '#222',\r\n },\r\n btnTextColorActive: {\r\n type: String,\r\n default: '#222',\r\n },\r\n btnTextFontSize: {\r\n type: String,\r\n default: '0.8rem',\r\n },\r\n btnBorderRadius: {\r\n type: Number,\r\n default: 4,\r\n },\r\n btnBackgroundColor: {\r\n type: String,\r\n default: 'rgb(241,241,241)',\r\n },\r\n btnBackgroundColorHover: {\r\n type: String,\r\n default: 'rgb(236,236,236)',\r\n },\r\n btnBackgroundColorActive: {\r\n type: String,\r\n default: 'rgb(236,236,236)',\r\n },\r\n btnShadow: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n labelContent: {\r\n type: String,\r\n default: null,\r\n },\r\n cmpZIndex: {\r\n type: Number,\r\n default: 3000,\r\n },\r\n editable: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n data: function() {\r\n return {\r\n mdiLoading,\r\n\r\n show: false,\r\n\r\n typeTrans: 'HSVA',\r\n\r\n loadingEyeDropper: false,\r\n\r\n layoutType: 'horizontal',\r\n layoutShowScrollY: false,\r\n layoutMinHeight: 300,\r\n layoutMaxHeight: 300,\r\n\r\n selectPanelHeight: 0,\r\n selectInputHeight: 0,\r\n\r\n valueOri: null,\r\n valueNew: null,\r\n popperPlacement: null,\r\n\r\n }\r\n },\r\n watch: {\r\n\r\n show: function(b) {\r\n let vo = this\r\n if (b) {\r\n //以最小高度顯示時, 讓Popper.js先決定方向\r\n vo.popperPlacement = null\r\n vo.layoutShowScrollY = true\r\n vo.layoutMaxHeight = vo.layoutMinHeight\r\n // 等 Popper.js 定位完成後重算可用空間\r\n vo.$nextTick(() => {\r\n vo.$nextTick(() => {\r\n vo.adjustMaxHeight()\r\n })\r\n })\r\n }\r\n },\r\n\r\n },\r\n computed: {\r\n\r\n changeValue: function() {\r\n let vo = this\r\n vo.valueOri = convertColor(vo.value)\r\n vo.valueNew = vo.valueOri\r\n return ''\r\n },\r\n\r\n changeType: function() {\r\n let vo = this\r\n vo.typeTrans = vo.type\r\n return ''\r\n },\r\n\r\n hasEyeDropper: function() {\r\n // let vo = this\r\n let b = isfun(window.EyeDropper)\r\n // console.log('window.EyeDropper', window.EyeDropper)\r\n return b\r\n },\r\n\r\n useColorBlockBorderColor: function() {\r\n let vo = this\r\n return convertColor(vo.colorBlockBorderColor)\r\n },\r\n\r\n useColorTextColor: function() {\r\n let vo = this\r\n return convertColor(vo.colorTextColor)\r\n },\r\n\r\n usePanelBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.panelBackgroundColor)\r\n },\r\n\r\n useToolBackgroundColor: function() {\r\n let vo = this\r\n return convertColor(vo.toolBackgroundColor)\r\n },\r\n\r\n useBorderColor: function() {\r\n let vo = this\r\n return convertColor(vo.borderColor)\r\n },\r\n\r\n usePanelOverflowAndHeight: function() {\r\n let vo = this\r\n let of = `overflow-y:auto; min-height:${vo.layoutMinHeight}px;`\r\n if (vo.layoutShowScrollY) {\r\n of += `max-height:${vo.layoutMaxHeight}px;`\r\n }\r\n return of\r\n },\r\n\r\n },\r\n methods: {\r\n\r\n resize: function(msg) {\r\n // console.log('methods resize', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n let w = get(msg, 'snew.windowWidth', 0)\r\n // let h = get(msg, 'snew.windowHeight', 0)\r\n // console.log('w', w, 'h', h, b)\r\n\r\n //layoutType\r\n let b = w >= 2 * (vo.size + 20) + 3 * vo.space //20為組件設定, 不提供外部更改故可直接給\r\n vo.layoutType = b ? 'horizontal' : 'vertical'\r\n // console.log('layoutType', vo.layoutType)\r\n\r\n },\r\n\r\n resizeContent: function(msg) {\r\n // console.log('methods resizeContent', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n //adjustMaxHeight\r\n vo.adjustMaxHeight()\r\n\r\n },\r\n\r\n onPlacementChange: function(placement) {\r\n let vo = this\r\n vo.popperPlacement = placement\r\n vo.adjustMaxHeight()\r\n },\r\n\r\n adjustMaxHeight: function() {\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n try {\r\n\r\n //ct\r\n let ct = vo.$refs.ct\r\n if (!ct) {\r\n return\r\n }\r\n\r\n //windowHeight\r\n let h = window.innerHeight\r\n\r\n //placement\r\n let placement = vo.popperPlacement\r\n\r\n //Popper.js尚未定位完成, 保持初始限制高度\r\n if (!placement) {\r\n return\r\n }\r\n\r\n //rt\r\n let rt = domGetBoudRect(ct)\r\n\r\n //hc, 實際內容高度\r\n let hc = ct.scrollHeight\r\n\r\n //根據方向計算可用空間\r\n let margin = 30\r\n let hca\r\n if (placement.startsWith('top')) {\r\n //彈窗在上方, 底部對齊觸發元素往上延伸\r\n hca = rt.bottom - margin\r\n }\r\n else {\r\n //預設彈窗在下方, 頂部對齊觸發元素下方往下延伸\r\n hca = h - rt.top - margin\r\n }\r\n\r\n //layoutShowScrollYNew\r\n let layoutShowScrollYNew = hc > hca\r\n\r\n //layoutMaxHeightNew\r\n let layoutMaxHeightNew = Math.max(hca, vo.layoutMinHeight)\r\n\r\n //check, 避免微小的數值抖動導致迴圈\r\n if (layoutShowScrollYNew === vo.layoutShowScrollY && Math.abs(layoutMaxHeightNew - vo.layoutMaxHeight) < 2) {\r\n return\r\n }\r\n\r\n //layoutShowScrollY\r\n vo.layoutShowScrollY = layoutShowScrollYNew\r\n // console.log('layoutShowScrollY', vo.layoutShowScrollY)\r\n\r\n //layoutMaxHeight\r\n vo.layoutMaxHeight = layoutMaxHeightNew\r\n // console.log('layoutMaxHeight', vo.layoutMaxHeight)\r\n\r\n }\r\n catch (err) {}\r\n\r\n },\r\n\r\n resizeSelectPanel: function(msg) {\r\n // console.log('methods resizeSelectPanel', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n //save\r\n vo.selectPanelHeight = h\r\n\r\n },\r\n\r\n resizeSelectInput: function(msg) {\r\n // console.log('methods resizeSelectInput', msg)\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.show) {\r\n return\r\n }\r\n\r\n let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n //save\r\n vo.selectInputHeight = h\r\n\r\n },\r\n\r\n openEyeDropper: function() {\r\n // console.log('methods openEyeDropper')\r\n\r\n let vo = this\r\n\r\n //check\r\n if (!vo.hasEyeDropper) {\r\n return\r\n }\r\n\r\n vo.loadingEyeDropper = true\r\n\r\n let eyeDropper = new window.EyeDropper()\r\n eyeDropper\r\n .open()\r\n .then((res) => {\r\n // console.log('res', res)\r\n let hex = get(res, 'sRGBHex', '#fff')\r\n vo.valueNew = hex\r\n })\r\n .catch((err) => {\r\n console.log(err)\r\n })\r\n .finally(() => {\r\n vo.loadingEyeDropper = false\r\n })\r\n\r\n },\r\n\r\n clickColor: function() {\r\n // console.log('methods clickColor')\r\n\r\n let vo = this\r\n\r\n //check, 不可編輯時跳出\r\n if (!vo.editable) {\r\n return\r\n }\r\n\r\n //emit\r\n vo.$emit('input', vo.valueNew)\r\n\r\n //hide\r\n vo.show = false\r\n\r\n },\r\n\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.icon-spinner {\r\n animation: spin-animation 1.5s infinite;\r\n display: inline-block;\r\n}\r\n@keyframes spin-animation {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(359deg);\r\n }\r\n}\r\n</style>\r\n"]},media:void 0})},Nc,"data-v-4462e481",false,void 0,!1,o,void 0,void 0);const Lc={components:{WColorSelect:Mc},props:{node:{type:Object,required:!0},defNode:{type:Object,required:!0},textFontSize:{type:String,default:""},excludes:{type:Array,default:()=>[]}},data:()=>({confirmDelete:!1}),computed:{formStyle(){let n={};return this.textFontSize&&(n.fontSize=this.textFontSize),n}},methods:{isEx(n){return this.excludes.indexOf(n)>=0},onFontSizeInput(n){let e=Number(n),t=this.defNode;!n||isNaN(e)||e<t.fontSizeMin||(e>t.fontSizeMax&&(e=t.fontSizeMax),this.$emit("update","fontSize",e))},onEdgeWidthInput(n){let e=Number(n);!n||isNaN(e)||e<1||(e>24&&(e=24),this.$emit("update","edgeWidth",e))}}};var Dc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-flow__settings-form",style:n.formStyle},[n.isEx("name")?n._e():t("label",[n._v("Name\n "),t("input",{attrs:{type:"text"},domProps:{value:n.node.name||""},on:{input:function(e){return n.$emit("update","name",e.target.value)}}})]),n._v(" "),n.isEx("description")?n._e():t("label",[n._v("Description\n "),t("input",{attrs:{type:"text"},domProps:{value:n.node.description||""},on:{input:function(e){return n.$emit("update","description",e.target.value)}}})]),n._v(" "),n.isEx("type")?n._e():t("label",[n._v("Type\n "),t("select",{domProps:{value:n.node.type||n.defNode.type},on:{input:function(e){return n.$emit("update","type",e.target.value)}}},[t("option",{attrs:{value:"input"}},[n._v("Input")]),n._v(" "),t("option",{attrs:{value:"basic"}},[n._v("Basic")]),n._v(" "),t("option",{attrs:{value:"output"}},[n._v("Output")])])]),n._v(" "),n.isEx("shape")?n._e():t("label",[n._v("Shape\n "),t("select",{domProps:{value:n.node.shape||n.defNode.shape},on:{input:function(e){return n.$emit("update","shape",e.target.value)}}},[t("option",{attrs:{value:"rectangle"}},[n._v("Rectangle")]),n._v(" "),t("option",{attrs:{value:"diamond"}},[n._v("Diamond")]),n._v(" "),t("option",{attrs:{value:"ellipse"}},[n._v("Ellipse")]),n._v(" "),t("option",{attrs:{value:"triangle"}},[n._v("Triangle ▲")]),n._v(" "),t("option",{attrs:{value:"triangle-right"}},[n._v("Triangle ▶")]),n._v(" "),t("option",{attrs:{value:"triangle-down"}},[n._v("Triangle ▼")]),n._v(" "),t("option",{attrs:{value:"triangle-left"}},[n._v("Triangle ◀")])])]),n._v(" "),n.isEx("popupDirection")?n._e():t("label",[n._v("Popup Direction\n "),t("select",{domProps:{value:n.node.popupDirection||n.defNode.popupDirection},on:{input:function(e){return n.$emit("update","popupDirection",e.target.value)}}},[t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("fontSize")?n._e():t("label",[n._v("Font Size\n "),t("input",{attrs:{type:"number",min:n.defNode.fontSizeMin,max:n.defNode.fontSizeMax},domProps:{value:n.node.fontSize||n.defNode.fontSize},on:{input:function(e){return n.onFontSizeInput(e.target.value)}}})]),n._v(" "),n.isEx("fontColor")?n._e():t("label",[n._v("Font Color\n "),t("WColorSelect",{attrs:{value:n.node.fontColor||n.defNode.fontColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","fontColor",e)}}})],1),n._v(" "),n.isEx("faceColor")?n._e():t("label",[n._v("Face Color\n "),t("WColorSelect",{attrs:{value:n.node.faceColor||n.defNode.faceColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","faceColor",e)}}})],1),n._v(" "),n.isEx("edgeColor")?n._e():t("label",[n._v("Edge Color\n "),t("WColorSelect",{attrs:{value:n.node.edgeColor||n.defNode.edgeColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","edgeColor",e)}}})],1),n._v(" "),n.isEx("edgeWidth")?n._e():t("label",[n._v("Edge Width\n "),t("input",{attrs:{type:"number",min:"1",max:"24"},domProps:{value:void 0!==n.node.edgeWidth?n.node.edgeWidth:n.defNode.edgeWidth},on:{input:function(e){return n.onEdgeWidthInput(e.target.value)}}})]),n._v(" "),n.isEx("fromPosition")||"output"!==n.node.type&&"basic"!==n.node.type?n._e():t("label",[n._v("From Handle\n "),t("select",{domProps:{value:n.node.fromPosition||n.defNode.fromPosition},on:{input:function(e){return n.$emit("update","fromPosition",e.target.value)}}},[t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("toPosition")||"input"!==n.node.type&&"basic"!==n.node.type?n._e():t("label",[n._v("To Handle\n "),t("select",{domProps:{value:n.node.toPosition||n.defNode.toPosition},on:{input:function(e){return n.$emit("update","toPosition",e.target.value)}}},[t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),t("div",{staticClass:"vue-flow__delete-area"},[n.confirmDelete?[t("span",{staticClass:"vue-flow__delete-warn"},[n._v("確定刪除？相關連線也會一併刪除")]),n._v(" "),t("div",{staticClass:"vue-flow__delete-confirm-row"},[t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){return n.$emit("delete")}}},[n._v("確認刪除")]),n._v(" "),t("button",{staticClass:"vue-flow__delete-btn vue-flow__delete-btn--cancel",on:{click:function(e){n.confirmDelete=!1}}},[n._v("取消")])])]:t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){n.confirmDelete=!0}}},[n._v("刪除節點")])],2)])};Dc._withStripped=!0;var Rc={name:"NodeWrapper",components:{NodeBody:N,NodeSettingsForm:e({render:Dc,staticRenderFns:[]},function(n){n&&n("data-v-e6c99e84_0",{source:'\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\n}\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\n}\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\n}\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\n}\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\n}\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\n}\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\n}\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\n}\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\n}\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\n}\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\n}\r\n',map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\ui\\NodeSettingsForm.vue"],names:[],mappings:";AAyHA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,QAAA;EACA,eAAA;AACA;AACA;;;EAGA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;AACA;AACA;EACA,cAAA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AACA;AACA;EACA,aAAA;EACA,QAAA;AACA;AACA;EACA,iBAAA;EACA,eAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,mBAAA;EACA,qBAAA;AACA;AACA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;AACA;AACA;EACA,mBAAA;EACA,kBAAA;AACA",file:"NodeSettingsForm.vue",sourcesContent:['<template>\r\n <div class="vue-flow__settings-form" :style="formStyle">\r\n <label v-if="!isEx(\'name\')">Name\r\n <input type="text" :value="node.name || \'\'" @input="$emit(\'update\', \'name\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'description\')">Description\r\n <input type="text" :value="node.description || \'\'" @input="$emit(\'update\', \'description\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'type\')">Type\r\n <select :value="node.type || defNode.type" @input="$emit(\'update\', \'type\', $event.target.value)">\r\n <option value="input">Input</option>\r\n <option value="basic">Basic</option>\r\n <option value="output">Output</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'shape\')">Shape\r\n <select :value="node.shape || defNode.shape" @input="$emit(\'update\', \'shape\', $event.target.value)">\r\n <option value="rectangle">Rectangle</option>\r\n <option value="diamond">Diamond</option>\r\n <option value="ellipse">Ellipse</option>\r\n <option value="triangle">Triangle ▲</option>\r\n <option value="triangle-right">Triangle ▶</option>\r\n <option value="triangle-down">Triangle ▼</option>\r\n <option value="triangle-left">Triangle ◀</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'popupDirection\')">Popup Direction\r\n <select :value="node.popupDirection || defNode.popupDirection" @input="$emit(\'update\', \'popupDirection\', $event.target.value)">\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'fontSize\')">Font Size\r\n <input type="number" :value="node.fontSize || defNode.fontSize" :min="defNode.fontSizeMin" :max="defNode.fontSizeMax" @input="onFontSizeInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'fontColor\')">Font Color\r\n <WColorSelect :value="node.fontColor || defNode.fontColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'fontColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'faceColor\')">Face Color\r\n <WColorSelect :value="node.faceColor || defNode.faceColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'faceColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'edgeColor\')">Edge Color\r\n <WColorSelect :value="node.edgeColor || defNode.edgeColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'edgeColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'edgeWidth\')">Edge Width\r\n <input type="number" :value="node.edgeWidth !== undefined ? node.edgeWidth : defNode.edgeWidth" min="1" max="24" @input="onEdgeWidthInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'fromPosition\') && (node.type === \'output\' || node.type === \'basic\')">From Handle\r\n <select :value="node.fromPosition || defNode.fromPosition" @input="$emit(\'update\', \'fromPosition\', $event.target.value)">\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'toPosition\') && (node.type === \'input\' || node.type === \'basic\')">To Handle\r\n <select :value="node.toPosition || defNode.toPosition" @input="$emit(\'update\', \'toPosition\', $event.target.value)">\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <div class="vue-flow__delete-area">\r\n <button v-if="!confirmDelete" class="vue-flow__delete-btn" @click="confirmDelete = true">刪除節點</button>\r\n <template v-else>\r\n <span class="vue-flow__delete-warn">確定刪除？相關連線也會一併刪除</span>\r\n <div class="vue-flow__delete-confirm-row">\r\n <button class="vue-flow__delete-btn" @click="$emit(\'delete\')">確認刪除</button>\r\n <button class="vue-flow__delete-btn vue-flow__delete-btn--cancel" @click="confirmDelete = false">取消</button>\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport WColorSelect from \'w-component-vue/src/components/WColorSelect.vue\'\r\n\r\nexport default {\r\n components: { WColorSelect },\r\n props: {\r\n node: { type: Object, required: true },\r\n defNode: { type: Object, required: true },\r\n textFontSize: { type: String, default: \'\' },\r\n excludes: { type: Array, default: () => [] },\r\n },\r\n data() {\r\n return { confirmDelete: false }\r\n },\r\n computed: {\r\n formStyle() {\r\n let s = {}\r\n if (this.textFontSize) s.fontSize = this.textFontSize\r\n return s\r\n },\r\n },\r\n methods: {\r\n isEx(key) {\r\n return this.excludes.indexOf(key) >= 0\r\n },\r\n onFontSizeInput(val) {\r\n let n = Number(val)\r\n let d = this.defNode\r\n if (!val || isNaN(n) || n < d.fontSizeMin) return\r\n if (n > d.fontSizeMax) n = d.fontSizeMax\r\n this.$emit(\'update\', \'fontSize\', n)\r\n },\r\n onEdgeWidthInput(val) {\r\n let n = Number(val)\r\n if (!val || isNaN(n) || n < 1) return\r\n if (n > 24) n = 24\r\n this.$emit(\'update\', \'edgeWidth\', n)\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\r\n}\r\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n}\r\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n}\r\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n}\r\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n}\r\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\r\n}\r\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\r\n}\r\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\r\n}\r\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\r\n}\r\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\r\n}\r\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\r\n}\r\n</style>\r\n']},media:void 0})},Lc,void 0,false,void 0,!1,o,void 0,void 0),WPopup:La},inject:{getDefNode:{default:()=>()=>({})},getDragGhost:{default:()=>()=>null}},props:{node:{type:Object,required:!0},selected:{type:Boolean,default:!1},draggable:{type:Boolean,default:!0},connectable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},snapGridSize:{type:Number,default:null},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},computed:{dn(){return this.getDefNode()},isDiamond(){return"diamond"===this.node.shape},isEllipse(){return"ellipse"===this.node.shape},isTriangle(){let n=this.node.shape;return"triangle"===n||"triangle-right"===n||"triangle-down"===n||"triangle-left"===n},isSvgShape(){return this.isDiamond||this.isEllipse||this.isTriangle},classes(){const n=this.node.class?Array.isArray(this.node.class)?this.node.class:[this.node.class]:[];return["vue-flow__node",`vue-flow__node-${this.node.type||"basic"}`,...n,{"vue-flow__node--selected":this.selected,"vue-flow__node--dragging":this.isDragging,"vue-flow__node--locked":this.locked,"vue-flow__node--diamond":this.isDiamond,"vue-flow__node--ellipse":this.isEllipse,"vue-flow__node--triangle":this.isTriangle}]},wrapperStyle(){const n=this.dn,e=this.node,t=this.getDragGhost(e.id),o=t?t.x:e.position.x,r=t?t.y:e.position.y,i=t&&void 0!==t.width?t.width:e.width,a=t&&void 0!==t.height?t.height:e.height,l={transform:`translate(${o}px, ${r}px)`,zIndex:e.zIndex||0,...i?{whiteSpace:"pre-line"}:{},...e.style||{}};if(i&&(l.width="number"==typeof i?`${i}px`:i),a&&(l.height="number"==typeof a?`${a}px`:a),!this.isSvgShape){let t=e.faceColor||n.faceColor;t&&(l.background=t);let o=e.edgeColor||n.edgeColor;o&&(l.borderColor=o);let r=void 0!==e.edgeWidth?e.edgeWidth:n.edgeWidth;void 0!==r&&(l.borderWidth=r+"px")}let s=e.fontSize||n.fontSize;s&&(l.fontSize=s+"px");let u=e.fontColor||n.fontColor;return u&&(l.color=u),l}},data:()=>({isDragging:!1,hovered:!1,infoPopupShow:!1,infoPopupEditable:!0,settingsPopupShow:!1,cachedW:0,cachedH:0}),watch:{settingsPopupShow(n){n&&(this.infoPopupShow=!1)},infoPopupShow(n){n&&(this.settingsPopupShow=!1)}},mounted(){this.$nextTick(()=>this.reportDimensions())},updated(){this.reportDimensions()},methods:{reportDimensions(){if(!this.$el)return;const n=this.$el.offsetWidth,e=this.$el.offsetHeight;n===this.cachedW&&e===this.cachedH||(this.cachedW=n,this.cachedH=e,this.$emit("dimensions",{nodeId:this.node.id,width:n,height:e}))},onMouseDown(n){if(n.target.closest&&n.target.closest(".vue-flow__node-settings-anchor"))return void(this._mouseDownPos=null);if(this._mouseDownPos={x:n.clientX,y:n.clientY},!this.draggable)return;if(this.node.dragHandle){if(!n.target.closest(this.node.dragHandle))return}this.infoPopupShow=!1,this.$emit("drag-start",{node:this.node,event:n});const e=n.clientX,t=n.clientY,o=n=>{(Math.abs(n.clientX-e)>2||Math.abs(n.clientY-t)>2)&&(this.infoPopupEditable=!1,document.removeEventListener("mousemove",o))},r=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",r),this.infoPopupEditable||setTimeout(()=>{this.infoPopupEditable=!0},0)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",r)},onMouseUp(n){if(!this._mouseDownPos)return;const e=n.clientX-this._mouseDownPos.x,t=n.clientY-this._mouseDownPos.y;this._mouseDownPos=null,Math.abs(e)<3&&Math.abs(t)<3&&this.$emit("node-click",{node:this.node,event:n})},onDoubleClick(n){this.$emit("node-double-click",{node:this.node,event:n})},openInfoPopup(){this.infoPopupShow=!0},onContextMenu(n){this.$emit("node-context-menu",{node:this.node,event:n})},onConnectStart(n){this.$emit("connect-start",{...n,nodeId:this.node.id})},onMouseEnter(n){this.hovered=!0,this.$emit("node-mouseenter",{node:this.node,event:n})},onMouseLeave(n){this.hovered=!1,this.$emit("node-mouseleave",{node:this.node,event:n})},onSettingsUpdate(n,e){this.$emit("node-settings-update",{node:this.node,key:n,value:e})},onSettingsDelete(){this.$emit("node-settings-delete",{node:this.node})},onResizeStart(n,e){this.infoPopupShow=!1,this.$nextTick(()=>{this.infoPopupEditable=!1}),n.preventDefault();const t={"top-left":"nwse-resize","bottom-right":"nwse-resize","top-right":"nesw-resize","bottom-left":"nesw-resize"}[e]||"default",o=document.createElement("style");o.textContent="* { cursor: "+t+" !important; }",document.head.appendChild(o);const r=n.clientX,i=n.clientY,a=this.node.width||this.$el.offsetWidth,l=this.node.height||this.$el.offsetHeight,s=this.node.position.x,u=this.node.position.y,d=this.snapGridSize,c=d||10,p=this.$el.closest(".vue-flow__viewport"),f=p?parseFloat(p.style.transform.match(/scale\(([^)]+)\)/)?.[1]||1):1,h=n=>d?Math.max(d,Math.round(n/d)*d):Math.max(c,Math.round(n)),g=n=>h(a+n),v=n=>{const e=h(a-n);return{w:e,x:s+(a-e)}},m=n=>h(l+n),A=n=>{const e=h(l-n);return{h:e,y:u+(l-e)}},b=n=>{const t=(n.clientX-r)/f,o=(n.clientY-i)/f;let d=a,c=l,p=s,h=u;if("top-left"===e){let n=v(t);d=n.w,p=n.x;let e=A(o);c=e.h,h=e.y}else if("top-right"===e){d=g(t);let n=A(o);c=n.h,h=n.y}else if("bottom-left"===e){let n=v(t);d=n.w,p=n.x,c=m(o)}else"bottom-right"===e&&(d=g(t),c=m(o));y=d,C=c,x=p,w=h,this.$emit("node-resize",{nodeId:this.node.id,width:d,height:c,x:p,y:h})};let y=a,C=l,x=s,w=u;const S=()=>{document.removeEventListener("mousemove",b),document.removeEventListener("mouseup",S),document.head.removeChild(o),setTimeout(()=>{this.infoPopupEditable=!0},0),this.$emit("node-resize-end",{nodeId:this.node.id,width:y,height:C,x:x,y:w})};document.addEventListener("mousemove",b),document.addEventListener("mouseup",S)}}};const jc=Rc;var Oc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return n.node.hidden?n._e():t("div",{class:n.classes,style:n.wrapperStyle,attrs:{"data-id":n.node.id},on:{mousedown:n.onMouseDown,mouseup:n.onMouseUp,mouseenter:n.onMouseEnter,mouseleave:n.onMouseLeave,dblclick:function(e){return e.stopPropagation(),n.onDoubleClick.apply(null,arguments)},contextmenu:function(e){return e.stopPropagation(),n.onContextMenu.apply(null,arguments)}}},[t("WPopup",{attrs:{placement:"bottom",modeHide:"mousedown",editable:n.infoPopupEditable,minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.inforPopupBackgroundColor,textFontSize:n.inforPopupTitleTextFontSize,paddingStyle:{v:8,h:12}},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("NodeBody",{attrs:{node:n.node,connectable:n.connectable,selected:n.selected,resizable:n.resizable,locked:n.locked,hovered:n.hovered,lastW:n.cachedW,lastH:n.cachedH},on:{"resize-start":function(e){return n.onResizeStart(e.event,e.edge)},"connect-start":n.onConnectStart}})]},proxy:!0},{key:"content",fn:function(){return[n._t("node-popup",function(){return[n.node.name||n.node.description?t("div",{staticStyle:{"min-width":"120px"}},[n.node.name?t("div",{style:{fontSize:n.inforPopupTitleTextFontSize,color:n.inforPopupTitleTextColor,fontWeight:500}},[n._v(n._s(n.node.name))]):n._e(),n._v(" "),n.node.description?t("div",{style:{fontSize:n.inforPopupDescriptionTextFontSize,color:n.inforPopupDescriptionTextColor,marginTop:"4px"}},[n._v(n._s(n.node.description))]):n._e()]):n._e()]},{node:n.node})]},proxy:!0}],null,!0),model:{value:n.infoPopupShow,callback:function(e){n.infoPopupShow=e},expression:"infoPopupShow"}}),n._v(" "),t("transition",{attrs:{name:"vue-flow__fade"}},[(n.hovered||n.settingsPopupShow)&&n.draggable&&!n.locked&&n.settingsEnabled?t("div",{staticClass:"vue-flow__node-settings-anchor"},[t("WPopup",{attrs:{placement:"right-start",modeHide:"mousedown",minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.settingsPopupBackgroundColor,textColor:n.settingsPopupTextColor,paddingStyle:{v:8,h:8}},on:{show:function(e){return n.$emit("node-settings-click",{node:n.node})}},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{staticClass:"vue-flow__node-settings"},[t("svg",{attrs:{viewBox:"0 0 20 20",width:"14",height:"14",fill:"currentColor"}},[t("path",{attrs:{d:"M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z",transform:"translate(0 3)"}})])])]},proxy:!0},{key:"content",fn:function(){return[t("NodeSettingsForm",{attrs:{node:n.node,"def-node":n.dn,"text-font-size":n.settingsPopupTextFontSize,excludes:n.settingsExcludes},on:{update:n.onSettingsUpdate,delete:n.onSettingsDelete}})]},proxy:!0}],null,!1,4123440218),model:{value:n.settingsPopupShow,callback:function(e){n.settingsPopupShow=e},expression:"settingsPopupShow"}})],1):n._e()])],1)};Oc._withStripped=!0;const Vc={name:"NodeRenderer",components:{NodeWrapper:e({render:Oc,staticRenderFns:[]},function(n){n&&n("data-v-088e6a01_0",{source:"\n.vue-flow__node[data-v-088e6a01] {\r\n position: absolute;\r\n cursor: grab;\r\n user-select: none;\r\n pointer-events: all;\r\n box-sizing: border-box;\r\n border: 1px solid #bbb;\r\n border-radius: 3px;\r\n background: #fff;\r\n font-family: 'Microsoft JhengHei', '微軟正黑體', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n font-size: 12px;\r\n text-align: center;\r\n white-space: nowrap;\r\n transition: border-color 0.2s ease, box-shadow 0.3s ease;\n}\n.vue-flow__node[data-v-088e6a01]:hover {\r\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n}\n.vue-flow__node--selected[data-v-088e6a01] {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\n}\n.vue-flow__node--selected[data-v-088e6a01]:hover {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\n}\n.vue-flow__node--dragging[data-v-088e6a01] {\r\n cursor: grabbing;\r\n z-index: 1000 !important;\n}\r\n\r\n/* Settings icon anchor (positioning only) */\n.vue-flow__node-settings-anchor[data-v-088e6a01] {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\n}\r\n/* Settings icon (appearance only) */\n.vue-flow__node-settings[data-v-088e6a01] {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: border-color 0.15s ease, background 0.15s ease;\r\n color: #888;\n}\n.vue-flow__node-settings[data-v-088e6a01]:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\n}\r\n\r\n\r\n/* Shared SVG shape base styles */\n.vue-flow__node--diamond[data-v-088e6a01],\r\n.vue-flow__node--ellipse[data-v-088e6a01],\r\n.vue-flow__node--triangle[data-v-088e6a01] {\r\n background: transparent !important;\r\n border-color: transparent !important;\r\n border-radius: 0 !important;\n}\n.vue-flow__node--diamond[data-v-088e6a01]:hover,\r\n.vue-flow__node--ellipse[data-v-088e6a01]:hover,\r\n.vue-flow__node--triangle[data-v-088e6a01]:hover {\r\n box-shadow: none !important;\n}\n.vue-flow__node--diamond.vue-flow__node--selected[data-v-088e6a01],\r\n.vue-flow__node--ellipse.vue-flow__node--selected[data-v-088e6a01],\r\n.vue-flow__node--triangle.vue-flow__node--selected[data-v-088e6a01] {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\n}\n.vue-flow__node--diamond.vue-flow__node--selected[data-v-088e6a01]:hover,\r\n.vue-flow__node--ellipse.vue-flow__node--selected[data-v-088e6a01]:hover,\r\n.vue-flow__node--triangle.vue-flow__node--selected[data-v-088e6a01]:hover {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\n}\r\n/* SVG shape hover */\r\n/* polygon/ellipse live inside the NodeFace child component, so ::v-deep is\r\n required — a plain scoped selector would pin this component's data-v\r\n attribute onto the child's inner elements and never match. */\n.vue-flow__node--diamond[data-v-088e6a01]:hover .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle[data-v-088e6a01]:hover .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse[data-v-088e6a01]:hover .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));\n}\r\n/* SVG shape selected: red shadow */\n.vue-flow__node--diamond.vue-flow__node--selected[data-v-088e6a01] .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle.vue-flow__node--selected[data-v-088e6a01] .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse.vue-flow__node--selected[data-v-088e6a01] .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6));\n}\r\n/* Fade transition for settings icon and resize handles */\n.vue-flow__fade-enter-active[data-v-088e6a01],\r\n.vue-flow__fade-leave-active[data-v-088e6a01] {\r\n transition: opacity 0.15s ease;\n}\n.vue-flow__fade-enter[data-v-088e6a01],\r\n.vue-flow__fade-leave-to[data-v-088e6a01] {\r\n opacity: 0;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\nodes\\NodeWrapper.vue"],names:[],mappings:";AAiZA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,sBAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,6GAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,wDAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,8CAAA;AACA;AACA;EACA,8CAAA;AACA;AACA;EACA,gBAAA;EACA,wBAAA;AACA;;AAEA,4CAAA;AACA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,UAAA;EACA,mBAAA;AACA;AACA,oCAAA;AACA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,0DAAA;EACA,WAAA;AACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;AACA;;;AAGA,iCAAA;AACA;;;EAGA,kCAAA;EACA,oCAAA;EACA,2BAAA;AACA;AACA;;;EAGA,2BAAA;AACA;AACA;;;EAGA,oCAAA;EACA,2BAAA;AACA;AACA;;;EAGA,oCAAA;EACA,2BAAA;AACA;AACA,oBAAA;AACA;;+DAEA;AACA;;;EAGA,kDAAA;AACA;AACA,mCAAA;AACA;;;EAGA,mDAAA;AACA;AACA,yDAAA;AACA;;EAEA,8BAAA;AACA;AACA;;EAEA,UAAA;AACA",file:"NodeWrapper.vue",sourcesContent:["<template>\r\n <div\r\n v-if=\"!node.hidden\"\r\n :class=\"classes\"\r\n :style=\"wrapperStyle\"\r\n :data-id=\"node.id\"\r\n @mousedown=\"onMouseDown\"\r\n @mouseup=\"onMouseUp\"\r\n @mouseenter=\"onMouseEnter\"\r\n @mouseleave=\"onMouseLeave\"\r\n @dblclick.stop=\"onDoubleClick\"\r\n @contextmenu.stop=\"onContextMenu\"\r\n >\r\n <WPopup\r\n v-model=\"infoPopupShow\"\r\n placement=\"bottom\"\r\n modeHide=\"mousedown\"\r\n :editable=\"infoPopupEditable\"\r\n :minWidth=\"null\"\r\n :maxWidth=\"null\"\r\n :autoFitMinWidth=\"false\"\r\n :autoFitMaxWidth=\"false\"\r\n :backgroundColor=\"inforPopupBackgroundColor\"\r\n :textFontSize=\"inforPopupTitleTextFontSize\"\r\n :paddingStyle=\"{v:8,h:12}\"\r\n >\r\n <template v-slot:trigger>\r\n <NodeBody\r\n :node=\"node\"\r\n :connectable=\"connectable\"\r\n :selected=\"selected\"\r\n :resizable=\"resizable\"\r\n :locked=\"locked\"\r\n :hovered=\"hovered\"\r\n :lastW=\"cachedW\"\r\n :lastH=\"cachedH\"\r\n @resize-start=\"onResizeStart($event.event, $event.edge)\"\r\n @connect-start=\"onConnectStart\"\r\n />\r\n </template>\r\n <template v-slot:content>\r\n <slot name=\"node-popup\" :node=\"node\">\r\n <div v-if=\"node.name || node.description\" style=\"min-width:120px\">\r\n <div v-if=\"node.name\" :style=\"{ fontSize: inforPopupTitleTextFontSize, color: inforPopupTitleTextColor, fontWeight: 500 }\">{{ node.name }}</div>\r\n <div v-if=\"node.description\" :style=\"{ fontSize: inforPopupDescriptionTextFontSize, color: inforPopupDescriptionTextColor, marginTop: '4px' }\">{{ node.description }}</div>\r\n </div>\r\n </slot>\r\n </template>\r\n </WPopup>\r\n \x3c!-- Settings popup --\x3e\r\n <transition name=\"vue-flow__fade\">\r\n <div v-if=\"(hovered || settingsPopupShow) && draggable && !locked && settingsEnabled\" class=\"vue-flow__node-settings-anchor\">\r\n <WPopup\r\n v-model=\"settingsPopupShow\"\r\n placement=\"right-start\"\r\n modeHide=\"mousedown\"\r\n :minWidth=\"null\"\r\n :maxWidth=\"null\"\r\n :autoFitMinWidth=\"false\"\r\n :autoFitMaxWidth=\"false\"\r\n :backgroundColor=\"settingsPopupBackgroundColor\"\r\n :textColor=\"settingsPopupTextColor\"\r\n :paddingStyle=\"{v:8,h:8}\"\r\n @show=\"$emit('node-settings-click', { node: node })\"\r\n >\r\n <template v-slot:trigger>\r\n <div class=\"vue-flow__node-settings\">\r\n <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" fill=\"currentColor\">\r\n <path d=\"M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z\" transform=\"translate(0 3)\"/>\r\n </svg>\r\n </div>\r\n </template>\r\n <template v-slot:content>\r\n <NodeSettingsForm\r\n :node=\"node\"\r\n :def-node=\"dn\"\r\n :text-font-size=\"settingsPopupTextFontSize\"\r\n :excludes=\"settingsExcludes\"\r\n @update=\"onSettingsUpdate\"\r\n @delete=\"onSettingsDelete\"\r\n />\r\n </template>\r\n </WPopup>\r\n </div>\r\n </transition>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport NodeBody from './NodeBody.vue'\r\nimport NodeSettingsForm from '../ui/NodeSettingsForm.vue'\r\nimport WPopup from 'w-component-vue/src/components/WPopup.vue'\r\n\r\nexport default {\r\n name: 'NodeWrapper',\r\n components: { NodeBody, NodeSettingsForm, WPopup },\r\n inject: { getDefNode: { default: () => () => ({}) }, getDragGhost: { default: () => () => null } },\r\n props: {\r\n node: { type: Object, required: true },\r\n selected: { type: Boolean, default: false },\r\n draggable: { type: Boolean, default: true },\r\n connectable: { type: Boolean, default: true },\r\n resizable: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: '#fff' },\r\n settingsPopupTextColor: { type: String, default: '#333' },\r\n settingsPopupTextFontSize: { type: String, default: '12px' },\r\n inforPopupBackgroundColor: { type: String, default: '#fff' },\r\n inforPopupTitleTextColor: { type: String, default: '#333' },\r\n inforPopupTitleTextFontSize: { type: String, default: '12px' },\r\n inforPopupDescriptionTextColor: { type: String, default: '#888' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: '10px' },\r\n snapGridSize: { type: Number, default: null },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n computed: {\r\n dn() {\r\n return this.getDefNode()\r\n },\r\n isDiamond() {\r\n return this.node.shape === 'diamond'\r\n },\r\n isEllipse() {\r\n return this.node.shape === 'ellipse'\r\n },\r\n isTriangle() {\r\n let s = this.node.shape\r\n return s === 'triangle' || s === 'triangle-right' || s === 'triangle-down' || s === 'triangle-left'\r\n },\r\n isSvgShape() {\r\n return this.isDiamond || this.isEllipse || this.isTriangle\r\n },\r\n classes() {\r\n const nodeClasses = this.node.class\r\n ? (Array.isArray(this.node.class) ? this.node.class : [this.node.class])\r\n : []\r\n return [\r\n 'vue-flow__node',\r\n `vue-flow__node-${this.node.type || 'basic'}`,\r\n ...nodeClasses,\r\n {\r\n 'vue-flow__node--selected': this.selected,\r\n 'vue-flow__node--dragging': this.isDragging,\r\n 'vue-flow__node--locked': this.locked,\r\n 'vue-flow__node--diamond': this.isDiamond,\r\n 'vue-flow__node--ellipse': this.isEllipse,\r\n 'vue-flow__node--triangle': this.isTriangle,\r\n },\r\n ]\r\n },\r\n wrapperStyle() {\r\n const d = this.dn\r\n const n = this.node\r\n //拖曳/縮放ghost(細粒度): 進行中之暫時幾何優先(per-key反應式, 只有本節點被拖/縮放時才觸發重渲染)\r\n const g = this.getDragGhost(n.id)\r\n const px = g ? g.x : n.position.x\r\n const py = g ? g.y : n.position.y\r\n const w = (g && g.width !== undefined) ? g.width : n.width\r\n const h = (g && g.height !== undefined) ? g.height : n.height\r\n const style = {\r\n transform: `translate(${px}px, ${py}px)`,\r\n zIndex: n.zIndex || 0,\r\n // Nodes with an explicit width wrap long names instead of\r\n // overflowing (base CSS is nowrap); per-node style can override.\r\n ...(w ? { whiteSpace: 'pre-line' } : {}),\r\n ...(n.style || {}),\r\n }\r\n if (w) style.width = typeof w === 'number' ? `${w}px` : w\r\n if (h) style.height = typeof h === 'number' ? `${h}px` : h\r\n if (!this.isSvgShape) {\r\n let fColor = n.faceColor || d.faceColor\r\n if (fColor) style.background = fColor\r\n let eColor = n.edgeColor || d.edgeColor\r\n if (eColor) style.borderColor = eColor\r\n let eWidth = n.edgeWidth !== undefined ? n.edgeWidth : d.edgeWidth\r\n if (eWidth !== undefined) style.borderWidth = eWidth + 'px'\r\n }\r\n let fs = n.fontSize || d.fontSize\r\n if (fs) style.fontSize = fs + 'px'\r\n let fc = n.fontColor || d.fontColor\r\n if (fc) style.color = fc\r\n return style\r\n },\r\n },\r\n data() {\r\n return {\r\n isDragging: false,\r\n hovered: false,\r\n infoPopupShow: false,\r\n infoPopupEditable: true,\r\n settingsPopupShow: false,\r\n cachedW: 0,\r\n cachedH: 0,\r\n }\r\n },\r\n watch: {\r\n settingsPopupShow(val) {\r\n if (val) this.infoPopupShow = false\r\n },\r\n infoPopupShow(val) {\r\n if (val) this.settingsPopupShow = false\r\n },\r\n },\r\n mounted() {\r\n this.$nextTick(() => this.reportDimensions())\r\n },\r\n updated() {\r\n this.reportDimensions()\r\n },\r\n methods: {\r\n reportDimensions() {\r\n if (!this.$el) return\r\n const w = this.$el.offsetWidth\r\n const h = this.$el.offsetHeight\r\n if (w === this.cachedW && h === this.cachedH) return\r\n this.cachedW = w\r\n this.cachedH = h\r\n this.$emit('dimensions', { nodeId: this.node.id, width: w, height: h })\r\n },\r\n onMouseDown(event) {\r\n //點設定齒輪(及其popup錨區)不啟動節點拖曳/點擊: 齒輪刻意不用@mousedown.stop(stopPropagation會擋掉window層WPopup互斥協調),\r\n //故於此明確排除, 使點齒輪只開設定popup、不移動節點座標(避免尚未變更設定就先改到座標→誤觸發變更儲存)\r\n if (event.target.closest && event.target.closest('.vue-flow__node-settings-anchor')) {\r\n this._mouseDownPos = null\r\n return\r\n }\r\n this._mouseDownPos = { x: event.clientX, y: event.clientY }\r\n if (!this.draggable) return\r\n if (this.node.dragHandle) {\r\n const handle = event.target.closest(this.node.dragHandle)\r\n if (!handle) return\r\n }\r\n this.infoPopupShow = false\r\n this.$emit('drag-start', { node: this.node, event })\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const onDragMove = (e) => {\r\n if (Math.abs(e.clientX - startX) > 2 || Math.abs(e.clientY - startY) > 2) {\r\n this.infoPopupEditable = false\r\n document.removeEventListener('mousemove', onDragMove)\r\n }\r\n }\r\n const onDragEnd = () => {\r\n document.removeEventListener('mousemove', onDragMove)\r\n document.removeEventListener('mouseup', onDragEnd)\r\n if (!this.infoPopupEditable) {\r\n setTimeout(() => {\r\n this.infoPopupEditable = true\r\n }, 0)\r\n }\r\n }\r\n document.addEventListener('mousemove', onDragMove)\r\n document.addEventListener('mouseup', onDragEnd)\r\n },\r\n onMouseUp(event) {\r\n if (!this._mouseDownPos) return\r\n const dx = event.clientX - this._mouseDownPos.x\r\n const dy = event.clientY - this._mouseDownPos.y\r\n this._mouseDownPos = null\r\n if (Math.abs(dx) < 3 && Math.abs(dy) < 3) {\r\n this.$emit('node-click', { node: this.node, event })\r\n }\r\n },\r\n onDoubleClick(event) {\r\n this.$emit('node-double-click', { node: this.node, event })\r\n },\r\n openInfoPopup() {\r\n this.infoPopupShow = true\r\n },\r\n onContextMenu(event) {\r\n this.$emit('node-context-menu', { node: this.node, event })\r\n },\r\n onConnectStart(payload) {\r\n this.$emit('connect-start', { ...payload, nodeId: this.node.id })\r\n },\r\n onMouseEnter(event) {\r\n this.hovered = true\r\n this.$emit('node-mouseenter', { node: this.node, event })\r\n },\r\n onMouseLeave(event) {\r\n this.hovered = false\r\n this.$emit('node-mouseleave', { node: this.node, event })\r\n },\r\n onSettingsUpdate(key, value) {\r\n this.$emit('node-settings-update', { node: this.node, key, value })\r\n },\r\n onSettingsDelete() {\r\n this.$emit('node-settings-delete', { node: this.node })\r\n },\r\n onResizeStart(event, edge) {\r\n this.infoPopupShow = false\r\n this.$nextTick(() => {\r\n this.infoPopupEditable = false\r\n })\r\n event.preventDefault()\r\n\r\n // Lock cursor for the entire drag duration\r\n const cursorMap = {\r\n 'top-left': 'nwse-resize',\r\n 'bottom-right': 'nwse-resize',\r\n 'top-right': 'nesw-resize',\r\n 'bottom-left': 'nesw-resize',\r\n }\r\n const lockedCursor = cursorMap[edge] || 'default'\r\n const cursorStyle = document.createElement('style')\r\n cursorStyle.textContent = '* { cursor: ' + lockedCursor + ' !important; }'\r\n document.head.appendChild(cursorStyle)\r\n\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const startW = this.node.width || this.$el.offsetWidth\r\n const startH = this.node.height || this.$el.offsetHeight\r\n const startPosX = this.node.position.x\r\n const startPosY = this.node.position.y\r\n const snap = this.snapGridSize\r\n const minSize = snap || 10\r\n // Get zoom from the viewport transform\r\n const viewport = this.$el.closest('.vue-flow__viewport')\r\n const zoom = viewport ? parseFloat(viewport.style.transform.match(/scale\\(([^)]+)\\)/)?.[1] || 1) : 1\r\n\r\n const snapVal = (v) => snap ? Math.max(snap, Math.round(v / snap) * snap) : Math.max(minSize, Math.round(v))\r\n\r\n const resizeRight = (dx) => snapVal(startW + dx)\r\n const resizeLeft = (dx) => {\r\n const newW = snapVal(startW - dx)\r\n return { w: newW, x: startPosX + (startW - newW) }\r\n }\r\n const resizeBottom = (dy) => snapVal(startH + dy)\r\n const resizeTop = (dy) => {\r\n const newH = snapVal(startH - dy)\r\n return { h: newH, y: startPosY + (startH - newH) }\r\n }\r\n\r\n const onMouseMove = (e) => {\r\n const dx = (e.clientX - startX) / zoom\r\n const dy = (e.clientY - startY) / zoom\r\n let newW = startW; let newH = startH; let newX = startPosX; let newY = startPosY\r\n\r\n if (edge === 'top-left') {\r\n let rl2 = resizeLeft(dx); newW = rl2.w; newX = rl2.x\r\n let rt2 = resizeTop(dy); newH = rt2.h; newY = rt2.y\r\n }\r\n else if (edge === 'top-right') {\r\n newW = resizeRight(dx)\r\n let rt3 = resizeTop(dy); newH = rt3.h; newY = rt3.y\r\n }\r\n else if (edge === 'bottom-left') {\r\n let rl3 = resizeLeft(dx); newW = rl3.w; newX = rl3.x\r\n newH = resizeBottom(dy)\r\n }\r\n else if (edge === 'bottom-right') {\r\n newW = resizeRight(dx)\r\n newH = resizeBottom(dy)\r\n }\r\n\r\n //closure追蹤縮放最終值供resize-end發送\r\n //why: 縮放中node本體不變動(ghost僅作用於視覺), this.node.*是原值, 不可作為結果\r\n lastW = newW\r\n lastH = newH\r\n lastX = newX\r\n lastY = newY\r\n\r\n this.$emit('node-resize', {\r\n nodeId: this.node.id,\r\n width: newW,\r\n height: newH,\r\n x: newX,\r\n y: newY,\r\n })\r\n }\r\n\r\n let lastW = startW\r\n let lastH = startH\r\n let lastX = startPosX\r\n let lastY = startPosY\r\n\r\n const onMouseUp = () => {\r\n document.removeEventListener('mousemove', onMouseMove)\r\n document.removeEventListener('mouseup', onMouseUp)\r\n document.head.removeChild(cursorStyle)\r\n setTimeout(() => {\r\n this.infoPopupEditable = true\r\n }, 0)\r\n this.$emit('node-resize-end', {\r\n nodeId: this.node.id,\r\n width: lastW,\r\n height: lastH,\r\n x: lastX,\r\n y: lastY,\r\n })\r\n }\r\n\r\n document.addEventListener('mousemove', onMouseMove)\r\n document.addEventListener('mouseup', onMouseUp)\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__node {\r\n position: absolute;\r\n cursor: grab;\r\n user-select: none;\r\n pointer-events: all;\r\n box-sizing: border-box;\r\n border: 1px solid #bbb;\r\n border-radius: 3px;\r\n background: #fff;\r\n font-family: 'Microsoft JhengHei', '微軟正黑體', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n font-size: 12px;\r\n text-align: center;\r\n white-space: nowrap;\r\n transition: border-color 0.2s ease, box-shadow 0.3s ease;\r\n}\r\n.vue-flow__node:hover {\r\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\r\n}\r\n.vue-flow__node--selected {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\r\n}\r\n.vue-flow__node--selected:hover {\r\n box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.5);\r\n}\r\n.vue-flow__node--dragging {\r\n cursor: grabbing;\r\n z-index: 1000 !important;\r\n}\r\n\r\n/* Settings icon anchor (positioning only) */\r\n.vue-flow__node-settings-anchor {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\r\n}\r\n/* Settings icon (appearance only) */\r\n.vue-flow__node-settings {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: border-color 0.15s ease, background 0.15s ease;\r\n color: #888;\r\n}\r\n.vue-flow__node-settings:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n\r\n/* Shared SVG shape base styles */\r\n.vue-flow__node--diamond,\r\n.vue-flow__node--ellipse,\r\n.vue-flow__node--triangle {\r\n background: transparent !important;\r\n border-color: transparent !important;\r\n border-radius: 0 !important;\r\n}\r\n.vue-flow__node--diamond:hover,\r\n.vue-flow__node--ellipse:hover,\r\n.vue-flow__node--triangle:hover {\r\n box-shadow: none !important;\r\n}\r\n.vue-flow__node--diamond.vue-flow__node--selected,\r\n.vue-flow__node--ellipse.vue-flow__node--selected,\r\n.vue-flow__node--triangle.vue-flow__node--selected {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n.vue-flow__node--diamond.vue-flow__node--selected:hover,\r\n.vue-flow__node--ellipse.vue-flow__node--selected:hover,\r\n.vue-flow__node--triangle.vue-flow__node--selected:hover {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n/* SVG shape hover */\r\n/* polygon/ellipse live inside the NodeFace child component, so ::v-deep is\r\n required — a plain scoped selector would pin this component's data-v\r\n attribute onto the child's inner elements and never match. */\r\n.vue-flow__node--diamond:hover ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle:hover ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse:hover ::v-deep .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));\r\n}\r\n/* SVG shape selected: red shadow */\r\n.vue-flow__node--diamond.vue-flow__node--selected ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--triangle.vue-flow__node--selected ::v-deep .vue-flow__shape-svg polygon,\r\n.vue-flow__node--ellipse.vue-flow__node--selected ::v-deep .vue-flow__shape-svg ellipse {\r\n filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6));\r\n}\r\n/* Fade transition for settings icon and resize handles */\r\n.vue-flow__fade-enter-active,\r\n.vue-flow__fade-leave-active {\r\n transition: opacity 0.15s ease;\r\n}\r\n.vue-flow__fade-enter,\r\n.vue-flow__fade-leave-to {\r\n opacity: 0;\r\n}\r\n</style>\r\n"]},media:void 0})},jc,"data-v-088e6a01",false,void 0,!1,o,void 0,void 0)},props:{nodes:{type:Array,default:()=>[]},selectedNodeIds:{type:Array,default:()=>[]},nodesDraggable:{type:Boolean,default:!0},nodesConnectable:{type:Boolean,default:!0},nodesResizable:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},snapGridSize:{type:Number,default:null},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},computed:{visibleNodes(){return this.nodes.filter(n=>!n.hidden)}},methods:{isSelected(n){return this.selectedNodeIds.includes(n)},isDraggable(n){return void 0!==n.draggable?n.draggable:this.nodesDraggable},isConnectable(n){return void 0!==n.connectable?n.connectable:this.nodesConnectable},isResizable(n){return void 0!==n.resizable?n.resizable:this.nodesResizable},openNodeInfoPopup(n){let e=(this.$refs.wrappers||[]).find(e=>e.node&&e.node.id===n);return!!e&&(e.openInfoPopup(),!0)}}};var Yc=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-flow__nodes"},n._l(n.visibleNodes,function(e){return t("NodeWrapper",{key:e.id,ref:"wrappers",refInFor:!0,attrs:{node:e,selected:n.isSelected(e.id),draggable:n.isDraggable(e),connectable:n.isConnectable(e),resizable:n.isResizable(e),locked:n.locked,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"snap-grid-size":n.snapGridSize,"settings-enabled":n.settingsEnabled,"settings-excludes":n.settingsExcludes},on:{"drag-start":function(e){return n.$emit("drag-start",e)},"node-click":function(e){return n.$emit("node-click",e)},"node-double-click":function(e){return n.$emit("node-double-click",e)},"node-context-menu":function(e){return n.$emit("node-context-menu",e)},"node-settings-click":function(e){return n.$emit("node-settings-click",e)},"node-settings-update":function(e){return n.$emit("node-settings-update",e)},"node-settings-delete":function(e){return n.$emit("node-settings-delete",e)},"node-mouseenter":function(e){return n.$emit("node-mouseenter",e)},"node-mouseleave":function(e){return n.$emit("node-mouseleave",e)},"connect-start":function(e){return n.$emit("connect-start",e)},dimensions:function(e){return n.$emit("dimensions",e)},"node-resize":function(e){return n.$emit("node-resize",e)},"node-resize-end":function(e){return n.$emit("node-resize-end",e)}},scopedSlots:n._u([n.$scopedSlots["node-popup"]?{key:"node-popup",fn:function(e){return[n._t("node-popup",null,null,e)]}}:null],null,!0)})}),1)};Yc._withStripped=!0;const Uc=e({render:Yc,staticRenderFns:[]},function(n){n&&n("data-v-ddb0e4d0_0",{source:"\n.vue-flow__nodes[data-v-ddb0e4d0] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 0;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\nodes\\NodeRenderer.vue"],names:[],mappings:";AAmGA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AACA",file:"NodeRenderer.vue",sourcesContent:['<template>\r\n <div class="vue-flow__nodes">\r\n <NodeWrapper\r\n v-for="node in visibleNodes"\r\n ref="wrappers"\r\n :key="node.id"\r\n :node="node"\r\n :selected="isSelected(node.id)"\r\n :draggable="isDraggable(node)"\r\n :connectable="isConnectable(node)"\r\n :resizable="isResizable(node)"\r\n :locked="locked"\r\n :settings-popup-background-color="settingsPopupBackgroundColor"\r\n :settings-popup-text-color="settingsPopupTextColor"\r\n :settings-popup-text-font-size="settingsPopupTextFontSize"\r\n :infor-popup-background-color="inforPopupBackgroundColor"\r\n :infor-popup-title-text-color="inforPopupTitleTextColor"\r\n :infor-popup-title-text-font-size="inforPopupTitleTextFontSize"\r\n :infor-popup-description-text-color="inforPopupDescriptionTextColor"\r\n :infor-popup-description-text-font-size="inforPopupDescriptionTextFontSize"\r\n :snap-grid-size="snapGridSize"\r\n :settings-enabled="settingsEnabled"\r\n :settings-excludes="settingsExcludes"\r\n @drag-start="$emit(\'drag-start\', $event)"\r\n @node-click="$emit(\'node-click\', $event)"\r\n @node-double-click="$emit(\'node-double-click\', $event)"\r\n @node-context-menu="$emit(\'node-context-menu\', $event)"\r\n @node-settings-click="$emit(\'node-settings-click\', $event)"\r\n @node-settings-update="$emit(\'node-settings-update\', $event)"\r\n @node-settings-delete="$emit(\'node-settings-delete\', $event)"\r\n @node-mouseenter="$emit(\'node-mouseenter\', $event)"\r\n @node-mouseleave="$emit(\'node-mouseleave\', $event)"\r\n @connect-start="$emit(\'connect-start\', $event)"\r\n @dimensions="$emit(\'dimensions\', $event)"\r\n @node-resize="$emit(\'node-resize\', $event)"\r\n @node-resize-end="$emit(\'node-resize-end\', $event)"\r\n >\r\n <template v-if="$scopedSlots[\'node-popup\']" v-slot:node-popup="scope">\r\n <slot name="node-popup" v-bind="scope" />\r\n </template>\r\n </NodeWrapper>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport NodeWrapper from \'./NodeWrapper.vue\'\r\n\r\nexport default {\r\n name: \'NodeRenderer\',\r\n components: { NodeWrapper },\r\n props: {\r\n nodes: { type: Array, default: () => [] },\r\n selectedNodeIds: { type: Array, default: () => [] },\r\n nodesDraggable: { type: Boolean, default: true },\r\n nodesConnectable: { type: Boolean, default: true },\r\n nodesResizable: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n settingsPopupTextColor: { type: String, default: \'#333\' },\r\n settingsPopupTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n inforPopupTitleTextColor: { type: String, default: \'#333\' },\r\n inforPopupTitleTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupDescriptionTextColor: { type: String, default: \'#888\' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: \'10px\' },\r\n snapGridSize: { type: Number, default: null },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n computed: {\r\n visibleNodes() {\r\n return this.nodes.filter(n => !n.hidden)\r\n },\r\n },\r\n methods: {\r\n isSelected(id) {\r\n return this.selectedNodeIds.includes(id)\r\n },\r\n isDraggable(node) {\r\n return node.draggable !== undefined ? node.draggable : this.nodesDraggable\r\n },\r\n isConnectable(node) {\r\n return node.connectable !== undefined ? node.connectable : this.nodesConnectable\r\n },\r\n isResizable(node) {\r\n return node.resizable !== undefined ? node.resizable : this.nodesResizable\r\n },\r\n openNodeInfoPopup(nodeId) {\r\n let wrappers = this.$refs.wrappers || []\r\n let w = wrappers.find(c => c.node && c.node.id === nodeId)\r\n if (!w) return false\r\n w.openInfoPopup()\r\n return true\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__nodes {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 0;\r\n}\r\n</style>\r\n']},media:void 0})},Vc,"data-v-ddb0e4d0",false,void 0,!1,o,void 0,void 0);let Xc=new Map,Gc=-1;function Zc(){Xc.clear(),Gc=-1}function qc(n,e,t,o,r,i,a,l,s,u,d){let c=Math.floor(Date.now()/16);c!==Gc&&(Xc.clear(),Gc=c);let p=Math.round(n/10)+","+Math.round(e/10)+","+Math.round(o/10)+","+Math.round(r/10)+","+t+","+i,f=Xc.get(p);if(f)return f;let h=[];if(l&&l.length>0){let n=s||{};for(let e=0;e<l.length;e++){let t=l[e];if(t.hidden)continue;let o=n[t.id]&&n[t.id].width||t.width||100,r=n[t.id]&&n[t.id].height||t.height||40;h.push({l:t.position.x,t:t.position.y,r:t.position.x+o,b:t.position.y+r})}}let g=Qc(h,n,e),v=Qc(h,o,r),m=function(n,e,t,o,r,i,a,l,s){if(!a||!l)return null;let u=sp(t),d=sp(i),c=[[a.l,a.t,a.r-a.l,a.b-a.t],[l.l,l.t,l.r-l.l,l.b-l.t]],p=n-o,f=e-r,h=2*s;if(p*p+f*f<h*h)return null;let g=[[],[]];for(let n=0;n<2;n++)g[n][1]=c[n][0]-s,g[n][2]=c[n][1]-s,g[n][4]=c[n][0]+c[n][2]+s,g[n][8]=c[n][1]+c[n][3]+s;let v=[[.5,.5],[.5,.5]],m=c[0][2]||1,A=c[0][3]||1,b=c[1][2]||1,y=c[1][3]||1;v[0][0]=(n-c[0][0])/m,v[0][1]=(e-c[0][1])/A,v[1][0]=(o-c[1][0])/b,v[1][1]=(r-c[1][1])/y;let C=c[0][0]+c[0][2]/2,x=c[0][1]+c[0][3]/2,w=c[1][0]+c[1][2]/2,S=c[1][1]+c[1][3]/2,k=C-w,_=x-S,B=0;k<0?B=_<0?2:1:_<=0&&(B=0===k?2:3);let T=[];T[1]=Math.max(c[0][0]-(c[1][0]+c[1][2])-h,0),T[2]=Math.max(c[0][1]-(c[1][1]+c[1][3])-h,0),T[3]=Math.max(c[1][0]-(c[0][0]+c[0][2])-h,0),T[4]=Math.max(c[1][1]-(c[0][1]+c[0][3])-h,0);let P=u===ep?3:u,z=d===ep?3:d;P-=B,z-=B,P<1&&(P+=4);z<1&&(z+=4);let E=lp[P-1][z-1],I=[];for(let n=0;n<12;n++)I[n]=[0,0];switch(I[0][0]=c[0][0],I[0][1]=c[0][1],u){case Jc:I[0][0]-=s,I[0][1]+=v[0][1]*c[0][3];break;case np:I[0][0]+=v[0][0]*c[0][2],I[0][1]+=c[0][3]+s;break;case ep:I[0][0]+=c[0][2]+s,I[0][1]+=v[0][1]*c[0][3];break;case Kc:I[0][0]+=v[0][0]*c[0][2],I[0][1]-=s}let F=0,$=(u&(ep|Jc))>0?0:1,H=$;for(let n=0;n<E.length;n++){let e=15&E[n],t=e===ep?3:e;t+=B,t>4&&(t-=4);let o=ap[t-1],r=t%2>0?0:1;r!==$&&(F++,I[F]=[I[F-1][0],I[F-1][1]]);let i=(E[n]&ip)>0,a=(E[n]&rp)>0,l=(E[n]&tp)>>5;l<<=B,l>15&&(l>>=4);let s=(E[n]&op)>0;if((a||i)&&l<9){let n,e=a?0:1;if(n=s&&0===r?c[e][0]+v[e][0]*c[e][2]:s?c[e][1]+v[e][1]*c[e][3]:g[e][l],0===r){let e=(n-I[F][0])*o[0];e>0&&(I[F][0]+=o[0]*e)}else{let e=(n-I[F][1])*o[1];e>0&&(I[F][1]+=o[1]*e)}}else s&&(I[F][0]+=o[0]*Math.abs(T[t]/2),I[F][1]+=o[1]*Math.abs(T[t]/2));F>0&&I[F][r]===I[F-1][r]?F--:$=r}let N=[{x:n,y:e}],W=((d&(ep|Jc))>0?0:1)===H?0:1;for(let n=0;n<=F&&(n!==F||W===(F+1)%2);n++)N.push({x:Math.round(10*I[n][0])/10,y:Math.round(10*I[n][1])/10});N.push({x:o,y:r});let M=[N[0]];for(let n=1;n<N.length;n++)(Math.abs(N[n].x-M[M.length-1].x)>.5||Math.abs(N[n].y-M[M.length-1].y)>.5)&&M.push(N[n]);return M}(n,e,t,o,r,i,g,v,a||24);return m||(m=function(n,e,t,o,r,i){let a=[{x:n,y:e}];i&&t>=i.l&&t<=i.r&&e>=i.t&&e<=i.b?r&&n>=r.l&&n<=r.r&&o>=r.t&&o<=r.b||a.push({x:n,y:o}):n!==t&&e!==o&&a.push({x:t,y:e});return a.push({x:t,y:o}),a}(n,e,o,r,g,v)),Xc.size>200&&Xc.clear(),Xc.set(p,m),m}function Qc(n,e,t){for(let o=0;o<n.length;o++){let r=n[o];if(e>=r.l-5&&e<=r.r+5&&t>=r.t-5&&t<=r.b+5)return r}return null}let Jc=1,Kc=2,np=4,ep=8,tp=480,op=512,rp=1024,ip=2048,ap=[[-1,0],[0,-1],[1,0],[0,1],[-1,0],[0,-1],[1,0]],lp=[[[513,2308,2081,2562],[513,1090,514,2184,2114,2561],[513,1090,514,2564,2184,2562],[513,2308,2561,1090,514,2568,2308]],[[514,1057,513,2308,2081,2562],[514,2184,2114,2561],[514,2184,2562,1057,513,2564,2184],[514,1057,513,2568,2308,2561]],[[1090,514,1057,513,2308,2081,2562],[2114,2561],[1090,2562,1057,513,2564,2184],[1090,514,1057,513,2308,2561,2568]],[[2081,2562],[1057,513,1090,514,2184,2114,2561],[1057,513,1090,514,2184,2562,2564],[1057,2561,1090,514,2568,2308]]];function sp(n){switch(n){case"left":return Jc;case"top":return Kc;case"right":return ep;default:return np}}function up(n){if(!Array.isArray(n)||0===n.length)return null;const e=[];for(const t of n){let n=null,o=null;if(Array.isArray(t)&&t.length>=2?(n=Number(t[0]),o=Number(t[1])):t&&"object"==typeof t&&(n=Number(t.x),o=Number(t.y)),!Number.isFinite(n)||!Number.isFinite(o))return null;e.push({x:n,y:o})}return e}function dp(n,e,t,o,r,i,a){const l=[{x:n,y:e}],s=n=>{const e=l[l.length-1];(Math.abs(n.x-e.x)>.5||Math.abs(n.y-e.y)>.5)&&l.push({x:n.x,y:n.y})};let u="left"===t||"right"===t;for(let n=0;n<a.length;n++){const e=a[n],t=l[l.length-1],o=Math.abs(e.x-t.x),r=Math.abs(e.y-t.y);let i;o>.5&&r>.5?(s(u?{x:e.x,y:t.y}:{x:t.x,y:e.y}),i=!u):i=o>.5,s(e),u=!i}const d=l[l.length-1],c="left"===i||"right"===i;return Math.abs(o-d.x)>.5&&Math.abs(r-d.y)>.5&&s(c?{x:d.x,y:r}:{x:o,y:d.y}),s({x:o,y:r}),l}function cp(n,e){switch(e){case"top":return{x:0,y:-n};case"bottom":return{x:0,y:n};case"left":return{x:-n,y:0};case"right":return{x:n,y:0};default:return{x:0,y:0}}}function pp({sourceX:n,sourceY:e,sourcePosition:t="bottom",targetX:o,targetY:r,targetPosition:i="top",curvature:a=.25,points:l}){const s=up(l);if(s){const t=[{x:n,y:e},...s,{x:o,y:r}];let i=`M ${t[0].x},${t[0].y}`;for(let n=0;n<t.length-1;n++){const e=t[n-1]||t[n],o=t[n],r=t[n+1],a=t[n+2]||r;i+=` C ${o.x+(r.x-e.x)/6},${o.y+(r.y-e.y)/6} ${r.x-(a.x-o.x)/6},${r.y-(a.y-o.y)/6} ${r.x},${r.y}`}const a=vp(t);return{path:i,labelX:a.x,labelY:a.y}}const u=Math.sqrt(Math.pow(o-n,2)+Math.pow(r-e,2)),d=Math.max(u*a,25),c=cp(d,t),p=cp(d,i),f=n+c.x,h=e+c.y,g=o+p.x,v=r+p.y;return{path:`M ${n},${e} C ${f},${h} ${g},${v} ${o},${r}`,labelX:(n+f+g+o)/4,labelY:(e+h+v+r)/4}}function fp({sourceX:n,sourceY:e,targetX:t,targetY:o,points:r}){const i=up(r);if(i){const r=[{x:n,y:e},...i,{x:t,y:o}],a=r.map((n,e)=>`${0===e?"M":"L"} ${n.x},${n.y}`).join(" "),l=vp(r);return{path:a,labelX:l.x,labelY:l.y}}return{path:`M ${n},${e} L ${t},${o}`,labelX:(n+t)/2,labelY:(e+o)/2}}function hp({sourceX:n,sourceY:e,sourcePosition:t="bottom",targetX:o,targetY:r,targetPosition:i="top",offset:a=20,allNodes:l,nodeInternals:s,connFromId:u,connToId:d,points:c}){const p=up(c),f=p?dp(n,e,t,o,r,i,p):qc(n,e,t,o,r,i,a,l,s),h=f.map((n,e)=>`${0===e?"M":"L"} ${n.x},${n.y}`).join(" "),g=vp(f);return{path:h,labelX:g.x,labelY:g.y}}function gp({sourceX:n,sourceY:e,sourcePosition:t="bottom",targetX:o,targetY:r,targetPosition:i="top",borderRadius:a=5,offset:l=20,allNodes:s,nodeInternals:u,connFromId:d,connToId:c,points:p}){const f=up(p);return function(n,e){if(n.length<=2)return{path:`M ${n[0].x},${n[0].y} L ${n[1].x},${n[1].y}`,labelX:(n[0].x+n[1].x)/2,labelY:(n[0].y+n[1].y)/2};let t=`M ${n[0].x},${n[0].y}`;for(let o=1;o<n.length-1;o++){const r=n[o-1],i=n[o],a=n[o+1],l=i.x-r.x,s=i.y-r.y,u=a.x-i.x,d=a.y-i.y,c=Math.sqrt(l*l+s*s),p=Math.sqrt(u*u+d*d);if(0===c||0===p){t+=` L ${i.x},${i.y}`;continue}const f=Math.min(e,c/2,p/2),h=i.x-l/c*f,g=i.y-s/c*f,v=i.x+u/p*f,m=i.y+d/p*f;t+=` L ${h},${g} Q ${i.x},${i.y} ${v},${m}`}t+=` L ${n[n.length-1].x},${n[n.length-1].y}`;const o=vp(n);return{path:t,labelX:o.x,labelY:o.y}}(f?dp(n,e,t,o,r,i,f):qc(n,e,t,o,r,i,l,s,u),a)}function vp(n){if(n.length<2)return{x:n[0].x,y:n[0].y};let e=0;for(let t=0;t<n.length-1;t++)e+=Math.abs(n[t+1].x-n[t].x)+Math.abs(n[t+1].y-n[t].y);let t=e/2,o=0;for(let e=0;e<n.length-1;e++){let r=Math.abs(n[e+1].x-n[e].x)+Math.abs(n[e+1].y-n[e].y);if(o+r>=t){let i=r>0?(t-o)/r:0;return{x:n[e].x+(n[e+1].x-n[e].x)*i,y:n[e].y+(n[e+1].y-n[e].y)*i}}o+=r}return{x:n[n.length-1].x,y:n[n.length-1].y}}function mp(n,e,t,o){const r=t||{},i=r.width||n.width||150,a=r.height||n.height||40,l=n.position.x,s=n.position.y,u="diamond"===n.shape,d="ellipse"===n.shape,c=n.shape,p="triangle"===c||"triangle-right"===c||"triangle-down"===c||"triangle-left"===c,f="basic"===n.type&&(n.toPosition||"bottom")===(n.fromPosition||"top");let h=.5;if(f&&"target"===o&&(h=.33),f&&"source"===o&&(h=.67),u&&f)return function(n,e,t,o,r,i){let a=t/2,l=o/2;switch(r){case"top":if(i<=.5){let t=2*i;return{x:n+t*a,y:e+l-t*l}}{let t=2*(i-.5);return{x:n+a+t*a,y:e+t*l}}case"bottom":if(i<=.5){let t=2*i;return{x:n+t*a,y:e+l+t*l}}{let t=2*(i-.5);return{x:n+a+t*a,y:e+o-t*l}}case"left":if(i<=.5){let t=2*i;return{x:n+a-t*a,y:e+t*l}}{let t=2*(i-.5);return{x:n+t*a,y:e+l+t*l}}case"right":if(i<=.5){let t=2*i;return{x:n+a+t*a,y:e+t*l}}{let o=2*(i-.5);return{x:n+t-o*a,y:e+l+o*l}}default:return{x:n+a,y:e+o}}}(l,s,i,a,e,h);if(d)return function(n,e,t,o,r,i){let a,l=n+t/2,s=e+o/2,u=t/2,d=o/2;switch(r){case"top":a=Math.PI*(1-i);break;case"bottom":a=Math.PI*(i-1);break;case"left":a=Math.PI*(.5+i);break;case"right":a=Math.PI*(.5-i);break;default:a=0}return{x:l+u*Math.cos(a),y:s-d*Math.sin(a)}}(l,s,i,a,e,h);if(p)return function(n,e,t,o,r,i,a){let l,s,u,d,c,p,f;"triangle-right"===a?(l={x:n+t,y:e+o/2},s={x:n,y:e},u={x:n,y:e+o},d="right",c="left",p="top",f="bottom"):"triangle-down"===a?(l={x:n+t/2,y:e+o},s={x:n,y:e},u={x:n+t,y:e},d="bottom",c="top",p="left",f="right"):"triangle-left"===a?(l={x:n,y:e+o/2},s={x:n+t,y:e},u={x:n+t,y:e+o},d="left",c="right",p="top",f="bottom"):(l={x:n+t/2,y:e},s={x:n,y:e+o},u={x:n+t,y:e+o},d="top",c="bottom",p="left",f="right");if(r===d){if(i<=.5){let n=2*i;return{x:s.x+(l.x-s.x)*n,y:s.y+(l.y-s.y)*n}}{let n=2*(i-.5);return{x:l.x+(u.x-l.x)*n,y:l.y+(u.y-l.y)*n}}}if(r===c)return{x:s.x+(u.x-s.x)*i,y:s.y+(u.y-s.y)*i};if(r===p)return{x:l.x+(s.x-l.x)*i,y:l.y+(s.y-l.y)*i};if(r===f)return{x:l.x+(u.x-l.x)*i,y:l.y+(u.y-l.y)*i};return{x:n+t/2,y:e+o/2}}(l,s,i,a,e,h,c);switch(e){case"top":return{x:l+i*h,y:s};case"bottom":return{x:l+i*h,y:s+a};case"left":return{x:l,y:s+a*h};case"right":return{x:l+i,y:s+a*h};default:return{x:l+i/2,y:s+a}}}function Ap(n,e){return e?{x:Math.round(n.x/e)*e,y:Math.round(n.y/e)*e}:n}var bp={components:{WColorSelect:Mc},props:{conn:{type:Object,required:!0},defConn:{type:Object,required:!0},textFontSize:{type:String,default:""},excludes:{type:Array,default:()=>[]},defaultPoint:{type:Object,default:null},targetPoint:{type:Object,default:null}},data(){return{confirmDelete:!1,ptsLocal:this.normalizePoints(this.conn.points)}},computed:{formStyle(){let n={};return this.textFontSize&&(n.fontSize=this.textFontSize),n}},watch:{"conn.points":function(n){JSON.stringify(this.normalizePoints(n))!==JSON.stringify(this.ptsLocal)&&(this.ptsLocal=this.normalizePoints(n))}},methods:{isEx(n){return this.excludes.indexOf(n)>=0},normalizePoints(n){if(!Array.isArray(n))return[];const e=[];for(const t of n)Array.isArray(t)&&t.length>=2?e.push([Number(t[0])||0,Number(t[1])||0]):t&&"object"==typeof t&&e.push([Number(t.x)||0,Number(t.y)||0]);return e},emitWaypoints(){this.$emit("update","points",this.ptsLocal.length?this.ptsLocal.map(n=>[n[0],n[1]]):null)},addWaypoint(){const n=this.ptsLocal[this.ptsLocal.length-1];let e;e=n?this.targetPoint?[Math.round((n[0]+this.targetPoint.x)/2),Math.round((n[1]+this.targetPoint.y)/2)]:[n[0]+40,n[1]+40]:this.defaultPoint?[Math.round(this.defaultPoint.x),Math.round(this.defaultPoint.y)]:this.targetPoint?[Math.round(this.targetPoint.x)-40,Math.round(this.targetPoint.y)-40]:[0,0],this.ptsLocal.push(e),this.emitWaypoints()},removeWaypoint(n){this.ptsLocal.splice(n,1),this.emitWaypoints()},onWaypointInput(n,e,t){const o=Number(t);""===t||isNaN(o)||(this.$set(this.ptsLocal[n],e,o),this.emitWaypoints())},onFontSizeInput(n){let e=Number(n),t=this.defConn;!n||isNaN(e)||e<t.fontSizeMin||(e>t.fontSizeMax&&(e=t.fontSizeMax),this.$emit("update","fontSize",e))},onEdgeWidthInput(n){let e=Number(n);!n||isNaN(e)||e<1||(e>24&&(e=24),this.$emit("update","edgeWidth",e))}}};const yp=bp;var Cp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-flow__settings-form",style:n.formStyle},[n.isEx("name")?n._e():t("label",[n._v("Name\n "),t("input",{attrs:{type:"text"},domProps:{value:n.conn.name||""},on:{input:function(e){return n.$emit("update","name",e.target.value)}}})]),n._v(" "),n.isEx("description")?n._e():t("label",[n._v("Description\n "),t("input",{attrs:{type:"text"},domProps:{value:n.conn.description||""},on:{input:function(e){return n.$emit("update","description",e.target.value)}}})]),n._v(" "),n.isEx("type")?n._e():t("label",[n._v("Type\n "),t("select",{domProps:{value:n.conn.type||n.defConn.type},on:{input:function(e){return n.$emit("update","type",e.target.value)}}},[t("option",{attrs:{value:"bezier"}},[n._v("Bezier")]),n._v(" "),t("option",{attrs:{value:"straight"}},[n._v("Straight")]),n._v(" "),t("option",{attrs:{value:"step"}},[n._v("Step")]),n._v(" "),t("option",{attrs:{value:"smoothstep"}},[n._v("Smooth Step")])])]),n._v(" "),n.isEx("fontSize")?n._e():t("label",[n._v("Font Size\n "),t("input",{attrs:{type:"number",min:n.defConn.fontSizeMin,max:n.defConn.fontSizeMax},domProps:{value:n.conn.fontSize||n.defConn.fontSize},on:{input:function(e){return n.onFontSizeInput(e.target.value)}}})]),n._v(" "),n.isEx("fontColor")?n._e():t("label",[n._v("Font Color\n "),t("WColorSelect",{attrs:{value:n.conn.fontColor||n.defConn.fontColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","fontColor",e)}}})],1),n._v(" "),n.isEx("animated")?n._e():t("label",[n._v("Animated\n "),t("input",{attrs:{type:"checkbox"},domProps:{checked:!!n.conn.animated},on:{change:function(e){return n.$emit("update","animated",e.target.checked)}}})]),n._v(" "),n.isEx("edgeColor")?n._e():t("label",[n._v("Edge Color\n "),t("WColorSelect",{attrs:{value:n.conn.edgeColor||n.defConn.edgeColor,size:160,colorBlockSize:16,showColorText:!1},on:{input:function(e){return n.$emit("update","edgeColor",e)}}})],1),n._v(" "),n.isEx("edgeWidth")?n._e():t("label",[n._v("Edge Width\n "),t("input",{attrs:{type:"number",min:"1",max:"24"},domProps:{value:void 0!==n.conn.edgeWidth?n.conn.edgeWidth:n.defConn.edgeWidth},on:{input:function(e){return n.onEdgeWidthInput(e.target.value)}}})]),n._v(" "),n.isEx("markerEnd")?n._e():t("label",[n._v("Marker End\n "),t("select",{domProps:{value:n.conn.markerEnd||n.defConn.markerEnd},on:{input:function(e){return n.$emit("update","markerEnd",e.target.value||void 0)}}},[t("option",{attrs:{value:""}},[n._v("None")]),n._v(" "),t("option",{attrs:{value:"arrow"}},[n._v("Arrow")]),n._v(" "),t("option",{attrs:{value:"arrowclosed"}},[n._v("Arrow Closed")])])]),n._v(" "),n.isEx("fromPosition")?n._e():t("label",[n._v("From Anchor\n "),t("select",{domProps:{value:n.conn.fromPosition||""},on:{input:function(e){return n.$emit("update","fromPosition",e.target.value||void 0)}}},[t("option",{attrs:{value:""}},[n._v("Auto")]),n._v(" "),t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("toPosition")?n._e():t("label",[n._v("To Anchor\n "),t("select",{domProps:{value:n.conn.toPosition||""},on:{input:function(e){return n.$emit("update","toPosition",e.target.value||void 0)}}},[t("option",{attrs:{value:""}},[n._v("Auto")]),n._v(" "),t("option",{attrs:{value:"top"}},[n._v("Top")]),n._v(" "),t("option",{attrs:{value:"right"}},[n._v("Right")]),n._v(" "),t("option",{attrs:{value:"bottom"}},[n._v("Bottom")]),n._v(" "),t("option",{attrs:{value:"left"}},[n._v("Left")])])]),n._v(" "),n.isEx("points")?n._e():t("div",{staticClass:"vue-flow__waypoints"},[t("div",{staticClass:"vue-flow__waypoints-head"},[t("span",[n._v("Waypoints")]),n._v(" "),t("button",{staticClass:"vue-flow__waypoints-add",attrs:{title:"新增轉折點"},on:{click:n.addWaypoint}},[n._v("＋")])]),n._v(" "),n._l(n.ptsLocal,function(e,o){return t("div",{key:"wp"+o,staticClass:"vue-flow__waypoints-row"},[t("span",{staticClass:"vue-flow__waypoints-idx"},[n._v(n._s(o+1))]),n._v(" "),t("input",{attrs:{type:"number",title:"X"},domProps:{value:e[0]},on:{input:function(e){return n.onWaypointInput(o,0,e.target.value)}}}),n._v(" "),t("input",{attrs:{type:"number",title:"Y"},domProps:{value:e[1]},on:{input:function(e){return n.onWaypointInput(o,1,e.target.value)}}}),n._v(" "),t("button",{staticClass:"vue-flow__waypoints-del",attrs:{title:"移除此轉折點"},on:{click:function(e){return n.removeWaypoint(o)}}},[n._v("×")])])}),n._v(" "),n.ptsLocal.length?n._e():t("div",{staticClass:"vue-flow__waypoints-empty"},[n._v("無(自動路由)")])],2),n._v(" "),t("div",{staticClass:"vue-flow__delete-area"},[n.confirmDelete?[t("span",{staticClass:"vue-flow__delete-warn"},[n._v("確定要刪除此連接線？")]),n._v(" "),t("div",{staticClass:"vue-flow__delete-confirm-row"},[t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){return n.$emit("delete")}}},[n._v("確認刪除")]),n._v(" "),t("button",{staticClass:"vue-flow__delete-btn vue-flow__delete-btn--cancel",on:{click:function(e){n.confirmDelete=!1}}},[n._v("取消")])])]:t("button",{staticClass:"vue-flow__delete-btn",on:{click:function(e){n.confirmDelete=!0}}},[n._v("刪除連接線")])],2)])};Cp._withStripped=!0;const xp=e({render:Cp,staticRenderFns:[]},function(n){n&&n("data-v-c733b55c_0",{source:'\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\n}\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\n}\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\n}\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\n}\n.vue-flow__waypoints {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n padding-top: 6px;\r\n border-top: 1px solid #eee;\r\n font-size: 12px;\n}\n.vue-flow__waypoints-head {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.vue-flow__waypoints-add {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #666;\r\n cursor: pointer;\r\n font-size: 12px;\r\n line-height: 1;\n}\n.vue-flow__waypoints-add:hover {\r\n border-color: #666;\r\n color: #333;\n}\n.vue-flow__waypoints-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\n}\n.vue-flow__waypoints-idx {\r\n width: 14px;\r\n color: #999;\r\n font-size: 11px;\r\n text-align: right;\n}\n.vue-flow__waypoints-row input[type="number"] {\r\n width: 62px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\n}\n.vue-flow__waypoints-del {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #999;\r\n cursor: pointer;\r\n font-size: 13px;\r\n line-height: 1;\r\n flex-shrink: 0;\n}\n.vue-flow__waypoints-del:hover {\r\n border-color: #dc2626;\r\n color: #dc2626;\n}\n.vue-flow__waypoints-empty {\r\n color: #aaa;\r\n font-size: 11px;\n}\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\n}\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\n}\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\n}\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\n}\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\n}\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\n}\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\n}\r\n',map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\ui\\ConnSettingsForm.vue"],names:[],mappings:";AAsLA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,QAAA;EACA,eAAA;AACA;AACA;;;EAGA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,gBAAA;EACA,0BAAA;EACA,eAAA;AACA;AACA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;AACA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,WAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AACA;AACA;EACA,WAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;AACA;AACA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;AACA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,cAAA;EACA,cAAA;AACA;AACA;EACA,qBAAA;EACA,cAAA;AACA;AACA;EACA,WAAA;EACA,eAAA;AACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;AACA;AACA;EACA,cAAA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AACA;AACA;EACA,aAAA;EACA,QAAA;AACA;AACA;EACA,iBAAA;EACA,eAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,mBAAA;EACA,qBAAA;AACA;AACA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;AACA;AACA;EACA,mBAAA;EACA,kBAAA;AACA",file:"ConnSettingsForm.vue",sourcesContent:['<template>\r\n <div class="vue-flow__settings-form" :style="formStyle">\r\n <label v-if="!isEx(\'name\')">Name\r\n <input type="text" :value="conn.name || \'\'" @input="$emit(\'update\', \'name\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'description\')">Description\r\n <input type="text" :value="conn.description || \'\'" @input="$emit(\'update\', \'description\', $event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'type\')">Type\r\n <select :value="conn.type || defConn.type" @input="$emit(\'update\', \'type\', $event.target.value)">\r\n <option value="bezier">Bezier</option>\r\n <option value="straight">Straight</option>\r\n <option value="step">Step</option>\r\n <option value="smoothstep">Smooth Step</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'fontSize\')">Font Size\r\n <input type="number" :value="conn.fontSize || defConn.fontSize" :min="defConn.fontSizeMin" :max="defConn.fontSizeMax" @input="onFontSizeInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'fontColor\')">Font Color\r\n <WColorSelect :value="conn.fontColor || defConn.fontColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'fontColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'animated\')">Animated\r\n <input type="checkbox" :checked="!!conn.animated" @change="$emit(\'update\', \'animated\', $event.target.checked)">\r\n </label>\r\n <label v-if="!isEx(\'edgeColor\')">Edge Color\r\n <WColorSelect :value="conn.edgeColor || defConn.edgeColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit(\'update\', \'edgeColor\', $event)" />\r\n </label>\r\n <label v-if="!isEx(\'edgeWidth\')">Edge Width\r\n <input type="number" :value="conn.edgeWidth !== undefined ? conn.edgeWidth : defConn.edgeWidth" min="1" max="24" @input="onEdgeWidthInput($event.target.value)">\r\n </label>\r\n <label v-if="!isEx(\'markerEnd\')">Marker End\r\n <select :value="conn.markerEnd || defConn.markerEnd" @input="$emit(\'update\', \'markerEnd\', $event.target.value || undefined)">\r\n <option value="">None</option>\r\n <option value="arrow">Arrow</option>\r\n <option value="arrowclosed">Arrow Closed</option>\r\n </select>\r\n </label>\r\n \x3c!-- 逐邊錨點方位: 此連線於起點節點之連出方位/迄點節點之連入方位; Auto=回退節點層級/預設 --\x3e\r\n <label v-if="!isEx(\'fromPosition\')">From Anchor\r\n <select :value="conn.fromPosition || \'\'" @input="$emit(\'update\', \'fromPosition\', $event.target.value || undefined)">\r\n <option value="">Auto</option>\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <label v-if="!isEx(\'toPosition\')">To Anchor\r\n <select :value="conn.toPosition || \'\'" @input="$emit(\'update\', \'toPosition\', $event.target.value || undefined)">\r\n <option value="">Auto</option>\r\n <option value="top">Top</option>\r\n <option value="right">Right</option>\r\n <option value="bottom">Bottom</option>\r\n <option value="left">Left</option>\r\n </select>\r\n </label>\r\n <div v-if="!isEx(\'points\')" class="vue-flow__waypoints">\r\n <div class="vue-flow__waypoints-head">\r\n <span>Waypoints</span>\r\n <button class="vue-flow__waypoints-add" title="新增轉折點" @click="addWaypoint">＋</button>\r\n </div>\r\n <div v-for="(p, i) in ptsLocal" :key="\'wp\' + i" class="vue-flow__waypoints-row">\r\n <span class="vue-flow__waypoints-idx">{{ i + 1 }}</span>\r\n <input type="number" :value="p[0]" title="X" @input="onWaypointInput(i, 0, $event.target.value)">\r\n <input type="number" :value="p[1]" title="Y" @input="onWaypointInput(i, 1, $event.target.value)">\r\n <button class="vue-flow__waypoints-del" title="移除此轉折點" @click="removeWaypoint(i)">×</button>\r\n </div>\r\n <div v-if="!ptsLocal.length" class="vue-flow__waypoints-empty">無(自動路由)</div>\r\n </div>\r\n <div class="vue-flow__delete-area">\r\n <button v-if="!confirmDelete" class="vue-flow__delete-btn" @click="confirmDelete = true">刪除連接線</button>\r\n <template v-else>\r\n <span class="vue-flow__delete-warn">確定要刪除此連接線？</span>\r\n <div class="vue-flow__delete-confirm-row">\r\n <button class="vue-flow__delete-btn" @click="$emit(\'delete\')">確認刪除</button>\r\n <button class="vue-flow__delete-btn vue-flow__delete-btn--cancel" @click="confirmDelete = false">取消</button>\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport WColorSelect from \'w-component-vue/src/components/WColorSelect.vue\'\r\n\r\nexport default {\r\n components: { WColorSelect },\r\n props: {\r\n conn: { type: Object, required: true },\r\n defConn: { type: Object, required: true },\r\n textFontSize: { type: String, default: \'\' },\r\n excludes: { type: Array, default: () => [] },\r\n defaultPoint: { type: Object, default: null }, //首個轉折點預設位置(建議傳路徑中點, 新點落於既有線上不跳動)\r\n targetPoint: { type: Object, default: null }, //迄點錨位置(後續新增以「末點與迄點中點」細分)\r\n },\r\n data() {\r\n return {\r\n confirmDelete: false,\r\n ptsLocal: this.normalizePoints(this.conn.points), //轉折點本地編輯態(打字中不被外部回寫干擾)\r\n }\r\n },\r\n computed: {\r\n formStyle() {\r\n let s = {}\r\n if (this.textFontSize) s.fontSize = this.textFontSize\r\n return s\r\n },\r\n },\r\n watch: {\r\n //外部(如存檔回寫)變更時重同步本地態; 與本地序列化相同則不動(避免打字被清)\r\n \'conn.points\': function(val) {\r\n const ext = JSON.stringify(this.normalizePoints(val))\r\n if (ext !== JSON.stringify(this.ptsLocal)) {\r\n this.ptsLocal = this.normalizePoints(val)\r\n }\r\n },\r\n },\r\n methods: {\r\n isEx(key) {\r\n return this.excludes.indexOf(key) >= 0\r\n },\r\n normalizePoints(pts) {\r\n if (!Array.isArray(pts)) return []\r\n const r = []\r\n for (const p of pts) {\r\n if (Array.isArray(p) && p.length >= 2) r.push([Number(p[0]) || 0, Number(p[1]) || 0])\r\n else if (p && typeof p === \'object\') r.push([Number(p.x) || 0, Number(p.y) || 0])\r\n }\r\n return r\r\n },\r\n emitWaypoints() {\r\n //空陣列送null表示移除轉折點(回歸自動路由)\r\n this.$emit(\'update\', \'points\', this.ptsLocal.length ? this.ptsLocal.map(p => [p[0], p[1]]) : null)\r\n },\r\n addWaypoint() {\r\n const last = this.ptsLocal[this.ptsLocal.length - 1]\r\n let p\r\n if (!last) {\r\n //首點=路徑中點(落於既有線上, 路徑不跳動); 無提示時退而取迄點附近, 再無則(0,0)\r\n if (this.defaultPoint) p = [Math.round(this.defaultPoint.x), Math.round(this.defaultPoint.y)]\r\n else if (this.targetPoint) p = [Math.round(this.targetPoint.x) - 40, Math.round(this.targetPoint.y) - 40]\r\n else p = [0, 0]\r\n }\r\n else if (this.targetPoint) {\r\n //後續新增=末點與迄點錨之中點(向迄點細分)\r\n p = [Math.round((last[0] + this.targetPoint.x) / 2), Math.round((last[1] + this.targetPoint.y) / 2)]\r\n }\r\n else {\r\n p = [last[0] + 40, last[1] + 40]\r\n }\r\n this.ptsLocal.push(p)\r\n this.emitWaypoints()\r\n },\r\n removeWaypoint(i) {\r\n this.ptsLocal.splice(i, 1)\r\n this.emitWaypoints()\r\n },\r\n onWaypointInput(i, axis, val) {\r\n const n = Number(val)\r\n if (val === \'\' || isNaN(n)) return\r\n this.$set(this.ptsLocal[i], axis, n)\r\n this.emitWaypoints()\r\n },\r\n onFontSizeInput(val) {\r\n let n = Number(val)\r\n let d = this.defConn\r\n if (!val || isNaN(n) || n < d.fontSizeMin) return\r\n if (n > d.fontSizeMax) n = d.fontSizeMax\r\n this.$emit(\'update\', \'fontSize\', n)\r\n },\r\n onEdgeWidthInput(val) {\r\n let n = Number(val)\r\n if (!val || isNaN(n) || n < 1) return\r\n if (n > 24) n = 24\r\n this.$emit(\'update\', \'edgeWidth\', n)\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-flow__settings-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n min-width: 180px;\r\n}\r\n.vue-flow__settings-form label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n}\r\n.vue-flow__settings-form select,\r\n.vue-flow__settings-form input[type="number"],\r\n.vue-flow__settings-form input[type="text"] {\r\n width: 100px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n}\r\n.vue-flow__settings-form input[type="color"] {\r\n width: 32px;\r\n height: 24px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n}\r\n.vue-flow__waypoints {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n padding-top: 6px;\r\n border-top: 1px solid #eee;\r\n font-size: 12px;\r\n}\r\n.vue-flow__waypoints-head {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.vue-flow__waypoints-add {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #666;\r\n cursor: pointer;\r\n font-size: 12px;\r\n line-height: 1;\r\n}\r\n.vue-flow__waypoints-add:hover {\r\n border-color: #666;\r\n color: #333;\r\n}\r\n.vue-flow__waypoints-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n.vue-flow__waypoints-idx {\r\n width: 14px;\r\n color: #999;\r\n font-size: 11px;\r\n text-align: right;\r\n}\r\n.vue-flow__waypoints-row input[type="number"] {\r\n width: 62px;\r\n font-size: 12px;\r\n padding: 1px 4px;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n}\r\n.vue-flow__waypoints-del {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n padding: 0;\r\n border: 1px solid #ccc;\r\n border-radius: 3px;\r\n background: #fff;\r\n color: #999;\r\n cursor: pointer;\r\n font-size: 13px;\r\n line-height: 1;\r\n flex-shrink: 0;\r\n}\r\n.vue-flow__waypoints-del:hover {\r\n border-color: #dc2626;\r\n color: #dc2626;\r\n}\r\n.vue-flow__waypoints-empty {\r\n color: #aaa;\r\n font-size: 11px;\r\n}\r\n.vue-flow__delete-area {\r\n margin-top: 4px;\r\n padding-top: 8px;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n}\r\n.vue-flow__delete-warn {\r\n display: block;\r\n font-size: 11px;\r\n color: #c00;\r\n margin-bottom: 4px;\r\n text-align: right;\r\n}\r\n.vue-flow__delete-confirm-row {\r\n display: flex;\r\n gap: 6px;\r\n}\r\n.vue-flow__delete-btn {\r\n padding: 3px 10px;\r\n font-size: 11px;\r\n border: 1px solid #dc2626;\r\n border-radius: 3px;\r\n color: #fff;\r\n background: #dc2626;\r\n cursor: pointer;\r\n}\r\n.vue-flow__delete-btn:hover {\r\n background: #b91c1c;\r\n border-color: #b91c1c;\r\n}\r\n.vue-flow__delete-btn--cancel {\r\n color: #666;\r\n background: #fff;\r\n border-color: #ccc;\r\n}\r\n.vue-flow__delete-btn--cancel:hover {\r\n background: #f5f5f5;\r\n border-color: #ccc;\r\n}\r\n</style>\r\n']},media:void 0})},yp,void 0,false,void 0,!1,o,void 0,void 0),wp={bezier:pp,straight:fp,step:hp,smoothstep:gp};var Sp={name:"EdgeWrapper",mixins:[{beforeCreate(){this.$vnode&&"svg"===this.$vnode.ns&&(this.$vnode.ns=void 0)},beforeMount(){this.$vnode&&"svg"===this.$vnode.ns&&(this.$vnode.ns=void 0)},beforeUpdate(){this.$vnode&&"svg"===this.$vnode.ns&&(this.$vnode.ns=void 0)}}],components:{ConnSettingsForm:xp,WPopup:La},inject:{getDefConn:{default:()=>()=>({})},getDragGhost:{default:()=>()=>null}},props:{conn:{type:Object,required:!0},sourceNode:{type:Object,default:null},targetNode:{type:Object,default:null},selected:{type:Boolean,default:!1},interactive:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},allNodes:{type:Array,default:()=>[]},nodeInternals:{type:Object,default:()=>({})},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},data:()=>({hovered:!1,infoPopupShow:!1,infoPopupEditable:!0,settingsPopupShow:!1,dragPts:null}),watch:{settingsPopupShow(n){n&&(this.infoPopupShow=!1)},infoPopupShow(n){n&&(this.settingsPopupShow=!1)}},computed:{dc(){return this.getDefConn()},hasInfoPopup(){return!!(this.conn.name||this.conn.description||this.$scopedSlots["conn-popup"])},sourcePosition(){return this.conn.fromPosition||this.sourceNode&&this.sourceNode.toPosition||"bottom"},targetPosition(){return this.conn.toPosition||this.targetNode&&this.targetNode.fromPosition||"top"},effSourceNode(){return this.effNode(this.sourceNode)},effTargetNode(){return this.effNode(this.targetNode)},sourcePoint(){const n=this.effSourceNode;return n?mp(n,this.sourcePosition,this.nodeInternals[n.id]||{},"source"):{x:0,y:0}},targetPoint(){const n=this.effTargetNode;return n?mp(n,this.targetPosition,this.nodeInternals[n.id]||{},"target"):{x:0,y:0}},sourceX(){return this.sourcePoint.x},sourceY(){return this.sourcePoint.y},targetX(){return this.targetPoint.x},targetY(){return this.targetPoint.y},routingNodes(){const n=[];return this.effSourceNode&&n.push(this.effSourceNode),this.effTargetNode&&n.push(this.effTargetNode),n},effPoints(){return this.dragPts||this.conn.points},waypointPts(){const n=this.effPoints;if(!Array.isArray(n)||0===n.length)return[];const e=[];for(const t of n){let n=null,o=null;if(Array.isArray(t)&&t.length>=2?(n=Number(t[0]),o=Number(t[1])):t&&"object"==typeof t&&(n=Number(t.x),o=Number(t.y)),!Number.isFinite(n)||!Number.isFinite(o))return[];e.push({x:n,y:o})}return e},showWaypoints(){return this.settingsEnabled&&this.interactive&&!this.locked&&this.waypointPts.length>0},waypointDefaultPoint(){return{x:Math.round(this.pathData.labelX),y:Math.round(this.pathData.labelY)}},waypointTargetPoint(){return{x:Math.round(this.targetX),y:Math.round(this.targetY)}},classes(){const n=this.conn.class?Array.isArray(this.conn.class)?this.conn.class:[this.conn.class]:[];return["vue-flow__edge",`vue-flow__edge-${this.conn.type||this.dc.type||"bezier"}`,...n,{"vue-flow__edge--selected":this.selected,"vue-flow__edge--animated":this.conn.animated}]},pathData(){const n=this.conn.type||this.dc.type||"bezier";return(wp[n]||wp.bezier)({sourceX:this.sourceX,sourceY:this.sourceY,sourcePosition:this.sourcePosition,targetX:this.targetX,targetY:this.targetY,targetPosition:this.targetPosition,curvature:this.conn.curvature,points:this.effPoints,allNodes:this.routingNodes,nodeInternals:this.nodeInternals,connFromId:this.conn.from,connToId:this.conn.to,offset:this.dc.defOffset})},connStyle(){const n=this.dc,e=this.conn.style?{...this.conn.style}:{};e.stroke=this.conn.edgeColor||n.edgeColor||"#b1b1b7",void 0!==this.conn.edgeWidth?e.strokeWidth=this.conn.edgeWidth:void 0!==n.edgeWidth&&(e.strokeWidth=n.edgeWidth);let t=void 0!==this.conn.edgeDasharray?this.conn.edgeDasharray:n.edgeDasharray;return t&&(e.strokeDasharray=t),e},markerStartUrl(){return this.getMarkerUrl(this.conn.markerStart)},markerEndUrl(){return this.getMarkerUrl(this.conn.markerEnd||this.dc.markerEnd)},labelStyle(){const n=this.dc,e={},t=this.conn.fontSize||n.fontSize,o=this.conn.fontColor||n.fontColor;return t&&(e.fontSize=t+"px"),o&&(e.color=o),e}},methods:{effNode(n){if(!n)return null;const e=this.getDragGhost(n.id);return e?{...n,position:{x:e.x,y:e.y},width:void 0!==e.width?e.width:n.width,height:void 0!==e.height?e.height:n.height}:n},getMarkerUrl(n){if(!n)return null;const e="string"==typeof n?{type:n}:n,t=e.color||this.conn.edgeColor||this.dc.edgeColor||"#b1b1b7";return`url(#vue-flow__${e.type}_${t.replace("#","")})`},onGroupMouseEnter(n){this.hovered=!0,this.$emit("conn-mouseenter",{conn:this.conn,event:n})},onGroupMouseLeave(n){this.hovered=!1,this.$emit("conn-mouseleave",{conn:this.conn,event:n})},onClick(n){this.hasInfoPopup&&(this.infoPopupShow=!0),this.$emit("conn-click",{conn:this.conn,event:n})},openInfoPopup(){this.infoPopupShow=!0},onDoubleClick(n){this.$emit("conn-double-click",{conn:this.conn,event:n})},onContextMenu(n){this.$emit("conn-context-menu",{conn:this.conn,event:n})},onLabelMouseDown(n){this.infoPopupShow=!1;const e=n.clientX,t=n.clientY,o=n=>{(Math.abs(n.clientX-e)>2||Math.abs(n.clientY-t)>2)&&(this.infoPopupEditable=!1,document.removeEventListener("mousemove",o))},r=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",r),this.infoPopupEditable||setTimeout(()=>{this.infoPopupEditable=!0},0)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",r)},onSettingsUpdate(n,e){this.$emit("conn-settings-update",{conn:this.conn,key:n,value:e})},onWaypointMouseDown(n,e){if(!this.interactive||this.locked||!this.settingsEnabled)return;e.preventDefault();const t=document.createElement("style");t.textContent="* { cursor: move !important; }",document.head.appendChild(t);const o=e.clientX,r=e.clientY,i=this.waypointPts.map(n=>[n.x,n.y]),a=this.$el.closest(".vue-flow__viewport"),l=a?parseFloat(a.style.transform.match(/scale\(([^)]+)\)/)?.[1]||1):1,s=e=>{const t=(e.clientX-o)/l,a=(e.clientY-r)/l,s=i.map(n=>[n[0],n[1]]);s[n]=[Math.round(i[n][0]+t),Math.round(i[n][1]+a)],this.dragPts=s},u=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",u),document.head.removeChild(t);const n=this.waypointPts.map(n=>[n.x,n.y]);this.$emit("conn-settings-update",{conn:this.conn,key:"points",value:n}),this.dragPts=null};document.addEventListener("mousemove",s),document.addEventListener("mouseup",u)},onSettingsDelete(){this.$emit("conn-settings-delete",{conn:this.conn})}}};const kp=Sp;var _p=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("g",{class:n.classes,attrs:{"data-id":n.conn.id},on:{mouseenter:n.onGroupMouseEnter,mouseleave:n.onGroupMouseLeave}},[t("rect",{attrs:{x:n.pathData.labelX-60,y:n.pathData.labelY-18,width:"120",height:"36",fill:"transparent","pointer-events":"all"},on:{click:function(e){return e.stopPropagation(),n.onClick.apply(null,arguments)}}}),n._v(" "),t("path",{staticClass:"vue-flow__edge-interaction",attrs:{d:n.pathData.path},on:{click:function(e){return e.stopPropagation(),n.onClick.apply(null,arguments)},dblclick:function(e){return e.stopPropagation(),n.onDoubleClick.apply(null,arguments)},contextmenu:function(e){return e.stopPropagation(),n.onContextMenu.apply(null,arguments)}}}),n._v(" "),t("path",{style:n.connStyle,attrs:{d:n.pathData.path,"marker-start":n.markerStartUrl,"marker-end":n.markerEndUrl}}),n._v(" "),n.showWaypoints?n._l(n.waypointPts,function(e,o){return t("circle",{key:"wp"+o,staticClass:"vue-flow__edge-waypoint",attrs:{cx:e.x,cy:e.y,r:"4"},on:{mousedown:function(e){return n.onWaypointMouseDown(o,e)}}})}):n._e(),n._v(" "),t("foreignObject",{staticStyle:{overflow:"visible","pointer-events":"none"},attrs:{x:n.pathData.labelX-100,y:n.pathData.labelY-18,width:"200",height:"36"}},[t("div",{staticClass:"vue-flow__edge-label-area",attrs:{xmlns:"http://www.w3.org/1999/xhtml"}},[t("span",{staticClass:"vue-flow__edge-label-group"},[n.hasInfoPopup?t("WPopup",{attrs:{placement:"bottom",modeHide:"mousedown",editable:n.infoPopupEditable,minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.inforPopupBackgroundColor,textFontSize:n.inforPopupTitleTextFontSize,paddingStyle:{v:8,h:12}},scopedSlots:n._u([{key:"trigger",fn:function(){return[n.conn.name?t("span",{staticClass:"vue-flow__edge-label",style:n.labelStyle,on:{mousedown:n.onLabelMouseDown}},[n._v(n._s(n.conn.name))]):t("span",{staticClass:"vue-flow__edge-popup-anchor"})]},proxy:!0},{key:"content",fn:function(){return[n._t("conn-popup",function(){return[n.conn.name||n.conn.description?t("div",{staticStyle:{"min-width":"120px"}},[n.conn.name?t("div",{style:{fontSize:n.inforPopupTitleTextFontSize,color:n.inforPopupTitleTextColor,fontWeight:500}},[n._v(n._s(n.conn.name))]):n._e(),n._v(" "),n.conn.description?t("div",{style:{fontSize:n.inforPopupDescriptionTextFontSize,color:n.inforPopupDescriptionTextColor,marginTop:"4px"}},[n._v(n._s(n.conn.description))]):n._e()]):n._e()]},{conn:n.conn})]},proxy:!0}],null,!0),model:{value:n.infoPopupShow,callback:function(e){n.infoPopupShow=e},expression:"infoPopupShow"}}):n._e(),n._v(" "),t("transition",{attrs:{name:"vue-flow__fade"}},[(n.hovered||n.settingsPopupShow)&&n.interactive&&!n.locked&&n.settingsEnabled?t("span",{staticClass:"vue-flow__edge-settings-anchor"},[t("WPopup",{attrs:{placement:"right-start",modeHide:"mousedown",minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,backgroundColor:n.settingsPopupBackgroundColor,textColor:n.settingsPopupTextColor,paddingStyle:{v:8,h:8}},on:{show:function(e){return n.$emit("conn-settings-click",{conn:n.conn})}},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("span",{staticClass:"vue-flow__edge-settings"},[t("svg",{attrs:{viewBox:"0 0 20 20",width:"14",height:"14",fill:"currentColor"}},[t("path",{attrs:{d:"M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z",transform:"translate(0 3)"}})])])]},proxy:!0},{key:"content",fn:function(){return[t("ConnSettingsForm",{attrs:{conn:n.conn,"def-conn":n.dc,"text-font-size":n.settingsPopupTextFontSize,excludes:n.settingsExcludes,"default-point":n.waypointDefaultPoint,"target-point":n.waypointTargetPoint},on:{update:n.onSettingsUpdate,delete:n.onSettingsDelete}})]},proxy:!0}],null,!1,1928985475),model:{value:n.settingsPopupShow,callback:function(e){n.settingsPopupShow=e},expression:"settingsPopupShow"}})],1):n._e()])],1)])])],2)};_p._withStripped=!0;const Bp=e({render:_p,staticRenderFns:[]},function(n){n&&n("data-v-265c95c3_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* Only target direct-child paths (edge paths), not SVG paths inside settings icon */\n.vue-flow__edge > path[data-v-265c95c3] {\r\n stroke: #b1b1b7;\r\n stroke-width: 1;\r\n fill: none;\r\n pointer-events: none;\r\n transition: stroke 0.3s ease, filter 0.18s ease;\n}\n.vue-flow__edge-interaction[data-v-265c95c3] {\r\n stroke: transparent !important;\r\n stroke-width: 20 !important;\r\n fill: none;\r\n pointer-events: stroke !important;\r\n cursor: pointer;\n}\n.vue-flow__edge-waypoint[data-v-265c95c3] {\r\n fill: #9e9e9e;\r\n stroke: #fff;\r\n stroke-width: 1.5;\r\n pointer-events: all;\r\n cursor: grab;\n}\n.vue-flow__edge-waypoint[data-v-265c95c3]:hover {\r\n fill: #616161;\r\n stroke-width: 2;\n}\n.vue-flow__edge-waypoint[data-v-265c95c3]:active {\r\n cursor: grabbing;\n}\n.vue-flow__edge:hover > path[data-v-265c95c3] {\r\n stroke: #555;\n}\n.vue-flow__edge--selected > path[data-v-265c95c3],\r\n.vue-flow__edge--selected:hover > path[data-v-265c95c3] {\r\n filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.8)) drop-shadow(0 0 4px rgba(220, 38, 38, 0.5)) drop-shadow(0 0 6px rgba(220, 38, 38, 0.25));\n}\n.vue-flow__edge--animated > path[data-v-265c95c3]:not(.vue-flow__edge-interaction) {\r\n stroke-dasharray: 5;\r\n animation: vue-flow-dash-data-v-265c95c3 0.5s linear infinite;\n}\n@keyframes vue-flow-dash-data-v-265c95c3 {\nto { stroke-dashoffset: -10;\n}\n}\n.vue-flow__edge-label-area[data-v-265c95c3] {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\n}\n.vue-flow__edge-label-group[data-v-265c95c3] {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n pointer-events: all;\n}\n.vue-flow__edge-label[data-v-265c95c3] {\r\n pointer-events: all;\r\n cursor: pointer;\r\n font-family: 'Microsoft JhengHei', '微軟正黑體', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n font-size: 10px;\r\n background: #fff;\r\n padding: 2px 4px;\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n user-select: none;\r\n text-align: center;\r\n display: inline-block;\n}\n.vue-flow__edge-popup-anchor[data-v-265c95c3] {\r\n display: inline-block;\r\n width: 0;\r\n height: 0;\n}\n.vue-flow__edge-settings-anchor[data-v-265c95c3] {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\n}\n.vue-flow__edge-settings[data-v-265c95c3] {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: #888;\r\n pointer-events: all;\r\n transition: border-color 0.15s ease, background 0.15s ease;\n}\n.vue-flow__edge-settings[data-v-265c95c3]:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\n}\r\n/* Fade transition for settings icon */\n.vue-flow__fade-enter-active[data-v-265c95c3],\r\n.vue-flow__fade-leave-active[data-v-265c95c3] {\r\n transition: opacity 0.15s ease;\n}\n.vue-flow__fade-enter[data-v-265c95c3],\r\n.vue-flow__fade-leave-to[data-v-265c95c3] {\r\n opacity: 0;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\edges\\EdgeWrapper.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2bA,oFAAA;AACA;EACA,eAAA;EACA,eAAA;EACA,UAAA;EACA,oBAAA;EACA,+CAAA;AACA;AACA;EACA,8BAAA;EACA,2BAAA;EACA,UAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA;EACA,aAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA;AACA;AACA;EACA,aAAA;EACA,eAAA;AACA;AACA;EACA,gBAAA;AACA;AACA;EACA,YAAA;AACA;AACA;;EAEA,4IAAA;AACA;AACA;EACA,mBAAA;EACA,6DAAA;AACA;AACA;AACA,KAAA,sBAAA;AAAA;AACA;AACA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;AACA;AACA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,mBAAA;AACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,6GAAA;EACA,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;AACA;AACA;EACA,qBAAA;EACA,QAAA;EACA,SAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,UAAA;EACA,mBAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;EACA,0DAAA;AACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;AACA;AACA,sCAAA;AACA;;EAEA,8BAAA;AACA;AACA;;EAEA,UAAA;AACA",file:"EdgeWrapper.vue",sourcesContent:['<template>\r\n <g\r\n :class="classes"\r\n :data-id="conn.id"\r\n @mouseenter="onGroupMouseEnter"\r\n @mouseleave="onGroupMouseLeave"\r\n >\r\n \x3c!-- Hover zone around label + settings icon area (below interaction path in z-order) --\x3e\r\n <rect\r\n :x="pathData.labelX - 60"\r\n :y="pathData.labelY - 18"\r\n width="120"\r\n height="36"\r\n fill="transparent"\r\n pointer-events="all"\r\n @click.stop="onClick"\r\n />\r\n \x3c!-- Interaction path (wider, invisible) --\x3e\r\n <path\r\n :d="pathData.path"\r\n class="vue-flow__edge-interaction"\r\n @click.stop="onClick"\r\n @dblclick.stop="onDoubleClick"\r\n @contextmenu.stop="onContextMenu"\r\n />\r\n \x3c!-- Visible path --\x3e\r\n <path\r\n :d="pathData.path"\r\n :style="connStyle"\r\n :marker-start="markerStartUrl"\r\n :marker-end="markerEndUrl"\r\n />\r\n \x3c!-- 強制轉折點標記(編輯模式顯示, 可直接拖曳移動座標; 亦可經齒輪設定表單編修) --\x3e\r\n <template v-if="showWaypoints">\r\n \x3c!-- 不用@mousedown.stop: stopPropagation會擋掉window層WPopup互斥協調(致已開之node/conn資訊popup不關); 防canvas startPan改由onCanvasMouseDown排除.vue-flow__edge-waypoint處理 --\x3e\r\n <circle\r\n v-for="(p, i) in waypointPts"\r\n :key="\'wp\' + i"\r\n :cx="p.x"\r\n :cy="p.y"\r\n r="4"\r\n class="vue-flow__edge-waypoint"\r\n @mousedown="onWaypointMouseDown(i, $event)"\r\n />\r\n </template>\r\n \x3c!-- Label + Settings icon (merged into one foreignObject for correct relative positioning) --\x3e\r\n <foreignObject\r\n :x="pathData.labelX - 100"\r\n :y="pathData.labelY - 18"\r\n width="200"\r\n height="36"\r\n style="overflow: visible; pointer-events: none;"\r\n >\r\n <div class="vue-flow__edge-label-area" xmlns="http://www.w3.org/1999/xhtml">\r\n <span class="vue-flow__edge-label-group">\r\n <WPopup\r\n v-if="hasInfoPopup"\r\n v-model="infoPopupShow"\r\n placement="bottom"\r\n modeHide="mousedown"\r\n :editable="infoPopupEditable"\r\n :minWidth="null"\r\n :maxWidth="null"\r\n :autoFitMinWidth="false"\r\n :autoFitMaxWidth="false"\r\n :backgroundColor="inforPopupBackgroundColor"\r\n :textFontSize="inforPopupTitleTextFontSize"\r\n :paddingStyle="{v:8,h:12}"\r\n >\r\n <template v-slot:trigger>\r\n <span v-if="conn.name" class="vue-flow__edge-label" :style="labelStyle" @mousedown="onLabelMouseDown">{{ conn.name }}</span>\r\n \x3c!-- Zero-size anchor keeps the popup positioned at the label midpoint when the conn has no name --\x3e\r\n <span v-else class="vue-flow__edge-popup-anchor"></span>\r\n </template>\r\n <template v-slot:content>\r\n <slot name="conn-popup" :conn="conn">\r\n <div v-if="conn.name || conn.description" style="min-width:120px">\r\n <div v-if="conn.name" :style="{ fontSize: inforPopupTitleTextFontSize, color: inforPopupTitleTextColor, fontWeight: 500 }">{{ conn.name }}</div>\r\n <div v-if="conn.description" :style="{ fontSize: inforPopupDescriptionTextFontSize, color: inforPopupDescriptionTextColor, marginTop: \'4px\' }">{{ conn.description }}</div>\r\n </div>\r\n </slot>\r\n </template>\r\n </WPopup>\r\n <transition name="vue-flow__fade">\r\n <span v-if="(hovered || settingsPopupShow) && interactive && !locked && settingsEnabled" class="vue-flow__edge-settings-anchor">\r\n <WPopup\r\n v-model="settingsPopupShow"\r\n placement="right-start"\r\n modeHide="mousedown"\r\n :minWidth="null"\r\n :maxWidth="null"\r\n :autoFitMinWidth="false"\r\n :autoFitMaxWidth="false"\r\n :backgroundColor="settingsPopupBackgroundColor"\r\n :textColor="settingsPopupTextColor"\r\n :paddingStyle="{v:8,h:8}"\r\n @show="$emit(\'conn-settings-click\', { conn: conn })"\r\n >\r\n <template v-slot:trigger>\r\n \x3c!-- 不用@mousedown.stop: stopPropagation會連window層popup互斥協調一併擋掉(致其他popup無法關閉); 防canvas startPan改由onCanvasMouseDown排除.vue-flow__edge-settings處理 --\x3e\r\n <span class="vue-flow__edge-settings">\r\n <svg viewBox="0 0 20 20" width="14" height="14" fill="currentColor">\r\n <path d="M11.078 0l.294 1.833a7.587 7.587 0 0 1 2.174 1.25l1.725-.618 1.078 1.87-1.43 1.217a7.508 7.508 0 0 1 0 2.498l1.43 1.217-1.078 1.87-1.725-.618a7.587 7.587 0 0 1-2.174 1.25L11.078 14H8.922l-.294-1.833a7.587 7.587 0 0 1-2.174-1.25l-1.725.618-1.078-1.87 1.43-1.217a7.508 7.508 0 0 1 0-2.498L3.65 4.733l1.078-1.87 1.725.618a7.587 7.587 0 0 1 2.174-1.25L8.922 0h2.156zM10 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" transform="translate(0 3)"/>\r\n </svg>\r\n </span>\r\n </template>\r\n <template v-slot:content>\r\n <ConnSettingsForm\r\n :conn="conn"\r\n :def-conn="dc"\r\n :text-font-size="settingsPopupTextFontSize"\r\n :excludes="settingsExcludes"\r\n :default-point="waypointDefaultPoint"\r\n :target-point="waypointTargetPoint"\r\n @update="onSettingsUpdate"\r\n @delete="onSettingsDelete"\r\n />\r\n </template>\r\n </WPopup>\r\n </span>\r\n </transition>\r\n </span>\r\n </div>\r\n </foreignObject>\r\n </g>\r\n</template>\r\n\r\n<script>\r\nimport { getBezierPath, getStraightPath, getStepPath, getSmoothStepPath } from \'../../js/edgePath\'\r\nimport { getHandlePosition } from \'../../js/geometry\'\r\nimport ConnSettingsForm from \'../ui/ConnSettingsForm.vue\'\r\nimport WPopup from \'w-component-vue/src/components/WPopup.vue\'\r\nimport fixSvgNs from \'../../js/fixSvgNs.mjs\'\r\n\r\nconst pathFunctions = {\r\n bezier: getBezierPath,\r\n straight: getStraightPath,\r\n step: getStepPath,\r\n smoothstep: getSmoothStepPath,\r\n}\r\n\r\nexport default {\r\n name: \'EdgeWrapper\',\r\n //修Vue2 #7330: 本元件位於<svg>內且含foreignObject, 需清除$vnode.ns否則其內HTML元素(含WPopup之slot內容)被建為SVGElement而0x0不可見\r\n mixins: [fixSvgNs],\r\n components: { ConnSettingsForm, WPopup },\r\n inject: { getDefConn: { default: () => () => ({}) }, getDragGhost: { default: () => () => null } },\r\n props: {\r\n conn: { type: Object, required: true },\r\n sourceNode: { type: Object, default: null },\r\n targetNode: { type: Object, default: null },\r\n selected: { type: Boolean, default: false },\r\n interactive: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n settingsPopupTextColor: { type: String, default: \'#333\' },\r\n settingsPopupTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n inforPopupTitleTextColor: { type: String, default: \'#333\' },\r\n inforPopupTitleTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupDescriptionTextColor: { type: String, default: \'#888\' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: \'10px\' },\r\n allNodes: { type: Array, default: () => [] },\r\n nodeInternals: { type: Object, default: () => ({}) },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n data() {\r\n return {\r\n hovered: false,\r\n infoPopupShow: false,\r\n infoPopupEditable: true,\r\n settingsPopupShow: false,\r\n dragPts: null, //轉折點拖曳中之暫時座標([[x,y],...]), 比照節點拖曳之ghost: 不改conn.points(prop), 放開才emit由宿主寫回\r\n }\r\n },\r\n watch: {\r\n settingsPopupShow(val) {\r\n if (val) this.infoPopupShow = false\r\n },\r\n infoPopupShow(val) {\r\n if (val) this.settingsPopupShow = false\r\n },\r\n },\r\n computed: {\r\n dc() {\r\n return this.getDefConn()\r\n },\r\n hasInfoPopup() {\r\n return !!(this.conn.name || this.conn.description || this.$scopedSlots[\'conn-popup\'])\r\n },\r\n //(效能重構)錨點方位/座標自算(原由EdgeRenderer解析後以props傳入):\r\n // 含拖曳/縮放ghost(細粒度反應式), 僅本邊兩端節點變動時本元件才重渲染\r\n sourcePosition() {\r\n return this.conn.fromPosition || (this.sourceNode && this.sourceNode.toPosition) || \'bottom\' //conn層級覆寫優先\r\n },\r\n targetPosition() {\r\n return this.conn.toPosition || (this.targetNode && this.targetNode.fromPosition) || \'top\'\r\n },\r\n effSourceNode() {\r\n return this.effNode(this.sourceNode)\r\n },\r\n effTargetNode() {\r\n return this.effNode(this.targetNode)\r\n },\r\n sourcePoint() {\r\n const n = this.effSourceNode\r\n if (!n) return { x: 0, y: 0 }\r\n return getHandlePosition(n, this.sourcePosition, this.nodeInternals[n.id] || {}, \'source\')\r\n },\r\n targetPoint() {\r\n const n = this.effTargetNode\r\n if (!n) return { x: 0, y: 0 }\r\n return getHandlePosition(n, this.targetPosition, this.nodeInternals[n.id] || {}, \'target\')\r\n },\r\n sourceX() {\r\n return this.sourcePoint.x\r\n },\r\n sourceY() {\r\n return this.sourcePoint.y\r\n },\r\n targetX() {\r\n return this.targetPoint.x\r\n },\r\n targetY() {\r\n return this.targetPoint.y\r\n },\r\n //自動路由(step/smoothstep)用之節點矩形: 僅取起訖兩節點且套用拖曳/縮放ghost。\r\n //why: OrthConnector之calculateStepPoints僅以「起訖兩節點矩形」決定路徑(allNodes原僅供findObstacleAt依端點座標定位該兩矩形, 不做跨節點避讓);\r\n // 若沿用store之allNodes, 拖曳時端點已隨ghost移動、但矩形仍為舊位→findObstacleAt找不到起訖矩形→退化為fallback直角短線, 放開後allNodes更新才恢復正交繞行→路徑跳動。\r\n // 改用effSource/effTargetNode(含ghost)即拖曳中與放開後同一計算、路徑不跳; 靜止時eff=原節點, 與原本傳全部節點所得之起訖矩形一致(版面不重疊), 放開後路由不變。\r\n routingNodes() {\r\n const r = []\r\n if (this.effSourceNode) r.push(this.effSourceNode)\r\n if (this.effTargetNode) r.push(this.effTargetNode)\r\n return r\r\n },\r\n //拖曳中優先取暫時座標(ghost), 靜止時取conn.points\r\n effPoints() {\r\n return this.dragPts || this.conn.points\r\n },\r\n // 強制轉折點正規化([[x,y],...]或[{x,y},...]皆可), 無效回空陣列\r\n waypointPts() {\r\n const pts = this.effPoints\r\n if (!Array.isArray(pts) || pts.length === 0) return []\r\n const r = []\r\n for (const p of pts) {\r\n let x = null\r\n let y = null\r\n if (Array.isArray(p) && p.length >= 2) {\r\n x = Number(p[0]); y = Number(p[1])\r\n }\r\n else if (p && typeof p === \'object\') {\r\n x = Number(p.x); y = Number(p.y)\r\n }\r\n if (!Number.isFinite(x) || !Number.isFinite(y)) return []\r\n r.push({ x, y })\r\n }\r\n return r\r\n },\r\n showWaypoints() {\r\n return this.settingsEnabled && this.interactive && !this.locked && this.waypointPts.length > 0\r\n },\r\n //新增轉折點之預設位置=路徑中點(新點落於既有線上, 路徑幾乎不變不跳動)\r\n waypointDefaultPoint() {\r\n return { x: Math.round(this.pathData.labelX), y: Math.round(this.pathData.labelY) }\r\n },\r\n //後續新增以「末點與迄點錨中點」細分(供表單計算)\r\n waypointTargetPoint() {\r\n return { x: Math.round(this.targetX), y: Math.round(this.targetY) }\r\n },\r\n classes() {\r\n const connClasses = this.conn.class\r\n ? (Array.isArray(this.conn.class) ? this.conn.class : [this.conn.class])\r\n : []\r\n return [\r\n \'vue-flow__edge\',\r\n `vue-flow__edge-${this.conn.type || this.dc.type || \'bezier\'}`,\r\n ...connClasses,\r\n {\r\n \'vue-flow__edge--selected\': this.selected,\r\n \'vue-flow__edge--animated\': this.conn.animated,\r\n },\r\n ]\r\n },\r\n pathData() {\r\n const type = this.conn.type || this.dc.type || \'bezier\'\r\n const fn = pathFunctions[type] || pathFunctions.bezier\r\n return fn({\r\n sourceX: this.sourceX,\r\n sourceY: this.sourceY,\r\n sourcePosition: this.sourcePosition,\r\n targetX: this.targetX,\r\n targetY: this.targetY,\r\n targetPosition: this.targetPosition,\r\n curvature: this.conn.curvature,\r\n points: this.effPoints, //強制轉折點([[x,y],...]或[{x,y},...]), 有給即取代自動路由(兩端錨點方位仍生效); 拖曳中為ghost座標\r\n allNodes: this.routingNodes, //僅起訖兩節點且含ghost, 修拖曳中路徑與放開後不一致(見routingNodes說明)\r\n\r\n nodeInternals: this.nodeInternals,\r\n connFromId: this.conn.from,\r\n connToId: this.conn.to,\r\n offset: this.dc.defOffset,\r\n })\r\n },\r\n connStyle() {\r\n const d = this.dc\r\n const base = this.conn.style ? { ...this.conn.style } : {}\r\n base.stroke = this.conn.edgeColor || d.edgeColor || \'#b1b1b7\'\r\n if (this.conn.edgeWidth !== undefined) base.strokeWidth = this.conn.edgeWidth\r\n else if (d.edgeWidth !== undefined) base.strokeWidth = d.edgeWidth\r\n let dash = this.conn.edgeDasharray !== undefined ? this.conn.edgeDasharray : d.edgeDasharray\r\n if (dash) base.strokeDasharray = dash\r\n return base\r\n },\r\n markerStartUrl() {\r\n return this.getMarkerUrl(this.conn.markerStart)\r\n },\r\n markerEndUrl() {\r\n return this.getMarkerUrl(this.conn.markerEnd || this.dc.markerEnd)\r\n },\r\n labelStyle() {\r\n const d = this.dc\r\n const s = {}\r\n const fontSize = this.conn.fontSize || d.fontSize\r\n const fontColor = this.conn.fontColor || d.fontColor\r\n if (fontSize) s.fontSize = fontSize + \'px\'\r\n if (fontColor) s.color = fontColor\r\n return s\r\n },\r\n },\r\n methods: {\r\n //拖曳/縮放ghost套用: 有進行中之暫時幾何則以其構成有效節點(不改原節點物件)\r\n effNode(node) {\r\n if (!node) return null\r\n const g = this.getDragGhost(node.id)\r\n if (!g) return node\r\n return {\r\n ...node,\r\n position: { x: g.x, y: g.y },\r\n width: g.width !== undefined ? g.width : node.width,\r\n height: g.height !== undefined ? g.height : node.height,\r\n }\r\n },\r\n getMarkerUrl(marker) {\r\n if (!marker) return null\r\n const config = typeof marker === \'string\' ? { type: marker } : marker\r\n // Fallback chain must match EdgeMarkerDefs so the generated ids agree.\r\n const color = config.color || this.conn.edgeColor || this.dc.edgeColor || \'#b1b1b7\'\r\n return `url(#vue-flow__${config.type}_${color.replace(\'#\', \'\')})`\r\n },\r\n onGroupMouseEnter(event) {\r\n this.hovered = true\r\n this.$emit(\'conn-mouseenter\', { conn: this.conn, event })\r\n },\r\n onGroupMouseLeave(event) {\r\n this.hovered = false\r\n this.$emit(\'conn-mouseleave\', { conn: this.conn, event })\r\n },\r\n onClick(event) {\r\n if (this.hasInfoPopup) {\r\n this.infoPopupShow = true\r\n }\r\n this.$emit(\'conn-click\', { conn: this.conn, event })\r\n },\r\n openInfoPopup() {\r\n this.infoPopupShow = true\r\n },\r\n onDoubleClick(event) {\r\n this.$emit(\'conn-double-click\', { conn: this.conn, event })\r\n },\r\n onContextMenu(event) {\r\n this.$emit(\'conn-context-menu\', { conn: this.conn, event })\r\n },\r\n onLabelMouseDown(event) {\r\n this.infoPopupShow = false\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const onMove = (e) => {\r\n if (Math.abs(e.clientX - startX) > 2 || Math.abs(e.clientY - startY) > 2) {\r\n this.infoPopupEditable = false\r\n document.removeEventListener(\'mousemove\', onMove)\r\n }\r\n }\r\n const onUp = () => {\r\n document.removeEventListener(\'mousemove\', onMove)\r\n document.removeEventListener(\'mouseup\', onUp)\r\n if (!this.infoPopupEditable) {\r\n setTimeout(() => {\r\n this.infoPopupEditable = true\r\n }, 0)\r\n }\r\n }\r\n document.addEventListener(\'mousemove\', onMove)\r\n document.addEventListener(\'mouseup\', onUp)\r\n },\r\n onSettingsUpdate(key, value) {\r\n this.$emit(\'conn-settings-update\', { conn: this.conn, key, value })\r\n },\r\n onWaypointMouseDown(i, event) {\r\n if (!this.interactive || this.locked || !this.settingsEnabled) return\r\n event.preventDefault()\r\n\r\n // 鎖定拖曳游標\r\n const cursorStyle = document.createElement(\'style\')\r\n cursorStyle.textContent = \'* { cursor: move !important; }\'\r\n document.head.appendChild(cursorStyle)\r\n\r\n const startX = event.clientX\r\n const startY = event.clientY\r\n const pts0 = this.waypointPts.map(p => [p.x, p.y]) //拖曳起始快照\r\n // Get zoom from the viewport transform(同 NodeWrapper 拖曳之換算)\r\n const viewport = this.$el.closest(\'.vue-flow__viewport\')\r\n const zoom = viewport ? parseFloat(viewport.style.transform.match(/scale\\(([^)]+)\\)/)?.[1] || 1) : 1\r\n\r\n const onMouseMove = (e) => {\r\n const dx = (e.clientX - startX) / zoom\r\n const dy = (e.clientY - startY) / zoom\r\n const np = pts0.map(p => [p[0], p[1]])\r\n np[i] = [Math.round(pts0[i][0] + dx), Math.round(pts0[i][1] + dy)]\r\n //僅更新本元件之ghost, 路徑即時重繪; 不mutate conn.points(prop)以免波及宿主之deep watcher\r\n this.dragPts = np\r\n }\r\n const onMouseUp = () => {\r\n document.removeEventListener(\'mousemove\', onMouseMove)\r\n document.removeEventListener(\'mouseup\', onMouseUp)\r\n document.head.removeChild(cursorStyle)\r\n //放開才發更新事件(與齒輪表單同一事件流, 由宿主持久化); 事件流為同步, 回來時conn.points已更新故可安全清ghost\r\n const value = this.waypointPts.map(p => [p.x, p.y])\r\n this.$emit(\'conn-settings-update\', { conn: this.conn, key: \'points\', value })\r\n this.dragPts = null\r\n }\r\n document.addEventListener(\'mousemove\', onMouseMove)\r\n document.addEventListener(\'mouseup\', onMouseUp)\r\n },\r\n onSettingsDelete() {\r\n this.$emit(\'conn-settings-delete\', { conn: this.conn })\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n/* Only target direct-child paths (edge paths), not SVG paths inside settings icon */\r\n.vue-flow__edge > path {\r\n stroke: #b1b1b7;\r\n stroke-width: 1;\r\n fill: none;\r\n pointer-events: none;\r\n transition: stroke 0.3s ease, filter 0.18s ease;\r\n}\r\n.vue-flow__edge-interaction {\r\n stroke: transparent !important;\r\n stroke-width: 20 !important;\r\n fill: none;\r\n pointer-events: stroke !important;\r\n cursor: pointer;\r\n}\r\n.vue-flow__edge-waypoint {\r\n fill: #9e9e9e;\r\n stroke: #fff;\r\n stroke-width: 1.5;\r\n pointer-events: all;\r\n cursor: grab;\r\n}\r\n.vue-flow__edge-waypoint:hover {\r\n fill: #616161;\r\n stroke-width: 2;\r\n}\r\n.vue-flow__edge-waypoint:active {\r\n cursor: grabbing;\r\n}\r\n.vue-flow__edge:hover > path {\r\n stroke: #555;\r\n}\r\n.vue-flow__edge--selected > path,\r\n.vue-flow__edge--selected:hover > path {\r\n filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.8)) drop-shadow(0 0 4px rgba(220, 38, 38, 0.5)) drop-shadow(0 0 6px rgba(220, 38, 38, 0.25));\r\n}\r\n.vue-flow__edge--animated > path:not(.vue-flow__edge-interaction) {\r\n stroke-dasharray: 5;\r\n animation: vue-flow-dash 0.5s linear infinite;\r\n}\r\n@keyframes vue-flow-dash {\r\n to { stroke-dashoffset: -10; }\r\n}\r\n.vue-flow__edge-label-area {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n}\r\n.vue-flow__edge-label-group {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n pointer-events: all;\r\n}\r\n.vue-flow__edge-label {\r\n pointer-events: all;\r\n cursor: pointer;\r\n font-family: \'Microsoft JhengHei\', \'微軟正黑體\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;\r\n font-size: 10px;\r\n background: #fff;\r\n padding: 2px 4px;\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n user-select: none;\r\n text-align: center;\r\n display: inline-block;\r\n}\r\n.vue-flow__edge-popup-anchor {\r\n display: inline-block;\r\n width: 0;\r\n height: 0;\r\n}\r\n.vue-flow__edge-settings-anchor {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n z-index: 2;\r\n pointer-events: all;\r\n}\r\n.vue-flow__edge-settings {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #fff;\r\n border: 1px solid #ccc;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: #888;\r\n pointer-events: all;\r\n transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.vue-flow__edge-settings:hover {\r\n border-color: #666;\r\n background: #f0f0f0;\r\n color: #333;\r\n}\r\n/* Fade transition for settings icon */\r\n.vue-flow__fade-enter-active,\r\n.vue-flow__fade-leave-active {\r\n transition: opacity 0.15s ease;\r\n}\r\n.vue-flow__fade-enter,\r\n.vue-flow__fade-leave-to {\r\n opacity: 0;\r\n}\r\n</style>\r\n']},media:void 0})},kp,"data-v-265c95c3",false,void 0,!1,o,void 0,void 0);var Tp={name:"EdgeMarkerDefs",inject:{getDefConn:{default:()=>()=>({})}},props:{conns:{type:Array,default:()=>[]}},computed:{markers(){const n=new Map,e=this.getDefConn();return this.conns.forEach(t=>{const o=t.edgeColor||e.edgeColor;this.collectMarker(t.markerStart,n,o),this.collectMarker(t.markerEnd||e.markerEnd,n,o)}),Array.from(n.values())}},methods:{collectMarker(n,e,t){if(!n)return;const o="string"==typeof n?{type:n}:n,r=o.color||t||"#b1b1b7",i=this.getMarkerId(o,r);e.has(i)||("arrowclosed"===o.type?e.set(i,{id:i,viewBox:"0 0 12.5 12.5",path:"M 0 0 L 10 5 L 0 10 z",fill:r,stroke:r}):e.set(i,{id:i,viewBox:"0 0 12.5 12.5",path:"M 0 0 L 10 5 L 0 10",fill:"none",stroke:r}))},getMarkerId:(n,e)=>`vue-flow__${"string"==typeof n?n:n.type}_${e.replace("#","")}`}};const Pp=Tp;var zp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("defs",n._l(n.markers,function(n){return t("marker",{key:n.id,attrs:{id:n.id,markerWidth:"12.5",markerHeight:"12.5",viewBox:n.viewBox,refX:"10",refY:"5",orient:"auto-start-reverse",markerUnits:"strokeWidth"}},[t("path",{attrs:{d:n.path,fill:n.fill,stroke:n.stroke,"stroke-width":"1"}})])}),0)};zp._withStripped=!0;var Ep={name:"EdgeRenderer",components:{EdgeWrapper:Bp,EdgeMarkerDefs:e({render:zp,staticRenderFns:[]},void 0,Pp,void 0,false,void 0,!1,void 0,void 0,void 0)},props:{conns:{type:Array,default:()=>[]},nodes:{type:Array,default:()=>[]},nodeInternals:{type:Object,default:()=>({})},selectedConnIds:{type:Array,default:()=>[]},interactive:{type:Boolean,default:!0},locked:{type:Boolean,default:!1},settingsPopupBackgroundColor:{type:String,default:"#fff"},settingsPopupTextColor:{type:String,default:"#333"},settingsPopupTextFontSize:{type:String,default:"12px"},inforPopupBackgroundColor:{type:String,default:"#fff"},inforPopupTitleTextColor:{type:String,default:"#333"},inforPopupTitleTextFontSize:{type:String,default:"12px"},inforPopupDescriptionTextColor:{type:String,default:"#888"},inforPopupDescriptionTextFontSize:{type:String,default:"10px"},settingsEnabled:{type:Boolean,default:!0},settingsExcludes:{type:Array,default:()=>[]}},computed:{visibleConns(){const n=new Set(this.nodes.filter(n=>!n.hidden).map(n=>n.id)),e=this.conns.filter(e=>!e.hidden&&n.has(e.from)&&n.has(e.to)),t=this.selectedConnIds||[];return t.length?[...e.filter(n=>t.indexOf(n.id)<0),...e.filter(n=>t.indexOf(n.id)>=0)]:e},nodeMap(){const n={};return this.nodes.forEach(e=>{n[e.id]=e}),n}},methods:{isSelected(n){return this.selectedConnIds.includes(n)},openConnInfoPopup(n){let e=(this.$refs.wrappers||[]).find(e=>e.conn&&e.conn.id===n);return!!e&&(e.openInfoPopup(),!0)}}};const Ip=Ep;var Fp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("svg",{staticClass:"vue-flow__edges"},[t("EdgeMarkerDefs",{attrs:{conns:n.conns}}),n._v(" "),n._l(n.visibleConns,function(e){return t("EdgeWrapper",{key:e.id,ref:"wrappers",refInFor:!0,attrs:{conn:e,"source-node":n.nodeMap[e.from],"target-node":n.nodeMap[e.to],selected:n.isSelected(e.id),"all-nodes":n.nodes,"node-internals":n.nodeInternals,interactive:n.interactive,locked:n.locked,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"settings-enabled":n.settingsEnabled,"settings-excludes":n.settingsExcludes},on:{"conn-click":function(e){return n.$emit("conn-click",e)},"conn-double-click":function(e){return n.$emit("conn-double-click",e)},"conn-context-menu":function(e){return n.$emit("conn-context-menu",e)},"conn-mouseenter":function(e){return n.$emit("conn-mouseenter",e)},"conn-mouseleave":function(e){return n.$emit("conn-mouseleave",e)},"conn-settings-click":function(e){return n.$emit("conn-settings-click",e)},"conn-settings-update":function(e){return n.$emit("conn-settings-update",e)},"conn-settings-delete":function(e){return n.$emit("conn-settings-delete",e)}},scopedSlots:n._u([n.$scopedSlots["conn-popup"]?{key:"conn-popup",fn:function(e){return[n._t("conn-popup",null,null,e)]}}:null],null,!0)})})],2)};Fp._withStripped=!0;const $p=e({render:Fp,staticRenderFns:[]},function(n){n&&n("data-v-b3f9275a_0",{source:"\n.vue-flow__edges[data-v-b3f9275a] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n pointer-events: none;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\edges\\EdgeRenderer.vue"],names:[],mappings:";AAuGA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,oBAAA;AACA",file:"EdgeRenderer.vue",sourcesContent:['<template>\r\n <svg class="vue-flow__edges">\r\n <EdgeMarkerDefs :conns="conns" />\r\n <EdgeWrapper\r\n v-for="conn in visibleConns"\r\n ref="wrappers"\r\n :key="conn.id"\r\n :conn="conn"\r\n :source-node="nodeMap[conn.from]"\r\n :target-node="nodeMap[conn.to]"\r\n :selected="isSelected(conn.id)"\r\n :all-nodes="nodes"\r\n :node-internals="nodeInternals"\r\n :interactive="interactive"\r\n :locked="locked"\r\n :settings-popup-background-color="settingsPopupBackgroundColor"\r\n :settings-popup-text-color="settingsPopupTextColor"\r\n :settings-popup-text-font-size="settingsPopupTextFontSize"\r\n :infor-popup-background-color="inforPopupBackgroundColor"\r\n :infor-popup-title-text-color="inforPopupTitleTextColor"\r\n :infor-popup-title-text-font-size="inforPopupTitleTextFontSize"\r\n :infor-popup-description-text-color="inforPopupDescriptionTextColor"\r\n :infor-popup-description-text-font-size="inforPopupDescriptionTextFontSize"\r\n :settings-enabled="settingsEnabled"\r\n :settings-excludes="settingsExcludes"\r\n @conn-click="$emit(\'conn-click\', $event)"\r\n @conn-double-click="$emit(\'conn-double-click\', $event)"\r\n @conn-context-menu="$emit(\'conn-context-menu\', $event)"\r\n @conn-mouseenter="$emit(\'conn-mouseenter\', $event)"\r\n @conn-mouseleave="$emit(\'conn-mouseleave\', $event)"\r\n @conn-settings-click="$emit(\'conn-settings-click\', $event)"\r\n @conn-settings-update="$emit(\'conn-settings-update\', $event)"\r\n @conn-settings-delete="$emit(\'conn-settings-delete\', $event)"\r\n >\r\n <template v-if="$scopedSlots[\'conn-popup\']" v-slot:conn-popup="scope">\r\n <slot name="conn-popup" v-bind="scope" />\r\n </template>\r\n </EdgeWrapper>\r\n </svg>\r\n</template>\r\n\r\n<script>\r\nimport EdgeWrapper from \'./EdgeWrapper.vue\'\r\nimport EdgeMarkerDefs from \'./EdgeMarkerDefs.vue\'\r\n\r\nexport default {\r\n name: \'EdgeRenderer\', // lock support\r\n components: { EdgeWrapper, EdgeMarkerDefs },\r\n props: {\r\n conns: { type: Array, default: () => [] },\r\n nodes: { type: Array, default: () => [] },\r\n nodeInternals: { type: Object, default: () => ({}) },\r\n selectedConnIds: { type: Array, default: () => [] },\r\n interactive: { type: Boolean, default: true },\r\n locked: { type: Boolean, default: false },\r\n settingsPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n settingsPopupTextColor: { type: String, default: \'#333\' },\r\n settingsPopupTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupBackgroundColor: { type: String, default: \'#fff\' },\r\n inforPopupTitleTextColor: { type: String, default: \'#333\' },\r\n inforPopupTitleTextFontSize: { type: String, default: \'12px\' },\r\n inforPopupDescriptionTextColor: { type: String, default: \'#888\' },\r\n inforPopupDescriptionTextFontSize: { type: String, default: \'10px\' },\r\n settingsEnabled: { type: Boolean, default: true },\r\n settingsExcludes: { type: Array, default: () => [] },\r\n },\r\n computed: {\r\n visibleConns() {\r\n const visibleNodeIds = new Set(this.nodes.filter(n => !n.hidden).map(n => n.id))\r\n const list = this.conns.filter(\r\n e => !e.hidden && visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to)\r\n )\r\n //選取之連線移至最後渲染(SVG疊序=文件順序即置頂): 該線與其轉折點不被其他線遮擋, 便於檢視與編修\r\n const sel = this.selectedConnIds || []\r\n if (!sel.length) return list\r\n return [...list.filter(c => sel.indexOf(c.id) < 0), ...list.filter(c => sel.indexOf(c.id) >= 0)]\r\n },\r\n nodeMap() {\r\n const map = {}\r\n this.nodes.forEach(n => {\r\n map[n.id] = n\r\n })\r\n return map\r\n },\r\n },\r\n methods: {\r\n //(效能重構)錨點座標/方位解析下沉至EdgeWrapper自算(含拖曳ghost):\r\n // 本層render不再讀取各節點position, 拖曳節點時EdgeRenderer不重渲染, 僅相連邊之EdgeWrapper更新\r\n isSelected(id) {\r\n return this.selectedConnIds.includes(id)\r\n },\r\n openConnInfoPopup(connId) {\r\n let wrappers = this.$refs.wrappers || []\r\n let w = wrappers.find(c => c.conn && c.conn.id === connId)\r\n if (!w) return false\r\n w.openInfoPopup()\r\n return true\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__edges {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n pointer-events: none;\r\n}\r\n</style>\r\n']},media:void 0})},Ip,"data-v-b3f9275a",false,void 0,!1,o,void 0,void 0),Hp={bezier:pp,straight:fp,step:hp,smoothstep:gp};const Np={name:"ConnectionLine",props:{active:{type:Boolean,default:!1},sourceX:{type:Number,default:0},sourceY:{type:Number,default:0},sourcePosition:{type:String,default:"bottom"},targetX:{type:Number,default:0},targetY:{type:Number,default:0},type:{type:String,default:"bezier"},lineStyle:{type:Object,default:null}},computed:{pathD(){return(Hp[this.type]||Hp.bezier)({sourceX:this.sourceX,sourceY:this.sourceY,sourcePosition:this.sourcePosition,targetX:this.targetX,targetY:this.targetY,targetPosition:"top"}).path},computedLineStyle(){return this.lineStyle||{}}}};var Wp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return n.active?t("svg",{staticClass:"vue-flow__connection-line"},[t("path",{staticClass:"vue-flow__connection-path",style:n.computedLineStyle,attrs:{d:n.pathD}})]):n._e()};Wp._withStripped=!0;const Mp=e({render:Wp,staticRenderFns:[]},function(n){n&&n("data-v-a322aa0e_0",{source:"\n.vue-flow__connection-line[data-v-a322aa0e] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\n.vue-flow__connection-path[data-v-a322aa0e] {\n stroke: #b1b1b7;\n stroke-width: 1;\n stroke-dasharray: 5 5;\n fill: none;\n}\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\edges\\ConnectionLine.vue"],names:[],mappings:";AAiDA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,oBAAA;AACA;AACA;EACA,eAAA;EACA,eAAA;EACA,qBAAA;EACA,UAAA;AACA",file:"ConnectionLine.vue",sourcesContent:["<template>\n <svg v-if=\"active\" class=\"vue-flow__connection-line\">\n <path class=\"vue-flow__connection-path\" :d=\"pathD\" :style=\"computedLineStyle\" />\n </svg>\n</template>\n\n<script>\nimport { getBezierPath, getStraightPath, getStepPath, getSmoothStepPath } from '../../js/edgePath'\n\nconst pathFunctions = {\n bezier: getBezierPath,\n straight: getStraightPath,\n step: getStepPath,\n smoothstep: getSmoothStepPath,\n}\n\nexport default {\n name: 'ConnectionLine',\n props: {\n active: { type: Boolean, default: false },\n sourceX: { type: Number, default: 0 },\n sourceY: { type: Number, default: 0 },\n sourcePosition: { type: String, default: 'bottom' },\n targetX: { type: Number, default: 0 },\n targetY: { type: Number, default: 0 },\n type: { type: String, default: 'bezier' },\n lineStyle: { type: Object, default: null },\n },\n computed: {\n pathD() {\n const fn = pathFunctions[this.type] || pathFunctions.bezier\n const result = fn({\n sourceX: this.sourceX,\n sourceY: this.sourceY,\n sourcePosition: this.sourcePosition,\n targetX: this.targetX,\n targetY: this.targetY,\n targetPosition: 'top',\n })\n return result.path\n },\n computedLineStyle() {\n return this.lineStyle || {}\n },\n },\n}\n<\/script>\n\n<style scoped>\n.vue-flow__connection-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\n.vue-flow__connection-path {\n stroke: #b1b1b7;\n stroke-width: 1;\n stroke-dasharray: 5 5;\n fill: none;\n}\n</style>\n"]},media:void 0})},Np,"data-v-a322aa0e",false,void 0,!1,o,void 0,void 0);var Lp={components:{WIcon:yu,WIconLoading:wu,WTooltip:Na},props:{tooltip:{type:String,default:""},icon:{type:String,default:""},iconSize:{type:Number,default:22},iconColor:{type:String,default:"grey darken-1"},iconColorHover:{type:String,default:"grey darken-2"},iconColorFocus:{type:String,default:"grey darken-3"},iconColorActive:{type:String,default:"grey darken-3"},borderRadius:{type:[Number,String],default:"50%"},borderRadiusStyle:{type:Object,default:()=>({left:!0,right:!0})},borderWidth:{type:Number,default:0},borderColor:{type:String,default:"transparent"},borderColorHover:{type:String,default:"transparent"},borderColorFocus:{type:String,default:"transparent"},borderColorActive:{type:String,default:"transparent"},backgroundColor:{type:String,default:"rgb(241,241,241)"},backgroundColorHover:{type:String,default:"rgb(236,236,236)"},backgroundColorFocus:{type:String,default:"rgb(230,230,230)"},backgroundColorActive:{type:String,default:"rgb(230,230,230)"},tooltipBorderRadius:{type:Number,default:4},tooltipPaddingStyle:{type:Object,default:()=>({v:5,h:8})},tooltipTextFontSize:{type:String,default:"0.85rem"},tooltipTextColor:{type:String,default:"white"},tooltipBackgroundColor:{type:String,default:"rgba(60,60,60,0.75)"},rippleColor:{type:String,default:"rgba(255, 255, 255, 0.5)"},paddingStyle:{type:Object,default:()=>({v:4,h:4})},shadow:{type:Boolean,default:!0},shadowStyle:{type:String,default:"0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"},active:{type:Boolean,default:!1},cursorPointer:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingColor:{type:String,default:"grey darken-2"},promiseUnlock:{type:Boolean,default:!1},role:{type:String,default:"button"},editable:{type:Boolean,default:!0},disabledColor:{type:String,default:"rgba(255,255,255,0.5)"}},data:function(){return{activeTrans:!1,hoverTrans:!1,focusTrans:!1,loadingTrans:!1}},mounted:function(){},computed:{changeActive:function(){return this.activeTrans=this.active,""},changeLoading:function(){return this.loadingTrans=this.loading,""},effIconColor:function(){return qt(this.iconColor)},effIconColorHover:function(){return qt(this.iconColorHover)},effIconColorFocus:function(){return qt(this.iconColorFocus)},effIconColorActive:function(){return qt(this.iconColorActive)},useIconColor:function(){let n,e=this;return e.loadingTrans?e.effIconColor:(n=e.activeTrans?e.effIconColorActive:e.focusTrans?e.effIconColorFocus:e.hoverTrans?e.effIconColorHover:e.effIconColor,e.editable||(n=e.activeTrans?e.effIconColorActive:e.effIconColor),n)},useBorderRadius:function(){let n=this,e="0px";if(uo(n.borderRadius)){e=`${co(n.borderRadius)}px;`}else Gt(n.borderRadius)&&(e=n.borderRadius);let t="0px",o="0px",r="0px",i="0px";return!0===On(n,"borderRadiusStyle.left")&&(t=e,r=e),!0===On(n,"borderRadiusStyle.right")&&(o=e,i=e),!0===On(n,"borderRadiusStyle.top")&&(t=e,o=e),!0===On(n,"borderRadiusStyle.bottom")&&(r=e,i=e),!0!==On(n,"borderRadiusStyle.topLeft")&&!0!==On(n,"borderRadiusStyle.top-left")||(t=e),!0!==On(n,"borderRadiusStyle.topRight")&&!0!==On(n,"borderRadiusStyle.top-right")||(o=e),!0!==On(n,"borderRadiusStyle.bottomLeft")&&!0!==On(n,"borderRadiusStyle.bottom-left")||(r=e),!0!==On(n,"borderRadiusStyle.bottomRight")&&!0!==On(n,"borderRadiusStyle.bottom-right")||(i=e),`border-top-left-radius:${t}; border-top-right-radius:${o}; border-bottom-left-radius:${r}; border-bottom-right-radius:${i};`},effBorderColor:function(){return qt(this.borderColor)},effBorderColorHover:function(){return qt(this.borderColorHover)},effBorderColorFocus:function(){return qt(this.borderColorFocus)},effBorderColorActive:function(){return qt(this.borderColorActive)},useBorderColor:function(){let n,e=this;return e.loadingTrans?e.effBorderColor:(n=e.activeTrans?e.effBorderColorActive:e.focusTrans?e.effBorderColorFocus:e.hoverTrans?e.effBorderColorHover:e.effBorderColor,e.editable||(n=e.activeTrans?e.effBorderColorActive:e.effBorderColor),n)},effBackgroundColor:function(){return qt(this.backgroundColor)},effBackgroundColorHover:function(){return qt(this.backgroundColorHover)},effBackgroundColorFocus:function(){return qt(this.backgroundColorFocus)},effBackgroundColorActive:function(){return qt(this.backgroundColorActive)},useBackgroundColor:function(){let n,e=this;return e.loadingTrans?e.effBackgroundColor:(n=e.activeTrans?e.effBackgroundColorActive:e.focusTrans?e.effBackgroundColorFocus:e.hoverTrans?e.effBackgroundColorHover:e.effBackgroundColor,e.editable||(n=e.activeTrans?e.effBackgroundColorActive:e.effBackgroundColor),n)},effRippleColor:function(){return qt(this.rippleColor)},effLoadingColor:function(){return qt(this.loadingColor)},effDisabledColor:function(){return qt(this.disabledColor)},usePadding:function(){return`padding:${ri(this.paddingStyle,{ext:{}})};`},useShadow:function(){let n=this;return n.shadow&&Gt(n.shadowStyle)?"box-shadow:"+function(n,e,t){let o=ut(n=qr(n,"}","{"),"{");return o=dl(o,n=>{if(n.indexOf(e)>=0){let e=wl(n,"=")[1];return e=uo(e)?co(e):.2,function(n,e){let t=qt(n),o=Ts.toRgba(t);return o.a=e,Ts.toRgbaString(o)}(t,e)}return n}),Hs(o,"")}(n.shadowStyle,"backgroundColorAlpha",n.backgroundColor):""},hasTooltop:function(){return Gt(this.tooltip)}},methods:{ripple:function(n){let e=this;e.editable&&(e.loadingTrans||e.$nextTick(()=>{mu(n.currentTarget,n,{color:e.effRippleColor,timeDuration:500})}))},clickBtn:function(n){let e=this;if(e.editable&&!e.loadingTrans)if(e.promiseUnlock){e.loadingTrans=!0,e.$nextTick(()=>{e.$emit("update:loading",e.loadingTrans)});let n=tu();e.$nextTick(()=>{e.$emit("click",{pm:n})}),n.catch().finally(()=>{e.loadingTrans=!1,e.$nextTick(()=>{e.$emit("update:loading",e.loadingTrans)})})}else e.$nextTick(()=>{e.$emit("click")})}}};const Dp=Lp;var Rp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{display:"inline-block","vertical-align":"middle",outline:"none","user-select":"none"},attrs:{role:n.editable?n.role:"",changeActive:n.changeActive,changeLoading:n.changeLoading}},[t("WTooltip",{attrs:{displayType:"line",isolated:!0,borderRadius:n.tooltipBorderRadius,paddingStyle:n.tooltipPaddingStyle,textFontSize:n.tooltipTextFontSize,textColor:n.tooltipTextColor,backgroundColor:n.tooltipBackgroundColor,editable:n.hasTooltop},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{style:"position:relative; transition:all 0.3s; "+n.usePadding+" "+n.useBorderRadius+" border:"+n.borderWidth+"px solid "+n.useBorderColor+"; background:"+n.useBackgroundColor+"; "+(n.editable&&n.cursorPointer?"cursor:pointer;":"")+" "+n.useShadow+"; outline:none; user-select:none; overflow:hidden;",attrs:{tabindex:"0"},on:{mouseenter:function(e){n.hoverTrans=!0,n.$emit("mouseenter",e)},mouseleave:function(e){n.hoverTrans=!1,n.$emit("mouseleave",e)},focus:function(e){n.focusTrans=!0},blur:function(e){n.focusTrans=!1},keyup:function(e){return!e.type.indexOf("key")&&n._k(e.keyCode,"enter",13,e.key,"Enter")?null:n.clickBtn(e)},click:function(e){n.ripple(e),n.clickBtn(e)}}},[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"center"}},[n.loadingTrans?n._e():t("WIcon",{attrs:{icon:n.icon,color:n.useIconColor,colorHover:n.useIconColor,size:n.iconSize}}),n._v(" "),n.loadingTrans?t("WIconLoading",{attrs:{name:"cir-rotate",color:n.effLoadingColor,size:n.iconSize}}):n._e()],1),n._v(" "),n.editable?n._e():t("div",{staticStyle:{position:"absolute",left:"0",right:"0",top:"0",bottom:"0"}},[t("div",{style:n.useBorderRadius+" overflow:hidden; width:100%; height:100%;"},[t("div",{style:"background:"+n.effDisabledColor+"; height:100%;"})])])])]},proxy:!0},{key:"content",fn:function(){return[n._v("\n "+n._s(n.tooltip)+"\n ")]},proxy:!0}])})],1)};Rp._withStripped=!0;var jp={components:{WButtonCircle:e({render:Rp,staticRenderFns:[]},function(n){n&&n("data-v-b9ce631c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WButtonCircle.vue"},media:void 0})},Dp,"data-v-b9ce631c",false,void 0,!1,o,void 0,void 0)},props:{multiCheck:{type:Boolean,default:!0},items:{type:Array,default:()=>[]},value:{type:[Array,Object],default:null},keyIcon:{type:String,default:"icon"},keyTooltip:{type:String,default:"tooltip"},dir:{type:String,default:"horizontal"},iconColor:{type:String,default:"#222"},iconColorHover:{type:String,default:"#444"},iconColorFocus:{type:String,default:"#666"},iconColorActive:{type:String,default:"#333"},iconSize:{type:Number,default:22},borderWidth:{type:Number,default:0},borderRadius:{type:Number,default:4},borderColor:{type:String,default:"transparent"},borderColorHover:{type:String,default:"transparent"},borderColorFocus:{type:String,default:"transparent"},borderColorActive:{type:String,default:"transparent"},backgroundColor:{type:String,default:"#f2f2f2"},backgroundColorHover:{type:String,default:"#eaeaea"},backgroundColorFocus:{type:String,default:"#e2e2e2"},backgroundColorActive:{type:String,default:"#cecece"},seplineWidth:{type:Number,default:1},seplineColor:{type:String,default:"#ddd"},tooltipBorderRadius:{type:Number,default:4},tooltipPaddingStyle:{type:Object,default:()=>({v:5,h:8})},tooltipTextFontSize:{type:String,default:"0.85rem"},tooltipTextColor:{type:String,default:"white"},tooltipBackgroundColor:{type:String,default:"rgba(60,60,60,0.75)"},rippleColor:{type:String,default:"rgba(255, 255, 255, 0.5)"},paddingStyle:{type:Object,default:()=>({v:4,h:4})},shadow:{type:Boolean,default:!1},shadowStyle:{type:String,default:"0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"},editable:{type:Boolean,default:!0}},data:function(){return{get:On,itemsTrans:[]}},mounted:function(){},computed:{changeItems:function(){let n=this;let e=zr(n.items),t=dl(e,e=>{let t=function(e){let t;return t=n.multiCheck?hu(n.value,e):pu(e,n.value),t}(e);return{active:t,hover:!1}}),o=dl(e,(n,e)=>{let o={data:n},r=t[e];return o.ia=r,o.active=r.active,o.hover=!1,o});return n.itemsTrans=o,""},useFlexDirection:function(){return"horizontal"===this.dir?"row":"column"},useSeplineStype:function(){let n=this,e="";return e="horizontal"===n.dir?`height:100%; border-left:${n.seplineWidth}px solid ${n.useSeplineColor};`:`width:100%; border-top:${n.seplineWidth}px solid ${n.useSeplineColor};`,e},useSeplineColor:function(){return qt(this.seplineColor)},useShadow:function(){let n=this;return n.shadow&&Gt(n.shadowStyle)?"box-shadow:"+function(n,e,t){let o=ut(n=qr(n,"}","{"),"{");return o=dl(o,n=>{if(n.indexOf(e)>=0){let e=wl(n,"=")[1];return e=uo(e)?co(e):.2,function(n,e){let t=qt(n),o=Ts.toRgba(t);return o.a=e,Ts.toRgbaString(o)}(t,e)}return n}),Hs(o,"")}(n.shadowStyle,"backgroundColorAlpha",n.backgroundColor):""}},methods:{getBorderRadiusStyle:function(n){let e=Ut(this.itemsTrans)-1,t={};return"horizontal"===this.dir?(0===n&&(t={...t,topLeft:!0,bottomLeft:!0}),n===e&&(t={...t,topRight:!0,bottomRight:!0})):(0===n&&(t={...t,topLeft:!0,topRight:!0}),n===e&&(t={...t,bottomLeft:!0,bottomRight:!0})),t},toggleState:function(n){let e=this;if(!1!==e.editable)if(e.multiCheck){let t=zr(e.value);if(n.active){let e=[];di(t,t=>{pu(t,n.data)||e.push(t)}),t=e}else t.push(n.data);e.$nextTick(()=>{e.$emit("input",t),e.$emit("click",n.data,""+(n.active?"hide":"show"))})}else e.$nextTick(()=>{e.$emit("input",n.data),e.$emit("click",n.data)})}}};const Op=jp;var Vp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{attrs:{changeItems:n.changeItems}},[t("div",{style:"display:inline-block; border-radius:"+n.borderRadius+"px; "+n.useShadow},[t("div",{style:"display:flex; flex-direction:"+n.useFlexDirection+";"},[n._l(n.itemsTrans,function(e,o){return[t("div",{key:"kitem-"+o,style:"display:flex; flex-direction:"+n.useFlexDirection+"; align-items:stretch;"},[o>0?t("div",{style:""+n.useSeplineStype}):n._e(),n._v(" "),t("WButtonCircle",{key:o,attrs:{tooltip:n.get(e,"data."+n.keyTooltip),icon:n.get(e,"data."+n.keyIcon),iconColor:n.iconColor,iconColorHover:n.iconColorHover,iconColorFocus:n.iconColorFocus,iconColorActive:n.iconColorActive,iconSize:n.iconSize,borderWidth:n.borderWidth,borderRadius:n.borderRadius,borderRadiusStyle:n.getBorderRadiusStyle(o),borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorFocus:n.borderColorFocus,borderColorActive:n.borderColorActive,backgroundColor:n.backgroundColor,backgroundColorHover:n.backgroundColorHover,backgroundColorFocus:n.backgroundColorFocus,backgroundColorActive:n.backgroundColorActive,tooltipBorderRadius:n.tooltipBorderRadius,tooltipPaddingStyle:n.tooltipPaddingStyle,tooltipTextFontSize:n.tooltipTextFontSize,tooltipTextColor:n.tooltipTextColor,tooltipBackgroundColor:n.tooltipBackgroundColor,rippleColor:n.rippleColor,paddingStyle:n.paddingStyle,shadow:!1,_shadowStyle:"shadowStyle",editable:n.editable,disabledColor:"rgba(255,255,255,0.4)",active:e.active},on:{click:function(t){return n.toggleState(e)}}})],1)]})],2)])])};Vp._withStripped=!0;let Yp={useMenu:!0,menuPosition:"top-left",menuYShift:0,useSetting:!0,menuSettingIcon:"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z",menuSettingTooltip:"Settings",useMenuItemZoomIn:!0,menuZoomInIcon:"M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z",menuZoomInTooltip:"Zoom In",useMenuItemZoomOut:!0,menuZoomOutIcon:"M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z",menuZoomOutTooltip:"Zoom Out",useMenuItemFitView:!0,menuFitViewIcon:"M20,2H4C2.89,2 2,2.89 2,4V20C2,21.11 2.89,22 4,22H20C21.11,22 22,21.11 22,20V4C22,2.89 21.11,2 20,2M20,20H4V4H20M13,8V10H11V8H9L12,5L15,8M16,15V13H14V11H16V9L19,12M10,13H8V15L5,12L8,9V11H10M15,16L12,19L9,16H11V14H13V16",menuFitViewTooltip:"Fit View",useMenuItemLock:!0,menuLockIcon:"M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17S8 16.11 8 15 8.9 13 10 13M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.9 2 10V20C2 21.1 2.9 22 4 22H16C17.1 22 18 21.1 18 20V10C18 8.9 17.1 8 16 8H15V6C15 4.34 16.34 3 18 3S21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M16 10V20H4V10H16Z",menuLockTooltip:"Lock",menuLockIconLocked:"M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z",menuLockTooltipLocked:"Unlock",menuIconColor:"#555",menuIconColorHover:"#222",menuIconColorFocus:"#222",menuIconSize:22,menuBackgroundColor:"#fefefe",menuBackgroundColorHover:"#f0f0f0",menuBackgroundColorFocus:"#f0f0f0",menuSeparatorColor:"#e6e6e6",menuShadow:!0,menuTooltipTextColor:"white",menuTooltipTextFontSize:"0.7rem",menuTooltipBackgroundColor:"rgba(60,60,60,0.75)"},Up=["top-left","top-right","bottom-left","bottom-right"];function Xp(n,e){let t=Yp[n];return"string"==typeof t?"string"==typeof e&&""!==e?e:t:"boolean"==typeof t?"boolean"==typeof e?e:t:"number"==typeof t&&"number"==typeof e&&isFinite(e)?e:t}const Gp={name:"FlowControls",components:{WGroupIconCheck:e({render:Vp,staticRenderFns:[]},function(n){n&&n("data-v-4390c218_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WGroupIconCheck.vue"},media:void 0})},Op,"data-v-4390c218",false,void 0,!1,o,void 0,void 0)},props:{menu:{type:Object,default:()=>({})},locked:{type:Boolean,default:!1}},data(){return{useSetting:Xp("useSetting",(this.menu||{}).useSetting)}},computed:{cfg(){let n=this.menu||{},e={};for(let t in Yp)e[t]=Xp(t,n[t]);return Up.indexOf(e.menuPosition)<0&&(e.menuPosition=Yp.menuPosition),e},allItems(){let n=this.cfg,e=[{id:"setting",icon:n.menuSettingIcon,tooltip:n.menuSettingTooltip}];return n.useMenuItemZoomIn&&e.push({id:"zoomIn",icon:n.menuZoomInIcon,tooltip:n.menuZoomInTooltip}),n.useMenuItemZoomOut&&e.push({id:"zoomOut",icon:n.menuZoomOutIcon,tooltip:n.menuZoomOutTooltip}),n.useMenuItemFitView&&e.push({id:"fitView",icon:n.menuFitViewIcon,tooltip:n.menuFitViewTooltip}),n.useMenuItemLock&&e.push({id:"interactive",icon:this.locked?n.menuLockIconLocked:n.menuLockIcon,tooltip:this.locked?n.menuLockTooltipLocked:n.menuLockTooltip}),e},useItems(){return this.useSetting?this.allItems:[this.allItems[0]]},panelStyle(){let n="z-index:5;";return this.cfg.menuPosition.indexOf("bottom")>=0?n+=`margin-bottom:${this.cfg.menuYShift}px;`:n+=`margin-top:${this.cfg.menuYShift}px;`,n}},methods:{onClickItem(n){let e=n&&n.id||"";"setting"===e?this.useSetting=!this.useSetting:"zoomIn"===e?this.$emit("zoom-in"):"zoomOut"===e?this.$emit("zoom-out"):"fitView"===e?this.$emit("fit-view"):"interactive"===e&&this.$emit("toggle-interactive")}}};var Zp=function(){var n=this,e=n.$createElement,t=n._self._c||e;return n.cfg.useMenu?t("div",{class:["vue-flow__panel","vue-flow__panel--"+n.cfg.menuPosition],style:n.panelStyle},[t("WGroupIconCheck",{attrs:{items:n.useItems,dir:"vertical",iconColor:n.cfg.menuIconColor,iconColorHover:n.cfg.menuIconColorHover,iconColorFocus:n.cfg.menuIconColorFocus,iconSize:n.cfg.menuIconSize,backgroundColor:n.cfg.menuBackgroundColor,backgroundColorHover:n.cfg.menuBackgroundColorHover,backgroundColorFocus:n.cfg.menuBackgroundColorFocus,seplineColor:n.cfg.menuSeparatorColor,shadow:n.cfg.menuShadow,tooltipTextColor:n.cfg.menuTooltipTextColor,tooltipTextFontSize:n.cfg.menuTooltipTextFontSize,tooltipBackgroundColor:n.cfg.menuTooltipBackgroundColor,value:[]},on:{click:n.onClickItem}})],1):n._e()};Zp._withStripped=!0;let qp=0;const Qp={type:"basic",shape:"rectangle",width:100,height:40,fontSize:12,fontSizeMin:1,fontSizeMax:72,fontColor:"#333333",faceColor:"#ffffff",edgeColor:"#bbbbbb",edgeWidth:1,toPosition:"bottom",fromPosition:"top",popupDirection:"right"},Jp={type:"bezier",fontSize:10,fontSizeMin:1,fontSizeMax:72,fontColor:"#333333",edgeColor:"#b1b1b7",edgeWidth:1,markerEnd:"",animated:!1,defOffset:24};var Kp={components:{FlowCanvas:s,ViewportTransform:c,BackgroundLayer:h,SelectionBox:m,NodeRenderer:Uc,EdgeRenderer:$p,ConnectionLine:Mp,Controls:e({render:Zp,staticRenderFns:[]},function(n){n&&n("data-v-78fc6f50_0",{source:"\n.vue-flow__panel[data-v-78fc6f50] {\r\n position: absolute;\r\n z-index: 5;\n}\n.vue-flow__panel--top-left[data-v-78fc6f50] { top: 10px; left: 10px;\n}\n.vue-flow__panel--top-right[data-v-78fc6f50] { top: 10px; right: 10px;\n}\n.vue-flow__panel--bottom-left[data-v-78fc6f50] { bottom: 10px; left: 10px;\n}\n.vue-flow__panel--bottom-right[data-v-78fc6f50] { bottom: 10px; right: 10px;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-409-7-w-flow-vue\\w-flow-vue\\src\\components\\ui\\Controls.vue"],names:[],mappings:";AAqMA;EACA,kBAAA;EACA,UAAA;AACA;AACA,8CAAA,SAAA,EAAA,UAAA;AAAA;AACA,+CAAA,SAAA,EAAA,WAAA;AAAA;AACA,iDAAA,YAAA,EAAA,UAAA;AAAA;AACA,kDAAA,YAAA,EAAA,WAAA;AAAA",file:"Controls.vue",sourcesContent:["<template>\r\n \x3c!-- 垂直選單: 改用w-threejs-vue同款組件WGroupIconCheck(:dir='vertical'), 最頂為設定鈕, 收合時僅顯示設定鈕, 展開才顯示其餘按鈕 --\x3e\r\n <div\r\n v-if=\"cfg.useMenu\"\r\n :class=\"['vue-flow__panel', `vue-flow__panel--${cfg.menuPosition}`]\"\r\n :style=\"panelStyle\"\r\n >\r\n \x3c!-- 淺色系配色(w-flow-vue圖台為白底, 沿用原Controls之#fefefe白底/深灰icon風格; iconSize預設22, 按鈕寬=22+左右padding8=30px與w-threejs-vue選單一致) --\x3e\r\n \x3c!-- 全數為一般動作鈕(不用active態): 鎖頭點擊即切換上鎖/解鎖並換icon(比照fitView等), 不留固定灰底; value恆空故無任一鈕呈active, 故不開放*ColorActive類選項 --\x3e\r\n <WGroupIconCheck\r\n :items=\"useItems\"\r\n :dir=\"'vertical'\"\r\n :iconColor=\"cfg.menuIconColor\"\r\n :iconColorHover=\"cfg.menuIconColorHover\"\r\n :iconColorFocus=\"cfg.menuIconColorFocus\"\r\n :iconSize=\"cfg.menuIconSize\"\r\n :backgroundColor=\"cfg.menuBackgroundColor\"\r\n :backgroundColorHover=\"cfg.menuBackgroundColorHover\"\r\n :backgroundColorFocus=\"cfg.menuBackgroundColorFocus\"\r\n :seplineColor=\"cfg.menuSeparatorColor\"\r\n :shadow=\"cfg.menuShadow\"\r\n :tooltipTextColor=\"cfg.menuTooltipTextColor\"\r\n :tooltipTextFontSize=\"cfg.menuTooltipTextFontSize\"\r\n :tooltipBackgroundColor=\"cfg.menuTooltipBackgroundColor\"\r\n :value=\"[]\"\r\n @click=\"onClickItem\"\r\n ></WGroupIconCheck>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport WGroupIconCheck from 'w-component-vue/src/components/WGroupIconCheck.vue'\r\nimport { mdiCogOutline, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiFitToPageOutline, mdiLockOutline, mdiLockOpenVariantOutline } from '@mdi/js/mdi.js'\r\n\r\n//menuDef, 選單各項之預設值, 未被opt覆寫者沿用之\r\n//注意: menuIconSize, menuTooltipTextColor, menuTooltipBackgroundColor原為WGroupIconCheck之預設值,\r\n//因w-component-vue為浮動相依(^2.5.2), 子套件改預設會靜默改變本套件外觀, 故於此明寫鎖住現值\r\nlet menuDef = {\r\n\r\n //整體\r\n useMenu: true,\r\n menuPosition: 'top-left',\r\n menuYShift: 0,\r\n useSetting: true,\r\n\r\n //設定鈕(收合/展開)\r\n menuSettingIcon: mdiCogOutline,\r\n menuSettingTooltip: 'Settings',\r\n\r\n //放大\r\n useMenuItemZoomIn: true,\r\n menuZoomInIcon: mdiMagnifyPlusOutline,\r\n menuZoomInTooltip: 'Zoom In',\r\n\r\n //縮小\r\n useMenuItemZoomOut: true,\r\n menuZoomOutIcon: mdiMagnifyMinusOutline,\r\n menuZoomOutTooltip: 'Zoom Out',\r\n\r\n //全圖\r\n useMenuItemFitView: true,\r\n menuFitViewIcon: mdiFitToPageOutline,\r\n menuFitViewTooltip: 'Fit View',\r\n\r\n //鎖定(雙態: 無後綴為未鎖態, Locked後綴為已鎖態)\r\n useMenuItemLock: true,\r\n menuLockIcon: mdiLockOpenVariantOutline,\r\n menuLockTooltip: 'Lock',\r\n menuLockIconLocked: mdiLockOutline,\r\n menuLockTooltipLocked: 'Unlock',\r\n\r\n //樣式\r\n menuIconColor: '#555',\r\n menuIconColorHover: '#222',\r\n menuIconColorFocus: '#222',\r\n menuIconSize: 22,\r\n menuBackgroundColor: '#fefefe',\r\n menuBackgroundColorHover: '#f0f0f0',\r\n menuBackgroundColorFocus: '#f0f0f0',\r\n menuSeparatorColor: '#e6e6e6',\r\n menuShadow: true,\r\n menuTooltipTextColor: 'white',\r\n menuTooltipTextFontSize: '0.7rem',\r\n menuTooltipBackgroundColor: 'rgba(60,60,60,0.75)',\r\n\r\n}\r\n\r\n//menuPositions, menuPosition之允許值, 不在其中者回退預設\r\nlet menuPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right']\r\n\r\n/**\r\n * 取單項設定值, 型別與menuDef同型且有效才採用, 否則回退menuDef\r\n */\r\nfunction pickMenuValue(k, v) {\r\n let d = menuDef[k]\r\n if (typeof d === 'string') {\r\n return (typeof v === 'string' && v !== '') ? v : d\r\n }\r\n if (typeof d === 'boolean') {\r\n return (typeof v === 'boolean') ? v : d\r\n }\r\n if (typeof d === 'number') {\r\n return (typeof v === 'number' && isFinite(v)) ? v : d\r\n }\r\n return d\r\n}\r\n\r\nexport default {\r\n name: 'FlowControls',\r\n components: { WGroupIconCheck },\r\n props: {\r\n //選單設定物件, 鍵值同menuDef, 由WFlowVue自opt原樣取出後傳入; 各鍵未給或型別不符即回退menuDef\r\n menu: { type: Object, default: () => ({}) },\r\n locked: { type: Boolean, default: false },\r\n },\r\n data() {\r\n return {\r\n //設定鈕展開狀態(收合時僅顯示設定鈕, 展開才顯示其餘按鈕), 比照w-threejs-vue; 初值取menu.useSetting\r\n useSetting: pickMenuValue('useSetting', (this.menu || {}).useSetting),\r\n }\r\n },\r\n computed: {\r\n cfg() {\r\n let m = this.menu || {}\r\n let r = {}\r\n for (let k in menuDef) {\r\n r[k] = pickMenuValue(k, m[k])\r\n }\r\n //menuPosition另檢核列舉值\r\n if (menuPositions.indexOf(r.menuPosition) < 0) {\r\n r.menuPosition = menuDef.menuPosition\r\n }\r\n return r\r\n },\r\n allItems() {\r\n let c = this.cfg\r\n let rs = [\r\n { id: 'setting', icon: c.menuSettingIcon, tooltip: c.menuSettingTooltip },\r\n ]\r\n if (c.useMenuItemZoomIn) {\r\n rs.push({ id: 'zoomIn', icon: c.menuZoomInIcon, tooltip: c.menuZoomInTooltip })\r\n }\r\n if (c.useMenuItemZoomOut) {\r\n rs.push({ id: 'zoomOut', icon: c.menuZoomOutIcon, tooltip: c.menuZoomOutTooltip })\r\n }\r\n if (c.useMenuItemFitView) {\r\n rs.push({ id: 'fitView', icon: c.menuFitViewIcon, tooltip: c.menuFitViewTooltip })\r\n }\r\n if (c.useMenuItemLock) {\r\n rs.push({ id: 'interactive', icon: this.locked ? c.menuLockIconLocked : c.menuLockIcon, tooltip: this.locked ? c.menuLockTooltipLocked : c.menuLockTooltip })\r\n }\r\n return rs\r\n },\r\n useItems() {\r\n //設定鈕恆在最頂; 收合時僅顯示設定鈕\r\n if (this.useSetting) {\r\n return this.allItems\r\n }\r\n return [this.allItems[0]]\r\n },\r\n panelStyle() {\r\n //向下偏移: top-*位置加margin-top, bottom-*位置加margin-bottom(margin於絕對定位元素上等同再位移該側)\r\n //故menuYShift之語義為[正值使選單遠離其錨定邊]: top-*向下, bottom-*向上\r\n let s = 'z-index:5;'\r\n if (this.cfg.menuPosition.indexOf('bottom') >= 0) {\r\n s += `margin-bottom:${this.cfg.menuYShift}px;`\r\n }\r\n else {\r\n s += `margin-top:${this.cfg.menuYShift}px;`\r\n }\r\n return s\r\n },\r\n },\r\n methods: {\r\n onClickItem(item) {\r\n let id = (item && item.id) || ''\r\n if (id === 'setting') {\r\n this.useSetting = !this.useSetting\r\n }\r\n else if (id === 'zoomIn') {\r\n this.$emit('zoom-in')\r\n }\r\n else if (id === 'zoomOut') {\r\n this.$emit('zoom-out')\r\n }\r\n else if (id === 'fitView') {\r\n this.$emit('fit-view')\r\n }\r\n else if (id === 'interactive') {\r\n this.$emit('toggle-interactive')\r\n }\r\n },\r\n },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.vue-flow__panel {\r\n position: absolute;\r\n z-index: 5;\r\n}\r\n.vue-flow__panel--top-left { top: 10px; left: 10px; }\r\n.vue-flow__panel--top-right { top: 10px; right: 10px; }\r\n.vue-flow__panel--bottom-left { bottom: 10px; left: 10px; }\r\n.vue-flow__panel--bottom-right { bottom: 10px; right: 10px; }\r\n</style>\r\n"]},media:void 0})},Gp,"data-v-78fc6f50",false,void 0,!1,o,void 0,void 0)},props:{opt:{type:Object,default:()=>({})}},provide(){return{getDefNode:()=>this.defNode,getDefConn:()=>this.defConn,getConns:()=>this.conns,getDragGhost:n=>this.dragPositions[n]||null}},data(){return{inited:!1,viewport:{x:0,y:0,zoom:1},selectedNodes:[],selectedConns:[],selectionBox:null,nodeInternals:{},locked:!0===this.opt.locked,isDraggingNode:!1,draggingNodeId:null,dragStartPos:null,dragNodeStartPositions:null,dragPositions:{},isPanning:!1,panStartPos:null,isConnecting:!1,connectingFrom:null,connLineFromX:0,connLineFromY:0,connLineFromPosition:"bottom",connLineToX:0,connLineToY:0,isSelecting:!1,selectionStartPos:null,keysPressed:{}}},watch:{nodes:{immediate:!0,handler(n){for(const e of n||[])e.id in this.dragPositions||this.$set(this.dragPositions,e.id,null)}},opt:{handler(){if(!this.inited){this.inited=!0;let n=this.center;n&&(this.viewport.x=n[0]||0,this.viewport.y=n[1]||0),this.viewport.zoom=this.zoom,this.$emit("init")}},immediate:!0}},mounted(){document.addEventListener("keydown",this.onKeyDown),document.addEventListener("keyup",this.onKeyUp),document.addEventListener("mousemove",this.onDocMouseMove),document.addEventListener("mouseup",this.onDocMouseUp),window.addEventListener("blur",this.onWindowBlur)},beforeDestroy(){this._panAnimId&&(cancelAnimationFrame(this._panAnimId),this._panAnimId=null),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("keyup",this.onKeyUp),document.removeEventListener("mousemove",this.onDocMouseMove),document.removeEventListener("mouseup",this.onDocMouseUp),window.removeEventListener("blur",this.onWindowBlur)},computed:{widthInp(){return this.opt.width||800},heightInp(){return this.opt.height||600},nodes(){return this.opt.nodes||[]},conns(){return this.opt.conns||[]},nodesDraggable(){return void 0===this.opt.nodesDraggable||this.opt.nodesDraggable},menuInp(){let n=this.opt;return{useMenu:n.useMenu,menuPosition:n.menuPosition,menuYShift:n.menuYShift,useSetting:n.useSetting,menuSettingIcon:n.menuSettingIcon,menuSettingTooltip:n.menuSettingTooltip,useMenuItemZoomIn:n.useMenuItemZoomIn,menuZoomInIcon:n.menuZoomInIcon,menuZoomInTooltip:n.menuZoomInTooltip,useMenuItemZoomOut:n.useMenuItemZoomOut,menuZoomOutIcon:n.menuZoomOutIcon,menuZoomOutTooltip:n.menuZoomOutTooltip,useMenuItemFitView:n.useMenuItemFitView,menuFitViewIcon:n.menuFitViewIcon,menuFitViewTooltip:n.menuFitViewTooltip,useMenuItemLock:n.useMenuItemLock,menuLockIcon:n.menuLockIcon,menuLockTooltip:n.menuLockTooltip,menuLockIconLocked:n.menuLockIconLocked,menuLockTooltipLocked:n.menuLockTooltipLocked,menuIconColor:n.menuIconColor,menuIconColorHover:n.menuIconColorHover,menuIconColorFocus:n.menuIconColorFocus,menuIconSize:n.menuIconSize,menuBackgroundColor:n.menuBackgroundColor,menuBackgroundColorHover:n.menuBackgroundColorHover,menuBackgroundColorFocus:n.menuBackgroundColorFocus,menuSeparatorColor:n.menuSeparatorColor,menuShadow:n.menuShadow,menuTooltipTextColor:n.menuTooltipTextColor,menuTooltipTextFontSize:n.menuTooltipTextFontSize,menuTooltipBackgroundColor:n.menuTooltipBackgroundColor}},nodesConnectable(){return void 0===this.opt.nodesConnectable||this.opt.nodesConnectable},nodesResizable(){return void 0===this.opt.nodesResizable||this.opt.nodesResizable},elementsSelectable(){return void 0===this.opt.elementsSelectable||this.opt.elementsSelectable},nodesSettingsEnabled(){return void 0===this.opt.nodesSettingsEnabled||this.opt.nodesSettingsEnabled},connsSettingsEnabled(){return void 0===this.opt.connsSettingsEnabled||this.opt.connsSettingsEnabled},nodesSettingsExcludes(){return this.opt.nodesSettingsExcludes||[]},connsSettingsExcludes(){return this.opt.connsSettingsExcludes||[]},selectNodesOnDrag(){return void 0===this.opt.selectNodesOnDrag||this.opt.selectNodesOnDrag},deleteKeyEnabled(){return void 0!==this.opt.deleteKeyEnabled&&this.opt.deleteKeyEnabled},deleteKeyCode(){return this.opt.deleteKeyCode||"Backspace"},defConnCreatingType(){return this.opt.defConnCreatingType||"bezier"},defConnCreatingEdgeColor(){return this.opt.defConnCreatingEdgeColor||"#b1b1b7"},defConnCreatingEdgeWidth(){return void 0!==this.opt.defConnCreatingEdgeWidth?this.opt.defConnCreatingEdgeWidth:1},defConnCreatingEdgeDasharray(){return this.opt.defConnCreatingEdgeDasharray||"5 5"},defConnCreatingStyle(){return{stroke:this.defConnCreatingEdgeColor,strokeWidth:this.defConnCreatingEdgeWidth,strokeDasharray:this.defConnCreatingEdgeDasharray}},zoomOnScroll(){return void 0===this.opt.zoomOnScroll||this.opt.zoomOnScroll},panOnDrag(){return void 0===this.opt.panOnDrag||this.opt.panOnDrag},zoomMin(){return void 0!==this.opt.zoomMin?this.opt.zoomMin:.5},zoomMax(){return void 0!==this.opt.zoomMax?this.opt.zoomMax:2},center(){return this.opt.center||[0,0]},zoom(){return void 0!==this.opt.zoom?this.opt.zoom:1},panLimits(){return this.opt.panLimits||null},multiSelectEnabled(){return void 0===this.opt.multiSelectEnabled||this.opt.multiSelectEnabled},boxSelectionKeyCode(){return this.opt.boxSelectionKeyCode||"Shift"},multiSelectionKeyCode(){return this.opt.multiSelectionKeyCode||"Shift"},snapToGrid(){return void 0!==this.opt.snapToGrid&&this.opt.snapToGrid},snapGridSize(){return this.opt.snapGridSize||20},platformBackgroundPatternType(){return this.opt.platformBackgroundPatternType||"dots"},platformBackgroundPatternGap(){return void 0!==this.opt.platformBackgroundPatternGap?this.opt.platformBackgroundPatternGap:20},platformBackgroundPatternSize(){return void 0!==this.opt.platformBackgroundPatternSize?this.opt.platformBackgroundPatternSize:1},platformBackgroundPatternColor(){return this.opt.platformBackgroundPatternColor||"#81818a"},platformBackgroundColor(){return this.opt.platformBackgroundColor||"#fff"},settingsPopupBackgroundColor(){return this.opt.settingsPopupBackgroundColor||"#fff"},settingsPopupTextColor(){return this.opt.settingsPopupTextColor||"#333"},settingsPopupTextFontSize(){return this.opt.settingsPopupTextFontSize||"12px"},inforPopupBackgroundColor(){return this.opt.inforPopupBackgroundColor||"#fff"},inforPopupTitleTextColor(){return this.opt.inforPopupTitleTextColor||"#333"},inforPopupTitleTextFontSize(){return this.opt.inforPopupTitleTextFontSize||"12px"},inforPopupDescriptionTextColor(){return this.opt.inforPopupDescriptionTextColor||"#888"},inforPopupDescriptionTextFontSize(){return this.opt.inforPopupDescriptionTextFontSize||"10px"},funValidConnCreating(){return this.opt.funValidConnCreating||null},defNode(){let n=this.opt,e=Qp;return{type:n.defNodeType||e.type,shape:n.defNodeShape||e.shape,width:n.defNodeWidth||e.width,height:n.defNodeHeight||e.height,fontSize:n.defNodeFontSize||e.fontSize,fontSizeMin:n.defNodeFontSizeMin||e.fontSizeMin,fontSizeMax:n.defNodeFontSizeMax||e.fontSizeMax,fontColor:n.defNodeFontColor||e.fontColor,faceColor:n.defNodeFaceColor||e.faceColor,edgeColor:n.defNodeEdgeColor||e.edgeColor,edgeWidth:void 0!==n.defNodeEdgeWidth?n.defNodeEdgeWidth:e.edgeWidth,toPosition:n.defNodeToPosition||e.toPosition,fromPosition:n.defNodeFromPosition||e.fromPosition,popupDirection:n.defNodePopupDirection||e.popupDirection}},defConn(){let n=this.opt,e=Jp;return{type:n.defConnType||e.type,fontSize:n.defConnFontSize||e.fontSize,fontSizeMin:n.defConnFontSizeMin||e.fontSizeMin,fontSizeMax:n.defConnFontSizeMax||e.fontSizeMax,fontColor:n.defConnFontColor||e.fontColor,edgeColor:n.defConnEdgeColor||e.edgeColor,edgeWidth:void 0!==n.defConnEdgeWidth?n.defConnEdgeWidth:e.edgeWidth,edgeDasharray:n.defConnEdgeDasharray||"",markerEnd:n.defConnMarkerEnd||e.markerEnd,animated:void 0!==n.defConnAnimated?n.defConnAnimated:e.animated,defOffset:null!=n.defOffset?n.defOffset:e.defOffset}},isBoxSelectPressed(){return this.multiSelectEnabled&&!!this.keysPressed[this.boxSelectionKeyCode]},isMultiSelectPressed(){return this.multiSelectEnabled&&!!this.keysPressed[this.multiSelectionKeyCode]}},methods:{nodeById(n){return this.nodes.find(e=>e.id===n)||null},connById(n){return this.conns.find(e=>e.id===n)||null},setSelectedNodes(n){this.selectedNodes.splice(0,this.selectedNodes.length,...n)},setSelectedConns(n){this.selectedConns.splice(0,this.selectedConns.length,...n)},clearSelection(){this.selectedNodes.splice(0,this.selectedNodes.length),this.selectedConns.splice(0,this.selectedConns.length)},removeNode(n){let e=this.nodes,t=e.findIndex(e=>e.id===n);if(-1===t)return;e.splice(t,1);let o=this.conns;for(let e=o.length-1;e>=0;e--)o[e].from!==n&&o[e].to!==n||o.splice(e,1);let r=this.selectedNodes.indexOf(n);-1!==r&&this.selectedNodes.splice(r,1)},removeConn(n){let e=this.conns,t=e.findIndex(e=>e.id===n);if(-1===t)return;e.splice(t,1);let o=this.selectedConns.indexOf(n);-1!==o&&this.selectedConns.splice(o,1)},addConn(n){n.id&&n.from&&n.to&&(this.connById(n.id)||this.nodeById(n.from)&&this.nodeById(n.to)&&this.conns.push(n))},updateNodeInternals(n,e){let t=this.nodeInternals[n];t&&t.width===e.width&&t.height===e.height||this.$set(this.nodeInternals,n,e)},setViewport({x:n,y:e,zoom:t}){void 0!==n&&(this.viewport.x=n),void 0!==e&&(this.viewport.y=e),void 0!==t&&(this.viewport.zoom=t)},onKeyDown(n){this.keysPressed={...this.keysPressed,[n.key]:!0},this.locked||!this.deleteKeyEnabled||n.key!==this.deleteKeyCode&&"Delete"!==n.key||this.deleteSelectedElements()},onKeyUp(n){const e={...this.keysPressed};delete e[n.key],this.keysPressed=e},onCanvasClick(n){n.target.closest(".vue-flow__popup")||n.target.closest(".vue-flow__node")||n.target.closest(".vue-flow__edge")||(this.clearSelection(),this.$emit("pane-click",n))},onCanvasContextMenu(n){this.$emit("pane-context-menu",n)},onCanvasDblClick(n){const e=this.$refs.canvas.getContainerRect();if(!e)return;const t=this.viewport,o=(n.clientX-e.left-t.x)/t.zoom,r=(n.clientY-e.top-t.y)/t.zoom;this.$emit("canvas-dblclick",{event:n,flowX:o,flowY:r,clientX:n.clientX,clientY:n.clientY})},onCanvasMouseDown(n){if(!n.target.closest||!n.target.closest(".vue-flow__popup"))if(this.locked||!this.isBoxSelectPressed){if(this.panOnDrag&&0===n.button){const e=n.target,t=e.closest&&e.closest(".vue-flow__node"),o=e.closest&&e.closest(".vue-flow__handle"),r=e.closest&&e.closest(".vue-flow__node-settings, .vue-flow__edge-settings, .vue-flow__panel, .vue-flow__edge-waypoint");t||o||r||this.startPan(n)}}else this.startSelection(n)},onCanvasMouseMove(n){},onCanvasMouseUp(n){},onCanvasWheel(n){if(!this.zoomOnScroll)return;this.cancelViewportAnimation();const e=.001*-n.deltaY,t=this.viewport.zoom,o=Math.min(this.zoomMin,t),r=Math.max(o,Math.min(this.zoomMax,t+e*t)),i=this.$refs.canvas.getContainerRect();if(!i)return;const a=n.clientX-i.left,l=n.clientY-i.top,s=this.viewport,u=r/t,d=a-(a-s.x)*u,c=l-(l-s.y)*u;this.setViewport({x:d,y:c,zoom:r}),this.emitViewportChange()},onDocMouseMove(n){1&n.buttons?this.isPanning?this.doPan(n):this.isDraggingNode?this.doDrag(n):this.isConnecting?this.doConnect(n):this.isSelecting&&this.doSelection(n):(this.isPanning||this.isDraggingNode||this.isConnecting||this.isSelecting)&&this.onDocMouseUp(n)},onWindowBlur(){this.isPanning&&this.endPan(),this.keysPressed={}},onDocMouseUp(n){this.isPanning&&this.endPan(),this.isDraggingNode&&this.endDrag(n),this.isConnecting&&this.endConnect(n),this.isSelecting&&this.endSelection(n)},startPan(n){this.cancelViewportAnimation(),this.isPanning=!0,this.panStartPos={x:n.clientX,y:n.clientY}},doPan(n){const e=n.clientX-this.panStartPos.x,t=n.clientY-this.panStartPos.y;this.panStartPos={x:n.clientX,y:n.clientY};let o=this.viewport.x+e,r=this.viewport.y+t;if(this.panLimits){const n=(i={x:o,y:r},(a=this.panLimits)?{x:Math.max(a[0][0],Math.min(a[1][0],i.x)),y:Math.max(a[0][1],Math.min(a[1][1],i.y))}:i);o=n.x,r=n.y}var i,a;this.viewport.x=o,this.viewport.y=r},endPan(){this.isPanning=!1,this.panStartPos=null,this.emitViewportChange()},onNodeDragStart({node:n,event:e}){if(this.locked||!this.nodesDraggable)return;this.isDraggingNode=!0,this.draggingNodeId=n.id,this.dragStartPos={x:e.clientX,y:e.clientY},this.selectNodesOnDrag&&!this.isMultiSelectPressed&&(this.setSelectedNodes([n.id]),this.setSelectedConns([]));const t={};if(this.selectedNodes.forEach(n=>{const e=this.nodeById(n);e&&(t[n]={x:e.position.x,y:e.position.y})}),!t[n.id]){const e=this.nodeById(n.id);e&&(t[n.id]={x:e.position.x,y:e.position.y})}this.dragNodeStartPositions=t;for(let n in t)n in this.dragPositions||this.$set(this.dragPositions,n,null),this.dragPositions[n]={x:t[n].x,y:t[n].y};this.$emit("node-drag-start",{node:n,event:e})},doDrag(n){const e=this.viewport.zoom,t=(n.clientX-this.dragStartPos.x)/e,o=(n.clientY-this.dragStartPos.y)/e,r=this.snapToGrid;for(let n in this.dragNodeStartPositions){const e=this.dragNodeStartPositions[n];let i=e.x+t,a=e.y+o;if(r){const n=Ap({x:i,y:a},this.snapGridSize);i=n.x,a=n.y}const l=this.dragPositions&&this.dragPositions[n];l&&(l.x=i,l.y=a)}},endDrag(n){if(this.dragNodeStartPositions)for(let n in this.dragNodeStartPositions){let e=this.dragPositions[n],t=this.nodeById(n);t&&e&&(t.position.x=e.x,t.position.y=e.y),this.dragPositions[n]=null}const e=this.nodeById(this.draggingNodeId);this.isDraggingNode=!1,this.draggingNodeId=null,this.dragStartPos=null,this.dragNodeStartPositions=null,Zc(),e&&this.$emit("node-drag-stop",{node:e,event:n}),this.emitNodesUpdate()},onConnectStart(n){if(this.locked||!this.nodesConnectable)return;if("source"!==n.handleType)return;this.isConnecting=!0,this.connectingFrom=n,this._connectCursorStyle=document.createElement("style"),this._connectCursorStyle.textContent="* { cursor: default !important; } .vue-flow__handle { cursor: crosshair !important; } .vue-flow__node-settings, .vue-flow__edge-settings, .vue-flow__resize { opacity: 0 !important; pointer-events: none !important; }",document.head.appendChild(this._connectCursorStyle);const e=this.nodeById(n.nodeId);if(!e)return;const t=mp(e,n.handlePosition,this.nodeInternals[n.nodeId]||{});this.connLineFromX=t.x,this.connLineFromY=t.y,this.connLineFromPosition=n.handlePosition,this.connLineToX=t.x,this.connLineToY=t.y,this.$emit("connect-start",{nodeId:n.nodeId,handleId:n.handleId,handleType:n.handleType})},doConnect(n){const e=this.$refs.canvas.getContainerRect();if(!e)return;const t=this.viewport;this.connLineToX=(n.clientX-e.left-t.x)/t.zoom,this.connLineToY=(n.clientY-e.top-t.y)/t.zoom},endConnect(n){const e=document.elementFromPoint(n.clientX,n.clientY),t=e&&e.closest&&e.closest(".vue-flow__handle");if(t&&this.connectingFrom&&"target"===t.dataset.handleType){const n=t.closest(".vue-flow__node"),e=n?n.dataset.id:null;if(e){const n={from:this.connectingFrom.nodeId,to:e,...this.connectingFrom.handlePosition?{fromPosition:this.connectingFrom.handlePosition}:{},...t.dataset.handlePosition?{toPosition:t.dataset.handlePosition}:{}},o=function(n,e,t,o){if(!n.from||!n.to)return!1;if(n.from===n.to)return!1;const r=e.find(e=>e.id===n.from),i=e.find(e=>e.id===n.to);return(!r||"output"!==r.type)&&((!i||"input"!==i.type)&&!(t.find(e=>e.from===n.from&&e.to===n.to)||o&&!o(n)))}(n,this.nodes,this.conns,this.funValidConnCreating);if(o){const e=`e${n.from}-${n.to}`,t={id:this.connById(e)?(qp++,`${Date.now()}-${qp}-${Math.random().toString(36).slice(2,7)}`):e,...n};this.addConn(t),this.emitConnsUpdate(),this.$emit("connect",n)}}}this.$emit("connect-end",n),this.isConnecting=!1,this.connectingFrom=null,this._connectCursorStyle&&(document.head.removeChild(this._connectCursorStyle),this._connectCursorStyle=null)},onNodeClick({node:n,event:e}){if(this.elementsSelectable){if(this.isMultiSelectPressed){const e=this.selectedNodes.indexOf(n.id);-1===e?this.selectedNodes.push(n.id):this.selectedNodes.splice(e,1)}else this.setSelectedNodes([n.id]),this.setSelectedConns([]);this.emitSelectionChange(),this.$emit("node-click",{node:n,event:e})}},onNodeDoubleClick(n){this.$emit("node-double-click",n)},onNodeContextMenu(n){this.$emit("node-context-menu",n)},onNodeSettingsClick(n){this.$emit("node-settings-click",n)},onNodeSettingsUpdate({node:n,key:e,value:t}){let o=this.nodeById(n.id);if(!o)return;let r=o.type;if(this.$set(o,e,t),"type"===e&&r!==t){let n=o.id,e="input"===t||"basic"===t,r="output"===t||"basic"===t,i=this.conns;for(let t=i.length-1;t>=0;t--){let o=i[t];(!e&&o.from===n||!r&&o.to===n)&&i.splice(t,1)}}this.$emit("node-settings-update",{node:o,key:e,value:t})},onNodeSettingsDelete({node:n}){this.removeNode(n.id),Zc(),this.emitNodesUpdate(),this.emitConnsUpdate(),this.$emit("node-settings-delete",{node:n})},onNodeMouseEnter({node:n,event:e}){this.$emit("node-mouseenter",{node:n,event:e})},onNodeMouseLeave({node:n,event:e}){this.$emit("node-mouseleave",{node:n,event:e})},onConnClick({conn:n,event:e}){if(this.elementsSelectable){if(this.isMultiSelectPressed){const e=this.selectedConns.indexOf(n.id);-1===e?this.selectedConns.push(n.id):this.selectedConns.splice(e,1)}else this.setSelectedConns([n.id]),this.setSelectedNodes([]);this.emitSelectionChange(),this.$emit("conn-click",{conn:n,event:e})}},onConnDoubleClick(n){this.$emit("conn-double-click",n)},onConnContextMenu(n){this.$emit("conn-context-menu",n)},onConnMouseEnter({conn:n,event:e}){this.$emit("conn-mouseenter",{conn:n,event:e})},onConnMouseLeave({conn:n,event:e}){this.$emit("conn-mouseleave",{conn:n,event:e})},onConnSettingsClick(n){this.$emit("conn-settings-click",n)},onConnSettingsUpdate({conn:n,key:e,value:t}){let o=this.connById(n.id);o&&(this.$set(o,e,t),this.$emit("conn-settings-update",{conn:o,key:e,value:t}))},onConnSettingsDelete({conn:n}){this.removeConn(n.id),Zc(),this.emitConnsUpdate(),this.$emit("conn-settings-delete",{conn:n})},startSelection(n){this.isSelecting=!0;const e=this.$refs.canvas.getContainerRect();e&&(this.selectionStartPos={x:n.clientX-e.left,y:n.clientY-e.top},this.selectionBox={x:this.selectionStartPos.x,y:this.selectionStartPos.y,width:0,height:0})},doSelection(n){const e=this.$refs.canvas.getContainerRect();if(!e)return;const t=n.clientX-e.left,o=n.clientY-e.top,r=Math.min(this.selectionStartPos.x,t),i=Math.min(this.selectionStartPos.y,o),a=Math.abs(t-this.selectionStartPos.x),l=Math.abs(o-this.selectionStartPos.y);this.selectionBox={x:r,y:i,width:a,height:l}},endSelection(){if(this.selectionBox){const o=this.selectionBox,r=this.viewport,i={x:(o.x-r.x)/r.zoom,y:(o.y-r.y)/r.zoom,width:o.width/r.zoom,height:o.height/r.zoom},a=(n=i,e=this.nodes,t=this.nodeInternals,e.filter(e=>{const o=t&&t[e.id]||{},r=o.width||e.width||150,i=o.height||e.height||40;return l={x:e.position.x,y:e.position.y,width:r,height:i},(a=n).x<l.x+l.width&&a.x+a.width>l.x&&a.y<l.y+l.height&&a.y+a.height>l.y;var a,l})).map(n=>n.id);this.setSelectedNodes(a);let l=new Set(a),s=this.conns.filter(n=>l.has(n.from)&&l.has(n.to)).map(n=>n.id);this.setSelectedConns(s),this.emitSelectionChange()}var n,e,t;this.isSelecting=!1,this.selectionStartPos=null,this.selectionBox=null},deleteSelectedElements(){const{nodes:n,conns:e}=this.getSelectedElements();0===n.length&&0===e.length||(n.forEach(n=>{!1!==n.deletable&&this.removeNode(n.id)}),e.forEach(n=>{!1!==n.deletable&&this.removeConn(n.id)}),this.clearSelection(),this.$emit("delete",{nodes:n,conns:e}),this.emitNodesUpdate(),this.emitConnsUpdate())},onNodeDimensions({nodeId:n,width:e,height:t}){this.updateNodeInternals(n,{width:e,height:t})},onNodeResize({nodeId:n,width:e,height:t,x:o,y:r}){if(this.locked)return;n in this.dragPositions||this.$set(this.dragPositions,n,null);const i=this.dragPositions[n];i?(i.x=o,i.y=r,i.width=e,i.height=t):this.dragPositions[n]={x:o,y:r,width:e,height:t},this.updateNodeInternals(n,{width:e,height:t})},onNodeResizeEnd({nodeId:n,width:e,height:t,x:o,y:r}){let i=this.nodeById(n);i&&(i.width=e,i.height=t,i.position.x=o,i.position.y=r),this.dragPositions[n]=null,Zc(),this.emitNodesUpdate()},updateNodePosition(n,e){let t=this.nodeById(n);t&&(t.position.x=e.x,t.position.y=e.y)},getSelectedElements(){return{nodes:this.nodes.filter(n=>this.selectedNodes.includes(n.id)),conns:this.conns.filter(n=>this.selectedConns.includes(n.id))}},emitNodesUpdate(){this.$emit("update:nodes",[...this.nodes])},emitConnsUpdate(){this.$emit("update:conns",[...this.conns])},emitViewportChange(){this.$emit("viewport-change",{...this.viewport})},getViewport(){let n=this.viewport;return{x:n.x,y:n.y,zoom:n.zoom}},cancelViewportAnimation(){this._panAnimId&&(cancelAnimationFrame(this._panAnimId),this._panAnimId=null)},emitSelectionChange(){this.$emit("selection-change",this.getSelectedElements())},fitView(n){n=n||50;let e=this.nodes.filter(n=>!n.hidden);if(0===e.length)return;let t=this.nodeInternals,o=1/0,r=1/0,i=-1/0,a=-1/0;e.forEach(n=>{let e=t[n.id]&&t[n.id].width||n.width||150,l=t[n.id]&&t[n.id].height||n.height||40;o=Math.min(o,n.position.x),r=Math.min(r,n.position.y),i=Math.max(i,n.position.x+e),a=Math.max(a,n.position.y+l)});let l=this.$refs.canvas?this.$refs.canvas.getContainerRect():null,s=l?l.width:this.widthInp,u=l?l.height:this.heightInp,d=i-o+2*n,c=a-r+2*n,p=Math.min(s/d,u/c,2);this.viewport.zoom=p,this.viewport.x=(s-(i+o)*p)/2,this.viewport.y=(u-(a+r)*p)/2,this.emitViewportChange()},zoomAtCenter(n){const e=this.viewport.zoom,t=Math.min(this.zoomMin,e),o=Math.max(t,Math.min(this.zoomMax,e*n)),r=this.$refs.canvas?this.$refs.canvas.getContainerRect():null,i=r?r.width/2:this.widthInp/2,a=r?r.height/2:this.heightInp/2,l=this.viewport,s=o/e;this.setViewport({x:i-(i-l.x)*s,y:a-(a-l.y)*s,zoom:o}),this.emitViewportChange()},zoomIn(){this.zoomAtCenter(1.2)},zoomOut(){this.zoomAtCenter(1/1.2)},toggleInteractive(){this.locked=!this.locked,this.$emit("toggle-interactive",this.locked)},panToNode(n,e){e=e||{};let t=this.nodeById(n);if(!t)return!1;let o=this.nodeInternals[n],r=o&&o.width||t.width||150,i=o&&o.height||t.height||40,a=t.position.x+r/2,l=t.position.y+i/2,s=this.$refs.canvas?this.$refs.canvas.getContainerRect():null,u=s&&s.width||this.widthInp,d=s&&s.height||this.heightInp,c=void 0!==e.zoom?e.zoom:this.viewport.zoom,p=void 0!==e.duration?e.duration:400,f={x:u/2-a*c,y:d/2-l*c,zoom:c};this._panAnimId&&(cancelAnimationFrame(this._panAnimId),this._panAnimId=null);let h=()=>{this.setViewport(f),this.emitViewportChange(),!0===e.openPopup&&this.$nextTick(()=>this.openNodeInfoPopup(n))};if(!(p>0))return h(),!0;let g=this.viewport.x,v=this.viewport.y,m=this.viewport.zoom,A=null,b=n=>{null===A&&(A=n);let e=Math.min((n-A)/p,1),t=(n=>n<.5?4*n*n*n:1-Math.pow(-2*n+2,3)/2)(e);this.setViewport({x:g+(f.x-g)*t,y:v+(f.y-v)*t,zoom:m+(f.zoom-m)*t}),e<1?this._panAnimId=requestAnimationFrame(b):(this._panAnimId=null,h())};return this._panAnimId=requestAnimationFrame(b),!0},openNodeInfoPopup(n){let e=this.$refs.nodeRenderer;return!!e&&e.openNodeInfoPopup(n)},openConnInfoPopup(n){let e=this.$refs.edgeRenderer;return!!e&&e.openConnInfoPopup(n)},getFlowData(){return{nodes:JSON.parse(JSON.stringify(this.nodes)),conns:JSON.parse(JSON.stringify(this.conns))}}}};const nf=Kp;var ef=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"width:"+n.widthInp+"px; height:"+n.heightInp+"px;"},[n.inited?t("FlowCanvas",{ref:"canvas",on:{"canvas-mousedown":n.onCanvasMouseDown,"canvas-mousemove":n.onCanvasMouseMove,"canvas-mouseup":n.onCanvasMouseUp,"canvas-wheel":n.onCanvasWheel,"canvas-dblclick":n.onCanvasDblClick,"canvas-click":n.onCanvasClick,"canvas-contextmenu":n.onCanvasContextMenu}},[t("BackgroundLayer",{attrs:{variant:n.platformBackgroundPatternType,gap:n.platformBackgroundPatternGap,size:n.platformBackgroundPatternSize,"pattern-color":n.platformBackgroundPatternColor,"bg-color":n.platformBackgroundColor,viewport:n.viewport}}),n._v(" "),t("ViewportTransform",{attrs:{viewport:n.viewport}},[t("EdgeRenderer",{ref:"edgeRenderer",attrs:{conns:n.conns,nodes:n.nodes,"node-internals":n.nodeInternals,"selected-conn-ids":n.selectedConns,interactive:n.elementsSelectable,locked:n.locked,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"settings-enabled":n.connsSettingsEnabled,"settings-excludes":n.connsSettingsExcludes},on:{"conn-click":n.onConnClick,"conn-double-click":n.onConnDoubleClick,"conn-context-menu":n.onConnContextMenu,"conn-mouseenter":n.onConnMouseEnter,"conn-mouseleave":n.onConnMouseLeave,"conn-settings-click":n.onConnSettingsClick,"conn-settings-update":n.onConnSettingsUpdate,"conn-settings-delete":n.onConnSettingsDelete},scopedSlots:n._u([n.$scopedSlots["conn-popup"]?{key:"conn-popup",fn:function(e){return[n._t("conn-popup",null,null,e)]}}:null],null,!0)}),n._v(" "),t("NodeRenderer",{ref:"nodeRenderer",attrs:{nodes:n.nodes,"selected-node-ids":n.selectedNodes,"nodes-draggable":n.nodesDraggable,"nodes-connectable":n.nodesConnectable,locked:n.locked,"nodes-resizable":n.nodesResizable,"settings-popup-background-color":n.settingsPopupBackgroundColor,"settings-popup-text-color":n.settingsPopupTextColor,"settings-popup-text-font-size":n.settingsPopupTextFontSize,"infor-popup-background-color":n.inforPopupBackgroundColor,"infor-popup-title-text-color":n.inforPopupTitleTextColor,"infor-popup-title-text-font-size":n.inforPopupTitleTextFontSize,"infor-popup-description-text-color":n.inforPopupDescriptionTextColor,"infor-popup-description-text-font-size":n.inforPopupDescriptionTextFontSize,"snap-grid-size":n.snapToGrid?n.snapGridSize:null,"settings-enabled":n.nodesSettingsEnabled,"settings-excludes":n.nodesSettingsExcludes},on:{"drag-start":n.onNodeDragStart,"node-click":n.onNodeClick,"node-double-click":n.onNodeDoubleClick,"node-context-menu":n.onNodeContextMenu,"node-settings-click":n.onNodeSettingsClick,"node-settings-update":n.onNodeSettingsUpdate,"node-settings-delete":n.onNodeSettingsDelete,"node-mouseenter":n.onNodeMouseEnter,"node-mouseleave":n.onNodeMouseLeave,"connect-start":n.onConnectStart,dimensions:n.onNodeDimensions,"node-resize":n.onNodeResize,"node-resize-end":n.onNodeResizeEnd},scopedSlots:n._u([n.$scopedSlots["node-popup"]?{key:"node-popup",fn:function(e){return[n._t("node-popup",null,null,e)]}}:null],null,!0)}),n._v(" "),t("ConnectionLine",{attrs:{active:n.isConnecting,"source-x":n.connLineFromX,"source-y":n.connLineFromY,"source-position":n.connLineFromPosition,"target-x":n.connLineToX,"target-y":n.connLineToY,type:n.defConnCreatingType,"line-style":n.defConnCreatingStyle}}),n._v(" "),n._t("viewport-overlay")],2),n._v(" "),t("SelectionBox",{attrs:{box:n.selectionBox}}),n._v(" "),t("Controls",{attrs:{locked:n.locked,menu:n.menuInp},on:{"zoom-in":n.zoomIn,"zoom-out":n.zoomOut,"fit-view":n.fitView,"toggle-interactive":n.toggleInteractive}})],1):n._e()],1)};ef._withStripped=!0;return e({render:ef,staticRenderFns:[]},function(n){n&&n("data-v-54cc42b6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WFlowVue.vue"},media:void 0})},nf,"data-v-54cc42b6",false,void 0,!1,o,void 0,void 0)});
15
15
  //# sourceMappingURL=w-flow-vue.umd.js.map