b

主要目的:

  1. 解决connector不容易自动对齐
  2. 如果Node是2端对齐的。那么这个问题一般比较容易解决
  3. 解决3个node以上之间间距保持相等
  4. node 之间自动对齐(拖动鼠标去对齐,拉也拉不走)。尽可能2端对齐
  5. 参考最大的node,进行2端对齐。
  6. 组合图形加外边距



假设:

  • 用户不会用键盘,只会用鼠标


功能:

  • sameHeight/sameWidth
  • sameGap
  • autoSnap.



按照Fourdirection上进行多米诺查找,显示出和selectNode相同的Snapline


限制条件:

  • 只对同一个容器下面的元素进行对齐
  • 只能考虑最近2个元素之间的对齐。考虑不到跨node的对齐(但是可以成为
  • 多米罗骨牌进行递推)

对齐时机:

  • 拖动到要显示对齐线时如果满足2对齐条件,则2端对齐。
  • 如果用户继续拖动图形,则node复原。


padding算法:

  1. 只有最小padding限制,没有最大padding限制
  2. 实现方法:
  • model提供一个方法:bboxResize2(box:)


Start手动阀发顺丰fasdfsadfasdfasdasdfasfasfasdfsafdas

sadfasdfsadfa

sdfasfasfasfas

compose epic...

compose epic...

哈哈哈哈哈好

沙发撒的发

哈哈哈哈哈哈哈哈

class smartNode

_curNode:NodeModel

_relation:Relation[]//只维护selectedNode关系

//遍历一遍children,初始化relations
+ constructor(node:NodeModel){
   if(parent isNot a world) return;
   for(let sibling of siblings) {
     //node 和sibling之间是否满足relation的关系   
  }
}

+ duoMiNuoSearch(direction:FourDirection):[snaplines,gaplines]

//指定方向上相邻2个元素的gap一样。以哪一个的gap为准?
- setSameWidth(node:NodeModel){
   if(宽度已经相同){return }
   maxWidth(比较mbox)
   设置较小node的bbox的width.使其mbox.width =         maxWidth

}
- setSameHeight(node:NodeModel){}
+ try2SetSameGap(node:NodeModel) {
    relation = this.getRelation(node);
    realtion2 = node.getRelation(relation.direction);
    this.node.translate()来修改确保gap一致
    //同方向上的gap
}

//检查4个方向的关系
+ get checkAlign():AlignInfo[]{
}

+ updateRelation(){

   //重新创建关系
}

+ magnet2Node(node,direction){
   if(已经是对齐的){
       return;
   }
   this.node.translate(diff);//位移对齐
}


getRelation(direction:FourDirection):Relation[]
getNodes(direction:FourDirection):Relation[]

compose epic...

发啥大发顺丰

compose epic...

compose epic...

class xdocument

_svg

_smartNodeLists:map<World,SmartNode[]>

class SnaplineModel

继承于StraightLineModel

_startPoint:Point

_endPoint:Point

触发时机:

在canvas上watch 选中节点的Mbox。

如果位置发生变化,则检查selectedNode和4个方向上的临近点是否有对齐特征

  • 在对齐时且宽度很接近,则进行2端对齐

class SVG

_x:number

_y:number

watch(mBoxOfselectedNode){
 if(监听选中点位置变化){
  selectedSmartNode.updateRelation();
   res = selectedNode.checkAlign();
	 if(res.length > 0){
     store.snapelines.push(res.forEach())
     store.gaplines.push( = res.forEach...)
     for(alignInfo of res){
      selectedSmartNode.magnet2Node
                        (alignInfo.node,direction);
      if(alignInfo.direction 是 left/center/right){
        selectedSmartNode.setSameWidth(alignInfo.node)
       } else if(alignInfo.direction 是上中下 
              && smartNode.distance(alignInfo.node) < 2){
          selectedSmartNode.setSameHeight(alignInfo.node)
      }
      selectedSmartNode.try2SetSameGap(node)
    }
   }
}
}

// dragEnd的时候,

  1. 如果有connector相连那么relation一定存在。
  2. 如果没有connector相连,那么当bbox有在方向有交集时存在关系
  3. 不用考虑方向。
  4. 2个节点间有多个关系。一个方向上可能有有多个关系

class Relation

one:NodeModel

another:NodeModel

connector:ConnectorModel || null // 可能并没有connector


isSameRelation(relation) //没有connector的情况下:如果one/anther是相同的就认为是同一个关系。
get OppositeNode(me:NodeModel):NodeModel
get relation() { //一共4中情况。
  adjacent || widthConnector || 
}  
get distance(){
  return this.node.distance(this.anothorNode)
}
//2个节点之间的水平还是垂直关系
get hvDirection(){
  
}

compose epic...

compose epic...

compose epic...

a

text

b右侧:

b.left > a.left &&

(b.top < a.bottom && b.bottom > a.top)

class SnaplinesView

computed:{

snaplines(){store.snaplines}

}

<<interface>>

AlignInfo

node:NodeModel,//和哪个节点对齐

direction:alignDirection, //在哪个方向上对齐

snapline:SnaplineModel,//对齐线


//和一个node可能有3条对齐线。

//如果有多条对齐线,自动对齐到哪里都一样的。

//gapline可能会创建相同的。(只保留同一个对象)

class GaplineModel

继承于StraightLineModel

_startPoint:Point

_endPoint:Point

_distance:number

compose epic...

compose epic...

自动提示设计

自动提示设计

2019-01-13 19:01:40 0 134
这里是评论

相关推荐