# Angular Vector Viewer

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

#### Load the script files in your application
```html
<link rel="stylesheet" href="bower_components/ng-boat-vector-viewer/dist/ng-boat-vector-viewer.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>

<script src='bower_components/ng-boat-vector-viewer/dist/ng-boat-vector-viewer.js'></script>
```

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

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

#### Vector Viewer use(动态交互)

```html
<boat-vector-viewer opts="Options" seq='seq' ></boat-vector-viewer>
```

#### Vector Viewer use(静态)

```js
var App = angular.module('App', ['boat.vector-viewer']);
```

```html
<boat-vector-viewer-static opts="Options"></boat-vector-viewer-static>
```

#### Marker 广播事件
```js
$scope.$on('Viewer:markerClick', function (event, feat) {});

$scope.$on('Viewer:markerEdit', function (event, feat) {});

$scope.$on('Viewer:markerSelect', function (event, feat) {});

$scope.$on('Viewer:markerSearch', function (event, feat) {});

$scope.$on('Viewer:seqSelect', function (event, feat) {});  //seqSelect功能

$scope.$on('Viewer:customStyle', function (event, feat, bool) {});  //feat鼠标触发

$scope.$on('Viewer:dropDown', function (event, id, feat, bool) {});  //label鼠标触发,用于下拉框

```

#### Options

```
vectorStyle: {
    height: 600,             
    width: 600,       
    radius: 150,
    title: 'View details',
    export: false           // 导出svg图的功能显示；
    trackSize: 15           // 环图的中心文本。默认为20px；
    plasmidStyle: 'style',  // 环图的样式，style、style1、style2、style3
    trackRotate: false,     // Feature是否旋转
    scene: 'design',         // 用于什么场景
    display: {
        name: true,         // 是否显示质粒名称
        len: true,          // 是否显示序列长度
        scale: true,        // 是否显示标尺
        markerLabel: true,  // 是否显示 Feature Lable
        labelType: false,   // Feature Lable是否按Feature路径显示
        seqSelect: false,   // 是否需要查询seq范围功能
        vadScale: 1         // txtVadjust的倍数，未设置倍数时，vadScale默认值为2
    },
    markerClick: true,      // 控制是否弹窗
    minHigh: 15,            // 控制label重叠属性
    lineLen: 30             // 控制label重叠属性
},
length: '',
feat: {},

.....

name: ''
```


#### 增删改广播事件
```html
//更新自身的feature
$rootScope.$broadcast('Viewer:update',feat);

//插入feature
$rootScope.$broadcast('Viewer:insert', {
    uuid: feat.uuid,    //被插入的前一个feature
    item: feat
});

//删除feature
$rootScope.$broadcast('Viewer:delete', feat);

```


#### 闪烁广播事件
```html
$scope.$on('Viewer: rectFlashing', function (event) {});

```


#### style广播事件 https://www.w3.org/TR/SVG/styling.html
```html
//feat的style
$rootScope.$broadcast('Viewer:featStyle', {uuid: feat.uuid,style: {'fill':'red'}});

//label的style
$rootScope.$broadcast('Viewer:labelStyle', {uuid: feat.uuid,style: {'fill':'red'}});

###### 注：数字也需用引号包起来，如：'stroke-width': '0';

```

###### style(默认)
![image]
(http://git.vbio.top/integrated-projects/vb2016/uploads/ce78d65d7b0a1f9673c88739e17579bb/vector-viewer-style.png)
###### style1
![image]
(http://git.vbio.top/integrated-projects/vb2016/uploads/012a2eeeeb0426834e1be6b95b4d63ce/vector-viewer-style1.png)
###### style2
![image]
(http://git.vbio.top/integrated-projects/vb2016/uploads/e12180989e1e0fbd36e7401da75fc9da/vector-viewer-style3.png)
###### style3
![image]
(http://git.vbio.top/integrated-projects/vb2016/uploads/711f1db7163c4e61f8e9b85c86e72f43/vector-viewer-style2.png)



###### 注：strand = 1：正向箭头; strand = -1：反向箭头; strand = 2：双向箭头; strand = 0：无方向箭头