# BIU
## BIU
### 简介
* 采用原生JS编写
* 提供SVG对象的拖拽/旋转/缩放等功能
* 多种自定义事件与数据介入方式
### 获得BIU
[github](https://github.com/Vanchun032/biu)
### 快速上手
引入并使用BIU
```markup
```
一个支持拖拽编辑的页面就产生了^\_^
## 集成案例
### 参数化元件绘制
* [线上版本](http://120.77.60.26/yutong/)
* 实现功能
*
```
* 自定义原件样式
```
```
* 原件拖拽编辑
* 原件参数式编辑
```
### 网页拖拽布局
{% content-ref url="/pages/-LcZozsC6\_XO3ednW5HE" %}
[ChartEz](/vanchun032/chan-pin/chartez.md)
{% endcontent-ref %}
## API
### init | function
完成BIU的初始化，需要提供一个DOM元素
标准语法
```javascript
biu.init(dom)
```
示例
```javascript
var demo = biu.init(document.getElementById('demo'))
```
参数列表
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| --- | ----- | -- | --- | ---------------- |
| dom | DOM元素 | 是 | 无 | 传入Dom元素形成BIU的初始化 |
### createItem | function
直接在画布中创建元素，用户项目中历史数据的加载等
标准语法
```javascript
biu.createItem(itemName, x, y, data)
```
示例
```javascript
biu.createItem('html', 0, 0, html)
```
参数列表
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| -------- | ------ | -- | --------------------- | --------------------------------- |
| itemName | String | 是 | 无 | 描述对象的类型，需要是itemMenuConf中已经配置的对象种类 |
| x | Number | 是 | 无 | 对象被自动建立时的x轴的位置 |
| y | Number | 是 | 无 | 对象被自动建立时的y轴的位置 |
| data | Object | 否 | itemMenu中的data配置，或空对象 | 对象业务相关数据的存储 |
### items | Array
获取BIU运行时已经实例化的SVG对象集合 标准语法
```javascript
biu.items
```
示例
```javascript
biu.items.forEach(item => {
var config = JSON.parse(item.data.config)
config.top = item.y
config.left = item.x
config.width = item.width
config.height = item.height
//调用服务接口进行保存
callAjax(item.item_name + '/update', {id: item.data.id, config: JSON.stringify(config)}, function(res) {})
})
```
### auxs | Object
获取BIU运行时辅助点对象集合 标准语法
```javascript
biu.auxs
```
示例
```javascript
//辅助点位置重计算
biu.auxs.reLocate()
```
### svg | function
提供svg元素 标准语法
```javascript
biu.svg()
```
返回svg元素，可供用户操作
### currentItems | function
返回此刻的items
### itemMenu | function
返回此刻的itemMenu
## 配置接口option
BIU定位为独立SVG拖拽框架，原则上只实现拖拽/旋转/缩放功能，不与任何项目数据耦合。 为了实现在项目中能够灵活的使用BIU，BIU提供了丰富的配置项，可通过setOption方法向BIU传入配置参数，完成定制化使用。
```markup
```
### 可拖拽对象配置 | option.itemMenuConf
该元素定义了项目中可使用的对象，一个最简单的itemMenuConf应如下所示
```javascript
itemMenuConf: {
diaodian: {
title: '吊点吊模',
url: 'http://vanchun.oss-cn-shenzhen.aliyuncs.com/yutong/model.svg',
color: '#DDDDFF'
}
}
```
itemMenuConf中每配置一个对象类型，BIU的左侧菜单中即会多出一个可使用的对象 所有右侧画布中的对象，都是通过itemMenuConf预定义类型的 下面逐项解释对象中各配置项的含义
#### title | String | required
对象的名称，用于在左侧菜单中展示
#### url | String | required
对象展示图标，用于在左侧菜单中展示
#### color | String | required
对象按钮的背景颜色，用于在左侧菜单中展示
#### menus | Array
对象实例在画布中的右键菜单，默认没有右键菜单
```javascript
menus: [{
name: '删除',
callBack: function(self) {
self.destory()
}
}]
```
menus数组中的对象参数类型如下
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| -------- | -------- | -- | --- | ------------------------ |
| name | String | 是 | 无 | 菜单项的名称，将在右键菜单中显示 |
| callBack | function | 是 | 无 | 菜单执行的回调方法，接受self参数表示实例自身 |
#### size | Object
表示该种类对象的初始大小，默认大小为100，100
```javascript
size: {
width: 125,
height: 525
}
```
size参数如下
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| ------ | ------ | -- | --- | ------ |
| width | Number | 是 | 无 | 元素默认宽度 |
| height | Number | 是 | 无 | 元素默认高度 |
#### data | Object
业务相关数据的配置，可以配置为该种类BIU对象的data默认值。 每一个该种类BIU对象实例化都会携带此默认值 当使用createItem方法并传入data时，传入的data具有更高的优先级
#### before | function(item\_name, x, y)
自定义DOM对象创建前动作 参数列表
| 参数名 | 类型 | 描述 |
| ---------- | ------ | ----- |
| item\_name | String | 对象标识符 |
| x | Number | x轴定位 |
| y | Number | y轴定位 |
默认创建对象方式为
```javascript
biu.createItem(item_name, x, y)
```
#### init | function(self, itemMenu, svg)
自定义DOM对象创建方法 参数列表
| 参数名 | 类型 | 描述 |
| -------- | ------ | --------------------- |
| self | Object | 该对象实例 |
| itemMenu | Object | option.itemMenuConf对象 |
| svg | DOM | SVG画布背景 |
| 返回值 | 描述 |
| --- | ----------- |
| DOM | 返回最外层的DOM元素 |
#### resize | function(self)
自定义DOM元素的定位方法，可以配置多个SVG组件以及位置关系 参数列表
| 参数名 | 类型 | 描述 |
| ---- | ------ | ----- |
| self | Object | 该对象实例 |
#### 辅助点事件覆盖
topLeftZoom: function() {}, topMiddleZoom: function() {}, topRightZoom: function() {}, middleLeftZoom: function() {}, middleRightZoom: function() {}, bottomLeftZoom: function() {}, bottomMiddleZoom: function() {}, bottomRightZoom: function() {}
### 全局菜单 | option.featureMenuConf
全局菜单内容的配置，featureMenuConf是一个Array，其中的每一个配置项都是一个Object，代表了一个全局菜单的功能 一个简单的featureMenuConf配置示例如下
```javascript
featureMenuConf: [{
name: '保存',
feature: function() {
//调用用户后台接口,可对当前页面的布局内容进行保存
biu.items.forEach(item => {
var config = JSON.parse(item.data.config)
config.top = item.y
config.left = item.x
config.width = item.width
config.height = item.height
//调用服务接口进行保存
callAjax(item.item_name + '/update', {id: item.data.id, config: JSON.stringify(config)}, function(res) {})
})
}
}]
```
featureMenuConf中的对象参数类型如下
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| -------- | -------- | -- | --- | ---------------- |
| name | String | 是 | 无 | 菜单项的名称，将在右键菜单中显示 |
| callBack | function | 是 | 无 | 菜单执行的回调方法 |
### 样式设置 | option.style
#### page | Object
body对象的样式，用来做一些初始化css 默认值
```javascript
PAGE_STYLE: {
margin: 0,
padding: 0
}
```
#### biu | Object
biu容器的样式，默认是占满全屏 默认值
```javascript
BIU_STYLE: {
width: '100vw',
height: '100vh',
display: 'flex'
}
```
#### menu | Object
左侧菜单容器的样式 默认值
```javascript
MENU_STYLE: {
width: '10%',
height: '100%',
backgroundColor: '#f7f7f7',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
padding: 0
}
```
#### body | Object
右侧绘画区域容器的样式 默认值
```javascript
BODY_STYLE: {
width: '90%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333'
}
```
#### menuBtn | Object
左侧菜单内按钮的样式 默认值
```javascript
ITEM_BTN_STYLE: {
width: '50%',
height: '5%',
backgroundColor: '#f7f7f7',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer'
}
```
#### subMenu | Object
右键菜单的样式 默认值
```javascript
ITEM_MENU_STYLE: {
width: '100%',
height: '95%',
backgroundColor: '#f7f7f7',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
alignItems: 'flex-start',
boxSizing: 'border-box',
padding: '20px 20px'
}
```
#### svgSize | Object
画布的尺寸，有些场景中需要预定义画布的大小 默认值
```javascript
SVG_SIZE: {
width: 1920,
height: 1080
}
```
#### svg | Object
画布的样式，设置背景颜色或背景图片之类 默认值
```javascript
SVG_STYLE: {
backgroundColor: '#333'
}
```
#### canvasColor | String
画板的背景颜色，是画布背后的一层 默认值
```javascript
CANVAS_COLOR: '#fff'
```
#### msg | Object
信息窗的样式 默认值
```javascript
MSG_STYLE: {
position: 'fixed',
left: '80%',
top: '20%',
transform: 'translate(-50%, -50%)',
padding: '20px 40px',
backgroundColor: '#f7f7f7',
color: '#333333'
}
```
#### contextMenu | Object
右键菜单的样式 默认值
```javascript
CONTEXT_MENU_STYLE: {
backgroundColor: '#f7f7f7',
listStyle: 'none',
textAlign: 'center',
padding: 0,
margin: 0
}
```
#### menuItem | Object
左侧元素菜单的内容样式 默认值
```javascript
MENU_ITEM_STYLE: {
width: '90px',
height: '100px',
display: 'flex',
flexDirection: 'column'
}
```
#### menuItemIcon | Object
左侧元素菜单中的icon样式 默认值
```javascript
MENU_ITEM_ICON_STYLE: {
height: '60px'
}
```
#### menuItemTitle | Object
左侧元素菜单的文本样式 默认值
```javascript
MENU_ITEM_TITLE_STYLE: {
textAlign: 'center',
userSelect: 'none'
}
```
### 辅助点位移事件 | option.auxItemZoom
辅助点的拖动响应事件，可以使用如下方式覆盖
```javascript
auxItemZoom: {
topLeftZoom: function() {},
topMiddleZoom: function() {},
topRightZoom: function() {},
middleLeftZoom: function() {},
middleRightZoom: function() {},
bottomLeftZoom: function() {},
bottomMiddleZoom: function() {},
bottomRightZoom: function() {}
}
```
## 可用对象
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://vanchun032.gitbook.io/vanchun032/chan-pin/biu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.