@leafer-in/arrow 1.0.10 → 1.1.1

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.
package/dist/arrow.cjs CHANGED
@@ -109,13 +109,13 @@ const half = { x: -0.5 };
109
109
  const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
110
110
  const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
111
111
  const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
112
- const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
112
+ const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1], dashPath: [1, -2, 0, 2, -0.5, 0] };
113
113
  const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
114
- const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
115
- const triangleFlip = { offset: half, path: [...triangle.path], };
114
+ const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95], dashPath: [1, -3, 0, 2, -0.5, 0] };
115
+ const triangleFlip = { offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] };
116
116
  rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
117
117
  const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
118
- const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
118
+ const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0], dashPath: [1, -0.5, 0, 2, 0.5, 0] };
119
119
  const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
120
120
  const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
121
121
  const diamondLine = draw.DataHelper.clone(squareLine);
@@ -137,12 +137,14 @@ const arrows = {
137
137
  'diamond-line': diamondLine,
138
138
  mark,
139
139
  };
140
- function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
140
+ function getArrowPath(ui, arrow, from, to, scale, connectOffset, hasDashPattern) {
141
141
  const { strokeCap, strokeJoin } = ui.__;
142
- const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
142
+ const { offset, connect, path, dashPath } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
143
143
  let connectX = connect ? connect.x : 0;
144
144
  let offsetX = offset ? offset.x : 0;
145
145
  const data = [...path];
146
+ if (hasDashPattern && dashPath)
147
+ data.push(...dashPath);
146
148
  if (strokeCap !== 'none')
147
149
  connectX -= 0.5;
148
150
  if (offset) {
@@ -166,7 +168,7 @@ const last = {}, now = {};
166
168
  const PathArrowModule = {
167
169
  list: arrows,
168
170
  addArrows(ui, changeRenderPath) {
169
- const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
171
+ const { startArrow, endArrow, strokeWidth, dashPattern, __pathForRender: data } = ui.__;
170
172
  let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
171
173
  while (i < len) {
172
174
  command = data[i];
@@ -225,17 +227,20 @@ const PathArrowModule = {
225
227
  if (count === 2 && useStartArrow)
226
228
  copy(second, command === L ? now : last);
227
229
  if (i === len) {
228
- const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
230
+ const path = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
231
+ const pathForArrow = ui.__.__pathForArrow = [];
229
232
  if (useStartArrow) {
230
- p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
233
+ const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
234
+ dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath);
231
235
  if (connectPoint.x) {
232
236
  getDistancePoint(first, second, -connectPoint.x, true);
233
- p[1] = second.x;
234
- p[2] = second.y;
237
+ path[1] = second.x;
238
+ path[2] = second.y;
235
239
  }
236
240
  }
237
241
  if (endArrow && endArrow !== 'none') {
238
- p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
242
+ const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
243
+ dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath);
239
244
  if (connectPoint.x) {
240
245
  getDistancePoint(now, last, -connectPoint.x, true);
241
246
  let index;
@@ -254,7 +259,7 @@ const PathArrowModule = {
254
259
  break;
255
260
  }
256
261
  if (index)
257
- setPoint(p, last, index);
262
+ setPoint(path, last, index);
258
263
  }
259
264
  }
260
265
  }
package/dist/arrow.esm.js CHANGED
@@ -107,13 +107,13 @@ const half = { x: -0.5 };
107
107
  const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
108
108
  const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
109
109
  const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
110
- const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
110
+ const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1], dashPath: [1, -2, 0, 2, -0.5, 0] };
111
111
  const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
112
- const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
113
- const triangleFlip = { offset: half, path: [...triangle.path], };
112
+ const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95], dashPath: [1, -3, 0, 2, -0.5, 0] };
113
+ const triangleFlip = { offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] };
114
114
  rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
115
115
  const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
116
- const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
116
+ const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0], dashPath: [1, -0.5, 0, 2, 0.5, 0] };
117
117
  const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
118
118
  const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
119
119
  const diamondLine = DataHelper.clone(squareLine);
@@ -135,12 +135,14 @@ const arrows = {
135
135
  'diamond-line': diamondLine,
136
136
  mark,
137
137
  };
