@@ -23,73 +23,97 @@ export default {
2323 // TODO #!zh: 优化代码
2424 // generate vertical line
2525 drawVLine ( newLeft ) {
26- // this.editingElement.commonStyle.left = newLeft
27- this . setElementPosition ( { left : newLeft } )
2826 this . vLines = [ { left : newLeft } ]
2927 } ,
28+ clearVLine ( ) {
29+ this . vLines = [ ]
30+ } ,
3031 // generate horizontal line
3132 drawHLine ( newTop ) {
32- // this.editingElement.commonStyle.top = newTop
33- this . setElementPosition ( { top : newTop } )
3433 this . hLines = [ { top : newTop } ]
3534 } ,
36- calcX ( newLeft ) {
35+ clearHLine ( ) {
36+ this . hLines = [ ]
37+ } ,
38+ calcVHLine ( isPointMove ) {
3739 const uuid = this . editingElement . uuid
38- let xCoords = [ ]
39- this . elements . filter ( e => e . uuid !== uuid ) . forEach ( e => {
40+ const referElements = this . elements . filter ( e => e . uuid !== uuid )
41+ let referElementsXCoords = [ ]
42+ let referElementsYCoords = [ ]
43+ referElements . forEach ( e => {
4044 const width = e . commonStyle . width
4145 const left = e . commonStyle . left
42- xCoords = [
43- ...xCoords ,
46+ const height = e . commonStyle . height
47+ const top = e . commonStyle . top
48+
49+ referElementsXCoords = [
50+ ...referElementsXCoords ,
4451 left ,
4552 left + ( width / 2 ) ,
4653 left + width
4754 ]
48- } )
49-
50- xCoords . some ( x => {
51- if ( Math . abs ( newLeft - x ) <= 5 ) {
52- this . drawVLine ( x )
53- return true
54- } else {
55- this . vLines = [ ]
56- }
57- } )
58- } ,
59- calcY ( newTop ) {
60- const uuid = this . editingElement . uuid
61- let yCoords = [ ]
62- this . elements . filter ( e => e . uuid !== uuid ) . forEach ( e => {
63- const height = e . commonStyle . height
64- const top = e . commonStyle . top
65- yCoords = [
66- ...yCoords ,
55+ referElementsYCoords = [
56+ ...referElementsYCoords ,
6757 top ,
6858 top + ( height / 2 ) ,
6959 top + height
7060 ]
7161 } )
7262
73- yCoords . some ( y => {
74- if ( Math . abs ( newTop - y ) <= 5 ) {
75- this . drawHLine ( y )
76- return true
77- } else {
78- this . hLines = [ ]
79- }
63+ // e代表 editingElement
64+ const eleft = this . editingElement . commonStyle . left
65+ const etop = this . editingElement . commonStyle . top
66+ const ewidth = this . editingElement . commonStyle . width
67+ const eheight = this . editingElement . commonStyle . height
68+ const exCoords = [ eleft + ewidth , eleft + ( ewidth / 2 ) , eleft ]
69+ const eyCoords = [ etop + eheight , etop + ( eheight / 2 ) , etop ]
70+ let hasVLine = false
71+ let hasHLine = false
72+ exCoords . forEach ( eX => {
73+ referElementsXCoords . forEach ( referX => {
74+ let offset = referX - eX
75+ if ( Math . abs ( offset ) <= 5 ) {
76+ if ( isPointMove ) {
77+ this . setElementPosition ( { width : ewidth + offset } )
78+ } else {
79+ this . setElementPosition ( { left : eleft + offset } )
80+ }
81+ this . drawVLine ( referX )
82+ hasVLine = true
83+ }
84+ } )
85+ } )
86+ eyCoords . forEach ( eY => {
87+ referElementsYCoords . forEach ( referY => {
88+ let offset = referY - eY
89+ if ( Math . abs ( offset ) <= 5 ) {
90+ if ( isPointMove ) {
91+ this . setElementPosition ( { height : eheight + offset } )
92+ } else {
93+ this . setElementPosition ( { top : etop + offset } )
94+ }
95+ this . drawHLine ( referY )
96+ hasHLine = true
97+ }
98+ } )
8099 } )
100+ if ( ! hasVLine ) {
101+ this . clearVLine ( )
102+ }
103+ if ( ! hasHLine ) {
104+ this . clearHLine ( )
105+ }
81106 } ,
82107 /**
83108 * #!zh: 在元素移动过程中，计算和生成辅助线
84109 */
85110 handleElementMove ( pos ) {
86111 this . setElementPosition ( pos )
87- this . calcX ( pos . left )
88- this . calcY ( pos . top )
112+ this . calcVHLine ( false )
89113 } ,
90- handlePointMove ( { top , left } ) {
91- this . calcX ( left )
92- this . calcY ( top )
114+ handlePointMove ( pos ) {
115+ this . setElementPosition ( pos )
116+ this . calcVHLine ( true )
93117 } ,
94118 bindContextMenu ( e ) {
95119 // 优化右击菜单的显示，去除冗余的无效逻辑
@@ -185,14 +209,16 @@ export default {
185209 this . setEditingElement ( element )
186210 } }
187211 // TODO 矩形四周的点叫什么？暂时叫 Point 吧
188- handlePointMoveProp = { pos => {
189- this . setElementPosition ( pos )
190- } }
212+ handlePointMoveProp = { this . handlePointMove }
191213 handleElementMoveProp = { this . handleElementMove }
192214 handleElementMouseUpProp = { ( ) => {
215+ this . clearHLine ( )
216+ this . clearVLine ( )
193217 this . recordElementRect ( )
194218 } }
195219 handlePointMouseUpProp = { ( ) => {
220+ this . clearHLine ( )
221+ this . clearVLine ( )
196222 this . recordElementRect ( )
197223 } }
198224 nativeOnContextmenu = { e => {
0 commit comments