updates TextBox and Label

[fuzhenn]

@brucin
根据之前的讨论, 以下是我对TextBox和Label初步的调整方案, 有什么我考虑不周全的地方, 随时讨论:

TextBox 和 Label 的区别

• TextBox中文字以box为文字对齐基准, label以坐标为文字对齐基准
• TextBox必须有box, 而label可选
• (?)TextBox没有autoSizeBox, 反而可以考虑自动缩减文字以适应TextBox
• Label需要提供autoSizeBox方法, 并自动更新symbol

改造方案:

TextBox

• 取消options中的box相关设置
• 构造方法增加TextBox高和宽

new maptalks.TextBox(content, coord, width, height, options):

• 增加设置文字样式

textBox.setTextStyle({
      'wrap' : true,
      'padding' : [12, 8],
      'verticalAlignment' : 'top',
      'horizontalAlignment' : 'right',
      'symbol' : {
        'textFaceName' : 'monospace',
        'textFill' : '#34495e',
        'textHaloFill' : '#fff',
        'textHaloRadius' : 4,
        'textSize' : 18,
        'textWeight' : 'bold'
      }
    })

• 增加设置高宽的方法

var width = textBox.getWidth(),
    height = textBox.getHeight();
textBox.setWidth(width + 10)
    .setHeight(height - 2);

Label

• Label取消options中的box相关设置
• 增加设置box样式方法

label.setBoxStyle({
      'padding' : [12, 8],
      'verticalAlignment' : 'top',
      'horizontalAlignment' : 'right',
      'minWidth' : 300,
      'minHeight' : 200,
      'symbol' : {
        'markerType' : 'square',
        'markerFill' : 'rgb(135,196,240)',
        'markerFillOpacity' : 0.9,
        'markerLineColor' : '#34495e',
        'markerLineWidth' : 1,
      });

[brucin]

1、在将textBox的文本对齐方式变为：textBox.setTextVerticalAlignment(...)以后，Label与TextBox可以统一了，根据坐标调整的通过symbol去设置，针对文本的对齐通过上面的方法去调整；

2、autoSizeBox是针对box的设定，对于text与box的高与宽的变化，其实存在两种场景：其一，文本变化（编辑或赋值）；其二，box变化。这两种场景下，存在另一方是否去适配对方新的大小的情况。
目前boxAutoSize属性实现了，box跟随text变化而变化，box编辑过程中的重置textWrapWidth并不能影响到text的重新布局，但是这两者不能共存，所以是否通过设置一个属性比如{'autoSize':'text/box'}，来决定调整以谁为主导；

3、在box编辑的情况下，需要fitSize以适配新的box的width与height，可以统一一autoSizeBox(...)，这个方法是根据文本来调整box的大小，在box存在的场景下，背景比文字区域小的场景都意义都是不大的，但是针对box的缩小调整，其实应该影响到text的textWrapWidth，这个应该可以通过上面textBox.setWidth/setHeight来实现，不过这个设置与textWrapWidth的是否需要配合就与上面第二点有些关联了；

4、自动缩减文字这个方法很有价值，它的使用场景是希望文本不要超出box，在实际场景中更应该是根据box的高宽自动去截取，这个方法应该可以配合autoSize:'box'来用；

5、box的padding的作用还是有的，所以如果取消了，势必需要一个类似的设置；

6、textMarker、Label、textBox的旋转功能。

[fuzhenn]

我觉得TextBox和Label还是需要分开, 他们两不同点还是比较多, 分开后使用会更清晰一些

• Label可以取消编辑(box的高宽是根据text的高宽自适应的, 编辑无意义)
• TextBox和普通marker一样可以编辑

因为TextBox和Label没有auto时, 和普通marker没有区别, 所以应该都是自动的
可以考虑给Label和TextBox添加auto option, 用来自动设置box和文字

• Label.options.auto Label的自动逻辑 : 调整content或symbol时, 根据文字自动调整box
• TextBox.options.auto TextBox的自动逻辑 : 调整TextBox的width/height时, 根据box自动调整文字, 包括自动调整TextWrapWidth和缩减字符

最后, 旋转功能已经有了, symbol中:

{
  textRotation :  60
}

[fuzhenn]

删除

[fuzhenn]

@brucin
具体实现的时候发现, 方法分的太细还是太累赘, 所以改成了下面的形式.

API方案:

Label

//自动调整markerWidth与markerHeight以适应文字高宽
var label = new maptalks.Label('label with box',
        [0, 0],
        {
          'draggable' : true,
          'boxStyle' : {
            'padding' : [12, 8],
            'verticalAlignment' : 'top',
            'horizontalAlignment' : 'right',
            'minWidth' : 300,
            'minHeight' : 200,
            'symbol' : {
              'markerType' : 'square',
              'markerFill' : 'rgb(135,196,240)',
              'markerFillOpacity' : 0.9,
              'markerLineColor' : '#34495e',
              'markerLineWidth' : 1,
            }
          },
          'textSymbol': {
            // box's symbol
            'textFaceName' : 'monospace',
            'textFill' : '#34495e',
            'textHaloFill' : '#fff',
            'textHaloRadius' : 4,
            'textSize' : 18,
            'textWeight' : 'bold',
            'textVerticalAlignment' : 'top'
          }
        });

label.setBoxStyle({
  padding : [12, 8],
  verticalAlignment : 'top',
  horizontalAlignment : 'middle',
  symbol : { .. }
});

label.setTextSymbol({
//...
});

TextBox

// 自动调整textWrapWidth和缩减文字, 以自动适应box
var textBox = new maptalks.TextBox('A textbox',
      [0, 0],
      {
        'draggable' : true,
        'textStyle' : {
          'wrap' : true,
          'padding' : [12, 8],
          'verticalAlignment' : 'top',
          'horizontalAlignment' : 'right',
          'symbol' : {
            'textFaceName' : 'monospace',
            'textFill' : '#34495e',
            'textHaloFill' : '#fff',
            'textHaloRadius' : 4,
            'textSize' : 18,
            'textWeight' : 'bold'
          }
        },
        'boxSymbol': {
          // box's symbol
          'markerType' : 'square',
          'markerFill' : 'rgb(135,196,240)',
          'markerFillOpacity' : 0.9,
          'markerLineColor' : '#34495e',
          'markerLineWidth' : 1,
        }
      });

textBox.setTextStyle({
     wrap : true,
     padding : [12, 8],
     verticalAlignment : 'middle',       // 默认垂直居中
     horizontalAlignment : 'middle',  // 默认水平居中
     symbol : { .. }
});

textBox.setWidth(400);
textBox.setHeight(100);

textBox.setBoxSymbol({
});

textBox.startEdit();

[gee1k]

ConnectorLine 连接线的文字内容能否添加背景框