138
- function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
138
+ function getArrowPath(ui, arrow, from, to, scale, connectOffset, hasDashPattern) {
139
139
  const { strokeCap, strokeJoin } = ui.__;
140
- const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
140
+ const { offset, connect, path, dashPath } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
141
141
  let connectX = connect ? connect.x : 0;
142
142
  let offsetX = offset ? offset.x : 0;
143
143
  const data = [...path];
144
+ if (hasDashPattern && dashPath)
145
+ data.push(...dashPath);
144
146
  if (strokeCap !== 'none')
145
147
  connectX -= 0.5;
146
148
  if (offset) {
@@ -164,7 +166,7 @@ const last = {}, now = {};
164
166
  const PathArrowModule = {
165
167
  list: arrows,
166
168
  addArrows(ui, changeRenderPath) {
167
- const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
169
+ const { startArrow, endArrow, strokeWidth, dashPattern, __pathForRender: data } = ui.__;
168
170
  let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
169
171
  while (i < len) {
170
172
  command = data[i];
@@ -223,17 +225,20 @@ const PathArrowModule = {
223
225
  if (count === 2 && useStartArrow)
224
226
  copy(second, command === L ? now : last);
225
227
  if (i === len) {
226
- const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
228
+ const path = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
229
+ const pathForArrow = ui.__.__pathForArrow = [];
227
230
  if (useStartArrow) {
228
- p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
231
+ const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
232
+ dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath);
229
233
  if (connectPoint.x) {
230
234
  getDistancePoint(first, second, -connectPoint.x, true);
231
- p[1] = second.x;
232
- p[2] = second.y;
235
+ path[1] = second.x;
236
+ path[2] = second.y;
233
237
  }
234
238
  }
235
239
  if (endArrow && endArrow !== 'none') {
236
- p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
240
+ const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
241
+ dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath);
237
242
  if (connectPoint.x) {
238
243
  getDistancePoint(now, last, -connectPoint.x, true);
239
244
  let index;
@@ -252,7 +257,7 @@ const PathArrowModule = {
252
257
  break;
253
258
  }
254
259
  if (index)
255
- setPoint(p, last, index);
260
+ setPoint(path, last, index);
256
261
  }
257
262
  }
258
263
  }
@@ -1 +1 @@
1
- import{LineData as e,dataProcessor as t,strokeType as o,registerUI as r,Line as n,PathCommandMap as a,PointHelper as c,DataHelper as s,decorateLeafAttr as i,attr as p,doStrokeType as l,UI as f,PathArrow as u}from"@leafer-ui/draw";function h(e,t,o,r){var n,a=arguments.length,c=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(c=(a<3?n(c):a>3?n(t,o,c):n(t,o))||c);return a>3&&c&&Object.defineProperty(t,o,c),c}"function"==typeof SuppressedError&&SuppressedError;class d extends e{}let b=class extends n{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}};h([t(d)],b.prototype,"__",void 0),h([o("angle")],b.prototype,"endArrow",void 0),b=h([r()],b);const{M:_,L:x,C:k,Q:y,O:w}=a,{rotate:g,copyFrom:A,scale:J}=c,v={},m={layout(e,t,o,r,n,a,c){let s,i,p=0,l=e.length;for(;p<l;)switch(s=e[p],s){case _:case x:O(e,p+1,t,o,r,n,a,c),p+=3;break;case k:for(i=1;i<6;i+=2)O(e,p+i,t,o,r,n,a,c);p+=7;break;case y:for(i=1;i<4;i+=2)O(e,p+i,t,o,r,n,a,c);p+=5;break;case w:e[p+1]+=t,e[p+2]+=o,r&&(e[p+3]*=r),a&&(e[p+4]+=a,e[p+5]+=a),p+=7}},rotate(e,t,o){m.layout(e,0,0,1,1,t,o)}};function O(e,t,o,r,n,a,c,s){A(v,e[t],e[t+1]),c&&g(v,c,s),n&&J(v,n,a),e[t]=o+v.x,e[t+1]=r+v.y}const{layout:j,rotate:F}=m,{getAngle:R}=c,P={x:-.5},C={connect:P,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},D={connect:P,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},q={connect:P,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1]},E={connect:P,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95]},L={offset:P,path:[...q.path]};F(L.path,180,{x:-1.5,y:0});const M={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},Q={connect:{x:.5},path:[...M.path,1,0,0,26,0,0,1,0,360,0]},S={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},G={path:[...S.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},N=s.clone(S),U=s.clone(G);F(N.path,45),F(U.path,45);const W={angle:C,"angle-side":D,arrow:E,triangle:q,"triangle-flip":L,circle:Q,"circle-line":M,square:G,"square-line":S,diamond:U,"diamond-line":N,mark:{offset:P,path:[1,0,-2,2,0,2]}};function X(e,t,o,r,n,a){const{strokeCap:c,strokeJoin:s}=e.__,{offset:i,connect:p,path:l}="object"==typeof t?t:W[t];let f=p?p.x:0,u=i?i.x:0;const h=[...l];return"none"!==c&&(f-=.5),i&&("round"===s&&i.roundJoin?u+=i.roundJoin:"bevel"===s&&i.bevelJoin&&(u+=i.bevelJoin)),u&&j(h,u,0),j(h,r.x,r.y,n,n,R(o,r)),a.x=(f+u)*n,h}const{M:Z,L:z,C:B,Q:H,Z:I,N:K,D:T,X:V,G:Y,F:$,O:ee,P:te,U:oe}=a,{copy:re,copyFrom:ne,getDistancePoint:ae}=c,ce={},se={},ie={},pe={},le={},fe={list:W,addArrows(e,t){const{startArrow:o,endArrow:r,strokeWidth:n,__pathForRender:a}=e.__;let c,s=0,i=a.length,p=0,l=o&&"none"!==o;for(;s<i;){switch(c=a[s],c){case Z:case z:(p<2||s+6>=i)&&(ne(le,a[s+1],a[s+2]),!p&&l&&re(se,le)),s+=3;break;case B:1!==p&&s+7!==i||ue(a,pe,le,s+3),s+=7;break;case H:1!==p&&s+5!==i||ue(a,pe,le,s+1),s+=5;break;case I:return;case K:s+=5;break;case T:s+=9;break;case V:s+=6;break;case Y:s+=9;break;case $:s+=5;break;case ee:s+=7;break;case te:s+=4;break;case oe:1!==p&&s+6!==i||ue(a,pe,le,s+1),s+=6}if(p++,1===p&&c!==Z)return;if(2===p&&l&&re(ie,c===z?le:pe),s===i){const i=e.__.__pathForRender=t?[...a]:a;if(l&&(i.push(...X(e,o,ie,se,n,ce)),ce.x&&(ae(se,ie,-ce.x,!0),i[1]=ie.x,i[2]=ie.y)),r&&"none"!==r&&(i.push(...X(e,r,pe,le,n,ce)),ce.x)){let e;switch(ae(le,pe,-ce.x,!0),c){case z:e=s-3+1;break;case B:e=s-7+5;break;case H:e=s-5+3;break;case oe:e=s-6+3}e&&he(i,pe,e)}}else re(pe,le)}}};function ue(e,t,o,r){ne(t,e[r],e[r+1]),ne(o,e[r+2],e[r+3])}function he(e,t,o){e[o]=t.x,e[o+1]=t.y}function de(e){return i(e,(e=>p({set(t){if(this.__setAttr(e,t)){const e=this.__;e.__useArrow="none"!==e.startArrow||"none"!==e.endArrow,l(this)}}})))}const be=f.prototype;de("none")(be,"startArrow"),de("none")(be,"endArrow"),Object.assign(u,fe);export{b as Arrow,d as ArrowData,fe as PathArrowModule,m as PathMatrixHelper,de as arrowType};
1
+ import{LineData as e,dataProcessor as t,strokeType as o,registerUI as r,Line as n,PathCommandMap as a,PointHelper as s,DataHelper as c,decorateLeafAttr as i,attr as p,doStrokeType as h,UI as f,PathArrow as l}from"@leafer-ui/draw";function u(e,t,o,r){var n,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(a<3?n(s):a>3?n(t,o,s):n(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s}"function"==typeof SuppressedError&&SuppressedError;class d extends e{}let b=class extends n{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}};u([t(d)],b.prototype,"__",void 0),u([o("angle")],b.prototype,"endArrow",void 0),b=u([r()],b);const{M:_,L:x,C:k,Q:y,O:w}=a,{rotate:g,copyFrom:A,scale:J}=s,v={},P={layout(e,t,o,r,n,a,s){let c,i,p=0,h=e.length;for(;p<h;)switch(c=e[p],c){case _:case x:m(e,p+1,t,o,r,n,a,s),p+=3;break;case k:for(i=1;i<6;i+=2)m(e,p+i,t,o,r,n,a,s);p+=7;break;case y:for(i=1;i<4;i+=2)m(e,p+i,t,o,r,n,a,s);p+=5;break;case w:e[p+1]+=t,e[p+2]+=o,r&&(e[p+3]*=r),a&&(e[p+4]+=a,e[p+5]+=a),p+=7}},rotate(e,t,o){P.layout(e,0,0,1,1,t,o)}};function m(e,t,o,r,n,a,s,c){A(v,e[t],e[t+1]),s&&g(v,s,c),n&&J(v,n,a),e[t]=o+v.x,e[t+1]=r+v.y}const{layout:F,rotate:O}=P,{getAngle:j}=s,R={x:-.5},C={connect:R,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},D={connect:R,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},q={connect:R,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1],dashPath:[1,-2,0,2,-.5,0]},E={connect:R,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95],dashPath:[1,-3,0,2,-.5,0]},L={offset:R,path:[...q.path],dashPath:[1,-2.5,0,2,-1,0]};O(L.path,180,{x:-1.5,y:0});const M={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},Q={connect:{x:.5},path:[...M.path,1,0,0,26,0,0,1,0,360,0],dashPath:[1,-.5,0,2,.5,0]},S={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},G={path:[...S.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},N=c.clone(S),U=c.clone(G);O(N.path,45),O(U.path,45);const W={angle:C,"angle-side":D,arrow:E,triangle:q,"triangle-flip":L,circle:Q,"circle-line":M,square:G,"square-line":S,diamond:U,"diamond-line":N,mark:{offset:R,path:[1,0,-2,2,0,2]}};function X(e,t,o,r,n,a,s){const{strokeCap:c,strokeJoin:i}=e.__,{offset:p,connect:h,path:f,dashPath:l}="object"==typeof t?t:W[t];let u=h?h.x:0,d=p?p.x:0;const b=[...f];return s&&l&&b.push(...l),"none"!==c&&(u-=.5),p&&("round"===i&&p.roundJoin?d+=p.roundJoin:"bevel"===i&&p.bevelJoin&&(d+=p.bevelJoin)),d&&F(b,d,0),F(b,r.x,r.y,n,n,j(o,r)),a.x=(u+d)*n,b}const{M:Z,L:z,C:B,Q:H,Z:I,N:K,D:T,X:V,G:Y,F:$,O:ee,P:te,U:oe}=a,{copy:re,copyFrom:ne,getDistancePoint:ae}=s,se={},ce={},ie={},pe={},he={},fe={list:W,addArrows(e,t){const{startArrow:o,endArrow:r,strokeWidth:n,dashPattern:a,__pathForRender:s}=e.__;let c,i=0,p=s.length,h=0,f=o&&"none"!==o;for(;i<p;){switch(c=s[i],c){case Z:case z:(h<2||i+6>=p)&&(ne(he,s[i+1],s[i+2]),!h&&f&&re(ce,he)),i+=3;break;case B:1!==h&&i+7!==p||le(s,pe,he,i+3),i+=7;break;case H:1!==h&&i+5!==p||le(s,pe,he,i+1),i+=5;break;case I:return;case K:i+=5;break;case T:i+=9;break;case V:i+=6;break;case Y:i+=9;break;case $:i+=5;break;case ee:i+=7;break;case te:i+=4;break;case oe:1!==h&&i+6!==p||le(s,pe,he,i+1),i+=6}if(h++,1===h&&c!==Z)return;if(2===h&&f&&re(ie,c===z?he:pe),i===p){const p=e.__.__pathForRender=t?[...s]:s,h=e.__.__pathForArrow=[];if(f){const t=X(e,o,ie,ce,n,se,!!a);a?h.push(...t):p.push(...t),se.x&&(ae(ce,ie,-se.x,!0),p[1]=ie.x,p[2]=ie.y)}if(r&&"none"!==r){const t=X(e,r,pe,he,n,se,!!a);if(a?h.push(...t):p.push(...t),se.x){let e;switch(ae(he,pe,-se.x,!0),c){case z:e=i-3+1;break;case B:e=i-7+5;break;case H:e=i-5+3;break;case oe:e=i-6+3}e&&ue(p,pe,e)}}}else re(pe,he)}}};function le(e,t,o,r){ne(t,e[r],e[r+1]),ne(o,e[r+2],e[r+3])}function ue(e,t,o){e[o]=t.x,e[o+1]=t.y}function de(e){return i(e,(e=>p({set(t){if(this.__setAttr(e,t)){const e=this.__;e.__useArrow="none"!==e.startArrow||"none"!==e.endArrow,h(this)}}})))}const be=f.prototype;de("none")(be,"startArrow"),de("none")(be,"endArrow"),Object.assign(l,fe);export{b as Arrow,d as ArrowData,fe as PathArrowModule,P as PathMatrixHelper,de as arrowType};
package/dist/arrow.js CHANGED
@@ -109,13 +109,13 @@ this.LeaferIN.arrow = (function (exports, draw) {
109
109
  const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
110
110
  const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
111
111
  const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
112
- const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
112
+ const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1], dashPath: [1, -2, 0, 2, -0.5, 0] };
113
113
  const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
114
- const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
115
- const triangleFlip = { offset: half, path: [...triangle.path], };
114
+ const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95], dashPath: [1, -3, 0, 2, -0.5, 0] };
115
+ const triangleFlip = { offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] };
116
116
  rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
