# Angular Sequence Editor

#### Install with Bower
```sh
$ bower install git@git.vbio.top:ng/ng-boat-sequence-editor.git --save
```

#### Load the script files in your application
```html
<link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css">

<!-- ng-boat -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/restangular/dist/restangular.min.js"></script>
<script src="../bower_components/ng-boat/dist/ng-boat.js"></script>

<!-- boat.sequence-editor -->
<script src="../bower_components/codemirror/lib/codemirror.js"></script>
<script src="../bower_components/codemirror/addon/search/match-highlighter.js"></script>
<script src="../bower_components/codemirror/addon/display/placeholder.js"></script>
<script src="../bower_components/angular-ui-codemirror/ui-codemirror.min.js"></script>
<script src='../bower_components/ng-boat-sequence-editor/dist/ng-boat-sequence-editor.js'></script>

```

#### Add the 'boat' and 'boat.sequence-editor' module as a dependency to your application module:
```js
var App = angular.module('App', ['boat', 'boat.sequence-editor']);
```

#### Finally, add the directive to your html, as attribute :
```html
<boat-sequence-editor opts="Options"></boat-sequence-editor>
```

```html
<boat-sequence-editor seq='seq' opts="Options"></boat-sequence-editor>
```

#### Options
```js
{
    fullLen: true,                              // 是否显示Full length
    residue: true,                              // 是否显示Residue
    selLen: true,                               // 是否显示Selection length
    lineSize: true,                             // 是否显示Font size和Char per line
    readonly: true,                             // 编辑器是否只读
    fontSize: 12, 13, 14,                       // 编辑器字体大小
    lineCharCount: 50, 60, 70, 80, 90, 100,     // 编辑器一行内的字数
    length: '',
    chars: 'ATCGU',                             // 编辑器的输入范围
    editHeight： 450,                           // 编辑器的高度，默认为300px
    begin: 0                                    // feat标记是从0开始还是1开始
    changeOn: true                              // 控制是否又删除和添加的样式
    history: []                                 // 删除序列的历史记录
    ... 
    feat: [
        {
            end: 100,
            start: 1,
            color: "#A0C984" // rab(0,0,0)
            ....
        }
    ]           
},
```

#### 广播事件
```js

$scope.$broadcast('Editor:seqSelect', function (event) {});  //seqSelect功能
$scope.$broadcast('Editor:selectWarn');  //Selection输入错误警告框
$scope.$broadcast('orfEditor:insertTagEdit', data);  //插入tag,与 boat.orf-editor 交互
$scope.$broadcast('orfEditor:removeTagEdit', data);  //删除tag,与 boat.orf-editor 交互
$scope.$broadcast('Editor:markTextSave')
$scope.$on('Editor:marks', function (event, markText) {});  //传输markText,与 boat.orf-editor 交互
$scope.$on('Editor:popup', function (event, obj) {});  //编辑器对比原始序列删除记录

```

#### Directive seq :
seq = 'AAAAAAAAAAAA';