@leafer-in/flow 1.0.1 → 1.0.3
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/flow.cjs +50 -19
- package/dist/flow.esm.js +51 -20
- package/dist/flow.esm.min.js +1 -1
- package/dist/flow.js +50 -19
- package/dist/flow.min.cjs +1 -1
- package/dist/flow.min.js +1 -1
- package/package.json +13 -6
- package/src/Flow.ts +23 -0
- package/src/data/FlowData.ts +7 -0
- package/src/decorate.ts +14 -0
- package/src/index.ts +69 -0
- package/src/layout/common/align.ts +45 -0
- package/src/layout/common/bounds.ts +6 -0
- package/src/layout/common/data.ts +51 -0
- package/src/layout/common/gap.ts +10 -0
- package/src/layout/common/wrap.ts +10 -0
- package/src/layout/flowX.ts +110 -0
- package/src/layout/flowY.ts +97 -0
- package/src/layout/x/align.ts +27 -0
- package/src/layout/x/grow.ts +59 -0
- package/src/layout/x/layout.ts +39 -0
- package/src/layout/y/align.ts +28 -0
- package/src/layout/y/grow.ts +59 -0
- package/src/layout/y/layout.ts +38 -0
package/dist/flow.cjs
CHANGED
|
@@ -13,9 +13,6 @@ const PathScaler = {
|
|
|
13
13
|
command = data[i];
|
|
14
14
|
switch (command) {
|
|
15
15
|
case M:
|
|
16
|
-
scalePoints(data, scaleX, scaleY, i, 1);
|
|
17
|
-
i += 3;
|
|
18
|
-
break;
|
|
19
16
|
case L:
|
|
20
17
|
scalePoints(data, scaleX, scaleY, i, 1);
|
|
21
18
|
i += 3;
|
|
@@ -82,6 +79,7 @@ const PathScaler = {
|
|
|
82
79
|
const { scalePoints } = PathScaler;
|
|
83
80
|
|
|
84
81
|
const matrix = draw.MatrixHelper.get();
|
|
82
|
+
const { topLeft, top, topRight, right, bottom, left } = draw.Direction9;
|
|
85
83
|
function scaleResize(leaf, scaleX, scaleY) {
|
|
86
84
|
if (leaf.pathInputed) {
|
|
87
85
|
scaleResizePath(leaf, scaleX, scaleY);
|
|
@@ -94,15 +92,36 @@ function scaleResize(leaf, scaleX, scaleY) {
|
|
|
94
92
|
}
|
|
95
93
|
}
|
|
96
94
|
function scaleResizeFontSize(leaf, scaleX, scaleY) {
|
|
97
|
-
const {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
95
|
+
const { app } = leaf;
|
|
96
|
+
const editor = app && app.editor;
|
|
97
|
+
let fontScale = scaleX;
|
|
98
|
+
if (editor.editing) {
|
|
99
|
+
const layout = leaf.__layout;
|
|
100
|
+
let { width, height } = layout.boxBounds;
|
|
101
|
+
width *= scaleY - scaleX;
|
|
102
|
+
height *= scaleX - scaleY;
|
|
103
|
+
switch (editor.resizeDirection) {
|
|
104
|
+
case top:
|
|
105
|
+
case bottom:
|
|
106
|
+
fontScale = scaleY;
|
|
107
|
+
layout.affectScaleOrRotation ? leaf.moveInner(-width / 2, 0) : leaf.x -= width / 2;
|
|
108
|
+
break;
|
|
109
|
+
case left:
|
|
110
|
+
case right:
|
|
111
|
+
layout.affectScaleOrRotation ? leaf.moveInner(0, -height / 2) : leaf.y -= height / 2;
|
|
112
|
+
break;
|
|
113
|
+
case topLeft:
|
|
114
|
+
case topRight:
|
|
115
|
+
layout.affectScaleOrRotation ? leaf.moveInner(0, -height) : leaf.y -= height;
|
|
116
|
+
break;
|
|
117
|
+
}
|
|
105
118
|
}
|
|
119
|
+
leaf.fontSize *= fontScale;
|
|
120
|
+
const data = leaf.__;
|
|
121
|
+
if (!data.__autoWidth)
|
|
122
|
+
leaf.width *= fontScale;
|
|
123
|
+
if (!data.__autoHeight)
|
|
124
|
+
leaf.height *= fontScale;
|
|
106
125
|
}
|
|
107
126
|
function scaleResizePath(leaf, scaleX, scaleY) {
|
|
108
127
|
PathScaler.scale(leaf.__.path, scaleX, scaleY);
|
|
@@ -148,7 +167,7 @@ leaf.resizeHeight = function (height) {
|
|
|
148
167
|
this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
|
|
149
168
|
};
|
|
150
169
|
draw.Text.prototype.__scaleResize = function (scaleX, scaleY) {
|
|
151
|
-
if (this.__.
|
|
170
|
+
if (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size')) {
|
|
152
171
|
scaleResizeFontSize(this, scaleX, scaleY);
|
|
153
172
|
}
|
|
154
173
|
else {
|
|
@@ -273,10 +292,11 @@ const alignToInnerYMap = {
|
|
|
273
292
|
'baseline-right': 'to',
|
|
274
293
|
};
|
|
275
294
|
function alignContent(box, content, align) {
|
|
276
|
-
draw.AlignHelper.toPoint(align, content, box.__layout.contentBounds, point);
|
|
277
295
|
const data = box.__;
|
|
278
|
-
|
|
279
|
-
|
|
296
|
+
const { contentBounds } = box.__layout;
|
|
297
|
+
draw.AlignHelper.toPoint(align, content, contentBounds, point);
|
|
298
|
+
content.x = data.__autoWidth ? contentBounds.x : point.x;
|
|
299
|
+
content.y = data.__autoHeight ? contentBounds.y : point.y;
|
|
280
300
|
}
|
|
281
301
|
|
|
282
302
|
function align$1(box, data, contentAlign, innerXAlign) {
|
|
@@ -669,11 +689,22 @@ function autoBoundsType(defaultValue) {
|
|
|
669
689
|
}));
|
|
670
690
|
}
|
|
671
691
|
|
|
692
|
+
const ui = draw.UI.prototype, box = draw.Box.prototype;
|
|
693
|
+
draw.autoLayoutType(false)(ui, 'flow');
|
|
694
|
+
draw.boundsType(0)(ui, 'gap');
|
|
695
|
+
draw.boundsType('top-left')(ui, 'flowAlign');
|
|
696
|
+
draw.boundsType(false)(ui, 'flowWrap');
|
|
697
|
+
draw.boundsType('box')(ui, 'itemBox');
|
|
698
|
+
draw.boundsType(true)(ui, 'inFlow');
|
|
699
|
+
autoBoundsType()(ui, 'autoWidth');
|
|
700
|
+
autoBoundsType()(ui, 'autoHeight');
|
|
701
|
+
draw.boundsType()(ui, 'lockRatio');
|
|
702
|
+
draw.boundsType()(ui, 'autoBox');
|
|
703
|
+
draw.boundsType()(ui, 'widthRange');
|
|
704
|
+
draw.boundsType()(ui, 'heightRange');
|
|
672
705
|
const { copyAndSpread } = draw.BoundsHelper;
|
|
673
706
|
let doFlowX = flowX, doFlowY = flowY;
|
|
674
|
-
|
|
675
|
-
draw.UI.changeAttr('autoHeight', undefined, autoBoundsType);
|
|
676
|
-
draw.Box.prototype.__updateFlowLayout = function () {
|
|
707
|
+
box.__updateFlowLayout = function () {
|
|
677
708
|
this.leafer.created = false;
|
|
678
709
|
const { flow } = this.__;
|
|
679
710
|
switch (flow) {
|
|
@@ -693,7 +724,7 @@ draw.Box.prototype.__updateFlowLayout = function () {
|
|
|
693
724
|
}
|
|
694
725
|
this.leafer.created = true;
|
|
695
726
|
};
|
|
696
|
-
|
|
727
|
+
box.__updateContentBounds = function () {
|
|
697
728
|
const { padding } = this.__;
|
|
698
729
|
const layout = this.__layout;
|
|
699
730
|
const same = layout.contentBounds === layout.boxBounds;
|
package/dist/flow.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PathCommandMap, MatrixHelper, Leaf, Text, Path, Line, Polygon, Group, Box, BoxData, dataProcessor, autoLayoutType, registerUI, AlignHelper, PointHelper, MathHelper, decorateLeafAttr, attr, doBoundsType, UI, BoundsHelper } from '@leafer-ui/draw';
|
|
1
|
+
import { PathCommandMap, MatrixHelper, Direction9, Leaf, Text, Path, Line, Polygon, Group, Box, BoxData, dataProcessor, autoLayoutType, registerUI, AlignHelper, PointHelper, MathHelper, decorateLeafAttr, attr, doBoundsType, UI, boundsType, BoundsHelper } from '@leafer-ui/draw';
|
|
2
2
|
|
|
3
3
|
const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap;
|
|
4
4
|
const PathScaler = {
|
|
@@ -11,9 +11,6 @@ const PathScaler = {
|
|
|
11
11
|
command = data[i];
|
|
12
12
|
switch (command) {
|
|
13
13
|
case M:
|
|
14
|
-
scalePoints(data, scaleX, scaleY, i, 1);
|
|
15
|
-
i += 3;
|
|
16
|
-
break;
|
|
17
14
|
case L:
|
|
18
15
|
scalePoints(data, scaleX, scaleY, i, 1);
|
|
19
16
|
i += 3;
|
|
@@ -80,6 +77,7 @@ const PathScaler = {
|
|
|
80
77
|
const { scalePoints } = PathScaler;
|
|
81
78
|
|
|
82
79
|
const matrix = MatrixHelper.get();
|
|
80
|
+
const { topLeft, top, topRight, right, bottom, left } = Direction9;
|
|
83
81
|
function scaleResize(leaf, scaleX, scaleY) {
|
|
84
82
|
if (leaf.pathInputed) {
|
|
85
83
|
scaleResizePath(leaf, scaleX, scaleY);
|
|
@@ -92,15 +90,36 @@ function scaleResize(leaf, scaleX, scaleY) {
|
|
|
92
90
|
}
|
|
93
91
|
}
|
|
94
92
|
function scaleResizeFontSize(leaf, scaleX, scaleY) {
|
|
95
|
-
const {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
const { app } = leaf;
|
|
94
|
+
const editor = app && app.editor;
|
|
95
|
+
let fontScale = scaleX;
|
|
96
|
+
if (editor.editing) {
|
|
97
|
+
const layout = leaf.__layout;
|
|
98
|
+
let { width, height } = layout.boxBounds;
|
|
99
|
+
width *= scaleY - scaleX;
|
|
100
|
+
height *= scaleX - scaleY;
|
|
101
|
+
switch (editor.resizeDirection) {
|
|
102
|
+
case top:
|
|
103
|
+
case bottom:
|
|
104
|
+
fontScale = scaleY;
|
|
105
|
+
layout.affectScaleOrRotation ? leaf.moveInner(-width / 2, 0) : leaf.x -= width / 2;
|
|
106
|
+
break;
|
|
107
|
+
case left:
|
|
108
|
+
case right:
|
|
109
|
+
layout.affectScaleOrRotation ? leaf.moveInner(0, -height / 2) : leaf.y -= height / 2;
|
|
110
|
+
break;
|
|
111
|
+
case topLeft:
|
|
112
|
+
case topRight:
|
|
113
|
+
layout.affectScaleOrRotation ? leaf.moveInner(0, -height) : leaf.y -= height;
|
|
114
|
+
break;
|
|
115
|
+
}
|
|
103
116
|
}
|
|
117
|
+
leaf.fontSize *= fontScale;
|
|
118
|
+
const data = leaf.__;
|
|
119
|
+
if (!data.__autoWidth)
|
|
120
|
+
leaf.width *= fontScale;
|
|
121
|
+
if (!data.__autoHeight)
|
|
122
|
+
leaf.height *= fontScale;
|
|
104
123
|
}
|
|
105
124
|
function scaleResizePath(leaf, scaleX, scaleY) {
|
|
106
125
|
PathScaler.scale(leaf.__.path, scaleX, scaleY);
|
|
@@ -146,7 +165,7 @@ leaf.resizeHeight = function (height) {
|
|
|
146
165
|
this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
|
|
147
166
|
};
|
|
148
167
|
Text.prototype.__scaleResize = function (scaleX, scaleY) {
|
|
149
|
-
if (this.__.
|
|
168
|
+
if (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size')) {
|
|
150
169
|
scaleResizeFontSize(this, scaleX, scaleY);
|
|
151
170
|
}
|
|
152
171
|
else {
|
|
@@ -271,10 +290,11 @@ const alignToInnerYMap = {
|
|
|
271
290
|
'baseline-right': 'to',
|
|
272
291
|
};
|
|
273
292
|
function alignContent(box, content, align) {
|
|
274
|
-
AlignHelper.toPoint(align, content, box.__layout.contentBounds, point);
|
|
275
293
|
const data = box.__;
|
|
276
|
-
|
|
277
|
-
|
|
294
|
+
const { contentBounds } = box.__layout;
|
|
295
|
+
AlignHelper.toPoint(align, content, contentBounds, point);
|
|
296
|
+
content.x = data.__autoWidth ? contentBounds.x : point.x;
|
|
297
|
+
content.y = data.__autoHeight ? contentBounds.y : point.y;
|
|
278
298
|
}
|
|
279
299
|
|
|
280
300
|
function align$1(box, data, contentAlign, innerXAlign) {
|
|
@@ -667,11 +687,22 @@ function autoBoundsType(defaultValue) {
|
|
|
667
687
|
}));
|
|
668
688
|
}
|
|
669
689
|
|
|
690
|
+
const ui = UI.prototype, box = Box.prototype;
|
|
691
|
+
autoLayoutType(false)(ui, 'flow');
|
|
692
|
+
boundsType(0)(ui, 'gap');
|
|
693
|
+
boundsType('top-left')(ui, 'flowAlign');
|
|
694
|
+
boundsType(false)(ui, 'flowWrap');
|
|
695
|
+
boundsType('box')(ui, 'itemBox');
|
|
696
|
+
boundsType(true)(ui, 'inFlow');
|
|
697
|
+
autoBoundsType()(ui, 'autoWidth');
|
|
698
|
+
autoBoundsType()(ui, 'autoHeight');
|
|
699
|
+
boundsType()(ui, 'lockRatio');
|
|
700
|
+
boundsType()(ui, 'autoBox');
|
|
701
|
+
boundsType()(ui, 'widthRange');
|
|
702
|
+
boundsType()(ui, 'heightRange');
|
|
670
703
|
const { copyAndSpread } = BoundsHelper;
|
|
671
704
|
let doFlowX = flowX, doFlowY = flowY;
|
|
672
|
-
|
|
673
|
-
UI.changeAttr('autoHeight', undefined, autoBoundsType);
|
|
674
|
-
Box.prototype.__updateFlowLayout = function () {
|
|
705
|
+
box.__updateFlowLayout = function () {
|
|
675
706
|
this.leafer.created = false;
|
|
676
707
|
const { flow } = this.__;
|
|
677
708
|
switch (flow) {
|
|
@@ -691,7 +722,7 @@ Box.prototype.__updateFlowLayout = function () {
|
|
|
691
722
|
}
|
|
692
723
|
this.leafer.created = true;
|
|
693
724
|
};
|
|
694
|
-
|
|
725
|
+
box.__updateContentBounds = function () {
|
|
695
726
|
const { padding } = this.__;
|
|
696
727
|
const layout = this.__layout;
|
|
697
728
|
const same = layout.contentBounds === layout.boxBounds;
|
package/dist/flow.esm.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{PathCommandMap as t,MatrixHelper as e,Leaf as o,Text as i,Path as n,Line as s,Polygon as h,Group as c,Box as r,BoxData as a,dataProcessor as l,autoLayoutType as _,registerUI as u,AlignHelper as f,PointHelper as g,MathHelper as p,decorateLeafAttr as d,attr as w,doBoundsType as y,UI as x,BoundsHelper as b}from"@leafer-ui/draw";const{M:G,L:m,C:R,Q:z,Z:A,N:B,D:k,X:v,G:F,F:S,O:X,P:Y,U:C}=t,P={scale(t,e,o){if(!t)return;let i,n=0,s=t.length;for(;n<s;)switch(i=t[n],i){case G:case m:W(t,e,o,n,1),n+=3;break;case R:W(t,e,o,n,3),n+=7;break;case z:W(t,e,o,n,2),n+=5;break;case A:n+=1;break;case B:W(t,e,o,n,2),n+=5;break;case k:W(t,e,o,n,2),n+=9;break;case v:W(t,e,o,n,2),n+=6;break;case F:W(t,e,o,n,2),n+=9;break;case S:W(t,e,o,n,2),n+=5;break;case X:t[n]=F,t.splice(n+4,0,t[n+3],0),W(t,e,o,n,2),n+=9,s+=2;break;case Y:t[n]=S,t.splice(n+4,0,t[n+3]),W(t,e,o,n,2),n+=5,s+=1;break;case C:W(t,e,o,n,2),n+=6}},scalePoints(t,e,o,i,n){for(let s=n?i+1:0,h=n?s+2*n:t.length;s<h;s+=2)t[s]*=e,t[s+1]*=o}},{scalePoints:W}=P,O=e.get();function j(t,e,o){t.pathInputed?H(t,e,o):(1!==e&&(t.width*=e),1!==o&&(t.height*=o))}function E(t,e,o){const{width:i,height:n}=t.__localBoxBounds;1!==e?(t.fontSize*=e,t.y-=n*(e-o)/2):1!==o&&(t.fontSize*=o,t.x-=i*(o-e)/2)}function H(t,e,o){P.scale(t.__.path,e,o),t.path=t.__.path}function M(t,e,o){P.scalePoints(t.__.points,e,o),t.points=t.__.points}function I(t,e,o){const{children:i}=t;for(let t=0;t<i.length;t++)O.a=e,O.d=o,i[t].transform(O,!0)}const L=o.prototype;function D(t,e,o,i){var n,s=arguments.length,h=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,o,i);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(h=(s<3?n(h):s>3?n(e,o,h):n(e,o))||h);return s>3&&h&&Object.defineProperty(e,o,h),h}L.scaleResize=function(t,e=t,o){const i=this;o||i.editConfig&&"scale"===i.editConfig.editSize?(i.scaleX*=t,i.scaleY*=e):(t<0&&(i.scaleX*=-1,t=-t),e<0&&(i.scaleY*=-1,e=-e),this.__scaleResize(t,e))},L.__scaleResize=function(t,e){j(this,t,e)},L.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},L.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},i.prototype.__scaleResize=function(t,e){this.__.__autoSize&&(this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize)?E(this,t,e):j(this,t,e)},n.prototype.__scaleResize=function(t,e){H(this,t,e)},s.prototype.__scaleResize=function(t,e){this.pathInputed?H(this,t,e):this.points?M(this,t,e):this.width*=t},h.prototype.__scaleResize=function(t,e){this.pathInputed?H(this,t,e):this.points?M(this,t,e):j(this,t,e)},c.prototype.__scaleResize=function(t,e){I(this,t,e)},r.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?I(this,t,e):(j(this,t,e),this.__.resizeChildren&&I(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;let N=class extends r{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}};D([l(class extends a{})],N.prototype,"__",void 0),D([_("x")],N.prototype,"flow",void 0),N=D([u()],N);const Q={},U={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},Z={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function q(t,e,o){f.toPoint(o,e,t.__layout.contentBounds,Q);const i=t.__;e.x=i.__autoWidth?0:Q.x,e.y=i.__autoHeight?0:Q.y}const{move:J}=g;function K(t,e,o,i,n,s){const{children:h}=t;let c,r,{x:a,start:l}=e,_=i;a+=o;for(let t=0,o=e.count;t<o;t++)c=h[s?l-t:l+t],c.__.inFlow&&0!==c.__.visible?(r=c.__flowBounds,"from"!==n&&(_=i+(e.height-r.height)/("center"===n?2:1)),J(c,a-r.x,_-r.y),a+=r.width+e.gap):o++}function T(t,e,o){const i="width"===o?"height":"width";t[o]=Math.max(t[o],e[o]),t[i]+=t.count?e[i]+t.gap:e[i],t.list.push(e),t.count++}const V={};function $(t,e){const{gap:o,flowAlign:i,flowWrap:n,__autoWidth:s,__autoHeight:h}=t.__,c=n&&(e?!s:!h);return"object"==typeof o?(V.xGap=o.x||0,V.yGap=o.y||0):V.xGap=V.yGap=o,V.isAutoXGap="string"==typeof V.xGap&&!s,V.isAutoYGap="string"==typeof V.yGap&&!h,V.complex=c||"top-left"!==i||t.__hasGrow||V.isAutoXGap||V.isAutoYGap,V.wrap=c,V.complex&&(V.isFitXGap="fit"===V.xGap&&!s,V.isFitYGap="fit"===V.yGap&&!h,"object"==typeof i?(V.contentAlign=i.content||"top-left",V.rowXAlign=i.x||"from",V.rowYAlign=i.y||"from"):(V.contentAlign=i,V.rowXAlign=U[i],V.rowYAlign=Z[i])),V}function tt(t,e){return{x:0,y:0,width:0,height:0,gap:e,start:t,count:0,grow:0}}function et(t,e,o,i){const{count:n}=t;n>1&&(o>t[e]||i)&&(t.gap=(o-t[e])/(n-1),t[e]=o)}function ot(t,e){return"box"===e?t.__local:t.__layout.localStrokeBounds}const{within:it}=p;function nt(t,e,o,i){let n,s,h,c=0,r=e.hasRangeSize&&[],{grow:a,start:l}=e;const _=e.width<o?(o-e.width)/a:0,{children:u}=t;_&&(e.width=o);for(let t=0,o=e.count;t<o;t++)n=u[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__widthGrow)&&(h=st(n,n.__flowBounds,_*s),h?(c+=h,a-=s):r&&(n.__.widthRange?r.unshift(n):r.push(n))):o++;c&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__widthGrow,n=e/o*i,h=st(t,s=t.__flowBounds,s.width+n),e-=n-h,o-=i}))}(r,c,a)}function st(t,e,o){const{widthRange:i,lockRatio:n}=t.__,s=i?it(o,i):o,h=s/e.width;return t.scaleResize(h,n?h:1),e.width=s,o-s}const{within:ht}=p;function ct(t,e,o,i){let n,s,h,c=0,r=e.hasRangeSize&&[],{grow:a,start:l}=e;const _=e.height<o?(o-e.height)/a:0,{children:u}=t;_&&(e.height=o);for(let t=0,o=e.count;t<o;t++)n=u[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__heightGrow)&&(h=rt(n,n.__flowBounds,_*s),h?(c+=h,a-=s):r&&(n.__.heightRange?r.unshift(n):r.push(n))):o++;c&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__heightGrow,n=e/o*i,h=rt(t,s=t.__flowBounds,s.height+n),e-=n-h,o-=i}))}(r,c,a)}function rt(t,e,o){const{heightRange:i,lockRatio:n}=t.__,s=i?ht(o,i):o,h=s/e.height;return t.scaleResize(n?h:1,h),e.height=s,o-s}const{move:at}=g;const{move:lt}=g;function _t(t,e,o,i,n,s){const{children:h}=t;let c,r,{y:a,start:l}=e,_=o;a+=i;for(let t=0,i=e.count;t<i;t++)c=h[s?l-t:l+t],c.__.inFlow&&0!==c.__.visible?(r=c.__flowBounds,"from"!==n&&(_=o+(e.width-r.width)/("center"===n?2:1)),lt(c,_-r.x,a-r.y),a+=r.height+e.gap):i++}const{move:ut}=g;function ft(t){return d(t,(t=>w({set(e){const o="number"==typeof e?e:0;"autoWidth"===t?this.__widthGrow=o:this.__heightGrow=o,!o||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(t,e)&&y(this)}})))}const{copyAndSpread:gt}=b;let pt=function(t,e){const o="width",{children:i,itemBox:n}=t,s=$(t,!0),{complex:h,wrap:c,xGap:r,yGap:a,isAutoXGap:l,isFitXGap:_}=s;if(!i.length)return;const u=c&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},f=l?0:r;let g,p,d,w,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,r=i.length;s<r;s++)g=i[w=e?r-1-s:s],g.__.inFlow&&0!==g.__.visible&&(p=ot(g,n),h?(g.__flowBounds=p,y||(y=tt(w,f)),c&&y.count&&y.width+p.width>G&&(y.grow?nt(t,y,G,e):l&&et(y,o,G,_),T(u,y,o),y=tt(w,f)),d=p.width,g.__widthGrow&&(y.grow+=g.__widthGrow,d=0,g.__.widthRange&&(y.hasRangeSize=!0)),g.__heightGrow&&rt(g,p,m),y.width+=y.count?d+f:d,y.height=Math.max(y.height,p.height),y.count++):(at(g,x-p.x,b-p.y),x+=p.width+f));if(h){const{isAutoYGap:i,isFitYGap:n,contentAlign:h,rowXAlign:r,rowYAlign:f}=s;y.count&&(y.grow?nt(t,y,G,e):l&&et(y,o,G,_),c&&T(u,y,o)),c?(i?et(u,"height",m,n):u.gap=a,function(t,e,o,i){q(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=U[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.x=e.width-t.width,"center"===i&&(t.x/=2)}}(t,u,h,r),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:c,y:r}=e;for(let a=0,l=n.length;a<l;a++)h=n[s?l-1-a:a],K(t,h,c,r,o,i),r+=h.height+e.gap}(t,u,f,e)):(q(t,y,h),K(t,y,0,y.y,f,e))}},dt=function(t,e){const o="height",{children:i,itemBox:n}=t,s=$(t,!1),{complex:h,wrap:c,xGap:r,yGap:a,isAutoYGap:l,isFitYGap:_}=s;if(!i.length)return;const u=c&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},f=l?0:a;let g,p,d,w,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,r=i.length;s<r;s++)g=i[w=e?r-1-s:s],g.__.inFlow&&0!==g.__.visible&&(p=ot(g,n),h?(g.__flowBounds=p,y||(y=tt(w,f)),c&&y.count&&y.height+p.height>m&&(y.grow&&ct(t,y,m,e),l&&et(y,o,m,_),T(u,y,o),y=tt(w,f)),d=p.height,g.__heightGrow&&(y.grow+=g.__heightGrow,d=0,g.__.heightRange&&(y.hasRangeSize=!0)),g.__widthGrow&&st(g,p,G),y.height+=y.count?d+f:d,y.width=Math.max(y.width,p.width),y.count++):(ut(g,x-p.x,b-p.y),b+=p.height+f));if(h){const{isAutoXGap:i,isFitXGap:n,contentAlign:h,rowXAlign:a,rowYAlign:f}=s;y.count&&(y.grow&&ct(t,y,m,e),l&&et(y,o,m,_),c&&T(u,y,o)),c?(i?et(u,"width",G,n):u.gap=r,function(t,e,o,i){q(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=Z[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.y=e.height-t.height,"center"===i&&(t.y/=2)}}(t,u,h,f),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:c,y:r}=e;for(let a=0,l=n.length;a<l;a++)h=n[s?l-1-a:a],_t(t,h,c,r,o,i),c+=h.width+e.gap}(t,u,a,e)):(q(t,y,h),_t(t,y,y.x,0,a,e))}};x.changeAttr("autoWidth",void 0,ft),x.changeAttr("autoHeight",void 0,ft),r.prototype.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:pt(this);break;case"y":dt(this);break;case"x-reverse":pt(this,!0);break;case"y-reverse":dt(this,!0)}this.leafer.created=!0},r.prototype.__updateContentBounds=function(){const{padding:t}=this.__,e=this.__layout,o=e.contentBounds===e.boxBounds;t?(o&&e.shrinkContent(),gt(e.contentBounds,e.boxBounds,t,!0)):o||e.shrinkContentCancel()};export{N as Flow,P as PathScaler,j as scaleResize,E as scaleResizeFontSize,I as scaleResizeGroup,H as scaleResizePath,M as scaleResizePoints};
|
|
1
|
+
import{PathCommandMap as t,MatrixHelper as e,Direction9 as o,Leaf as i,Text as n,Path as s,Line as h,Polygon as c,Group as r,Box as a,BoxData as l,dataProcessor as _,autoLayoutType as f,registerUI as u,AlignHelper as g,PointHelper as p,MathHelper as w,decorateLeafAttr as d,attr as y,doBoundsType as x,UI as b,boundsType as G,BoundsHelper as m}from"@leafer-ui/draw";const{M:R,L:z,C:B,Q:A,Z:k,N:v,D:F,X:S,G:X,F:Y,O:C,P:W,U:O}=t,P={scale(t,e,o){if(!t)return;let i,n=0,s=t.length;for(;n<s;)switch(i=t[n],i){case R:case z:I(t,e,o,n,1),n+=3;break;case B:I(t,e,o,n,3),n+=7;break;case A:I(t,e,o,n,2),n+=5;break;case k:n+=1;break;case v:I(t,e,o,n,2),n+=5;break;case F:I(t,e,o,n,2),n+=9;break;case S:I(t,e,o,n,2),n+=6;break;case X:I(t,e,o,n,2),n+=9;break;case Y:I(t,e,o,n,2),n+=5;break;case C:t[n]=X,t.splice(n+4,0,t[n+3],0),I(t,e,o,n,2),n+=9,s+=2;break;case W:t[n]=Y,t.splice(n+4,0,t[n+3]),I(t,e,o,n,2),n+=5,s+=1;break;case O:I(t,e,o,n,2),n+=6}},scalePoints(t,e,o,i,n){for(let s=n?i+1:0,h=n?s+2*n:t.length;s<h;s+=2)t[s]*=e,t[s+1]*=o}},{scalePoints:I}=P,j=e.get(),{topLeft:H,top:E,topRight:L,right:M,bottom:D,left:N}=o;function Q(t,e,o){t.pathInputed?Z(t,e,o):(1!==e&&(t.width*=e),1!==o&&(t.height*=o))}function U(t,e,o){const{app:i}=t,n=i&&i.editor;let s=e;if(n.editing){const i=t.__layout;let{width:h,height:c}=i.boxBounds;switch(h*=o-e,c*=e-o,n.resizeDirection){case E:case D:s=o,i.affectScaleOrRotation?t.moveInner(-h/2,0):t.x-=h/2;break;case N:case M:i.affectScaleOrRotation?t.moveInner(0,-c/2):t.y-=c/2;break;case H:case L:i.affectScaleOrRotation?t.moveInner(0,-c):t.y-=c}}t.fontSize*=s;const h=t.__;h.__autoWidth||(t.width*=s),h.__autoHeight||(t.height*=s)}function Z(t,e,o){P.scale(t.__.path,e,o),t.path=t.__.path}function q(t,e,o){P.scalePoints(t.__.points,e,o),t.points=t.__.points}function J(t,e,o){const{children:i}=t;for(let t=0;t<i.length;t++)j.a=e,j.d=o,i[t].transform(j,!0)}const K=i.prototype;function T(t,e,o,i){var n,s=arguments.length,h=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,o,i);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(h=(s<3?n(h):s>3?n(e,o,h):n(e,o))||h);return s>3&&h&&Object.defineProperty(e,o,h),h}K.scaleResize=function(t,e=t,o){const i=this;o||i.editConfig&&"scale"===i.editConfig.editSize?(i.scaleX*=t,i.scaleY*=e):(t<0&&(i.scaleX*=-1,t=-t),e<0&&(i.scaleY*=-1,e=-e),this.__scaleResize(t,e))},K.__scaleResize=function(t,e){Q(this,t,e)},K.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},K.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},n.prototype.__scaleResize=function(t,e){this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize?U(this,t,e):Q(this,t,e)},s.prototype.__scaleResize=function(t,e){Z(this,t,e)},h.prototype.__scaleResize=function(t,e){this.pathInputed?Z(this,t,e):this.points?q(this,t,e):this.width*=t},c.prototype.__scaleResize=function(t,e){this.pathInputed?Z(this,t,e):this.points?q(this,t,e):Q(this,t,e)},r.prototype.__scaleResize=function(t,e){J(this,t,e)},a.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?J(this,t,e):(Q(this,t,e),this.__.resizeChildren&&J(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;let V=class extends a{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}};T([_(class extends l{})],V.prototype,"__",void 0),T([f("x")],V.prototype,"flow",void 0),V=T([u()],V);const $={},tt={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},et={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function ot(t,e,o){const i=t.__,{contentBounds:n}=t.__layout;g.toPoint(o,e,n,$),e.x=i.__autoWidth?n.x:$.x,e.y=i.__autoHeight?n.y:$.y}const{move:it}=p;function nt(t,e,o,i,n,s){const{children:h}=t;let c,r,{x:a,start:l}=e,_=i;a+=o;for(let t=0,o=e.count;t<o;t++)c=h[s?l-t:l+t],c.__.inFlow&&0!==c.__.visible?(r=c.__flowBounds,"from"!==n&&(_=i+(e.height-r.height)/("center"===n?2:1)),it(c,a-r.x,_-r.y),a+=r.width+e.gap):o++}function st(t,e,o){const i="width"===o?"height":"width";t[o]=Math.max(t[o],e[o]),t[i]+=t.count?e[i]+t.gap:e[i],t.list.push(e),t.count++}const ht={};function ct(t,e){const{gap:o,flowAlign:i,flowWrap:n,__autoWidth:s,__autoHeight:h}=t.__,c=n&&(e?!s:!h);return"object"==typeof o?(ht.xGap=o.x||0,ht.yGap=o.y||0):ht.xGap=ht.yGap=o,ht.isAutoXGap="string"==typeof ht.xGap&&!s,ht.isAutoYGap="string"==typeof ht.yGap&&!h,ht.complex=c||"top-left"!==i||t.__hasGrow||ht.isAutoXGap||ht.isAutoYGap,ht.wrap=c,ht.complex&&(ht.isFitXGap="fit"===ht.xGap&&!s,ht.isFitYGap="fit"===ht.yGap&&!h,"object"==typeof i?(ht.contentAlign=i.content||"top-left",ht.rowXAlign=i.x||"from",ht.rowYAlign=i.y||"from"):(ht.contentAlign=i,ht.rowXAlign=tt[i],ht.rowYAlign=et[i])),ht}function rt(t,e){return{x:0,y:0,width:0,height:0,gap:e,start:t,count:0,grow:0}}function at(t,e,o,i){const{count:n}=t;n>1&&(o>t[e]||i)&&(t.gap=(o-t[e])/(n-1),t[e]=o)}function lt(t,e){return"box"===e?t.__local:t.__layout.localStrokeBounds}const{within:_t}=w;function ft(t,e,o,i){let n,s,h,c=0,r=e.hasRangeSize&&[],{grow:a,start:l}=e;const _=e.width<o?(o-e.width)/a:0,{children:f}=t;_&&(e.width=o);for(let t=0,o=e.count;t<o;t++)n=f[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__widthGrow)&&(h=ut(n,n.__flowBounds,_*s),h?(c+=h,a-=s):r&&(n.__.widthRange?r.unshift(n):r.push(n))):o++;c&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__widthGrow,n=e/o*i,h=ut(t,s=t.__flowBounds,s.width+n),e-=n-h,o-=i}))}(r,c,a)}function ut(t,e,o){const{widthRange:i,lockRatio:n}=t.__,s=i?_t(o,i):o,h=s/e.width;return t.scaleResize(h,n?h:1),e.width=s,o-s}const{within:gt}=w;function pt(t,e,o,i){let n,s,h,c=0,r=e.hasRangeSize&&[],{grow:a,start:l}=e;const _=e.height<o?(o-e.height)/a:0,{children:f}=t;_&&(e.height=o);for(let t=0,o=e.count;t<o;t++)n=f[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__heightGrow)&&(h=wt(n,n.__flowBounds,_*s),h?(c+=h,a-=s):r&&(n.__.heightRange?r.unshift(n):r.push(n))):o++;c&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__heightGrow,n=e/o*i,h=wt(t,s=t.__flowBounds,s.height+n),e-=n-h,o-=i}))}(r,c,a)}function wt(t,e,o){const{heightRange:i,lockRatio:n}=t.__,s=i?gt(o,i):o,h=s/e.height;return t.scaleResize(n?h:1,h),e.height=s,o-s}const{move:dt}=p;const{move:yt}=p;function xt(t,e,o,i,n,s){const{children:h}=t;let c,r,{y:a,start:l}=e,_=o;a+=i;for(let t=0,i=e.count;t<i;t++)c=h[s?l-t:l+t],c.__.inFlow&&0!==c.__.visible?(r=c.__flowBounds,"from"!==n&&(_=o+(e.width-r.width)/("center"===n?2:1)),yt(c,_-r.x,a-r.y),a+=r.height+e.gap):i++}const{move:bt}=p;function Gt(t){return d(t,(t=>y({set(e){const o="number"==typeof e?e:0;"autoWidth"===t?this.__widthGrow=o:this.__heightGrow=o,!o||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(t,e)&&x(this)}})))}const mt=b.prototype,Rt=a.prototype;f(!1)(mt,"flow"),G(0)(mt,"gap"),G("top-left")(mt,"flowAlign"),G(!1)(mt,"flowWrap"),G("box")(mt,"itemBox"),G(!0)(mt,"inFlow"),Gt()(mt,"autoWidth"),Gt()(mt,"autoHeight"),G()(mt,"lockRatio"),G()(mt,"autoBox"),G()(mt,"widthRange"),G()(mt,"heightRange");const{copyAndSpread:zt}=m;let Bt=function(t,e){const o="width",{children:i,itemBox:n}=t,s=ct(t,!0),{complex:h,wrap:c,xGap:r,yGap:a,isAutoXGap:l,isFitXGap:_}=s;if(!i.length)return;const f=c&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:r;let g,p,w,d,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,r=i.length;s<r;s++)g=i[d=e?r-1-s:s],g.__.inFlow&&0!==g.__.visible&&(p=lt(g,n),h?(g.__flowBounds=p,y||(y=rt(d,u)),c&&y.count&&y.width+p.width>G&&(y.grow?ft(t,y,G,e):l&&at(y,o,G,_),st(f,y,o),y=rt(d,u)),w=p.width,g.__widthGrow&&(y.grow+=g.__widthGrow,w=0,g.__.widthRange&&(y.hasRangeSize=!0)),g.__heightGrow&&wt(g,p,m),y.width+=y.count?w+u:w,y.height=Math.max(y.height,p.height),y.count++):(dt(g,x-p.x,b-p.y),x+=p.width+u));if(h){const{isAutoYGap:i,isFitYGap:n,contentAlign:h,rowXAlign:r,rowYAlign:u}=s;y.count&&(y.grow?ft(t,y,G,e):l&&at(y,o,G,_),c&&st(f,y,o)),c?(i?at(f,"height",m,n):f.gap=a,function(t,e,o,i){ot(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=tt[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.x=e.width-t.width,"center"===i&&(t.x/=2)}}(t,f,h,r),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:c,y:r}=e;for(let a=0,l=n.length;a<l;a++)h=n[s?l-1-a:a],nt(t,h,c,r,o,i),r+=h.height+e.gap}(t,f,u,e)):(ot(t,y,h),nt(t,y,0,y.y,u,e))}},At=function(t,e){const o="height",{children:i,itemBox:n}=t,s=ct(t,!1),{complex:h,wrap:c,xGap:r,yGap:a,isAutoYGap:l,isFitYGap:_}=s;if(!i.length)return;const f=c&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:a;let g,p,w,d,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,r=i.length;s<r;s++)g=i[d=e?r-1-s:s],g.__.inFlow&&0!==g.__.visible&&(p=lt(g,n),h?(g.__flowBounds=p,y||(y=rt(d,u)),c&&y.count&&y.height+p.height>m&&(y.grow&&pt(t,y,m,e),l&&at(y,o,m,_),st(f,y,o),y=rt(d,u)),w=p.height,g.__heightGrow&&(y.grow+=g.__heightGrow,w=0,g.__.heightRange&&(y.hasRangeSize=!0)),g.__widthGrow&&ut(g,p,G),y.height+=y.count?w+u:w,y.width=Math.max(y.width,p.width),y.count++):(bt(g,x-p.x,b-p.y),b+=p.height+u));if(h){const{isAutoXGap:i,isFitXGap:n,contentAlign:h,rowXAlign:a,rowYAlign:u}=s;y.count&&(y.grow&&pt(t,y,m,e),l&&at(y,o,m,_),c&&st(f,y,o)),c?(i?at(f,"width",G,n):f.gap=r,function(t,e,o,i){ot(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=et[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.y=e.height-t.height,"center"===i&&(t.y/=2)}}(t,f,h,u),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:c,y:r}=e;for(let a=0,l=n.length;a<l;a++)h=n[s?l-1-a:a],xt(t,h,c,r,o,i),c+=h.width+e.gap}(t,f,a,e)):(ot(t,y,h),xt(t,y,y.x,0,a,e))}};Rt.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:Bt(this);break;case"y":At(this);break;case"x-reverse":Bt(this,!0);break;case"y-reverse":At(this,!0)}this.leafer.created=!0},Rt.__updateContentBounds=function(){const{padding:t}=this.__,e=this.__layout,o=e.contentBounds===e.boxBounds;t?(o&&e.shrinkContent(),zt(e.contentBounds,e.boxBounds,t,!0)):o||e.shrinkContentCancel()};export{V as Flow,P as PathScaler,Q as scaleResize,U as scaleResizeFontSize,J as scaleResizeGroup,Z as scaleResizePath,q as scaleResizePoints};
|
package/dist/flow.js
CHANGED
|
@@ -13,9 +13,6 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
13
13
|
command = data[i];
|
|
14
14
|
switch (command) {
|
|
15
15
|
case M:
|
|
16
|
-
scalePoints(data, scaleX, scaleY, i, 1);
|
|
17
|
-
i += 3;
|
|
18
|
-
break;
|
|
19
16
|
case L:
|
|
20
17
|
scalePoints(data, scaleX, scaleY, i, 1);
|
|
21
18
|
i += 3;
|
|
@@ -82,6 +79,7 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
82
79
|
const { scalePoints } = PathScaler;
|
|
83
80
|
|
|
84
81
|
const matrix = draw.MatrixHelper.get();
|
|
82
|
+
const { topLeft, top, topRight, right, bottom, left } = draw.Direction9;
|
|
85
83
|
function scaleResize(leaf, scaleX, scaleY) {
|
|
86
84
|
if (leaf.pathInputed) {
|
|
87
85
|
scaleResizePath(leaf, scaleX, scaleY);
|
|
@@ -94,15 +92,36 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
94
92
|
}
|
|
95
93
|
}
|
|
96
94
|
function scaleResizeFontSize(leaf, scaleX, scaleY) {
|
|
97
|
-
const {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
95
|
+
const { app } = leaf;
|
|
96
|
+
const editor = app && app.editor;
|
|
97
|
+
let fontScale = scaleX;
|
|
98
|
+
if (editor.editing) {
|
|
99
|
+
const layout = leaf.__layout;
|
|
100
|
+
let { width, height } = layout.boxBounds;
|
|
101
|
+
width *= scaleY - scaleX;
|
|
102
|
+
height *= scaleX - scaleY;
|
|
103
|
+
switch (editor.resizeDirection) {
|
|
104
|
+
case top:
|
|
105
|
+
case bottom:
|
|
106
|
+
fontScale = scaleY;
|
|
107
|
+
layout.affectScaleOrRotation ? leaf.moveInner(-width / 2, 0) : leaf.x -= width / 2;
|
|
108
|
+
break;
|
|
109
|
+
case left:
|
|
110
|
+
case right:
|
|
111
|
+
layout.affectScaleOrRotation ? leaf.moveInner(0, -height / 2) : leaf.y -= height / 2;
|
|
112
|
+
break;
|
|
113
|
+
case topLeft:
|
|
114
|
+
case topRight:
|
|
115
|
+
layout.affectScaleOrRotation ? leaf.moveInner(0, -height) : leaf.y -= height;
|
|
116
|
+
break;
|
|
117
|
+
}
|
|
105
118
|
}
|
|
119
|
+
leaf.fontSize *= fontScale;
|
|
120
|
+
const data = leaf.__;
|
|
121
|
+
if (!data.__autoWidth)
|
|
122
|
+
leaf.width *= fontScale;
|
|
123
|
+
if (!data.__autoHeight)
|
|
124
|
+
leaf.height *= fontScale;
|
|
106
125
|
}
|
|
107
126
|
function scaleResizePath(leaf, scaleX, scaleY) {
|
|
108
127
|
PathScaler.scale(leaf.__.path, scaleX, scaleY);
|
|
@@ -148,7 +167,7 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
148
167
|
this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
|
|
149
168
|
};
|
|
150
169
|
draw.Text.prototype.__scaleResize = function (scaleX, scaleY) {
|
|
151
|
-
if (this.__.
|
|
170
|
+
if (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size')) {
|
|
152
171
|
scaleResizeFontSize(this, scaleX, scaleY);
|
|
153
172
|
}
|
|
154
173
|
else {
|
|
@@ -273,10 +292,11 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
273
292
|
'baseline-right': 'to',
|
|
274
293
|
};
|
|
275
294
|
function alignContent(box, content, align) {
|
|
276
|
-
draw.AlignHelper.toPoint(align, content, box.__layout.contentBounds, point);
|
|
277
295
|
const data = box.__;
|
|
278
|
-
|
|
279
|
-
|
|
296
|
+
const { contentBounds } = box.__layout;
|
|
297
|
+
draw.AlignHelper.toPoint(align, content, contentBounds, point);
|
|
298
|
+
content.x = data.__autoWidth ? contentBounds.x : point.x;
|
|
299
|
+
content.y = data.__autoHeight ? contentBounds.y : point.y;
|
|
280
300
|
}
|
|
281
301
|
|
|
282
302
|
function align$1(box, data, contentAlign, innerXAlign) {
|
|
@@ -669,11 +689,22 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
669
689
|
}));
|
|
670
690
|
}
|
|
671
691
|
|
|
692
|
+
const ui = draw.UI.prototype, box = draw.Box.prototype;
|
|
693
|
+
draw.autoLayoutType(false)(ui, 'flow');
|
|
694
|
+
draw.boundsType(0)(ui, 'gap');
|
|
695
|
+
draw.boundsType('top-left')(ui, 'flowAlign');
|
|
696
|
+
draw.boundsType(false)(ui, 'flowWrap');
|
|
697
|
+
draw.boundsType('box')(ui, 'itemBox');
|
|
698
|
+
draw.boundsType(true)(ui, 'inFlow');
|
|
699
|
+
autoBoundsType()(ui, 'autoWidth');
|
|
700
|
+
autoBoundsType()(ui, 'autoHeight');
|
|
701
|
+
draw.boundsType()(ui, 'lockRatio');
|
|
702
|
+
draw.boundsType()(ui, 'autoBox');
|
|
703
|
+
draw.boundsType()(ui, 'widthRange');
|
|
704
|
+
draw.boundsType()(ui, 'heightRange');
|
|
672
705
|
const { copyAndSpread } = draw.BoundsHelper;
|
|
673
706
|
let doFlowX = flowX, doFlowY = flowY;
|
|
674
|
-
|
|
675
|
-
draw.UI.changeAttr('autoHeight', undefined, autoBoundsType);
|
|
676
|
-
draw.Box.prototype.__updateFlowLayout = function () {
|
|
707
|
+
box.__updateFlowLayout = function () {
|
|
677
708
|
this.leafer.created = false;
|
|
678
709
|
const { flow } = this.__;
|
|
679
710
|
switch (flow) {
|
|
@@ -693,7 +724,7 @@ this.LeaferIN.flow = (function (exports, draw) {
|
|
|
693
724
|
}
|
|
694
725
|
this.leafer.created = true;
|
|
695
726
|
};
|
|
696
|
-
|
|
727
|
+
box.__updateContentBounds = function () {
|
|
697
728
|
const { padding } = this.__;
|
|
698
729
|
const layout = this.__layout;
|
|
699
730
|
const same = layout.contentBounds === layout.boxBounds;
|
package/dist/flow.min.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("@leafer-ui/draw");const{M:e,L:o,C:i,Q:n,Z:s,N:h,D:r,X:a,G:c,F:l,O:_,P:p,U:u}=t.PathCommandMap,f={scale(t,f,d){if(!t)return;let w,x=0,y=t.length;for(;x<y;)switch(w=t[x],w){case e:case o:g(t,f,d,x,1),x+=3;break;case i:g(t,f,d,x,3),x+=7;break;case n:g(t,f,d,x,2),x+=5;break;case s:x+=1;break;case h:g(t,f,d,x,2),x+=5;break;case r:g(t,f,d,x,2),x+=9;break;case a:g(t,f,d,x,2),x+=6;break;case c:g(t,f,d,x,2),x+=9;break;case l:g(t,f,d,x,2),x+=5;break;case _:t[x]=c,t.splice(x+4,0,t[x+3],0),g(t,f,d,x,2),x+=9,y+=2;break;case p:t[x]=l,t.splice(x+4,0,t[x+3]),g(t,f,d,x,2),x+=5,y+=1;break;case u:g(t,f,d,x,2),x+=6}},scalePoints(t,e,o,i,n){for(let s=n?i+1:0,h=n?s+2*n:t.length;s<h;s+=2)t[s]*=e,t[s+1]*=o}},{scalePoints:g}=f,d=t.MatrixHelper.get();function w(t,e,o){t.pathInputed?y(t,e,o):(1!==e&&(t.width*=e),1!==o&&(t.height*=o))}function x(t,e,o){const{width:i,height:n}=t.__localBoxBounds;1!==e?(t.fontSize*=e,t.y-=n*(e-o)/2):1!==o&&(t.fontSize*=o,t.x-=i*(o-e)/2)}function y(t,e,o){f.scale(t.__.path,e,o),t.path=t.__.path}function b(t,e,o){f.scalePoints(t.__.points,e,o),t.points=t.__.points}function G(t,e,o){const{children:i}=t;for(let t=0;t<i.length;t++)d.a=e,d.d=o,i[t].transform(d,!0)}const m=t.Leaf.prototype;function z(t,e,o,i){var n,s=arguments.length,h=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(h=(s<3?n(h):s>3?n(e,o,h):n(e,o))||h);return s>3&&h&&Object.defineProperty(e,o,h),h}m.scaleResize=function(t,e=t,o){const i=this;o||i.editConfig&&"scale"===i.editConfig.editSize?(i.scaleX*=t,i.scaleY*=e):(t<0&&(i.scaleX*=-1,t=-t),e<0&&(i.scaleY*=-1,e=-e),this.__scaleResize(t,e))},m.__scaleResize=function(t,e){w(this,t,e)},m.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},m.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},t.Text.prototype.__scaleResize=function(t,e){this.__.__autoSize&&(this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize)?x(this,t,e):w(this,t,e)},t.Path.prototype.__scaleResize=function(t,e){y(this,t,e)},t.Line.prototype.__scaleResize=function(t,e){this.pathInputed?y(this,t,e):this.points?b(this,t,e):this.width*=t},t.Polygon.prototype.__scaleResize=function(t,e){this.pathInputed?y(this,t,e):this.points?b(this,t,e):w(this,t,e)},t.Group.prototype.__scaleResize=function(t,e){G(this,t,e)},t.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?G(this,t,e):(w(this,t,e),this.__.resizeChildren&&G(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;class R extends t.BoxData{}exports.Flow=class extends t.Box{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}},z([t.dataProcessor(R)],exports.Flow.prototype,"__",void 0),z([t.autoLayoutType("x")],exports.Flow.prototype,"flow",void 0),exports.Flow=z([t.registerUI()],exports.Flow);const B={},A={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},F={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function k(e,o,i){t.AlignHelper.toPoint(i,o,e.__layout.contentBounds,B);const n=e.__;o.x=n.__autoWidth?0:B.x,o.y=n.__autoHeight?0:B.y}const{move:v}=t.PointHelper;function P(t,e,o,i,n,s){const{children:h}=t;let r,a,{x:c,start:l}=e,_=i;c+=o;for(let t=0,o=e.count;t<o;t++)r=h[s?l-t:l+t],r.__.inFlow&&0!==r.__.visible?(a=r.__flowBounds,"from"!==n&&(_=i+(e.height-a.height)/("center"===n?2:1)),v(r,c-a.x,_-a.y),c+=a.width+e.gap):o++}function S(t,e,o){const i="width"===o?"height":"width";t[o]=Math.max(t[o],e[o]),t[i]+=t.count?e[i]+t.gap:e[i],t.list.push(e),t.count++}const X={};function H(t,e){const{gap:o,flowAlign:i,flowWrap:n,__autoWidth:s,__autoHeight:h}=t.__,r=n&&(e?!s:!h);return"object"==typeof o?(X.xGap=o.x||0,X.yGap=o.y||0):X.xGap=X.yGap=o,X.isAutoXGap="string"==typeof X.xGap&&!s,X.isAutoYGap="string"==typeof X.yGap&&!h,X.complex=r||"top-left"!==i||t.__hasGrow||X.isAutoXGap||X.isAutoYGap,X.wrap=r,X.complex&&(X.isFitXGap="fit"===X.xGap&&!s,X.isFitYGap="fit"===X.yGap&&!h,"object"==typeof i?(X.contentAlign=i.content||"top-left",X.rowXAlign=i.x||"from",X.rowYAlign=i.y||"from"):(X.contentAlign=i,X.rowXAlign=A[i],X.rowYAlign=F[i])),X}function Y(t,e){return{x:0,y:0,width:0,height:0,gap:e,start:t,count:0,grow:0}}function C(t,e,o,i){const{count:n}=t;n>1&&(o>t[e]||i)&&(t.gap=(o-t[e])/(n-1),t[e]=o)}function M(t,e){return"box"===e?t.__local:t.__layout.localStrokeBounds}const{within:W}=t.MathHelper;function L(t,e,o,i){let n,s,h,r=0,a=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.width<o?(o-e.width)/c:0,{children:p}=t;_&&(e.width=o);for(let t=0,o=e.count;t<o;t++)n=p[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__widthGrow)&&(h=I(n,n.__flowBounds,_*s),h?(r+=h,c-=s):a&&(n.__.widthRange?a.unshift(n):a.push(n))):o++;r&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__widthGrow,n=e/o*i,h=I(t,s=t.__flowBounds,s.width+n),e-=n-h,o-=i}))}(a,r,c)}function I(t,e,o){const{widthRange:i,lockRatio:n}=t.__,s=i?W(o,i):o,h=s/e.width;return t.scaleResize(h,n?h:1),e.width=s,o-s}const{within:O}=t.MathHelper;function j(t,e,o,i){let n,s,h,r=0,a=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.height<o?(o-e.height)/c:0,{children:p}=t;_&&(e.height=o);for(let t=0,o=e.count;t<o;t++)n=p[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__heightGrow)&&(h=E(n,n.__flowBounds,_*s),h?(r+=h,c-=s):a&&(n.__.heightRange?a.unshift(n):a.push(n))):o++;r&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__heightGrow,n=e/o*i,h=E(t,s=t.__flowBounds,s.height+n),e-=n-h,o-=i}))}(a,r,c)}function E(t,e,o){const{heightRange:i,lockRatio:n}=t.__,s=i?O(o,i):o,h=s/e.height;return t.scaleResize(n?h:1,h),e.height=s,o-s}const{move:U}=t.PointHelper;const{move:D}=t.PointHelper;function T(t,e,o,i,n,s){const{children:h}=t;let r,a,{y:c,start:l}=e,_=o;c+=i;for(let t=0,i=e.count;t<i;t++)r=h[s?l-t:l+t],r.__.inFlow&&0!==r.__.visible?(a=r.__flowBounds,"from"!==n&&(_=o+(e.width-a.width)/("center"===n?2:1)),D(r,_-a.x,c-a.y),c+=a.height+e.gap):i++}const{move:q}=t.PointHelper;function N(e){return t.decorateLeafAttr(e,(e=>t.attr({set(o){const i="number"==typeof o?o:0;"autoWidth"===e?this.__widthGrow=i:this.__heightGrow=i,!i||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(e,o)&&t.doBoundsType(this)}})))}const{copyAndSpread:Q}=t.BoundsHelper;let Z=function(t,e){const o="width",{children:i,itemBox:n}=t,s=H(t,!0),{complex:h,wrap:r,xGap:a,yGap:c,isAutoXGap:l,isFitXGap:_}=s;if(!i.length)return;const p=r&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:a;let f,g,d,w,x,{x:y,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,a=i.length;s<a;s++)f=i[w=e?a-1-s:s],f.__.inFlow&&0!==f.__.visible&&(g=M(f,n),h?(f.__flowBounds=g,x||(x=Y(w,u)),r&&x.count&&x.width+g.width>G&&(x.grow?L(t,x,G,e):l&&C(x,o,G,_),S(p,x,o),x=Y(w,u)),d=g.width,f.__widthGrow&&(x.grow+=f.__widthGrow,d=0,f.__.widthRange&&(x.hasRangeSize=!0)),f.__heightGrow&&E(f,g,m),x.width+=x.count?d+u:d,x.height=Math.max(x.height,g.height),x.count++):(U(f,y-g.x,b-g.y),y+=g.width+u));if(h){const{isAutoYGap:i,isFitYGap:n,contentAlign:h,rowXAlign:a,rowYAlign:u}=s;x.count&&(x.grow?L(t,x,G,e):l&&C(x,o,G,_),r&&S(p,x,o)),r?(i?C(p,"height",m,n):p.gap=c,function(t,e,o,i){k(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=A[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.x=e.width-t.width,"center"===i&&(t.x/=2)}}(t,p,h,a),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:r,y:a}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],P(t,h,r,a,o,i),a+=h.height+e.gap}(t,p,u,e)):(k(t,x,h),P(t,x,0,x.y,u,e))}},J=function(t,e){const o="height",{children:i,itemBox:n}=t,s=H(t,!1),{complex:h,wrap:r,xGap:a,yGap:c,isAutoYGap:l,isFitYGap:_}=s;if(!i.length)return;const p=r&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:c;let f,g,d,w,x,{x:y,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,a=i.length;s<a;s++)f=i[w=e?a-1-s:s],f.__.inFlow&&0!==f.__.visible&&(g=M(f,n),h?(f.__flowBounds=g,x||(x=Y(w,u)),r&&x.count&&x.height+g.height>m&&(x.grow&&j(t,x,m,e),l&&C(x,o,m,_),S(p,x,o),x=Y(w,u)),d=g.height,f.__heightGrow&&(x.grow+=f.__heightGrow,d=0,f.__.heightRange&&(x.hasRangeSize=!0)),f.__widthGrow&&I(f,g,G),x.height+=x.count?d+u:d,x.width=Math.max(x.width,g.width),x.count++):(q(f,y-g.x,b-g.y),b+=g.height+u));if(h){const{isAutoXGap:i,isFitXGap:n,contentAlign:h,rowXAlign:c,rowYAlign:u}=s;x.count&&(x.grow&&j(t,x,m,e),l&&C(x,o,m,_),r&&S(p,x,o)),r?(i?C(p,"width",G,n):p.gap=a,function(t,e,o,i){k(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=F[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.y=e.height-t.height,"center"===i&&(t.y/=2)}}(t,p,h,u),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:r,y:a}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],T(t,h,r,a,o,i),r+=h.width+e.gap}(t,p,c,e)):(k(t,x,h),T(t,x,x.x,0,c,e))}};t.UI.changeAttr("autoWidth",void 0,N),t.UI.changeAttr("autoHeight",void 0,N),t.Box.prototype.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:Z(this);break;case"y":J(this);break;case"x-reverse":Z(this,!0);break;case"y-reverse":J(this,!0)}this.leafer.created=!0},t.Box.prototype.__updateContentBounds=function(){const{padding:t}=this.__,e=this.__layout,o=e.contentBounds===e.boxBounds;t?(o&&e.shrinkContent(),Q(e.contentBounds,e.boxBounds,t,!0)):o||e.shrinkContentCancel()},exports.PathScaler=f,exports.scaleResize=w,exports.scaleResizeFontSize=x,exports.scaleResizeGroup=G,exports.scaleResizePath=y,exports.scaleResizePoints=b;
|
|
1
|
+
"use strict";var t=require("@leafer-ui/draw");const{M:e,L:o,C:i,Q:n,Z:s,N:h,D:r,X:a,G:c,F:l,O:_,P:p,U:u}=t.PathCommandMap,f={scale(t,f,d){if(!t)return;let w,y=0,x=t.length;for(;y<x;)switch(w=t[y],w){case e:case o:g(t,f,d,y,1),y+=3;break;case i:g(t,f,d,y,3),y+=7;break;case n:g(t,f,d,y,2),y+=5;break;case s:y+=1;break;case h:g(t,f,d,y,2),y+=5;break;case r:g(t,f,d,y,2),y+=9;break;case a:g(t,f,d,y,2),y+=6;break;case c:g(t,f,d,y,2),y+=9;break;case l:g(t,f,d,y,2),y+=5;break;case _:t[y]=c,t.splice(y+4,0,t[y+3],0),g(t,f,d,y,2),y+=9,x+=2;break;case p:t[y]=l,t.splice(y+4,0,t[y+3]),g(t,f,d,y,2),y+=5,x+=1;break;case u:g(t,f,d,y,2),y+=6}},scalePoints(t,e,o,i,n){for(let s=n?i+1:0,h=n?s+2*n:t.length;s<h;s+=2)t[s]*=e,t[s+1]*=o}},{scalePoints:g}=f,d=t.MatrixHelper.get(),{topLeft:w,top:y,topRight:x,right:b,bottom:G,left:m}=t.Direction9;function R(t,e,o){t.pathInputed?B(t,e,o):(1!==e&&(t.width*=e),1!==o&&(t.height*=o))}function z(t,e,o){const{app:i}=t,n=i&&i.editor;let s=e;if(n.editing){const i=t.__layout;let{width:h,height:r}=i.boxBounds;switch(h*=o-e,r*=e-o,n.resizeDirection){case y:case G:s=o,i.affectScaleOrRotation?t.moveInner(-h/2,0):t.x-=h/2;break;case m:case b:i.affectScaleOrRotation?t.moveInner(0,-r/2):t.y-=r/2;break;case w:case x:i.affectScaleOrRotation?t.moveInner(0,-r):t.y-=r}}t.fontSize*=s;const h=t.__;h.__autoWidth||(t.width*=s),h.__autoHeight||(t.height*=s)}function B(t,e,o){f.scale(t.__.path,e,o),t.path=t.__.path}function A(t,e,o){f.scalePoints(t.__.points,e,o),t.points=t.__.points}function k(t,e,o){const{children:i}=t;for(let t=0;t<i.length;t++)d.a=e,d.d=o,i[t].transform(d,!0)}const F=t.Leaf.prototype;function v(t,e,o,i){var n,s=arguments.length,h=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(h=(s<3?n(h):s>3?n(e,o,h):n(e,o))||h);return s>3&&h&&Object.defineProperty(e,o,h),h}F.scaleResize=function(t,e=t,o){const i=this;o||i.editConfig&&"scale"===i.editConfig.editSize?(i.scaleX*=t,i.scaleY*=e):(t<0&&(i.scaleX*=-1,t=-t),e<0&&(i.scaleY*=-1,e=-e),this.__scaleResize(t,e))},F.__scaleResize=function(t,e){R(this,t,e)},F.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},F.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},t.Text.prototype.__scaleResize=function(t,e){this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize?z(this,t,e):R(this,t,e)},t.Path.prototype.__scaleResize=function(t,e){B(this,t,e)},t.Line.prototype.__scaleResize=function(t,e){this.pathInputed?B(this,t,e):this.points?A(this,t,e):this.width*=t},t.Polygon.prototype.__scaleResize=function(t,e){this.pathInputed?B(this,t,e):this.points?A(this,t,e):R(this,t,e)},t.Group.prototype.__scaleResize=function(t,e){k(this,t,e)},t.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?k(this,t,e):(R(this,t,e),this.__.resizeChildren&&k(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;class P extends t.BoxData{}exports.Flow=class extends t.Box{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}},v([t.dataProcessor(P)],exports.Flow.prototype,"__",void 0),v([t.autoLayoutType("x")],exports.Flow.prototype,"flow",void 0),exports.Flow=v([t.registerUI()],exports.Flow);const S={},H={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},X={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function T(e,o,i){const n=e.__,{contentBounds:s}=e.__layout;t.AlignHelper.toPoint(i,o,s,S),o.x=n.__autoWidth?s.x:S.x,o.y=n.__autoHeight?s.y:S.y}const{move:Y}=t.PointHelper;function C(t,e,o,i,n,s){const{children:h}=t;let r,a,{x:c,start:l}=e,_=i;c+=o;for(let t=0,o=e.count;t<o;t++)r=h[s?l-t:l+t],r.__.inFlow&&0!==r.__.visible?(a=r.__flowBounds,"from"!==n&&(_=i+(e.height-a.height)/("center"===n?2:1)),Y(r,c-a.x,_-a.y),c+=a.width+e.gap):o++}function W(t,e,o){const i="width"===o?"height":"width";t[o]=Math.max(t[o],e[o]),t[i]+=t.count?e[i]+t.gap:e[i],t.list.push(e),t.count++}const L={};function O(t,e){const{gap:o,flowAlign:i,flowWrap:n,__autoWidth:s,__autoHeight:h}=t.__,r=n&&(e?!s:!h);return"object"==typeof o?(L.xGap=o.x||0,L.yGap=o.y||0):L.xGap=L.yGap=o,L.isAutoXGap="string"==typeof L.xGap&&!s,L.isAutoYGap="string"==typeof L.yGap&&!h,L.complex=r||"top-left"!==i||t.__hasGrow||L.isAutoXGap||L.isAutoYGap,L.wrap=r,L.complex&&(L.isFitXGap="fit"===L.xGap&&!s,L.isFitYGap="fit"===L.yGap&&!h,"object"==typeof i?(L.contentAlign=i.content||"top-left",L.rowXAlign=i.x||"from",L.rowYAlign=i.y||"from"):(L.contentAlign=i,L.rowXAlign=H[i],L.rowYAlign=X[i])),L}function I(t,e){return{x:0,y:0,width:0,height:0,gap:e,start:t,count:0,grow:0}}function M(t,e,o,i){const{count:n}=t;n>1&&(o>t[e]||i)&&(t.gap=(o-t[e])/(n-1),t[e]=o)}function j(t,e){return"box"===e?t.__local:t.__layout.localStrokeBounds}const{within:D}=t.MathHelper;function E(t,e,o,i){let n,s,h,r=0,a=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.width<o?(o-e.width)/c:0,{children:p}=t;_&&(e.width=o);for(let t=0,o=e.count;t<o;t++)n=p[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__widthGrow)&&(h=U(n,n.__flowBounds,_*s),h?(r+=h,c-=s):a&&(n.__.widthRange?a.unshift(n):a.push(n))):o++;r&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__widthGrow,n=e/o*i,h=U(t,s=t.__flowBounds,s.width+n),e-=n-h,o-=i}))}(a,r,c)}function U(t,e,o){const{widthRange:i,lockRatio:n}=t.__,s=i?D(o,i):o,h=s/e.width;return t.scaleResize(h,n?h:1),e.width=s,o-s}const{within:q}=t.MathHelper;function N(t,e,o,i){let n,s,h,r=0,a=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.height<o?(o-e.height)/c:0,{children:p}=t;_&&(e.height=o);for(let t=0,o=e.count;t<o;t++)n=p[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__heightGrow)&&(h=Q(n,n.__flowBounds,_*s),h?(r+=h,c-=s):a&&(n.__.heightRange?a.unshift(n):a.push(n))):o++;r&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__heightGrow,n=e/o*i,h=Q(t,s=t.__flowBounds,s.height+n),e-=n-h,o-=i}))}(a,r,c)}function Q(t,e,o){const{heightRange:i,lockRatio:n}=t.__,s=i?q(o,i):o,h=s/e.height;return t.scaleResize(n?h:1,h),e.height=s,o-s}const{move:Z}=t.PointHelper;const{move:J}=t.PointHelper;function K(t,e,o,i,n,s){const{children:h}=t;let r,a,{y:c,start:l}=e,_=o;c+=i;for(let t=0,i=e.count;t<i;t++)r=h[s?l-t:l+t],r.__.inFlow&&0!==r.__.visible?(a=r.__flowBounds,"from"!==n&&(_=o+(e.width-a.width)/("center"===n?2:1)),J(r,_-a.x,c-a.y),c+=a.height+e.gap):i++}const{move:V}=t.PointHelper;function $(e){return t.decorateLeafAttr(e,(e=>t.attr({set(o){const i="number"==typeof o?o:0;"autoWidth"===e?this.__widthGrow=i:this.__heightGrow=i,!i||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(e,o)&&t.doBoundsType(this)}})))}const tt=t.UI.prototype,et=t.Box.prototype;t.autoLayoutType(!1)(tt,"flow"),t.boundsType(0)(tt,"gap"),t.boundsType("top-left")(tt,"flowAlign"),t.boundsType(!1)(tt,"flowWrap"),t.boundsType("box")(tt,"itemBox"),t.boundsType(!0)(tt,"inFlow"),$()(tt,"autoWidth"),$()(tt,"autoHeight"),t.boundsType()(tt,"lockRatio"),t.boundsType()(tt,"autoBox"),t.boundsType()(tt,"widthRange"),t.boundsType()(tt,"heightRange");const{copyAndSpread:ot}=t.BoundsHelper;let it=function(t,e){const o="width",{children:i,itemBox:n}=t,s=O(t,!0),{complex:h,wrap:r,xGap:a,yGap:c,isAutoXGap:l,isFitXGap:_}=s;if(!i.length)return;const p=r&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:a;let f,g,d,w,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,a=i.length;s<a;s++)f=i[w=e?a-1-s:s],f.__.inFlow&&0!==f.__.visible&&(g=j(f,n),h?(f.__flowBounds=g,y||(y=I(w,u)),r&&y.count&&y.width+g.width>G&&(y.grow?E(t,y,G,e):l&&M(y,o,G,_),W(p,y,o),y=I(w,u)),d=g.width,f.__widthGrow&&(y.grow+=f.__widthGrow,d=0,f.__.widthRange&&(y.hasRangeSize=!0)),f.__heightGrow&&Q(f,g,m),y.width+=y.count?d+u:d,y.height=Math.max(y.height,g.height),y.count++):(Z(f,x-g.x,b-g.y),x+=g.width+u));if(h){const{isAutoYGap:i,isFitYGap:n,contentAlign:h,rowXAlign:a,rowYAlign:u}=s;y.count&&(y.grow?E(t,y,G,e):l&&M(y,o,G,_),r&&W(p,y,o)),r?(i?M(p,"height",m,n):p.gap=c,function(t,e,o,i){T(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=H[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.x=e.width-t.width,"center"===i&&(t.x/=2)}}(t,p,h,a),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:r,y:a}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],C(t,h,r,a,o,i),a+=h.height+e.gap}(t,p,u,e)):(T(t,y,h),C(t,y,0,y.y,u,e))}},nt=function(t,e){const o="height",{children:i,itemBox:n}=t,s=O(t,!1),{complex:h,wrap:r,xGap:a,yGap:c,isAutoYGap:l,isFitYGap:_}=s;if(!i.length)return;const p=r&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:c;let f,g,d,w,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,a=i.length;s<a;s++)f=i[w=e?a-1-s:s],f.__.inFlow&&0!==f.__.visible&&(g=j(f,n),h?(f.__flowBounds=g,y||(y=I(w,u)),r&&y.count&&y.height+g.height>m&&(y.grow&&N(t,y,m,e),l&&M(y,o,m,_),W(p,y,o),y=I(w,u)),d=g.height,f.__heightGrow&&(y.grow+=f.__heightGrow,d=0,f.__.heightRange&&(y.hasRangeSize=!0)),f.__widthGrow&&U(f,g,G),y.height+=y.count?d+u:d,y.width=Math.max(y.width,g.width),y.count++):(V(f,x-g.x,b-g.y),b+=g.height+u));if(h){const{isAutoXGap:i,isFitXGap:n,contentAlign:h,rowXAlign:c,rowYAlign:u}=s;y.count&&(y.grow&&N(t,y,m,e),l&&M(y,o,m,_),r&&W(p,y,o)),r?(i?M(p,"width",G,n):p.gap=a,function(t,e,o,i){T(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=X[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.y=e.height-t.height,"center"===i&&(t.y/=2)}}(t,p,h,u),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:r,y:a}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],K(t,h,r,a,o,i),r+=h.width+e.gap}(t,p,c,e)):(T(t,y,h),K(t,y,y.x,0,c,e))}};et.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:it(this);break;case"y":nt(this);break;case"x-reverse":it(this,!0);break;case"y-reverse":nt(this,!0)}this.leafer.created=!0},et.__updateContentBounds=function(){const{padding:t}=this.__,e=this.__layout,o=e.contentBounds===e.boxBounds;t?(o&&e.shrinkContent(),ot(e.contentBounds,e.boxBounds,t,!0)):o||e.shrinkContentCancel()},exports.PathScaler=f,exports.scaleResize=R,exports.scaleResizeFontSize=z,exports.scaleResizeGroup=k,exports.scaleResizePath=B,exports.scaleResizePoints=A;
|
package/dist/flow.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.flow=function(t,e){"use strict";const{M:o,L:i,C:n,Q:s,Z:h,N:r,D:a,X:c,G:l,F:_,O:u,P:f,U:p}=e.PathCommandMap,g={scale(t,e,g){if(!t)return;let w,y=0,x=t.length;for(;y<x;)switch(w=t[y],w){case o:case i:d(t,e,g,y,1),y+=3;break;case n:d(t,e,g,y,3),y+=7;break;case s:d(t,e,g,y,2),y+=5;break;case h:y+=1;break;case r:d(t,e,g,y,2),y+=5;break;case a:d(t,e,g,y,2),y+=9;break;case c:d(t,e,g,y,2),y+=6;break;case l:d(t,e,g,y,2),y+=9;break;case _:d(t,e,g,y,2),y+=5;break;case u:t[y]=l,t.splice(y+4,0,t[y+3],0),d(t,e,g,y,2),y+=9,x+=2;break;case f:t[y]=_,t.splice(y+4,0,t[y+3]),d(t,e,g,y,2),y+=5,x+=1;break;case p:d(t,e,g,y,2),y+=6}},scalePoints(t,e,o,i,n){for(let s=n?i+1:0,h=n?s+2*n:t.length;s<h;s+=2)t[s]*=e,t[s+1]*=o}},{scalePoints:d}=g,w=e.MatrixHelper.get();function y(t,e,o){t.pathInputed?b(t,e,o):(1!==e&&(t.width*=e),1!==o&&(t.height*=o))}function x(t,e,o){const{width:i,height:n}=t.__localBoxBounds;1!==e?(t.fontSize*=e,t.y-=n*(e-o)/2):1!==o&&(t.fontSize*=o,t.x-=i*(o-e)/2)}function b(t,e,o){g.scale(t.__.path,e,o),t.path=t.__.path}function G(t,e,o){g.scalePoints(t.__.points,e,o),t.points=t.__.points}function m(t,e,o){const{children:i}=t;for(let t=0;t<i.length;t++)w.a=e,w.d=o,i[t].transform(w,!0)}const z=e.Leaf.prototype;function R(t,e,o,i){var n,s=arguments.length,h=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(h=(s<3?n(h):s>3?n(e,o,h):n(e,o))||h);return s>3&&h&&Object.defineProperty(e,o,h),h}z.scaleResize=function(t,e=t,o){const i=this;o||i.editConfig&&"scale"===i.editConfig.editSize?(i.scaleX*=t,i.scaleY*=e):(t<0&&(i.scaleX*=-1,t=-t),e<0&&(i.scaleY*=-1,e=-e),this.__scaleResize(t,e))},z.__scaleResize=function(t,e){y(this,t,e)},z.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},z.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},e.Text.prototype.__scaleResize=function(t,e){this.__.__autoSize&&(this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize)?x(this,t,e):y(this,t,e)},e.Path.prototype.__scaleResize=function(t,e){b(this,t,e)},e.Line.prototype.__scaleResize=function(t,e){this.pathInputed?b(this,t,e):this.points?G(this,t,e):this.width*=t},e.Polygon.prototype.__scaleResize=function(t,e){this.pathInputed?b(this,t,e):this.points?G(this,t,e):y(this,t,e)},e.Group.prototype.__scaleResize=function(t,e){m(this,t,e)},e.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?m(this,t,e):(y(this,t,e),this.__.resizeChildren&&m(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;class B extends e.BoxData{}t.Flow=class extends e.Box{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}},R([e.dataProcessor(B)],t.Flow.prototype,"__",void 0),R([e.autoLayoutType("x")],t.Flow.prototype,"flow",void 0),t.Flow=R([e.registerUI()],t.Flow);const A={},F={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},k={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function v(t,o,i){e.AlignHelper.toPoint(i,o,t.__layout.contentBounds,A);const n=t.__;o.x=n.__autoWidth?0:A.x,o.y=n.__autoHeight?0:A.y}const{move:P}=e.PointHelper;function S(t,e,o,i,n,s){const{children:h}=t;let r,a,{x:c,start:l}=e,_=i;c+=o;for(let t=0,o=e.count;t<o;t++)r=h[s?l-t:l+t],r.__.inFlow&&0!==r.__.visible?(a=r.__flowBounds,"from"!==n&&(_=i+(e.height-a.height)/("center"===n?2:1)),P(r,c-a.x,_-a.y),c+=a.width+e.gap):o++}function X(t,e,o){const i="width"===o?"height":"width";t[o]=Math.max(t[o],e[o]),t[i]+=t.count?e[i]+t.gap:e[i],t.list.push(e),t.count++}const H={};function Y(t,e){const{gap:o,flowAlign:i,flowWrap:n,__autoWidth:s,__autoHeight:h}=t.__,r=n&&(e?!s:!h);return"object"==typeof o?(H.xGap=o.x||0,H.yGap=o.y||0):H.xGap=H.yGap=o,H.isAutoXGap="string"==typeof H.xGap&&!s,H.isAutoYGap="string"==typeof H.yGap&&!h,H.complex=r||"top-left"!==i||t.__hasGrow||H.isAutoXGap||H.isAutoYGap,H.wrap=r,H.complex&&(H.isFitXGap="fit"===H.xGap&&!s,H.isFitYGap="fit"===H.yGap&&!h,"object"==typeof i?(H.contentAlign=i.content||"top-left",H.rowXAlign=i.x||"from",H.rowYAlign=i.y||"from"):(H.contentAlign=i,H.rowXAlign=F[i],H.rowYAlign=k[i])),H}function C(t,e){return{x:0,y:0,width:0,height:0,gap:e,start:t,count:0,grow:0}}function L(t,e,o,i){const{count:n}=t;n>1&&(o>t[e]||i)&&(t.gap=(o-t[e])/(n-1),t[e]=o)}function I(t,e){return"box"===e?t.__local:t.__layout.localStrokeBounds}const{within:M}=e.MathHelper;function W(t,e,o,i){let n,s,h,r=0,a=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.width<o?(o-e.width)/c:0,{children:u}=t;_&&(e.width=o);for(let t=0,o=e.count;t<o;t++)n=u[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__widthGrow)&&(h=O(n,n.__flowBounds,_*s),h?(r+=h,c-=s):a&&(n.__.widthRange?a.unshift(n):a.push(n))):o++;r&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__widthGrow,n=e/o*i,h=O(t,s=t.__flowBounds,s.width+n),e-=n-h,o-=i}))}(a,r,c)}function O(t,e,o){const{widthRange:i,lockRatio:n}=t.__,s=i?M(o,i):o,h=s/e.width;return t.scaleResize(h,n?h:1),e.width=s,o-s}const{within:j}=e.MathHelper;function U(t,e,o,i){let n,s,h,r=0,a=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.height<o?(o-e.height)/c:0,{children:u}=t;_&&(e.height=o);for(let t=0,o=e.count;t<o;t++)n=u[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__heightGrow)&&(h=E(n,n.__flowBounds,_*s),h?(r+=h,c-=s):a&&(n.__.heightRange?a.unshift(n):a.push(n))):o++;r&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__heightGrow,n=e/o*i,h=E(t,s=t.__flowBounds,s.height+n),e-=n-h,o-=i}))}(a,r,c)}function E(t,e,o){const{heightRange:i,lockRatio:n}=t.__,s=i?j(o,i):o,h=s/e.height;return t.scaleResize(n?h:1,h),e.height=s,o-s}const{move:N}=e.PointHelper;const{move:D}=e.PointHelper;function T(t,e,o,i,n,s){const{children:h}=t;let r,a,{y:c,start:l}=e,_=o;c+=i;for(let t=0,i=e.count;t<i;t++)r=h[s?l-t:l+t],r.__.inFlow&&0!==r.__.visible?(a=r.__flowBounds,"from"!==n&&(_=o+(e.width-a.width)/("center"===n?2:1)),D(r,_-a.x,c-a.y),c+=a.height+e.gap):i++}const{move:Q}=e.PointHelper;function Z(t){return e.decorateLeafAttr(t,(t=>e.attr({set(o){const i="number"==typeof o?o:0;"autoWidth"===t?this.__widthGrow=i:this.__heightGrow=i,!i||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(t,o)&&e.doBoundsType(this)}})))}const{copyAndSpread:q}=e.BoundsHelper;let J=function(t,e){const o="width",{children:i,itemBox:n}=t,s=Y(t,!0),{complex:h,wrap:r,xGap:a,yGap:c,isAutoXGap:l,isFitXGap:_}=s;if(!i.length)return;const u=r&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},f=l?0:a;let p,g,d,w,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,a=i.length;s<a;s++)p=i[w=e?a-1-s:s],p.__.inFlow&&0!==p.__.visible&&(g=I(p,n),h?(p.__flowBounds=g,y||(y=C(w,f)),r&&y.count&&y.width+g.width>G&&(y.grow?W(t,y,G,e):l&&L(y,o,G,_),X(u,y,o),y=C(w,f)),d=g.width,p.__widthGrow&&(y.grow+=p.__widthGrow,d=0,p.__.widthRange&&(y.hasRangeSize=!0)),p.__heightGrow&&E(p,g,m),y.width+=y.count?d+f:d,y.height=Math.max(y.height,g.height),y.count++):(N(p,x-g.x,b-g.y),x+=g.width+f));if(h){const{isAutoYGap:i,isFitYGap:n,contentAlign:h,rowXAlign:a,rowYAlign:f}=s;y.count&&(y.grow?W(t,y,G,e):l&&L(y,o,G,_),r&&X(u,y,o)),r?(i?L(u,"height",m,n):u.gap=c,function(t,e,o,i){v(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=F[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.x=e.width-t.width,"center"===i&&(t.x/=2)}}(t,u,h,a),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:r,y:a}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],S(t,h,r,a,o,i),a+=h.height+e.gap}(t,u,f,e)):(v(t,y,h),S(t,y,0,y.y,f,e))}},K=function(t,e){const o="height",{children:i,itemBox:n}=t,s=Y(t,!1),{complex:h,wrap:r,xGap:a,yGap:c,isAutoYGap:l,isFitYGap:_}=s;if(!i.length)return;const u=r&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},f=l?0:c;let p,g,d,w,y,{x:x,y:b,width:G,height:m}=t.__layout.contentBounds;for(let s=0,a=i.length;s<a;s++)p=i[w=e?a-1-s:s],p.__.inFlow&&0!==p.__.visible&&(g=I(p,n),h?(p.__flowBounds=g,y||(y=C(w,f)),r&&y.count&&y.height+g.height>m&&(y.grow&&U(t,y,m,e),l&&L(y,o,m,_),X(u,y,o),y=C(w,f)),d=g.height,p.__heightGrow&&(y.grow+=p.__heightGrow,d=0,p.__.heightRange&&(y.hasRangeSize=!0)),p.__widthGrow&&O(p,g,G),y.height+=y.count?d+f:d,y.width=Math.max(y.width,g.width),y.count++):(Q(p,x-g.x,b-g.y),b+=g.height+f));if(h){const{isAutoXGap:i,isFitXGap:n,contentAlign:h,rowXAlign:c,rowYAlign:f}=s;y.count&&(y.grow&&U(t,y,m,e),l&&L(y,o,m,_),r&&X(u,y,o)),r?(i?L(u,"width",G,n):u.gap=a,function(t,e,o,i){v(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=k[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.y=e.height-t.height,"center"===i&&(t.y/=2)}}(t,u,h,f),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:r,y:a}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],T(t,h,r,a,o,i),r+=h.width+e.gap}(t,u,c,e)):(v(t,y,h),T(t,y,y.x,0,c,e))}};return e.UI.changeAttr("autoWidth",void 0,Z),e.UI.changeAttr("autoHeight",void 0,Z),e.Box.prototype.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:J(this);break;case"y":K(this);break;case"x-reverse":J(this,!0);break;case"y-reverse":K(this,!0)}this.leafer.created=!0},e.Box.prototype.__updateContentBounds=function(){const{padding:t}=this.__,e=this.__layout,o=e.contentBounds===e.boxBounds;t?(o&&e.shrinkContent(),q(e.contentBounds,e.boxBounds,t,!0)):o||e.shrinkContentCancel()},t.PathScaler=g,t.scaleResize=y,t.scaleResizeFontSize=x,t.scaleResizeGroup=m,t.scaleResizePath=b,t.scaleResizePoints=G,t}({},LeaferUI);
|
|
1
|
+
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.flow=function(t,e){"use strict";const{M:o,L:i,C:n,Q:s,Z:h,N:a,D:r,X:c,G:l,F:_,O:u,P:p,U:f}=e.PathCommandMap,g={scale(t,e,g){if(!t)return;let w,y=0,b=t.length;for(;y<b;)switch(w=t[y],w){case o:case i:d(t,e,g,y,1),y+=3;break;case n:d(t,e,g,y,3),y+=7;break;case s:d(t,e,g,y,2),y+=5;break;case h:y+=1;break;case a:d(t,e,g,y,2),y+=5;break;case r:d(t,e,g,y,2),y+=9;break;case c:d(t,e,g,y,2),y+=6;break;case l:d(t,e,g,y,2),y+=9;break;case _:d(t,e,g,y,2),y+=5;break;case u:t[y]=l,t.splice(y+4,0,t[y+3],0),d(t,e,g,y,2),y+=9,b+=2;break;case p:t[y]=_,t.splice(y+4,0,t[y+3]),d(t,e,g,y,2),y+=5,b+=1;break;case f:d(t,e,g,y,2),y+=6}},scalePoints(t,e,o,i,n){for(let s=n?i+1:0,h=n?s+2*n:t.length;s<h;s+=2)t[s]*=e,t[s+1]*=o}},{scalePoints:d}=g,w=e.MatrixHelper.get(),{topLeft:y,top:b,topRight:x,right:G,bottom:m,left:R}=e.Direction9;function z(t,e,o){t.pathInputed?A(t,e,o):(1!==e&&(t.width*=e),1!==o&&(t.height*=o))}function B(t,e,o){const{app:i}=t,n=i&&i.editor;let s=e;if(n.editing){const i=t.__layout;let{width:h,height:a}=i.boxBounds;switch(h*=o-e,a*=e-o,n.resizeDirection){case b:case m:s=o,i.affectScaleOrRotation?t.moveInner(-h/2,0):t.x-=h/2;break;case R:case G:i.affectScaleOrRotation?t.moveInner(0,-a/2):t.y-=a/2;break;case y:case x:i.affectScaleOrRotation?t.moveInner(0,-a):t.y-=a}}t.fontSize*=s;const h=t.__;h.__autoWidth||(t.width*=s),h.__autoHeight||(t.height*=s)}function A(t,e,o){g.scale(t.__.path,e,o),t.path=t.__.path}function k(t,e,o){g.scalePoints(t.__.points,e,o),t.points=t.__.points}function F(t,e,o){const{children:i}=t;for(let t=0;t<i.length;t++)w.a=e,w.d=o,i[t].transform(w,!0)}const v=e.Leaf.prototype;function P(t,e,o,i){var n,s=arguments.length,h=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(h=(s<3?n(h):s>3?n(e,o,h):n(e,o))||h);return s>3&&h&&Object.defineProperty(e,o,h),h}v.scaleResize=function(t,e=t,o){const i=this;o||i.editConfig&&"scale"===i.editConfig.editSize?(i.scaleX*=t,i.scaleY*=e):(t<0&&(i.scaleX*=-1,t=-t),e<0&&(i.scaleY*=-1,e=-e),this.__scaleResize(t,e))},v.__scaleResize=function(t,e){z(this,t,e)},v.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},v.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},e.Text.prototype.__scaleResize=function(t,e){this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize?B(this,t,e):z(this,t,e)},e.Path.prototype.__scaleResize=function(t,e){A(this,t,e)},e.Line.prototype.__scaleResize=function(t,e){this.pathInputed?A(this,t,e):this.points?k(this,t,e):this.width*=t},e.Polygon.prototype.__scaleResize=function(t,e){this.pathInputed?A(this,t,e):this.points?k(this,t,e):z(this,t,e)},e.Group.prototype.__scaleResize=function(t,e){F(this,t,e)},e.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?F(this,t,e):(z(this,t,e),this.__.resizeChildren&&F(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;class S extends e.BoxData{}t.Flow=class extends e.Box{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}},P([e.dataProcessor(S)],t.Flow.prototype,"__",void 0),P([e.autoLayoutType("x")],t.Flow.prototype,"flow",void 0),t.Flow=P([e.registerUI()],t.Flow);const H={},X={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},L={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function T(t,o,i){const n=t.__,{contentBounds:s}=t.__layout;e.AlignHelper.toPoint(i,o,s,H),o.x=n.__autoWidth?s.x:H.x,o.y=n.__autoHeight?s.y:H.y}const{move:Y}=e.PointHelper;function I(t,e,o,i,n,s){const{children:h}=t;let a,r,{x:c,start:l}=e,_=i;c+=o;for(let t=0,o=e.count;t<o;t++)a=h[s?l-t:l+t],a.__.inFlow&&0!==a.__.visible?(r=a.__flowBounds,"from"!==n&&(_=i+(e.height-r.height)/("center"===n?2:1)),Y(a,c-r.x,_-r.y),c+=r.width+e.gap):o++}function C(t,e,o){const i="width"===o?"height":"width";t[o]=Math.max(t[o],e[o]),t[i]+=t.count?e[i]+t.gap:e[i],t.list.push(e),t.count++}const W={};function O(t,e){const{gap:o,flowAlign:i,flowWrap:n,__autoWidth:s,__autoHeight:h}=t.__,a=n&&(e?!s:!h);return"object"==typeof o?(W.xGap=o.x||0,W.yGap=o.y||0):W.xGap=W.yGap=o,W.isAutoXGap="string"==typeof W.xGap&&!s,W.isAutoYGap="string"==typeof W.yGap&&!h,W.complex=a||"top-left"!==i||t.__hasGrow||W.isAutoXGap||W.isAutoYGap,W.wrap=a,W.complex&&(W.isFitXGap="fit"===W.xGap&&!s,W.isFitYGap="fit"===W.yGap&&!h,"object"==typeof i?(W.contentAlign=i.content||"top-left",W.rowXAlign=i.x||"from",W.rowYAlign=i.y||"from"):(W.contentAlign=i,W.rowXAlign=X[i],W.rowYAlign=L[i])),W}function M(t,e){return{x:0,y:0,width:0,height:0,gap:e,start:t,count:0,grow:0}}function j(t,e,o,i){const{count:n}=t;n>1&&(o>t[e]||i)&&(t.gap=(o-t[e])/(n-1),t[e]=o)}function D(t,e){return"box"===e?t.__local:t.__layout.localStrokeBounds}const{within:E}=e.MathHelper;function N(t,e,o,i){let n,s,h,a=0,r=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.width<o?(o-e.width)/c:0,{children:u}=t;_&&(e.width=o);for(let t=0,o=e.count;t<o;t++)n=u[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__widthGrow)&&(h=U(n,n.__flowBounds,_*s),h?(a+=h,c-=s):r&&(n.__.widthRange?r.unshift(n):r.push(n))):o++;a&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__widthGrow,n=e/o*i,h=U(t,s=t.__flowBounds,s.width+n),e-=n-h,o-=i}))}(r,a,c)}function U(t,e,o){const{widthRange:i,lockRatio:n}=t.__,s=i?E(o,i):o,h=s/e.width;return t.scaleResize(h,n?h:1),e.width=s,o-s}const{within:Q}=e.MathHelper;function Z(t,e,o,i){let n,s,h,a=0,r=e.hasRangeSize&&[],{grow:c,start:l}=e;const _=e.height<o?(o-e.height)/c:0,{children:u}=t;_&&(e.height=o);for(let t=0,o=e.count;t<o;t++)n=u[i?l-t:l+t],n.__.inFlow&&0!==n.__.visible?(s=n.__heightGrow)&&(h=q(n,n.__flowBounds,_*s),h?(a+=h,c-=s):r&&(n.__.heightRange?r.unshift(n):r.push(n))):o++;a&&function(t,e,o){let i,n,s,h;t.forEach((t=>{i=t.__heightGrow,n=e/o*i,h=q(t,s=t.__flowBounds,s.height+n),e-=n-h,o-=i}))}(r,a,c)}function q(t,e,o){const{heightRange:i,lockRatio:n}=t.__,s=i?Q(o,i):o,h=s/e.height;return t.scaleResize(n?h:1,h),e.height=s,o-s}const{move:J}=e.PointHelper;const{move:K}=e.PointHelper;function V(t,e,o,i,n,s){const{children:h}=t;let a,r,{y:c,start:l}=e,_=o;c+=i;for(let t=0,i=e.count;t<i;t++)a=h[s?l-t:l+t],a.__.inFlow&&0!==a.__.visible?(r=a.__flowBounds,"from"!==n&&(_=o+(e.width-r.width)/("center"===n?2:1)),K(a,_-r.x,c-r.y),c+=r.height+e.gap):i++}const{move:$}=e.PointHelper;function tt(t){return e.decorateLeafAttr(t,(t=>e.attr({set(o){const i="number"==typeof o?o:0;"autoWidth"===t?this.__widthGrow=i:this.__heightGrow=i,!i||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(t,o)&&e.doBoundsType(this)}})))}const et=e.UI.prototype,ot=e.Box.prototype;e.autoLayoutType(!1)(et,"flow"),e.boundsType(0)(et,"gap"),e.boundsType("top-left")(et,"flowAlign"),e.boundsType(!1)(et,"flowWrap"),e.boundsType("box")(et,"itemBox"),e.boundsType(!0)(et,"inFlow"),tt()(et,"autoWidth"),tt()(et,"autoHeight"),e.boundsType()(et,"lockRatio"),e.boundsType()(et,"autoBox"),e.boundsType()(et,"widthRange"),e.boundsType()(et,"heightRange");const{copyAndSpread:it}=e.BoundsHelper;let nt=function(t,e){const o="width",{children:i,itemBox:n}=t,s=O(t,!0),{complex:h,wrap:a,xGap:r,yGap:c,isAutoXGap:l,isFitXGap:_}=s;if(!i.length)return;const u=a&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},p=l?0:r;let f,g,d,w,y,{x:b,y:x,width:G,height:m}=t.__layout.contentBounds;for(let s=0,r=i.length;s<r;s++)f=i[w=e?r-1-s:s],f.__.inFlow&&0!==f.__.visible&&(g=D(f,n),h?(f.__flowBounds=g,y||(y=M(w,p)),a&&y.count&&y.width+g.width>G&&(y.grow?N(t,y,G,e):l&&j(y,o,G,_),C(u,y,o),y=M(w,p)),d=g.width,f.__widthGrow&&(y.grow+=f.__widthGrow,d=0,f.__.widthRange&&(y.hasRangeSize=!0)),f.__heightGrow&&q(f,g,m),y.width+=y.count?d+p:d,y.height=Math.max(y.height,g.height),y.count++):(J(f,b-g.x,x-g.y),b+=g.width+p));if(h){const{isAutoYGap:i,isFitYGap:n,contentAlign:h,rowXAlign:r,rowYAlign:p}=s;y.count&&(y.grow?N(t,y,G,e):l&&j(y,o,G,_),a&&C(u,y,o)),a?(i?j(u,"height",m,n):u.gap=c,function(t,e,o,i){T(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=X[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.x=e.width-t.width,"center"===i&&(t.x/=2)}}(t,u,h,r),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:a,y:r}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],I(t,h,a,r,o,i),r+=h.height+e.gap}(t,u,p,e)):(T(t,y,h),I(t,y,0,y.y,p,e))}},st=function(t,e){const o="height",{children:i,itemBox:n}=t,s=O(t,!1),{complex:h,wrap:a,xGap:r,yGap:c,isAutoYGap:l,isFitYGap:_}=s;if(!i.length)return;const u=a&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},p=l?0:c;let f,g,d,w,y,{x:b,y:x,width:G,height:m}=t.__layout.contentBounds;for(let s=0,r=i.length;s<r;s++)f=i[w=e?r-1-s:s],f.__.inFlow&&0!==f.__.visible&&(g=D(f,n),h?(f.__flowBounds=g,y||(y=M(w,p)),a&&y.count&&y.height+g.height>m&&(y.grow&&Z(t,y,m,e),l&&j(y,o,m,_),C(u,y,o),y=M(w,p)),d=g.height,f.__heightGrow&&(y.grow+=f.__heightGrow,d=0,f.__.heightRange&&(y.hasRangeSize=!0)),f.__widthGrow&&U(f,g,G),y.height+=y.count?d+p:d,y.width=Math.max(y.width,g.width),y.count++):($(f,b-g.x,x-g.y),x+=g.height+p));if(h){const{isAutoXGap:i,isFitXGap:n,contentAlign:h,rowXAlign:c,rowYAlign:p}=s;y.count&&(y.grow&&Z(t,y,m,e),l&&j(y,o,m,_),a&&C(u,y,o)),a?(i?j(u,"width",G,n):u.gap=r,function(t,e,o,i){T(t,e,o);const{list:n}=e;if(n.length>1&&(i||(i=L[o]),"from"!==i)){let t;for(let o=0,s=n.length;o<s;o++)t=n[o],t.y=e.height-t.height,"center"===i&&(t.y/=2)}}(t,u,h,p),function(t,e,o,i){const{list:n}=e,s="reverse"===t.__.flowWrap;let h,{x:a,y:r}=e;for(let c=0,l=n.length;c<l;c++)h=n[s?l-1-c:c],V(t,h,a,r,o,i),a+=h.width+e.gap}(t,u,c,e)):(T(t,y,h),V(t,y,y.x,0,c,e))}};return ot.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:nt(this);break;case"y":st(this);break;case"x-reverse":nt(this,!0);break;case"y-reverse":st(this,!0)}this.leafer.created=!0},ot.__updateContentBounds=function(){const{padding:t}=this.__,e=this.__layout,o=e.contentBounds===e.boxBounds;t?(o&&e.shrinkContent(),it(e.contentBounds,e.boxBounds,t,!0)):o||e.shrinkContentCancel()},t.PathScaler=g,t.scaleResize=z,t.scaleResizeFontSize=B,t.scaleResizeGroup=F,t.scaleResizePath=A,t.scaleResizePoints=k,t}({},LeaferUI);
|
package/package.json
CHANGED
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer-in/flow",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "@leafer-in/flow",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"type": "module",
|
|
7
8
|
"main": "dist/flow.esm.js",
|
|
9
|
+
"exports": {
|
|
10
|
+
"import": "./dist/flow.esm.js",
|
|
11
|
+
"require": "./dist/flow.cjs",
|
|
12
|
+
"types": "./types/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"types": "types/index.d.ts",
|
|
8
15
|
"unpkg": "dist/flow.js",
|
|
9
16
|
"jsdelivr": "dist/flow.js",
|
|
10
|
-
"types": "types/index.d.ts",
|
|
11
17
|
"files": [
|
|
18
|
+
"src",
|
|
12
19
|
"types",
|
|
13
20
|
"dist"
|
|
14
21
|
],
|
|
@@ -27,9 +34,9 @@
|
|
|
27
34
|
"leaferjs"
|
|
28
35
|
],
|
|
29
36
|
"dependencies": {
|
|
30
|
-
"@leafer-ui/draw": "1.0.
|
|
31
|
-
"@leafer-ui/interface": "1.0.
|
|
32
|
-
"@leafer-in/resize": "1.0.
|
|
33
|
-
"@leafer-in/interface": "1.0.
|
|
37
|
+
"@leafer-ui/draw": "^1.0.3",
|
|
38
|
+
"@leafer-ui/interface": "^1.0.3",
|
|
39
|
+
"@leafer-in/resize": "^1.0.3",
|
|
40
|
+
"@leafer-in/interface": "^1.0.3"
|
|
34
41
|
}
|
|
35
42
|
}
|
package/src/Flow.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { IFlow, IFlowData, IFlowInputData, IFlowType } from '@leafer-ui/interface'
|
|
2
|
+
import { registerUI, dataProcessor, Box, autoLayoutType } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { FlowData } from './data/FlowData'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
@registerUI()
|
|
8
|
+
export class Flow extends Box implements IFlow {
|
|
9
|
+
|
|
10
|
+
public get __tag() { return 'Flow' }
|
|
11
|
+
|
|
12
|
+
@dataProcessor(FlowData)
|
|
13
|
+
declare public __: IFlowData
|
|
14
|
+
|
|
15
|
+
@autoLayoutType('x')
|
|
16
|
+
declare public flow?: IFlowType
|
|
17
|
+
|
|
18
|
+
constructor(data?: IFlowInputData) {
|
|
19
|
+
super(data)
|
|
20
|
+
this.__hasAutoLayout = true
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
}
|
package/src/decorate.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { attr, decorateLeafAttr, doBoundsType } from '@leafer-ui/draw'
|
|
2
|
+
import { IValue } from '@leafer/interface'
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export function autoBoundsType(defaultValue?: IValue) {
|
|
6
|
+
return decorateLeafAttr(defaultValue, (key: string) => attr({
|
|
7
|
+
set(value: IValue) {
|
|
8
|
+
const grow = typeof value === 'number' ? value : 0
|
|
9
|
+
key === 'autoWidth' ? this.__widthGrow = grow : this.__heightGrow = grow
|
|
10
|
+
if (grow && !(this.parent && this.parent.__hasGrow)) this.waitParent(() => { this.parent.__hasGrow = true }) // 需要优化, 移入到其他容器中的时候也需要优化
|
|
11
|
+
this.__setAttr(key, value) && doBoundsType(this)
|
|
12
|
+
}
|
|
13
|
+
}))
|
|
14
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
export * from '@leafer-in/resize'
|
|
2
|
+
|
|
3
|
+
export { Flow } from './Flow'
|
|
4
|
+
|
|
5
|
+
import { BoundsHelper, Box, UI, autoLayoutType, boundsType } from '@leafer-ui/draw'
|
|
6
|
+
|
|
7
|
+
import { flowX } from './layout/flowX'
|
|
8
|
+
import { flowY } from './layout/flowY'
|
|
9
|
+
import { autoBoundsType } from './decorate'
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
const ui = UI.prototype, box = Box.prototype
|
|
13
|
+
|
|
14
|
+
// addAttr
|
|
15
|
+
autoLayoutType(false)(ui, 'flow')
|
|
16
|
+
boundsType(0)(ui, 'gap')
|
|
17
|
+
boundsType('top-left')(ui, 'flowAlign')
|
|
18
|
+
boundsType(false)(ui, 'flowWrap')
|
|
19
|
+
|
|
20
|
+
boundsType('box')(ui, 'itemBox')
|
|
21
|
+
boundsType(true)(ui, 'inFlow')
|
|
22
|
+
|
|
23
|
+
autoBoundsType()(ui, 'autoWidth')
|
|
24
|
+
autoBoundsType()(ui, 'autoHeight')
|
|
25
|
+
boundsType()(ui, 'lockRatio')
|
|
26
|
+
boundsType()(ui, 'autoBox')
|
|
27
|
+
boundsType()(ui, 'widthRange')
|
|
28
|
+
boundsType()(ui, 'heightRange')
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
const { copyAndSpread } = BoundsHelper
|
|
32
|
+
let doFlowX = flowX, doFlowY = flowY
|
|
33
|
+
|
|
34
|
+
box.__updateFlowLayout = function (): void {
|
|
35
|
+
this.leafer.created = false
|
|
36
|
+
const { flow } = this.__
|
|
37
|
+
switch (flow) {
|
|
38
|
+
case 'x':
|
|
39
|
+
case true:
|
|
40
|
+
doFlowX(this)
|
|
41
|
+
break
|
|
42
|
+
case 'y':
|
|
43
|
+
doFlowY(this)
|
|
44
|
+
break
|
|
45
|
+
case 'x-reverse':
|
|
46
|
+
doFlowX(this, true)
|
|
47
|
+
break
|
|
48
|
+
case 'y-reverse':
|
|
49
|
+
doFlowY(this, true)
|
|
50
|
+
break
|
|
51
|
+
}
|
|
52
|
+
this.leafer.created = true
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
box.__updateContentBounds = function (): void {
|
|
56
|
+
const { padding } = this.__
|
|
57
|
+
const layout = this.__layout
|
|
58
|
+
const same = layout.contentBounds === layout.boxBounds
|
|
59
|
+
|
|
60
|
+
if (padding) {
|
|
61
|
+
if (same) layout.shrinkContent()
|
|
62
|
+
copyAndSpread(layout.contentBounds, layout.boxBounds, padding, true)
|
|
63
|
+
} else {
|
|
64
|
+
if (!same) layout.shrinkContentCancel()
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IFlowAlign, IPointData } from '@leafer-ui/interface'
|
|
2
|
+
import { AlignHelper } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IFlowAlignToAxisAlignMap } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const point = {} as IPointData
|
|
8
|
+
|
|
9
|
+
export const alignToInnerXMap: IFlowAlignToAxisAlignMap = {
|
|
10
|
+
'top-left': 'from',
|
|
11
|
+
'top': 'center',
|
|
12
|
+
'top-right': 'to',
|
|
13
|
+
'right': 'to',
|
|
14
|
+
'bottom-right': 'to',
|
|
15
|
+
'bottom': 'center',
|
|
16
|
+
'bottom-left': 'from',
|
|
17
|
+
'left': 'from',
|
|
18
|
+
'center': 'center',
|
|
19
|
+
'baseline-left': 'from',
|
|
20
|
+
'baseline-center': 'center',
|
|
21
|
+
'baseline-right': 'to',
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const alignToInnerYMap: IFlowAlignToAxisAlignMap = {
|
|
25
|
+
'top-left': 'from',
|
|
26
|
+
'top': 'from',
|
|
27
|
+
'top-right': 'from',
|
|
28
|
+
'right': 'center',
|
|
29
|
+
'bottom-right': 'to',
|
|
30
|
+
'bottom': 'to',
|
|
31
|
+
'bottom-left': 'to',
|
|
32
|
+
'left': 'center',
|
|
33
|
+
'center': 'center',
|
|
34
|
+
'baseline-left': 'to',
|
|
35
|
+
'baseline-center': 'to',
|
|
36
|
+
'baseline-right': 'to',
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export function alignContent(box: IBox, content: IBoundsData, align: IFlowAlign): void {
|
|
40
|
+
const data = box.__
|
|
41
|
+
const { contentBounds } = box.__layout
|
|
42
|
+
AlignHelper.toPoint(align as any, content, contentBounds, point)
|
|
43
|
+
content.x = data.__autoWidth ? contentBounds.x : point.x
|
|
44
|
+
content.y = data.__autoHeight ? contentBounds.y : point.y
|
|
45
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { IBox } from '@leafer-ui/interface'
|
|
2
|
+
|
|
3
|
+
import { IFlowWrapDrawData, IFlowDrawData, IFlowParseData } from '@leafer-in/interface'
|
|
4
|
+
|
|
5
|
+
import { alignToInnerXMap, alignToInnerYMap } from './align'
|
|
6
|
+
|
|
7
|
+
const p = {} as IFlowParseData
|
|
8
|
+
|
|
9
|
+
export function getParseData(box: IBox, isFlowX: boolean): IFlowParseData {
|
|
10
|
+
const { gap, flowAlign: align, flowWrap: wrap, __autoWidth, __autoHeight } = box.__
|
|
11
|
+
const needWrap = wrap && (isFlowX ? !__autoWidth : !__autoHeight)
|
|
12
|
+
|
|
13
|
+
if (typeof gap === 'object') {
|
|
14
|
+
p.xGap = gap.x || 0
|
|
15
|
+
p.yGap = gap.y || 0
|
|
16
|
+
} else {
|
|
17
|
+
p.xGap = p.yGap = gap
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
p.isAutoXGap = typeof p.xGap === 'string' && !__autoWidth
|
|
21
|
+
p.isAutoYGap = typeof p.yGap === 'string' && !__autoHeight
|
|
22
|
+
|
|
23
|
+
p.complex = needWrap || align !== 'top-left' || box.__hasGrow || p.isAutoXGap || p.isAutoYGap
|
|
24
|
+
p.wrap = needWrap
|
|
25
|
+
|
|
26
|
+
if (p.complex) {
|
|
27
|
+
p.isFitXGap = p.xGap === 'fit' && !__autoWidth
|
|
28
|
+
p.isFitYGap = p.yGap === 'fit' && !__autoHeight
|
|
29
|
+
|
|
30
|
+
if (typeof align === 'object') {
|
|
31
|
+
p.contentAlign = align.content || 'top-left'
|
|
32
|
+
p.rowXAlign = align.x || 'from'
|
|
33
|
+
p.rowYAlign = align.y || 'from'
|
|
34
|
+
} else {
|
|
35
|
+
p.contentAlign = align
|
|
36
|
+
p.rowXAlign = alignToInnerXMap[align]
|
|
37
|
+
p.rowYAlign = alignToInnerYMap[align]
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return p
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export function getDrawData(start: number, gap: number): IFlowDrawData {
|
|
46
|
+
return { x: 0, y: 0, width: 0, height: 0, gap, start, count: 0, grow: 0 }
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export function getWrapDrawData(): IFlowWrapDrawData {
|
|
50
|
+
return { x: 0, y: 0, width: 0, height: 0, gap: 0, count: 0, list: [] }
|
|
51
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IGapBoundsData, ISide } from '@leafer-in/interface'
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
export function autoGap(data: IGapBoundsData, side: ISide, sideTotal: number, fit: boolean): void {
|
|
5
|
+
const { count } = data
|
|
6
|
+
if (count > 1 && (sideTotal > data[side] || fit)) {
|
|
7
|
+
data.gap = (sideTotal - data[side]) / (count - 1)
|
|
8
|
+
data[side] = sideTotal
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IFlowWrapDrawData, IFlowDrawData, ISide } from '@leafer-in/interface'
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
export function flowWrap(wrapData: IFlowWrapDrawData, data: IFlowDrawData, wrapSide: ISide): void {
|
|
5
|
+
const otherSide = wrapSide === 'width' ? 'height' : 'width'
|
|
6
|
+
wrapData[wrapSide] = Math.max(wrapData[wrapSide], data[wrapSide])
|
|
7
|
+
wrapData[otherSide] += wrapData.count ? data[otherSide] + wrapData.gap : data[otherSide]
|
|
8
|
+
wrapData.list.push(data)
|
|
9
|
+
wrapData.count++
|
|
10
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IUI, IPointData } from '@leafer-ui/interface'
|
|
2
|
+
import { PointHelper } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IFlowDrawData } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
import { align } from './x/align'
|
|
7
|
+
import { alignContent } from './common/align'
|
|
8
|
+
import { layout, layoutX } from './x/layout'
|
|
9
|
+
import { flowWrap } from './common/wrap'
|
|
10
|
+
import { getDrawData, getParseData, getWrapDrawData } from './common/data'
|
|
11
|
+
import { autoGap } from './common/gap'
|
|
12
|
+
import { getItemBounds } from './common/bounds'
|
|
13
|
+
import { growX } from './x/grow'
|
|
14
|
+
import { resizeHeight } from './y/grow'
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const { move } = PointHelper
|
|
18
|
+
|
|
19
|
+
export function flowX(box: IBox, reverse?: boolean): void {
|
|
20
|
+
const side = 'width', { children, itemBox } = box, pData = getParseData(box, true)
|
|
21
|
+
const { complex, wrap, xGap, yGap, isAutoXGap, isFitXGap } = pData
|
|
22
|
+
if (!children.length) return
|
|
23
|
+
|
|
24
|
+
const wrapData = wrap && getWrapDrawData(), xGapTempNum = isAutoXGap ? 0 : xGap as number
|
|
25
|
+
let child: IUI, local: IBoundsData, localWidth: number, index: number, data: IFlowDrawData, { x, y, width, height } = box.__layout.contentBounds
|
|
26
|
+
|
|
27
|
+
for (let i = 0, len = children.length; i < len; i++) {
|
|
28
|
+
child = children[index = reverse ? len - 1 - i : i]
|
|
29
|
+
|
|
30
|
+
if (child.__.inFlow && child.__.visible !== 0) {
|
|
31
|
+
|
|
32
|
+
local = getItemBounds(child, itemBox)
|
|
33
|
+
|
|
34
|
+
if (complex) {
|
|
35
|
+
|
|
36
|
+
child.__flowBounds = local
|
|
37
|
+
if (!data) data = getDrawData(index, xGapTempNum)
|
|
38
|
+
|
|
39
|
+
if (wrap && data.count && data.width + local.width > width) {
|
|
40
|
+
|
|
41
|
+
if (data.grow) growX(box, data, width, reverse)
|
|
42
|
+
else if (isAutoXGap) autoGap(data, side, width, isFitXGap)
|
|
43
|
+
flowWrap(wrapData, data, side)
|
|
44
|
+
|
|
45
|
+
data = getDrawData(index, xGapTempNum)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
localWidth = local.width
|
|
49
|
+
|
|
50
|
+
if (child.__widthGrow) {
|
|
51
|
+
data.grow += child.__widthGrow, localWidth = 0
|
|
52
|
+
if (child.__.widthRange) data.hasRangeSize = true
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
if (child.__heightGrow) resizeHeight(child, local, height)
|
|
56
|
+
|
|
57
|
+
data.width += data.count ? localWidth + xGapTempNum : localWidth
|
|
58
|
+
data.height = Math.max(data.height, local.height)
|
|
59
|
+
data.count++
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
} else {
|
|
63
|
+
|
|
64
|
+
move(child as IPointData, x - local.x, y - local.y)
|
|
65
|
+
x += local.width + xGapTempNum
|
|
66
|
+
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (complex) {
|
|
74
|
+
|
|
75
|
+
const { isAutoYGap, isFitYGap, contentAlign, rowXAlign, rowYAlign } = pData
|
|
76
|
+
|
|
77
|
+
if (data.count) {
|
|
78
|
+
if (data.grow) growX(box, data, width, reverse)
|
|
79
|
+
else if (isAutoXGap) autoGap(data, side, width, isFitXGap)
|
|
80
|
+
if (wrap) flowWrap(wrapData, data, side)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
if (wrap) {
|
|
84
|
+
|
|
85
|
+
if (isAutoYGap) autoGap(wrapData, 'height', height, isFitYGap)
|
|
86
|
+
else wrapData.gap = yGap as number
|
|
87
|
+
|
|
88
|
+
align(box, wrapData, contentAlign, rowXAlign)
|
|
89
|
+
layout(box, wrapData, rowYAlign, reverse)
|
|
90
|
+
|
|
91
|
+
} else {
|
|
92
|
+
|
|
93
|
+
alignContent(box, data, contentAlign)
|
|
94
|
+
layoutX(box, data, 0, data.y, rowYAlign, reverse)
|
|
95
|
+
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
// if (typeof autoWidth === 'object') {
|
|
103
|
+
|
|
104
|
+
// const realWidth = width * autoWidth.value / 100 // 百分比
|
|
105
|
+
// data.width += data.count ? realWidth + xGapTempNum : realWidth
|
|
106
|
+
// const scaleX = realWidth / local.width
|
|
107
|
+
// child.scaleResize(scaleX, 1, true)
|
|
108
|
+
// local.width = realWidth
|
|
109
|
+
|
|
110
|
+
// } else
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IUI, IPointData } from '@leafer-ui/interface'
|
|
2
|
+
import { PointHelper } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IFlowDrawData } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
import { align } from './y/align'
|
|
7
|
+
import { alignContent } from './common/align'
|
|
8
|
+
import { layout, layoutY } from './y/layout'
|
|
9
|
+
import { flowWrap } from './common/wrap'
|
|
10
|
+
import { getDrawData, getParseData, getWrapDrawData } from './common/data'
|
|
11
|
+
import { autoGap } from './common/gap'
|
|
12
|
+
import { getItemBounds } from './common/bounds'
|
|
13
|
+
import { growY } from './y/grow'
|
|
14
|
+
import { resizeWidth } from './x/grow'
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const { move } = PointHelper
|
|
18
|
+
|
|
19
|
+
export function flowY(box: IBox, reverse?: boolean): void {
|
|
20
|
+
const side = 'height', { children, itemBox } = box, pData = getParseData(box, false)
|
|
21
|
+
const { complex, wrap, xGap, yGap, isAutoYGap, isFitYGap } = pData
|
|
22
|
+
if (!children.length) return
|
|
23
|
+
|
|
24
|
+
const wrapData = wrap && getWrapDrawData(), yGapTempNum = isAutoYGap ? 0 : yGap as number
|
|
25
|
+
let child: IUI, local: IBoundsData, localHeight: number, index: number, data: IFlowDrawData, { x, y, width, height } = box.__layout.contentBounds
|
|
26
|
+
|
|
27
|
+
for (let i = 0, len = children.length; i < len; i++) {
|
|
28
|
+
child = children[index = reverse ? len - 1 - i : i]
|
|
29
|
+
|
|
30
|
+
if (child.__.inFlow && child.__.visible !== 0) {
|
|
31
|
+
|
|
32
|
+
local = getItemBounds(child, itemBox)
|
|
33
|
+
|
|
34
|
+
if (complex) {
|
|
35
|
+
|
|
36
|
+
child.__flowBounds = local
|
|
37
|
+
if (!data) data = getDrawData(index, yGapTempNum)
|
|
38
|
+
|
|
39
|
+
if (wrap && data.count && data.height + local.height > height) {
|
|
40
|
+
if (data.grow) growY(box, data, height, reverse)
|
|
41
|
+
if (isAutoYGap) autoGap(data, side, height, isFitYGap)
|
|
42
|
+
flowWrap(wrapData, data, side)
|
|
43
|
+
|
|
44
|
+
data = getDrawData(index, yGapTempNum)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
localHeight = local.height
|
|
48
|
+
|
|
49
|
+
if (child.__heightGrow) {
|
|
50
|
+
data.grow += child.__heightGrow, localHeight = 0
|
|
51
|
+
if (child.__.heightRange) data.hasRangeSize = true
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
if (child.__widthGrow) resizeWidth(child, local, width)
|
|
55
|
+
|
|
56
|
+
data.height += data.count ? localHeight + yGapTempNum : localHeight
|
|
57
|
+
data.width = Math.max(data.width, local.width)
|
|
58
|
+
data.count++
|
|
59
|
+
|
|
60
|
+
} else {
|
|
61
|
+
|
|
62
|
+
move(child as IPointData, x - local.x, y - local.y)
|
|
63
|
+
y += local.height + yGapTempNum
|
|
64
|
+
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (complex) {
|
|
72
|
+
|
|
73
|
+
const { isAutoXGap, isFitXGap, contentAlign, rowXAlign, rowYAlign } = pData
|
|
74
|
+
|
|
75
|
+
if (data.count) {
|
|
76
|
+
if (data.grow) growY(box, data, height, reverse)
|
|
77
|
+
if (isAutoYGap) autoGap(data, side, height, isFitYGap)
|
|
78
|
+
if (wrap) flowWrap(wrapData, data, side)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (wrap) {
|
|
82
|
+
|
|
83
|
+
if (!isAutoXGap) wrapData.gap = xGap as number
|
|
84
|
+
else autoGap(wrapData, 'width', width, isFitXGap)
|
|
85
|
+
|
|
86
|
+
align(box, wrapData, contentAlign, rowYAlign)
|
|
87
|
+
layout(box, wrapData, rowXAlign, reverse)
|
|
88
|
+
|
|
89
|
+
} else {
|
|
90
|
+
|
|
91
|
+
alignContent(box, data, contentAlign)
|
|
92
|
+
layoutY(box, data, data.x, 0, rowXAlign, reverse)
|
|
93
|
+
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
}
|
|
97
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { IBox, IFlowAlign, IAxisAlign } from '@leafer-ui/interface'
|
|
2
|
+
|
|
3
|
+
import { IFlowDrawData, IFlowWrapDrawData } from '@leafer-in/interface'
|
|
4
|
+
|
|
5
|
+
import { alignContent, alignToInnerXMap } from '../common/align'
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export function align(box: IBox, data: IFlowWrapDrawData, contentAlign: IFlowAlign, innerXAlign: IAxisAlign): void {
|
|
9
|
+
alignContent(box, data, contentAlign)
|
|
10
|
+
|
|
11
|
+
const { list } = data
|
|
12
|
+
if (list.length > 1) {
|
|
13
|
+
|
|
14
|
+
if (!innerXAlign) innerXAlign = alignToInnerXMap[contentAlign]
|
|
15
|
+
|
|
16
|
+
if (innerXAlign !== 'from') {
|
|
17
|
+
let row: IFlowDrawData
|
|
18
|
+
|
|
19
|
+
for (let i = 0, len = list.length; i < len; i++) {
|
|
20
|
+
row = list[i]
|
|
21
|
+
row.x = data.width - row.width
|
|
22
|
+
if (innerXAlign === 'center') row.x /= 2
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IUI, IAutoSize } from '@leafer-ui/interface'
|
|
2
|
+
import { MathHelper } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IFlowDrawData } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const { within } = MathHelper
|
|
8
|
+
|
|
9
|
+
export function growX(box: IBox, row: IFlowDrawData, width: number, reverse: boolean): void {
|
|
10
|
+
let child: IUI, grow: IAutoSize, remainSpace: number, remainTotalSpace = 0, list: IUI[] = row.hasRangeSize && [], { grow: totalGrow, start } = row
|
|
11
|
+
const growSize = row.width < width ? (width - row.width) / totalGrow : 0, { children } = box
|
|
12
|
+
|
|
13
|
+
if (growSize) row.width = width
|
|
14
|
+
|
|
15
|
+
for (let j = 0, end = row.count; j < end; j++) {
|
|
16
|
+
child = children[reverse ? start - j : start + j]
|
|
17
|
+
|
|
18
|
+
if (child.__.inFlow && child.__.visible !== 0) {
|
|
19
|
+
|
|
20
|
+
if (grow = child.__widthGrow) {
|
|
21
|
+
remainSpace = resizeWidth(child, child.__flowBounds, growSize * grow)
|
|
22
|
+
|
|
23
|
+
if (remainSpace) {
|
|
24
|
+
remainTotalSpace += remainSpace
|
|
25
|
+
totalGrow -= grow
|
|
26
|
+
} else if (list) {
|
|
27
|
+
child.__.widthRange ? list.unshift(child) : list.push(child)
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
} else {
|
|
32
|
+
end++
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (remainTotalSpace) assignRemainSpace(list, remainTotalSpace, totalGrow)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
function assignRemainSpace(list: IUI[], totalSpace: number, countGrow: number): void {
|
|
41
|
+
let grow: IAutoSize, space: number, local: IBoundsData, remain: number
|
|
42
|
+
list.forEach(child => {
|
|
43
|
+
grow = child.__widthGrow
|
|
44
|
+
space = totalSpace / countGrow * grow
|
|
45
|
+
remain = resizeWidth(child, local = child.__flowBounds, local.width + space)
|
|
46
|
+
totalSpace -= space - remain
|
|
47
|
+
countGrow -= grow
|
|
48
|
+
})
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
export function resizeWidth(child: IUI, local: IBoundsData, size: number): number {
|
|
53
|
+
const { widthRange, lockRatio } = child.__
|
|
54
|
+
const realSize = widthRange ? within(size, widthRange) : size
|
|
55
|
+
const scale = realSize / local.width
|
|
56
|
+
child.scaleResize(scale, lockRatio ? scale : 1)
|
|
57
|
+
local.width = realSize
|
|
58
|
+
return size - realSize
|
|
59
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IUI, IPointData, IAxisAlign } from '@leafer-ui/interface'
|
|
2
|
+
|
|
3
|
+
import { PointHelper } from '@leafer-ui/draw'
|
|
4
|
+
|
|
5
|
+
import { IFlowDrawData, IFlowWrapDrawData } from '@leafer-in/interface'
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
const { move } = PointHelper
|
|
9
|
+
|
|
10
|
+
export function layout(box: IBox, data: IFlowWrapDrawData, rowYAlign?: IAxisAlign, reverse?: boolean): void {
|
|
11
|
+
const { list } = data, reverseWrap = box.__.flowWrap === 'reverse'
|
|
12
|
+
let row: IFlowDrawData, { x, y } = data
|
|
13
|
+
|
|
14
|
+
for (let i = 0, len = list.length; i < len; i++) {
|
|
15
|
+
row = list[reverseWrap ? len - 1 - i : i]
|
|
16
|
+
layoutX(box, row, x, y, rowYAlign, reverse)
|
|
17
|
+
y += row.height + data.gap
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function layoutX(box: IBox, row: IFlowDrawData, fromX: number, fromY: number, rowYAlign: IAxisAlign, reverse?: boolean): void {
|
|
22
|
+
const { children } = box
|
|
23
|
+
let child: IUI, local: IBoundsData, { x, start } = row, y = fromY
|
|
24
|
+
x += fromX
|
|
25
|
+
|
|
26
|
+
for (let j = 0, end = row.count; j < end; j++) {
|
|
27
|
+
child = children[reverse ? start - j : start + j]
|
|
28
|
+
|
|
29
|
+
if (child.__.inFlow && child.__.visible !== 0) {
|
|
30
|
+
local = child.__flowBounds
|
|
31
|
+
if (rowYAlign !== 'from') y = fromY + (row.height - local.height) / (rowYAlign === 'center' ? 2 : 1)
|
|
32
|
+
|
|
33
|
+
move(child as IPointData, x - local.x, y - local.y)
|
|
34
|
+
x += local.width + row.gap
|
|
35
|
+
} else {
|
|
36
|
+
end++
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { IAxisAlign, IBox, IFlowAlign } from '@leafer-ui/interface'
|
|
2
|
+
|
|
3
|
+
import { IFlowDrawData, IFlowWrapDrawData } from '@leafer-in/interface'
|
|
4
|
+
|
|
5
|
+
import { alignContent, alignToInnerYMap } from '../common/align'
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export function align(box: IBox, data: IFlowWrapDrawData, contentAlign: IFlowAlign, rowYAlign: IAxisAlign): void {
|
|
9
|
+
alignContent(box, data, contentAlign)
|
|
10
|
+
|
|
11
|
+
const { list } = data
|
|
12
|
+
if (list.length > 1) {
|
|
13
|
+
|
|
14
|
+
if (!rowYAlign) rowYAlign = alignToInnerYMap[contentAlign]
|
|
15
|
+
|
|
16
|
+
if (rowYAlign !== 'from') {
|
|
17
|
+
let row: IFlowDrawData
|
|
18
|
+
|
|
19
|
+
for (let i = 0, len = list.length; i < len; i++) {
|
|
20
|
+
row = list[i]
|
|
21
|
+
row.y = data.height - row.height
|
|
22
|
+
if (rowYAlign === 'center') row.y /= 2
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IUI, IAutoSize } from '@leafer-ui/interface'
|
|
2
|
+
import { MathHelper } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IFlowDrawData } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const { within } = MathHelper
|
|
8
|
+
|
|
9
|
+
export function growY(box: IBox, row: IFlowDrawData, height: number, reverse: boolean): void {
|
|
10
|
+
let child: IUI, grow: IAutoSize, remainSpace: number, remainTotalSpace = 0, list: IUI[] = row.hasRangeSize && [], { grow: totalGrow, start } = row
|
|
11
|
+
const growSize = row.height < height ? (height - row.height) / totalGrow : 0, { children } = box
|
|
12
|
+
|
|
13
|
+
if (growSize) row.height = height
|
|
14
|
+
|
|
15
|
+
for (let j = 0, end = row.count; j < end; j++) {
|
|
16
|
+
child = children[reverse ? start - j : start + j]
|
|
17
|
+
|
|
18
|
+
if (child.__.inFlow && child.__.visible !== 0) {
|
|
19
|
+
|
|
20
|
+
if (grow = child.__heightGrow) {
|
|
21
|
+
remainSpace = resizeHeight(child, child.__flowBounds, growSize * grow)
|
|
22
|
+
|
|
23
|
+
if (remainSpace) {
|
|
24
|
+
remainTotalSpace += remainSpace
|
|
25
|
+
totalGrow -= grow
|
|
26
|
+
} else if (list) {
|
|
27
|
+
child.__.heightRange ? list.unshift(child) : list.push(child)
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
} else {
|
|
32
|
+
end++
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (remainTotalSpace) assignRemainSpace(list, remainTotalSpace, totalGrow)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
function assignRemainSpace(list: IUI[], totalSpace: number, countGrow: number): void {
|
|
41
|
+
let grow: IAutoSize, space: number, local: IBoundsData, remain: number
|
|
42
|
+
list.forEach(child => {
|
|
43
|
+
grow = child.__heightGrow
|
|
44
|
+
space = totalSpace / countGrow * grow
|
|
45
|
+
remain = resizeHeight(child, local = child.__flowBounds, local.height + space)
|
|
46
|
+
totalSpace -= space - remain
|
|
47
|
+
countGrow -= grow
|
|
48
|
+
})
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
export function resizeHeight(child: IUI, local: IBoundsData, size: number): number {
|
|
53
|
+
const { heightRange, lockRatio } = child.__
|
|
54
|
+
const realSize = heightRange ? within(size, heightRange) : size
|
|
55
|
+
const scale = realSize / local.height
|
|
56
|
+
child.scaleResize(lockRatio ? scale : 1, scale)
|
|
57
|
+
local.height = realSize
|
|
58
|
+
return size - realSize
|
|
59
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { IBoundsData, IBox, IUI, IPointData, IAxisAlign } from '@leafer-ui/interface'
|
|
2
|
+
import { PointHelper } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IFlowDrawData, IFlowWrapDrawData } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const { move } = PointHelper
|
|
8
|
+
|
|
9
|
+
export function layout(box: IBox, data: IFlowWrapDrawData, rowXAlign: IAxisAlign, reverse?: boolean): void {
|
|
10
|
+
const { list } = data, reverseWrap = box.__.flowWrap === 'reverse'
|
|
11
|
+
let row: IFlowDrawData, { x, y } = data
|
|
12
|
+
|
|
13
|
+
for (let i = 0, len = list.length; i < len; i++) {
|
|
14
|
+
row = list[reverseWrap ? len - 1 - i : i]
|
|
15
|
+
layoutY(box, row, x, y, rowXAlign, reverse)
|
|
16
|
+
x += row.width + data.gap
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export function layoutY(box: IBox, row: IFlowDrawData, fromX: number, fromY: number, rowXAlign: IAxisAlign, reverse?: boolean): void {
|
|
21
|
+
const { children } = box
|
|
22
|
+
let child: IUI, local: IBoundsData, { y, start } = row, x = fromX
|
|
23
|
+
y += fromY
|
|
24
|
+
|
|
25
|
+
for (let j = 0, end = row.count; j < end; j++) {
|
|
26
|
+
child = children[reverse ? start - j : start + j]
|
|
27
|
+
|
|
28
|
+
if (child.__.inFlow && child.__.visible !== 0) {
|
|
29
|
+
local = child.__flowBounds
|
|
30
|
+
if (rowXAlign !== 'from') x = fromX + (row.width - local.width) / (rowXAlign === 'center' ? 2 : 1)
|
|
31
|
+
|
|
32
|
+
move(child as IPointData, x - local.x, y - local.y)
|
|
33
|
+
y += local.height + row.gap
|
|
34
|
+
} else {
|
|
35
|
+
end++
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|