117
117
  const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
118
- const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
118
+ const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0], dashPath: [1, -0.5, 0, 2, 0.5, 0] };
119
119
  const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
120
120
  const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
121
121
  const diamondLine = draw.DataHelper.clone(squareLine);
@@ -137,12 +137,14 @@ this.LeaferIN.arrow = (function (exports, draw) {
137
137
  'diamond-line': diamondLine,
138
138
  mark,
139
139
  };
140
- function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
140
+ function getArrowPath(ui, arrow, from, to, scale, connectOffset, hasDashPattern) {
141
141
  const { strokeCap, strokeJoin } = ui.__;
142
- const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
142
+ const { offset, connect, path, dashPath } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
143
143
  let connectX = connect ? connect.x : 0;
144
144
  let offsetX = offset ? offset.x : 0;
145
145
  const data = [...path];
146
+ if (hasDashPattern && dashPath)
147
+ data.push(...dashPath);
146
148
  if (strokeCap !== 'none')
147
149
  connectX -= 0.5;
148
150
  if (offset) {
@@ -166,7 +168,7 @@ this.LeaferIN.arrow = (function (exports, draw) {
166
168
  const PathArrowModule = {
167
169
  list: arrows,
168
170
  addArrows(ui, changeRenderPath) {
169
- const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
171
+ const { startArrow, endArrow, strokeWidth, dashPattern, __pathForRender: data } = ui.__;
170
172
  let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
171
173
  while (i < len) {
172
174
  command = data[i];
@@ -225,17 +227,20 @@ this.LeaferIN.arrow = (function (exports, draw) {
225
227
  if (count === 2 && useStartArrow)
226
228
  copy(second, command === L ? now : last);
227
229
  if (i === len) {
228
- const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
230
+ const path = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
231
+ const pathForArrow = ui.__.__pathForArrow = [];
229
232
  if (useStartArrow) {
230
- p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
233
+ const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
234
+ dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath);
231
235
  if (connectPoint.x) {
232
236
  getDistancePoint(first, second, -connectPoint.x, true);
233
- p[1] = second.x;
234
- p[2] = second.y;
237
+ path[1] = second.x;
238
+ path[2] = second.y;
235
239
  }
236
240
  }
237
241
  if (endArrow && endArrow !== 'none') {
238
- p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
242
+ const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
243
+ dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath);
239
244
  if (connectPoint.x) {
240
245
  getDistancePoint(now, last, -connectPoint.x, true);
241
246
  let index;
@@ -254,7 +259,7 @@ this.LeaferIN.arrow = (function (exports, draw) {
254
259
  break;
255
260
  }
256
261
  if (index)
257
- setPoint(p, last, index);
262
+ setPoint(path, last, index);
258
263
  }
259
264
  }
260
265
  }
@@ -1 +1 @@
1
- "use strict";var e=require("@leafer-ui/draw");function t(e,t,r,o){var n,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(a<3?n(s):a>3?n(t,r,s):n(t,r))||s);return a>3&&s&&Object.defineProperty(t,r,s),s}"function"==typeof SuppressedError&&SuppressedError;class r extends e.LineData{}exports.Arrow=class extends e.Line{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}},t([e.dataProcessor(r)],exports.Arrow.prototype,"__",void 0),t([e.strokeType("angle")],exports.Arrow.prototype,"endArrow",void 0),exports.Arrow=t([e.registerUI()],exports.Arrow);const{M:o,L:n,C:a,Q:s,O:c}=e.PathCommandMap,{rotate:p,copyFrom:i,scale:l}=e.PointHelper,f={},u={layout(e,t,r,p,i,l,f){let u,d,x=0,b=e.length;for(;x<b;)switch(u=e[x],u){case o:case n:h(e,x+1,t,r,p,i,l,f),x+=3;break;case a:for(d=1;d<6;d+=2)h(e,x+d,t,r,p,i,l,f);x+=7;break;case s:for(d=1;d<4;d+=2)h(e,x+d,t,r,p,i,l,f);x+=5;break;case c:e[x+1]+=t,e[x+2]+=r,p&&(e[x+3]*=p),l&&(e[x+4]+=l,e[x+5]+=l),x+=7}},rotate(e,t,r){u.layout(e,0,0,1,1,t,r)}};function h(e,t,r,o,n,a,s,c){i(f,e[t],e[t+1]),s&&p(f,s,c),n&&l(f,n,a),e[t]=r+f.x,e[t+1]=o+f.y}const{layout:d,rotate:x}=u,{getAngle:b}=e.PointHelper,w={x:-.5},_={connect:w,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},y={connect:w,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},k={connect:w,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1]},A={connect:w,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95]},g={offset:w,path:[...k.path]};x(g.path,180,{x:-1.5,y:0});const J={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},P={connect:{x:.5},path:[...J.path,1,0,0,26,0,0,1,0,360,0]},v={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},m={path:[...v.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},D=e.DataHelper.clone(v),H=e.DataHelper.clone(m);x(D.path,45),x(H.path,45);const M={angle:_,"angle-side":y,arrow:A,triangle:k,"triangle-flip":g,circle:P,"circle-line":J,square:m,"square-line":v,diamond:H,"diamond-line":D,mark:{offset:w,path:[1,0,-2,2,0,2]}};function O(e,t,r,o,n,a){const{strokeCap:s,strokeJoin:c}=e.__,{offset:p,connect:i,path:l}="object"==typeof t?t:M[t];let f=i?i.x:0,u=p?p.x:0;const h=[...l];return"none"!==s&&(f-=.5),p&&("round"===c&&p.roundJoin?u+=p.roundJoin:"bevel"===c&&p.bevelJoin&&(u+=p.bevelJoin)),u&&d(h,u,0),d(h,o.x,o.y,n,n,b(r,o)),a.x=(f+u)*n,h}const{M:j,L:C,C:F,Q:L,Z:R,N:q,D:S,X:T,G:U,F:E,O:I,P:Q,U:G}=e.PathCommandMap,{copy:N,copyFrom:W,getDistancePoint:X}=e.PointHelper,Z={},z={},B={},K={},V={},Y={list:M,addArrows(e,t){const{startArrow:r,endArrow:o,strokeWidth:n,__pathForRender:a}=e.__;let s,c=0,p=a.length,i=0,l=r&&"none"!==r;for(;c<p;){switch(s=a[c],s){case j:case C:(i<2||c+6>=p)&&(W(V,a[c+1],a[c+2]),!i&&l&&N(z,V)),c+=3;break;case F:1!==i&&c+7!==p||$(a,K,V,c+3),c+=7;break;case L:1!==i&&c+5!==p||$(a,K,V,c+1),c+=5;break;case R:return;case q:c+=5;break;case S:c+=9;break;case T:c+=6;break;case U:c+=9;break;case E:c+=5;break;case I:c+=7;break;case Q:c+=4;break;case G:1!==i&&c+6!==p||$(a,K,V,c+1),c+=6}if(i++,1===i&&s!==j)return;if(2===i&&l&&N(B,s===C?V:K),c===p){const p=e.__.__pathForRender=t?[...a]:a;if(l&&(p.push(...O(e,r,B,z,n,Z)),Z.x&&(X(z,B,-Z.x,!0),p[1]=B.x,p[2]=B.y)),o&&"none"!==o&&(p.push(...O(e,o,K,V,n,Z)),Z.x)){let e;switch(X(V,K,-Z.x,!0),s){case C:e=c-3+1;break;case F:e=c-7+5;break;case L:e=c-5+3;break;case G:e=c-6+3}e&&ee(p,K,e)}}else N(K,V)}}};function $(e,t,r,o){W(t,e[o],e[o+1]),W(r,e[o+2],e[o+3])}function ee(e,t,r){e[r]=t.x,e[r+1]=t.y}function te(t){return e.decorateLeafAttr(t,(t=>e.attr({set(r){if(this.__setAttr(t,r)){const t=this.__;t.__useArrow="none"!==t.startArrow||"none"!==t.endArrow,e.doStrokeType(this)}}})))}const re=e.UI.prototype;te("none")(re,"startArrow"),te("none")(re,"endArrow"),Object.assign(e.PathArrow,Y),exports.ArrowData=r,exports.PathArrowModule=Y,exports.PathMatrixHelper=u,exports.arrowType=te;
1
+ "use strict";var e=require("@leafer-ui/draw");function t(e,t,r,o){var a,n=arguments.length,s=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(s=(n<3?a(s):n>3?a(t,r,s):a(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s}"function"==typeof SuppressedError&&SuppressedError;class r extends e.LineData{}exports.Arrow=class extends e.Line{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}},t([e.dataProcessor(r)],exports.Arrow.prototype,"__",void 0),t([e.strokeType("angle")],exports.Arrow.prototype,"endArrow",void 0),exports.Arrow=t([e.registerUI()],exports.Arrow);const{M:o,L:a,C:n,Q:s,O:c}=e.PathCommandMap,{rotate:p,copyFrom:i,scale:h}=e.PointHelper,l={},f={layout(e,t,r,p,i,h,l){let f,u,x=0,b=e.length;for(;x<b;)switch(f=e[x],f){case o:case a:d(e,x+1,t,r,p,i,h,l),x+=3;break;case n:for(u=1;u<6;u+=2)d(e,x+u,t,r,p,i,h,l);x+=7;break;case s:for(u=1;u<4;u+=2)d(e,x+u,t,r,p,i,h,l);x+=5;break;case c:e[x+1]+=t,e[x+2]+=r,p&&(e[x+3]*=p),h&&(e[x+4]+=h,e[x+5]+=h),x+=7}},rotate(e,t,r){f.layout(e,0,0,1,1,t,r)}};function d(e,t,r,o,a,n,s,c){i(l,e[t],e[t+1]),s&&p(l,s,c),a&&h(l,a,n),e[t]=r+l.x,e[t+1]=o+l.y}const{layout:u,rotate:x}=f,{getAngle:b}=e.PointHelper,_={x:-.5},w={connect:_,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},y={connect:_,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},A={connect:_,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1],dashPath:[1,-2,0,2,-.5,0]},k={connect:_,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95],dashPath:[1,-3,0,2,-.5,0]},P={offset:_,path:[...A.path],dashPath:[1,-2.5,0,2,-1,0]};x(P.path,180,{x:-1.5,y:0});const g={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},J={connect:{x:.5},path:[...g.path,1,0,0,26,0,0,1,0,360,0],dashPath:[1,-.5,0,2,.5,0]},v={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},m={path:[...v.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},D=e.DataHelper.clone(v),F=e.DataHelper.clone(m);x(D.path,45),x(F.path,45);const H={angle:w,"angle-side":y,arrow:k,triangle:A,"triangle-flip":P,circle:J,"circle-line":g,square:m,"square-line":v,diamond:F,"diamond-line":D,mark:{offset:_,path:[1,0,-2,2,0,2]}};function M(e,t,r,o,a,n,s){const{strokeCap:c,strokeJoin:p}=e.__,{offset:i,connect:h,path:l,dashPath:f}="object"==typeof t?t:H[t];let d=h?h.x:0,x=i?i.x:0;const _=[...l];return s&&f&&_.push(...f),"none"!==c&&(d-=.5),i&&("round"===p&&i.roundJoin?x+=i.roundJoin:"bevel"===p&&i.bevelJoin&&(x+=i.bevelJoin)),x&&u(_,x,0),u(_,o.x,o.y,a,a,b(r,o)),n.x=(d+x)*a,_}const{M:O,L:j,C:C,Q:L,Z:R,N:q,D:S,X:T,G:U,F:E,O:I,P:Q,U:G}=e.PathCommandMap,{copy:N,copyFrom:W,getDistancePoint:X}=e.PointHelper,Z={},z={},B={},K={},V={},Y={list:H,addArrows(e,t){const{startArrow:r,endArrow:o,strokeWidth:a,dashPattern:n,__pathForRender:s}=e.__;let c,p=0,i=s.length,h=0,l=r&&"none"!==r;for(;p<i;){switch(c=s[p],c){case O:case j:(h<2||p+6>=i)&&(W(V,s[p+1],s[p+2]),!h&&l&&N(z,V)),p+=3;break;case C:1!==h&&p+7!==i||$(s,K,V,p+3),p+=7;break;case L:1!==h&&p+5!==i||$(s,K,V,p+1),p+=5;break;case R:return;case q:p+=5;break;case S:p+=9;break;case T:p+=6;break;case U:p+=9;break;case E:p+=5;break;case I:p+=7;break;case Q:p+=4;break;case G:1!==h&&p+6!==i||$(s,K,V,p+1),p+=6}if(h++,1===h&&c!==O)return;if(2===h&&l&&N(B,c===j?V:K),p===i){const i=e.__.__pathForRender=t?[...s]:s,h=e.__.__pathForArrow=[];if(l){const t=M(e,r,B,z,a,Z,!!n);n?h.push(...t):i.push(...t),Z.x&&(X(z,B,-Z.x,!0),i[1]=B.x,i[2]=B.y)}if(o&&"none"!==o){const t=M(e,o,K,V,a,Z,!!n);if(n?h.push(...t):i.push(...t),Z.x){let e;switch(X(V,K,-Z.x,!0),c){case j:e=p-3+1;break;case C:e=p-7+5;break;case L:e=p-5+3;break;case G:e=p-6+3}e&&ee(i,K,e)}}}else N(K,V)}}};function $(e,t,r,o){W(t,e[o],e[o+1]),W(r,e[o+2],e[o+3])}function ee(e,t,r){e[r]=t.x,e[r+1]=t.y}function te(t){return e.decorateLeafAttr(t,(t=>e.attr({set(r){if(this.__setAttr(t,r)){const t=this.__;t.__useArrow="none"!==t.startArrow||"none"!==t.endArrow,e.doStrokeType(this)}}})))}const re=e.UI.prototype;te("none")(re,"startArrow"),te("none")(re,"endArrow"),Object.assign(e.PathArrow,Y),exports.ArrowData=r,exports.PathArrowModule=Y,exports.PathMatrixHelper=f,exports.arrowType=te;
package/dist/arrow.min.js CHANGED
@@ -1 +1 @@
1
- this.LeaferIN=this.LeaferIN||{},this.LeaferIN.arrow=function(e,t){"use strict";function r(e,t,r,o){var n,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(a<3?n(s):a>3?n(t,r,s):n(t,r))||s);return a>3&&s&&Object.defineProperty(t,r,s),s}"function"==typeof SuppressedError&&SuppressedError;class o extends t.LineData{}e.Arrow=class extends t.Line{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}},r([t.dataProcessor(o)],e.Arrow.prototype,"__",void 0),r([t.strokeType("angle")],e.Arrow.prototype,"endArrow",void 0),e.Arrow=r([t.registerUI()],e.Arrow);const{M:n,L:a,C:s,Q:c,O:i}=t.PathCommandMap,{rotate:p,copyFrom:l,scale:f}=t.PointHelper,h={},u={layout(e,t,r,o,p,l,f){let h,u,b=0,w=e.length;for(;b<w;)switch(h=e[b],h){case n:case a:d(e,b+1,t,r,o,p,l,f),b+=3;break;case s:for(u=1;u<6;u+=2)d(e,b+u,t,r,o,p,l,f);b+=7;break;case c:for(u=1;u<4;u+=2)d(e,b+u,t,r,o,p,l,f);b+=5;break;case i:e[b+1]+=t,e[b+2]+=r,o&&(e[b+3]*=o),l&&(e[b+4]+=l,e[b+5]+=l),b+=7}},rotate(e,t,r){u.layout(e,0,0,1,1,t,r)}};function d(e,t,r,o,n,a,s,c){l(h,e[t],e[t+1]),s&&p(h,s,c),n&&f(h,n,a),e[t]=r+h.x,e[t+1]=o+h.y}const{layout:b,rotate:w}=u,{getAngle:_}=t.PointHelper,x={x:-.5},y={connect:x,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},k={connect:x,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},A={connect:x,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1]},g={connect:x,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95]},J={offset:x,path:[...A.path]};w(J.path,180,{x:-1.5,y:0});const P={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},v={connect:{x:.5},path:[...P.path,1,0,0,26,0,0,1,0,360,0]},m={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},L={path:[...m.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},D=t.DataHelper.clone(m),H=t.DataHelper.clone(L);w(D.path,45),w(H.path,45);const I={angle:y,"angle-side":k,arrow:g,triangle:A,"triangle-flip":J,circle:v,"circle-line":P,square:L,"square-line":m,diamond:H,"diamond-line":D,mark:{offset:x,path:[1,0,-2,2,0,2]}};function M(e,t,r,o,n,a){const{strokeCap:s,strokeJoin:c}=e.__,{offset:i,connect:p,path:l}="object"==typeof t?t:I[t];let f=p?p.x:0,h=i?i.x:0;const u=[...l];return"none"!==s&&(f-=.5),i&&("round"===c&&i.roundJoin?h+=i.roundJoin:"bevel"===c&&i.bevelJoin&&(h+=i.bevelJoin)),h&&b(u,h,0),b(u,o.x,o.y,n,n,_(r,o)),a.x=(f+h)*n,u}const{M:O,L:j,C:C,Q:F,Z:R,N:N,D:U,X:S,G:T,F:q,O:E,P:Q,U:G}=t.PathCommandMap,{copy:W,copyFrom:X,getDistancePoint:Z}=t.PointHelper,z={},B={},K={},V={},Y={},$={list:I,addArrows(e,t){const{startArrow:r,endArrow:o,strokeWidth:n,__pathForRender:a}=e.__;let s,c=0,i=a.length,p=0,l=r&&"none"!==r;for(;c<i;){switch(s=a[c],s){case O:case j:(p<2||c+6>=i)&&(X(Y,a[c+1],a[c+2]),!p&&l&&W(B,Y)),c+=3;break;case C:1!==p&&c+7!==i||ee(a,V,Y,c+3),c+=7;break;case F:1!==p&&c+5!==i||ee(a,V,Y,c+1),c+=5;break;case R:return;case N:c+=5;break;case U:c+=9;break;case S:c+=6;break;case T:c+=9;break;case q:c+=5;break;case E:c+=7;break;case Q:c+=4;break;case G:1!==p&&c+6!==i||ee(a,V,Y,c+1),c+=6}if(p++,1===p&&s!==O)return;if(2===p&&l&&W(K,s===j?Y:V),c===i){const i=e.__.__pathForRender=t?[...a]:a;if(l&&(i.push(...M(e,r,K,B,n,z)),z.x&&(Z(B,K,-z.x,!0),i[1]=K.x,i[2]=K.y)),o&&"none"!==o&&(i.push(...M(e,o,V,Y,n,z)),z.x)){let e;switch(Z(Y,V,-z.x,!0),s){case j:e=c-3+1;break;case C:e=c-7+5;break;case F:e=c-5+3;break;case G:e=c-6+3}e&&te(i,V,e)}}else W(V,Y)}}};function ee(e,t,r,o){X(t,e[o],e[o+1]),X(r,e[o+2],e[o+3])}function te(e,t,r){e[r]=t.x,e[r+1]=t.y}function re(e){return t.decorateLeafAttr(e,(e=>t.attr({set(r){if(this.__setAttr(e,r)){const e=this.__;e.__useArrow="none"!==e.startArrow||"none"!==e.endArrow,t.doStrokeType(this)}}})))}const oe=t.UI.prototype;return re("none")(oe,"startArrow"),re("none")(oe,"endArrow"),Object.assign(t.PathArrow,$),e.ArrowData=o,e.PathArrowModule=$,e.PathMatrixHelper=u,e.arrowType=re,e}({},LeaferUI);
1
+ this.LeaferIN=this.LeaferIN||{},this.LeaferIN.arrow=function(e,t){"use strict";function r(e,t,r,o){var a,n=arguments.length,s=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(s=(n<3?a(s):n>3?a(t,r,s):a(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s}"function"==typeof SuppressedError&&SuppressedError;class o extends t.LineData{}e.Arrow=class extends t.Line{get __tag(){return"Arrow"}constructor(e){super(e),this.__.__useArrow=!0}},r([t.dataProcessor(o)],e.Arrow.prototype,"__",void 0),r([t.strokeType("angle")],e.Arrow.prototype,"endArrow",void 0),e.Arrow=r([t.registerUI()],e.Arrow);const{M:a,L:n,C:s,Q:c,O:i}=t.PathCommandMap,{rotate:p,copyFrom:h,scale:l}=t.PointHelper,f={},d={layout(e,t,r,o,p,h,l){let f,d,b=0,_=e.length;for(;b<_;)switch(f=e[b],f){case a:case n:u(e,b+1,t,r,o,p,h,l),b+=3;break;case s:for(d=1;d<6;d+=2)u(e,b+d,t,r,o,p,h,l);b+=7;break;case c:for(d=1;d<4;d+=2)u(e,b+d,t,r,o,p,h,l);b+=5;break;case i:e[b+1]+=t,e[b+2]+=r,o&&(e[b+3]*=o),h&&(e[b+4]+=h,e[b+5]+=h),b+=7}},rotate(e,t,r){d.layout(e,0,0,1,1,t,r)}};function u(e,t,r,o,a,n,s,c){h(f,e[t],e[t+1]),s&&p(f,s,c),a&&l(f,a,n),e[t]=r+f.x,e[t+1]=o+f.y}const{layout:b,rotate:_}=d,{getAngle:w}=t.PointHelper,x={x:-.5},y={connect:x,offset:{x:-.71,bevelJoin:.36,roundJoin:.22},path:[1,-3,-3,2,0,0,2,-3,3]},A={connect:x,offset:{x:-1.207,bevelJoin:.854,roundJoin:.707},path:[1,-3,-3,2,0,0,2,-1,0]},k={connect:x,offset:{x:-.9,bevelJoin:.624,roundJoin:.4},path:[1,-3,0,2,-3,-2,2,0,0,2,-3,2,2,-3,0,1,-2.05,1.1,2,-2.05,-1.1],dashPath:[1,-2,0,2,-.5,0]},P={connect:x,offset:{x:-1.1,bevelJoin:.872,roundJoin:.6},path:[1,-3,0,2,-3.5,-1.8,2,0,0,2,-3.5,1.8,2,-3,0,1,-2.25,.95,2,-2.25,-.95],dashPath:[1,-3,0,2,-.5,0]},g={offset:x,path:[...k.path],dashPath:[1,-2.5,0,2,-1,0]};_(g.path,180,{x:-1.5,y:0});const J={connect:{x:-1.3},path:[1,1.8,-.1,2,1.8,0,26,0,0,1.8,0,359,0]},v={connect:{x:.5},path:[...J.path,1,0,0,26,0,0,1,0,360,0],dashPath:[1,-.5,0,2,.5,0]},m={connect:{x:-1.3},path:[1,-1.4,0,2,-1.4,-1.4,2,1.4,-1.4,2,1.4,1.4,2,-1.4,1.4,2,-1.4,0]},L={path:[...m.path,2,-1.4,-.49,2,1,-.49,1,-1.4,.49,2,1,.49]},D=t.DataHelper.clone(m),F=t.DataHelper.clone(L);_(D.path,45),_(F.path,45);const H={angle:y,"angle-side":A,arrow:P,triangle:k,"triangle-flip":g,circle:v,"circle-line":J,square:L,"square-line":m,diamond:F,"diamond-line":D,mark:{offset:x,path:[1,0,-2,2,0,2]}};function I(e,t,r,o,a,n,s){const{strokeCap:c,strokeJoin:i}=e.__,{offset:p,connect:h,path:l,dashPath:f}="object"==typeof t?t:H[t];let d=h?h.x:0,u=p?p.x:0;const _=[...l];return s&&f&&_.push(...f),"none"!==c&&(d-=.5),p&&("round"===i&&p.roundJoin?u+=p.roundJoin:"bevel"===i&&p.bevelJoin&&(u+=p.bevelJoin)),u&&b(_,u,0),b(_,o.x,o.y,a,a,w(r,o)),n.x=(d+u)*a,_}const{M:M,L:O,C:j,Q:C,Z:R,N:N,D:U,X:S,G:T,F:q,O:E,P:Q,U:G}=t.PathCommandMap,{copy:W,copyFrom:X,getDistancePoint:Z}=t.PointHelper,z={},B={},K={},V={},Y={},$={list:H,addArrows(e,t){const{startArrow:r,endArrow:o,strokeWidth:a,dashPattern:n,__pathForRender:s}=e.__;let c,i=0,p=s.length,h=0,l=r&&"none"!==r;for(;i<p;){switch(c=s[i],c){case M:case O:(h<2||i+6>=p)&&(X(Y,s[i+1],s[i+2]),!h&&l&&W(B,Y)),i+=3;break;case j:1!==h&&i+7!==p||ee(s,V,Y,i+3),i+=7;break;case C:1!==h&&i+5!==p||ee(s,V,Y,i+1),i+=5;break;case R:return;case N:i+=5;break;case U:i+=9;break;case S:i+=6;break;case T:i+=9;break;case q:i+=5;break;case E:i+=7;break;case Q:i+=4;break;case G:1!==h&&i+6!==p||ee(s,V,Y,i+1),i+=6}if(h++,1===h&&c!==M)return;if(2===h&&l&&W(K,c===O?Y:V),i===p){const p=e.__.__pathForRender=t?[...s]:s,h=e.__.__pathForArrow=[];if(l){const t=I(e,r,K,B,a,z,!!n);n?h.push(...t):p.push(...t),z.x&&(Z(B,K,-z.x,!0),p[1]=K.x,p[2]=K.y)}if(o&&"none"!==o){const t=I(e,o,V,Y,a,z,!!n);if(n?h.push(...t):p.push(...t),z.x){let e;switch(Z(Y,V,-z.x,!0),c){case O:e=i-3+1;break;case j:e=i-7+5;break;case C:e=i-5+3;break;case G:e=i-6+3}e&&te(p,V,e)}}}else W(V,Y)}}};function ee(e,t,r,o){X(t,e[o],e[o+1]),X(r,e[o+2],e[o+3])}function te(e,t,r){e[r]=t.x,e[r+1]=t.y}function re(e){return t.decorateLeafAttr(e,(e=>t.attr({set(r){if(this.__setAttr(e,r)){const e=this.__;e.__useArrow="none"!==e.startArrow||"none"!==e.endArrow,t.doStrokeType(this)}}})))}const oe=t.UI.prototype;return re("none")(oe,"startArrow"),re("none")(oe,"endArrow"),Object.assign(t.PathArrow,$),e.ArrowData=o,e.PathArrowModule=$,e.PathMatrixHelper=d,e.arrowType=re,e}({},LeaferUI);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leafer-in/arrow",
3
- "version": "1.0.10",
3
+ "version": "1.1.1",
4
4
  "description": "@leafer-in/arrow",
5
5
  "author": "Chao (Leafer) Wan",
6
6
  "license": "MIT",
@@ -34,8 +34,8 @@
34
34
  "leaferjs"
35
35
  ],
36
36
  "peerDependencies": {
37
- "@leafer-ui/draw": "^1.0.10",
38
- "@leafer-ui/interface": "^1.0.10",
39
- "@leafer-in/interface": "^1.0.10"
37
+ "@leafer-ui/draw": "^1.1.1",
38
+ "@leafer-ui/interface": "^1.1.1",
39
+ "@leafer-in/interface": "^1.1.1"
40
40
  }
41
41
  }
@@ -16,7 +16,7 @@ export const PathArrowModule: IPathArrowModule = {
16
16
  list: arrows,
17
17
 
18
18
  addArrows(ui: IUI, changeRenderPath?: boolean): void {
19
- const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__
19
+ const { startArrow, endArrow, strokeWidth, dashPattern, __pathForRender: data } = ui.__
20
20
 
21
21
  let command: number, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none'
22
22
 
@@ -79,20 +79,23 @@ export const PathArrowModule: IPathArrowModule = {
79
79
  if (count === 2 && useStartArrow) copy(second, command === L ? now : last)
80
80
 
81
81
  if (i === len) {
82
- const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data
82
+ const path = ui.__.__pathForRender = changeRenderPath ? [...data] : data
83
+ const pathForArrow: IPathCommandData = ui.__.__pathForArrow = []
83
84
 
84
85
  if (useStartArrow) {
85
- p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint))
86
+ const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern)
87
+ dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath)
86
88
 
87
89
  if (connectPoint.x) {
88
90
  getDistancePoint(first, second, -connectPoint.x, true)
89
- p[1] = second.x
90
- p[2] = second.y
91
+ path[1] = second.x
92
+ path[2] = second.y
91
93
  }
92
94
  }
93
95
 
94
96
  if (endArrow && endArrow !== 'none') {
95
- p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint))
97
+ const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern)
98
+ dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath)
96
99
 
97
100
  if (connectPoint.x) {
98
101
  getDistancePoint(now, last, -connectPoint.x, true)
@@ -111,7 +114,7 @@ export const PathArrowModule: IPathArrowModule = {
111
114
  index = i - 6 + 3
112
115
  break
113
116
  }
114
- if (index) setPoint(p, last, index)
117
+ if (index) setPoint(path, last, index)
115
118
  }
116
119
  }
117
120
 
@@ -13,16 +13,16 @@ const angle: IPathDataArrow = { connect: half, offset: { x: -0.71, bevelJoin: 0.
13
13
  const angleSide: IPathDataArrow = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] } // moveTo(-3, -3).lineTo(0, 0).lineTo(-1, 0)
14
14
 
15
15
  const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0] // moveTo(-3, 0).lineTo(-3, -2).lineTo(0, 0).lineTo(-3, 2).lineTo(-3, 0)
16
- const triangle: IPathDataArrow = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] } // fill: moveTo(-2.05, 1.1).lineTo(-2.05, -1.1)
16
+ const triangle: IPathDataArrow = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1], dashPath: [1, -2, 0, 2, -0.5, 0] } // fill: moveTo(-2.05, 1.1).lineTo(-2.05, -1.1)
17
17
 
18
18
  const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0] // moveTo(-3, 0).lineTo(-3.5, -1.8).lineTo(0, 0).lineTo(-3.5, 1.8).lineTo(-3, 0)
19
- const arrow: IPathDataArrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] } // fill: moveTo(-2.25, 0.95).lineTo(-2.25, -0.95)
19
+ const arrow: IPathDataArrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95], dashPath: [1, -3, 0, 2, -0.5, 0] } // fill: moveTo(-2.25, 0.95).lineTo(-2.25, -0.95)
20
20
 
21
- const triangleFlip: IPathDataArrow = { offset: half, path: [...triangle.path], } // triangle rotate 180
21
+ const triangleFlip: IPathDataArrow = { offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] } // triangle rotate 180
22
22
  rotate(triangleFlip.path, 180, { x: -1.5, y: 0 })
23
23
 
24
24
  const circleLine: IPathDataArrow = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], } //drawArc(0, 0, 2, 0, 360)
25
- const circle: IPathDataArrow = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] } // fill: moveTo(0,0).arc(0, 0, 1, 0, 360)
25
+ const circle: IPathDataArrow = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0], dashPath: [1, -0.5, 0, 2, 0.5, 0] } // fill: moveTo(0,0).arc(0, 0, 1, 0, 360)
26
26
 
27
27
  const squareLine: IPathDataArrow = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] } // moveTo(-1.4, 0).lineTo(-1.4, -1.4).lineTo(1.4, -1.4).lineTo(1.4, 1.4).lineTo(-1.4, 1.4).lineTo(-1.4, 0)
28
28
  const square: IPathDataArrow = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] } // fill: moveTo(-1.4, -0.49).lineTo(1, -0.49).moveTo(-1.4, 0.49).lineTo(1, 0.49)
@@ -55,14 +55,15 @@ export const arrows: IPathDataArrowMap = {
55
55
 
56
56
  }
57
57
 
58
- export function getArrowPath(ui: IUI, arrow: IArrowType, from: IPointData, to: IPointData, scale: number, connectOffset: IPointData): IPathCommandData {
58
+ export function getArrowPath(ui: IUI, arrow: IArrowType, from: IPointData, to: IPointData, scale: number, connectOffset: IPointData, hasDashPattern?: boolean): IPathCommandData {
59
59
  const { strokeCap, strokeJoin } = ui.__
60
- const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow])
60
+ const { offset, connect, path, dashPath } = (typeof arrow === 'object' ? arrow : arrows[arrow])
61
61
 
62
62
  let connectX = connect ? connect.x : 0
63
63
  let offsetX = offset ? offset.x : 0
64
64
 
65
65
  const data = [...path]
66
+ if (hasDashPattern && dashPath) data.push(...dashPath)
66
67
 
67
68
  if (strokeCap !== 'none') connectX -= 0.5
68
69
  if (offset) {