├── .babelrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── example
    ├── ResizeBlock.js
    ├── index.1.js
    ├── index.js
    ├── spritejs.min.js
    ├── test.1.html
    └── test.html
├── lib
    └── index.js
├── package.json
├── sprite-draggable.jpg
├── src
    ├── draggable.js
    └── index.js
├── webpack.config.js
├── webpack.config.prod.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["env"],
3 |   "plugins": ["transform-runtime"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   parserOptions: {
 5 |     //设置"script"（默认）或"module"如果你的代码是在ECMAScript中的模块。
 6 |     sourceType: 'module'
 7 |   },
 8 |   env: {
 9 |     browser: true
10 |   },
11 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
12 |   extends: 'standard',
13 |   // required to lint *.vue files
14 |   plugins: [ 'html' ],
15 |   // add your custom rules here
16 |   rules: {
17 |     // allow paren-less arrow functions
18 |     'arrow-parens': 0,
19 |     // allow async-await
20 |     'generator-star-spacing': 0,
21 |     // allow debugger during development
22 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
23 |     'no-unused-vars': [
24 |       2,
25 |       {
26 |         // 允许声明未使用变量
27 |         vars: 'local',
28 |         // 参数不检查
29 |         args: 'none'
30 |       }
31 |     ],
32 |     // 关闭语句强制分号结尾
33 |     semi: 0,
34 |     //空行最多不能超过100行
35 |     'no-multiple-empty-lines': [ 0, { max: 100 } ],
36 |     //关闭禁止混用tab和空格
37 |     'no-mixed-spaces-and-tabs': [ 0 ],
38 |     'space-before-function-paren': 0,
39 |     'comma-dangle': 0
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log*
 4 | yarn-debug.log*
 5 | yarn-error.log*
 6 | package-lock.json
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # sprite-draggable
  2 | let sprite can draggable，让sprite对象拥有draggable的能力
  3 | 
  4 | ### 运行demo
  5 | 
  6 | ```
  7 | npm install
  8 | 
  9 | npm start
 10 | ```
 11 | 访问 http://localhost:9092 查看具体demo
 12 | 
 13 | <image src="./sprite-draggable.jpg" style="width:100%">
 14 | 
 15 | 
 16 | 
 17 | ### 安装sprite-draggable依赖
 18 | ``` 
 19 |   npm install sprite-draggable --save
 20 | ```
 21 | 
 22 | ### 作为spritejs插件使用
 23 | ```javascript
 24 | 
 25 |   // draggable与droppable方法注册到BaseSprite上
 26 |   import { install } from 'sprite-draggable'
 27 |   spritejs.use(install);
 28 |   …
 29 | 
 30 |   let group = new Group();
 31 |   group.draggable();
 32 |   // group.draggable(false); group.draggable({destroy,true}) 取消注册drag
 33 | 
 34 |   group.dropabble()//注册drop事件
 35 | 
 36 |   // group.droppable(false) ;group.droppable({destroy:true}) 取消注册drop
 37 | 
 38 |   group.on('drag', (evt) => {
 39 |     console.log('drag')
 40 |   });
 41 | 
 42 |   group.on('drop', (evt) => {
 43 |     console.log('drop')
 44 |   });
 45 | 
 46 |   group.on('dragenter', (evt) => {
 47 |     console.log('dragenter')
 48 |   });
 49 | 
 50 |   group.on('dragleave', (evt) => {
 51 |     console.log('dragleave')
 52 |   });
 53 | 
 54 |   group.on('dragover', (evt) => {
 55 |     console.log('dragover')
 56 |   });
 57 | 
 58 |   let sprite = new Sprite();
 59 |   //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax]，不设置表示不控制拖动范围
 60 |   sprite.draggable({dragRect:[0,0,300,300]})
 61 | 
 62 |   // 取消设置dragRect方法
 63 |   //sprite.draggable({dragRect:[0,0,300,300]})
 64 | 
 65 |   //表示拖动的范围大于坐标[0,0]
 66 |   //sprite.draggable({dragRect:[0,0]});
 67 | 
 68 |   /**拖动过程中，有三个事件 dragstart、drag、dragend**/
 69 |   sprite.on('dragstart',function(event){
 70 |     console.log('dragstart');
 71 |   });
 72 | 
 73 |   sprite.on('drag',function(event){
 74 |     console.log('drag');
 75 |   });
 76 | 
 77 |   sprite.on('dragend',function(event){
 78 |     console.log('dragend');
 79 |   });
 80 | 
 81 | 
 82 |   //取消元素拖动
 83 |   sprite.draggable(false);
 84 | 
 85 | ```
 86 | ### 作为方法使用
 87 | ```javascript
 88 | 
 89 |   import { draggable, droppable } from 'sprite-draggable'
 90 | 
 91 |   …
 92 | 
 93 |   let group = draggable(new Group());
 94 | 
 95 |   // draggable(group,false); draggable(group,{destroy,true}) 取消注册drag
 96 | 
 97 |   dropabble(group) //注册drop事件
 98 | 
 99 |   // dropabble(group,false) ;dropabble(group,{destroy:true}) 取消注册drop
100 | 
101 |   group.on('drag', (evt) => {
102 |     console.log('drag')
103 |   });
104 | 
105 |   group.on('drop', (evt) => {
106 |     console.log('drop')
107 |   });
108 | 
109 |   group.on('dragenter', (evt) => {
110 |     console.log('dragenter')
111 |   });
112 | 
113 |   group.on('dragleave', (evt) => {
114 |     console.log('dragleave')
115 |   });
116 | 
117 |   group.on('dragover', (evt) => {
118 |     console.log('dragover')
119 |   });
120 | 
121 |   let sprite = draggable(new Sprite());
122 | 
123 |   //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax]，不设置表示不控制拖动范围
124 |   draggable(sprite,{dragRect:[0,0,300,300]});
125 |   //draggable(sprite,{dragRect:[]});
126 | 
127 |   //表示拖动的范围大于坐标[0,0]
128 |   //draggable(sprite,{dragRect:[0,0]});
129 | 
130 |   /**拖动过程中，有三个事件 dragstart、drag、dragend**/
131 |   sprite.on('dragstart',function(event){
132 |     console.log('dragstart');
133 |   });
134 | 
135 |   sprite.on('drag',function(event){
136 |     console.log('drag');
137 |   });
138 | 
139 |   sprite.on('dragend',function(event){
140 |     console.log('dragend');
141 |   });
142 | 
143 | 
144 |   //取消元素拖动
145 |   draggable(sprite,false);
146 | 
147 | ```
148 | ### 事件列表：
149 | 
150 | | 事件   |      描述      |  其它 |
151 | |----------|-------------|------|
152 | | dragstart |  开始拖动对象 |  |
153 | | drag |    正在拖动对象   |   |
154 | | dragend | 停止拖动对象 |     |
155 | | dragover | 一个draggable对象在另一个droppable对象上拖动 |     |
156 | | dragenter | 一个draggable对象在进入一个droppable对象上 |   draggable进入droppable判断点为draggable对象最小矩形的中心  |
157 | | dragleave | 一个draggable对象离开一个droppable对象上 |     |
158 | | drop | 一个draggable对象放在一个droppable对象上 |     |
159 | 
160 | 
161 | 
162 | 


--------------------------------------------------------------------------------
/example/ResizeBlock.js:
--------------------------------------------------------------------------------
 1 | const { Sprite, Group } = spritejs;
 2 | import { draggable } from '../src/index';
 3 | 
 4 | export class ResizeBlock extends Group {
 5 |   constructor({pos=[0,0], size = [ 100, 30 ], backgroundColor = '#eee', borderColor = 'transparent', borderWidth = 1, dragRect = [] }) {
 6 |     super();
 7 |     this.size = size;
 8 |     this.backgroundColor = backgroundColor;
 9 |     this.borderWidth = borderWidth;
10 |     this.borderColor = borderColor;
11 |     this.dragRect = dragRect;
12 |     this.attr({clipOverflow:false,pos})
13 |     this.init();
14 |   }
15 |   init() {
16 |     let dragPx = 16; //拖动块的大小
17 |     this.attr({ size: this.size, bgcolor: this.backgroundColor, border: { color: this.borderColor, width: this.borderWidth } });
18 |     let $drag = new Sprite();
19 |     $drag.attr({anchor:[1,1], size: [ dragPx, dragPx ], pos: [ this.size[ 0 ], this.size[ 1 ] ], bgcolor: '#f00' });
20 |     draggable(this,{dragRect:this.dragRect});
21 |     draggable($drag,{dragRect:[dragPx * 2,dragPx * 2]});//父级容器至少为拖动块的两倍大小
22 |     let $group = this;
23 |     $drag.on("drag", function (evt) {
24 |       let [ x, y ] = this.attr('pos');
25 |       $group.attr({ size: [ x,y ] });
26 |     });
27 |     $drag.on('dragend',function(){
28 |     });
29 |     $drag.on("mouseenter", function () {
30 |       if (this.context && this.context.canvas) {
31 |         this.context.canvas.style.cursor = "se-resize"
32 |       }
33 |     }).on("mouseleave", function () {
34 |       if (this.context && this.context.canvas) {
35 |         this.context.canvas.style.cursor = "default"
36 |       }
37 |     });
38 |     this.append($drag);
39 |   }
40 | }


--------------------------------------------------------------------------------
/example/index.1.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { draggable, droppable } from '../src/index'
  3 | import { ResizeBlock } from './ResizeBlock'
  4 | let i = 0;
  5 | const { Scene, Sprite, Group } = spritejs, w = window.innerWidth, h = window.innerHeight;
  6 | const scene = new Scene('#canvas-wrap', { viewport: [ w, h ], displayRatio: 'auto', resolution: 'flex' });
  7 | 
  8 | scene.delegateEvent('mousewheel', document); //sprite 元素侦听mousewheel事件
  9 | 
 10 | const layer = scene.layer();
 11 | 
 12 | let spriteRed = draggable(new Sprite());//设置拖动范围
 13 | draggable(spriteRed, { dragRect: [ 0, 0, 300, 300 ] })
 14 | let spriteGreen = new Sprite();
 15 | let spriteScale = new ResizeBlock({ size: [ 100, 30 ], backgroundColor: '#eee', dragRect: [ 0, 0 ] });
 16 | 
 17 | spriteRed.attr({ size: [ 100, 30 ], bgcolor: '#f00', pos: [ 200, 200 ] })
 18 | spriteGreen.attr({ size: [ 100, 30 ], bgcolor: 'rgba(0,255,0,0.2)', zIndex: 1 })
 19 | 
 20 | // spriteGreen.on('dblclick', (evt) => {
 21 | //   droppable(group, { destroy: true });
 22 | // });
 23 | let nGroup = draggable(new Group());
 24 | nGroup.attr({ size: [ 30, 30 ], pos: [ 300, 300 ], clipOverflow: false, bgcolor: '#f00' })
 25 | nGroup.append(spriteGreen);
 26 | nGroup.on('mousedown', function () {
 27 |   console.log('mousedown')
 28 | })
 29 | //layer.append(spriteGreen);
 30 | 
 31 | 
 32 | let group = draggable(new Group());//设置group可以拖动
 33 | 
 34 | droppable(group); //设置group接收drop
 35 | 
 36 | group.on('drag', (evt) => {
 37 |   console.log('drag')
 38 | });
 39 | 
 40 | group.on('drop', (evt) => {
 41 |   console.log('drop')
 42 | });
 43 | 
 44 | group.on('dragenter', (evt) => {
 45 |   console.log('dragenter')
 46 | });
 47 | 
 48 | group.on('dragleave', (evt) => {
 49 |   console.log('dragleave')
 50 | });
 51 | 
 52 | group.on('dragover', (evt) => {
 53 |   console.log('dragover')
 54 | });
 55 | 
 56 | 
 57 | group.attr({ size: [ w, h ], bgcolor: '#ff0', rotate: 0, pos: [ w / 2, h / 2 ] });
 58 | 
 59 | group.append(spriteScale);
 60 | group.append(spriteRed);
 61 | 
 62 | group.attr({scale:0.6})
 63 | 
 64 | let newGroup = new Group();
 65 | newGroup.attr({rotate:'30'})
 66 | 
 67 | 
 68 | 
 69 | newGroup.append(group);
 70 | 
 71 | layer.append(newGroup);
 72 | layer.append(nGroup)
 73 | 
 74 | layer.on('dblclick', function () {
 75 |   draggable(spriteRed, { destroy: true })
 76 |   draggable(spriteGreen, { dragRect: [ 200, 240 ] })
 77 | });
 78 | 
 79 | group.on('mousewheel', (e) => {
 80 |   e.preventDefault();
 81 |   const [ scaleX, scaleY ] = group.attr('scale');
 82 |   let [ w, h ] = group.attr("size");
 83 |   let direction = 1;
 84 |   if (e.originalEvent.wheelDelta < 0) {//向下滚动
 85 |     direction = -1;
 86 |   }
 87 |   const dscale = 0.05 * direction;
 88 | 
 89 |   /** 计算以鼠标点为中心缩放 **/
 90 |   const [ oAnchorX, oAnchorY ] = group.attr('anchor');
 91 |   let pX = (oAnchorX * w + e.offsetX) / w; //鼠标点相对占比
 92 |   let pY = (oAnchorY * h + e.offsetY) / h;
 93 |   const [ oX, oY ] = group.attr("pos");
 94 |   let dx = w * dscale * pX;
 95 |   let dy = h * dscale * pY;
 96 |   group.attr({ scale: [ scaleX + dscale ], pos: [ oX - dx, oY - dy ] });
 97 | });
 98 | document.querySelector("#rotate").addEventListener('click', function () {
 99 |   let rotate = group.attr('rotate');
100 |   group.attr({ 'rotate': rotate + 15 });
101 | });


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { draggable, droppable,install } from '../src/index'
  3 | import { ResizeBlock } from './ResizeBlock'
  4 | let i = 0;
  5 | const { Scene, Sprite, Group } = spritejs, w = window.innerWidth, h = window.innerHeight;
  6 | spritejs.use(install)
  7 | const scene = new Scene('#canvas-wrap', { viewport: [ w, h ], displayRatio: 'auto', resolution: 'flex' });
  8 | 
  9 | scene.delegateEvent('mousewheel', document); //sprite 元素侦听mousewheel事件
 10 | 
 11 | const layer = scene.layer();
 12 | 
 13 | let spriteRed = new Sprite();//
 14 | spriteRed.draggable({ dragRect: [ 0, 0, 300, 300 ] });
 15 | let spriteGreen = new Sprite();
 16 | let spriteScale = new ResizeBlock({ size: [ 100, 30 ], backgroundColor: '#eee', dragRect: [ 0, 0 ] });
 17 | 
 18 | spriteRed.attr({ size: [ 100, 30 ], bgcolor: '#f00', pos: [ 200, 200 ] })
 19 | spriteGreen.attr({ size: [ 100, 30 ], bgcolor: 'rgba(0,255,0,0.2)', zIndex: 1 })
 20 | 
 21 | // spriteGreen.on('dblclick', (evt) => {
 22 | //   droppable(group, { destroy: true });
 23 | // });
 24 | let nGroup = new Group();
 25 | nGroup.draggable();
 26 | nGroup.attr({ size: [ 30, 30 ], pos: [ 300, 300 ], clipOverflow: false, bgcolor: '#f00' })
 27 | nGroup.append(spriteGreen);
 28 | nGroup.on('mousedown', function () {
 29 |   console.log('mousedown')
 30 | })
 31 | //layer.append(spriteGreen);
 32 | 
 33 | 
 34 | let group = draggable(new Group());//设置group可以拖动
 35 | group.droppable();
 36 | 
 37 | group.on('drag', (evt) => {
 38 |   console.log('drag')
 39 | });
 40 | 
 41 | group.on('drop', (evt) => {
 42 |   console.log('drop')
 43 | });
 44 | 
 45 | group.on('dragenter', (evt) => {
 46 |   console.log('dragenter')
 47 | });
 48 | 
 49 | group.on('dragleave', (evt) => {
 50 |   console.log('dragleave')
 51 | });
 52 | 
 53 | group.on('dragover', (evt) => {
 54 |   console.log('dragover')
 55 | });
 56 | 
 57 | 
 58 | group.attr({ size: [ w, h ], bgcolor: '#ff0', rotate: 0, pos: [ w / 2, h / 2 ] });
 59 | 
 60 | group.append(spriteScale);
 61 | group.append(spriteRed);
 62 | 
 63 | 
 64 | let newGroup = new Group();
 65 | 
 66 | 
 67 | 
 68 | newGroup.append(group);
 69 | 
 70 | layer.append(newGroup);
 71 | layer.append(nGroup)
 72 | 
 73 | layer.on('dblclick', function () {
 74 |   spriteRed.draggable(false);
 75 |   //draggable(spriteRed, { destroy: true })
 76 |   draggable(spriteGreen, { dragRect: [ 200, 240 ] })
 77 | });
 78 | 
 79 | group.on('mousewheel', (e) => {
 80 |   e.preventDefault();
 81 |   const [ scaleX, scaleY ] = group.attr('scale');
 82 |   let [ w, h ] = group.attr("size");
 83 |   let direction = 1;
 84 |   if (e.originalEvent.wheelDelta < 0) {//向下滚动
 85 |     direction = -1;
 86 |   }
 87 |   const dscale = 0.05 * direction;
 88 | 
 89 |   /** 计算以鼠标点为中心缩放 **/
 90 |   const [ oAnchorX, oAnchorY ] = group.attr('anchor');
 91 |   let pX = (oAnchorX * w + e.offsetX) / w; //鼠标点相对占比
 92 |   let pY = (oAnchorY * h + e.offsetY) / h;
 93 |   const [ oX, oY ] = group.attr("pos");
 94 |   let dx = w * dscale * pX;
 95 |   let dy = h * dscale * pY;
 96 |   group.attr({ scale: [ scaleX + dscale ], pos: [ oX - dx, oY - dy ] });
 97 | });
 98 | document.querySelector("#rotate").addEventListener('click', function () {
 99 |   let rotate = group.attr('rotate');
100 |   group.attr({ 'rotate': rotate + 15 });
101 | });


--------------------------------------------------------------------------------
/example/test.1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 6 |   <script src="https://unpkg.com/spritejs@2.27.2/dist/spritejs.min.js"></script>
 7 |   <style>
 8 |     html,
 9 |     body {
10 |       width: 100%;
11 |       height: 100%;
12 |       padding: 0;
13 |       margin: 0;
14 |     }
15 | 
16 |     #canvas-wrap {
17 |       height: 100%;
18 |       width: 100%;
19 |     }
20 | 
21 |     .option {
22 |       color: #00f;
23 |       position: absolute;
24 |       right: 10px;
25 |       top: 10px
26 |     }
27 | 
28 |     .option .rotate {
29 |       cursor: pointer;
30 |     }
31 | 
32 |     .info {
33 |       position: absolute;
34 |       top: 0;
35 |       font-size: 12px;
36 |       background-color: rgba(0, 0, 0, 0.1);
37 |       z-index: 100;
38 |       padding: 10px;
39 |       line-height: 1.8em;
40 |     }
41 |   </style>
42 | </head>
43 | 
44 | <body>
45 |   <div class="info">
46 |     1.黄色块可以拖动，并且该色块可以接收绿色块的drop事件，鼠标滚轮可以缩放黄色块 <br>
47 |     2.红色块可以拖动，拖动范围为[0,0,300,300],双击画布取消红色拖动 <br>
48 |     3.灰色块可以拖动，并且可以改变自身大小，自身大小的最小值可以受限制 <br>
49 |     4.绿色块能拖动，并且可以drop到黄色块上,触发对应的dragover,dragenter,dragleave,drop事件 <br>
50 |     双击画布，设置绿色块拖动范围为x>200,y>240
51 |   </div>
52 |   <div id="canvas-wrap"></div>
53 |   <div class="option">
54 |     <div class="rotate" id="rotate">旋转黄色画布</div>
55 |   </div>
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/example/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 6 |   <script src="https://unpkg.com/spritejs@2.27.2/dist/spritejs.min.js"></script>
 7 |   <style>
 8 |     html,
 9 |     body {
10 |       width: 100%;
11 |       height: 100%;
12 |       padding: 0;
13 |       margin: 0;
14 |     }
15 | 
16 |     #canvas-wrap {
17 |       height: 100%;
18 |       width: 100%;
19 |     }
20 | 
21 |     .option {
22 |       color: #00f;
23 |       position: absolute;
24 |       right: 10px;
25 |       top: 10px
26 |     }
27 | 
28 |     .option .rotate {
29 |       cursor: pointer;
30 |     }
31 | 
32 |     .info {
33 |       position: absolute;
34 |       top: 0;
35 |       font-size: 12px;
36 |       background-color: rgba(0, 0, 0, 0.1);
37 |       z-index: 100;
38 |       padding: 10px;
39 |       line-height: 1.8em;
40 |     }
41 |   </style>
42 | </head>
43 | 
44 | <body>
45 |   <div class="info">
46 |     1.黄色块可以拖动，并且该色块可以接收绿色块的drop事件，鼠标滚轮可以缩放黄色块 <br>
47 |     2.红色块可以拖动，拖动范围为[0,0,300,300],双击画布取消红色拖动 <br>
48 |     3.灰色块可以拖动，并且可以改变自身大小，自身大小的最小值可以受限制 <br>
49 |     4.绿色块能拖动，并且可以drop到黄色块上,触发对应的dragover,dragenter,dragleave,drop事件 <br>
50 |     双击画布，设置绿色块拖动范围为x>200,y>240
51 |   </div>
52 |   <div id="canvas-wrap"></div>
53 |   <div class="option">
54 |     <div class="rotate" id="rotate">旋转黄色画布</div>
55 |   </div>
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.spriteDraggable=e():t.spriteDraggable=e()}(window,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=42)}([function(t,e){var n=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(23)("wks"),o=n(16),i=n(2).Symbol,u="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=r},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e,n){var r=n(8),o=n(28),i=n(18),u=Object.defineProperty;e.f=n(4)?Object.defineProperty:function(t,e,n){if(r(t),e=i(e,!0),r(n),o)try{return u(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){t.exports=!n(10)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(3),o=n(13);t.exports=n(4)?function(t,e,n){return r.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(31),o=n(20);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(9);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){t.exports={}},function(t,e,n){var r=n(2),o=n(0),i=n(46),u=n(6),f=n(5),a=function(t,e,n){var c,s,l,p=t&a.F,d=t&a.G,v=t&a.S,y=t&a.P,h=t&a.B,g=t&a.W,b=d?o:o[e]||(o[e]={}),m=b.prototype,x=d?r:v?r[e]:(r[e]||{}).prototype;for(c in d&&(n=e),n)(s=!p&&x&&void 0!==x[c])&&f(b,c)||(l=s?x[c]:n[c],b[c]=d&&"function"!=typeof x[c]?n[c]:h&&s?i(l,r):g&&x[c]==l?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(l):y&&"function"==typeof l?i(Function.call,l):l,y&&((b.virtual||(b.virtual={}))[c]=l,t&a.R&&m&&!m[c]&&u(m,c,l)))};a.F=1,a.G=2,a.S=4,a.P=8,a.B=16,a.W=32,a.U=64,a.R=128,t.exports=a},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(30),o=n(24);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e){t.exports=!0},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(9);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(23)("keys"),o=n(16);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e,n){var r=n(0),o=n(2),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(15)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(3).f,o=n(5),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(2),o=n(0),i=n(15),u=n(40),f=n(3).f;t.exports=function(t){var e=o.Symbol||(o.Symbol=i?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||f(e,t,{value:u.f(t)})}},function(t,e,n){t.exports=!n(4)&&!n(10)(function(){return 7!=Object.defineProperty(n(29)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(9),o=n(2).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e,n){var r=n(5),o=n(7),i=n(49)(!1),u=n(22)("IE_PROTO");t.exports=function(t,e){var n,f=o(t),a=0,c=[];for(n in f)n!=u&&r(f,n)&&c.push(n);for(;e.length>a;)r(f,n=e[a++])&&(~i(c,n)||c.push(n));return c}},function(t,e,n){var r=n(19);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(20);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";e.__esModule=!0;var r=i(n(53)),o=i(n(64));function i(t){return t&&t.__esModule?t:{default:t}}e.default=function(){return function(t,e){if(Array.isArray(t))return t;if((0,r.default)(Object(t)))return function(t,e){var n=[],r=!0,i=!1,u=void 0;try{for(var f,a=(0,o.default)(t);!(r=(f=a.next()).done)&&(n.push(f.value),!e||n.length!==e);r=!0);}catch(t){i=!0,u=t}finally{try{!r&&a.return&&a.return()}finally{if(i)throw u}}return n}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}()},function(t,e,n){n(55);for(var r=n(2),o=n(6),i=n(11),u=n(1)("toStringTag"),f="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),a=0;a<f.length;a++){var c=f[a],s=r[c],l=s&&s.prototype;l&&!l[u]&&o(l,u,c),i[c]=i.Array}},function(t,e,n){"use strict";var r=n(15),o=n(12),i=n(36),u=n(6),f=n(11),a=n(58),c=n(26),s=n(61),l=n(1)("iterator"),p=!([].keys&&"next"in[].keys()),d=function(){return this};t.exports=function(t,e,n,v,y,h,g){a(n,e,v);var b,m,x,_=function(t){if(!p&&t in M)return M[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},O=e+" Iterator",S="values"==y,w=!1,M=t.prototype,j=M[l]||M["@@iterator"]||y&&M[y],P=j||_(y),E=y?S?_("entries"):P:void 0,T="Array"==e&&M.entries||j;if(T&&(x=s(T.call(new t)))!==Object.prototype&&x.next&&(c(x,O,!0),r||"function"==typeof x[l]||u(x,l,d)),S&&j&&"values"!==j.name&&(w=!0,P=function(){return j.call(this)}),r&&!g||!p&&!w&&M[l]||u(M,l,P),f[e]=P,f[O]=d,y)if(b={values:S?P:_("values"),keys:h?P:_("keys"),entries:E},g)for(m in b)m in M||i(M,m,b[m]);else o(o.P+o.F*(p||w),e,b);return b}},function(t,e,n){t.exports=n(6)},function(t,e,n){var r=n(8),o=n(59),i=n(24),u=n(22)("IE_PROTO"),f=function(){},a=function(){var t,e=n(29)("iframe"),r=i.length;for(e.style.display="none",n(60).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),a=t.F;r--;)delete a.prototype[i[r]];return a()};t.exports=Object.create||function(t,e){var n;return null!==t?(f.prototype=r(t),n=new f,f.prototype=null,n[u]=t):n=a(),void 0===e?n:o(n,e)}},function(t,e,n){"use strict";var r=n(62)(!0);n(35)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){var r=n(19),o=n(1)("toStringTag"),i="Arguments"==r(function(){return arguments}());t.exports=function(t){var e,n,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?n:i?r(e):"Object"==(u=r(e))&&"function"==typeof e.callee?"Arguments":u}},function(t,e,n){e.f=n(1)},function(t,e,n){var r=n(30),o=n(24).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.install=e.droppable=e.draggable=void 0;var r,o=n(43),i=(r=o)&&r.__esModule?r:{default:r},u=n(52);e.draggable=u.draggable,e.droppable=u.droppable,e.install=function(t){var e=t.BaseSprite;(0,i.default)(e.prototype,{draggable:function(t){(0,u.draggable)(this,t)},droppable:function(t){(0,u.droppable)(this,t)}})}},function(t,e,n){t.exports={default:n(44),__esModule:!0}},function(t,e,n){n(45),t.exports=n(0).Object.assign},function(t,e,n){var r=n(12);r(r.S+r.F,"Object",{assign:n(48)})},function(t,e,n){var r=n(47);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){"use strict";var r=n(14),o=n(25),i=n(17),u=n(32),f=n(31),a=Object.assign;t.exports=!a||n(10)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=a({},t)[n]||Object.keys(a({},e)).join("")!=r})?function(t,e){for(var n=u(t),a=arguments.length,c=1,s=o.f,l=i.f;a>c;)for(var p,d=f(arguments[c++]),v=s?r(d).concat(s(d)):r(d),y=v.length,h=0;y>h;)l.call(d,p=v[h++])&&(n[p]=d[p]);return n}:a},function(t,e,n){var r=n(7),o=n(50),i=n(51);t.exports=function(t){return function(e,n,u){var f,a=r(e),c=o(a.length),s=i(u,c);if(t&&n!=n){for(;c>s;)if((f=a[s++])!=f)return!0}else for(;c>s;s++)if((t||s in a)&&a[s]===n)return t||s||0;return!t&&-1}}},function(t,e,n){var r=n(21),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(21),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=u(n(33)),o=u(n(68));e.draggable=function(t,e){e&&void 0!==e.dragRect&&(t[y]=e.dragRect);if(e&&e.destroy||!1===e)return t[p]?(delete t[p],t.off("mousedown",t[c]).off("mousemove",t[s]).off("mouseup",t[l]).off("__end",t[l])):t;if(!t[p])return t[p]=!0,t[c]=function(e){if(e.originalEvent&&3===e.originalEvent.which)return;if(e.stopPropagation(),(f=function t(e){return e[p]?e:"layer"===e.tarName?null:e.parentNode?t(e.parentNode):null}(e.target))!==t)return;var n=e.offsetX,r=e.offsetY;f.x0_=n,f.y0_=r,f.dispatchEvent("dragstart",g(e),!0,!0),f.setMouseCapture()},t[s]=function(e){if(f&&f===t&&null!=f.x0_){var n=e.offsetX,o=e.offsetY,u=n-t.x0_,c=o-t.y0_,s=t.attr("pos"),l=(0,r.default)(s,2),p=l[0],d=l[1],h=new i.Matrix(t.transform.m),m=h.transformPoint(u,c),x=(0,r.default)(m,2);u=x[0],c=x[1];var _=t[y]||[],O=(0,r.default)(_,4),S=O[0],w=O[1],M=O[2],j=O[3],P=p+u,E=d+c;void 0!==S&&(P=Math.max(S,P)),void 0!==M&&(P=Math.min(M,P)),void 0!==w&&(E=Math.max(w,E)),void 0!==j&&(E=Math.min(j,E)),t.attr({x:P,y:E}),f.dispatchEvent("drag",g(e),!0,!0),function(t,e){t.dragItem=e,a.forEach(function(n){if(e!==n){var r=b(e,n);r&&!n[v]?(n[v]=!0,n.dispatchEvent("dragenter",g(t),!0,!0)):!r&&n[v]?(delete n[v],n.dispatchEvent("dragleave",g(t),!0,!0)):r&&n[v]&&n.dispatchEvent("dragover",g(t),!0,!0)}})}(e,t)}},t[l]=function(e){f&&null!=f.x0_&&(f.releaseMouseCapture(),delete f.x0_,delete f.y0_,f.dispatchEvent("dragend",g(e),!0,!0),function(t,e){t.dragItem=e,a.forEach(function(n){var r=b(e,n);r&&n[v]&&(delete n[v],n.dispatchEvent("drop",g(t),!0,!0))})}(e,t));f=null},function(t){t.layer&&!t[h]?(t.layer.on("mouseleave",function(e){t.dispatchEvent("__end",{})}),t[h]=!0):t[h]||(t.on("afterdraw",function(e){t.layer.on("mouseleave",function(e){t.dispatchEvent("__end",{})})}),t[h]=!0)}(t),t.on("mousedown",t[c]).on("mousemove",t[s]).on("mouseup",t[l]).on("__end",t[l])},e.droppable=function(t,e){if(e&&e.destroy||!1===e){if(t[d]){delete t[p];var n=a.indexOf(t);-1!==n&&a.splice(n,1)}}else t[d]||(a.push(t),t[d]=!0);return t};var i=n(79);function u(t){return t&&t.__esModule?t:{default:t}}var f=null,a=[],c=(0,o.default)("mouseDown"),s=(0,o.default)("mouseMove"),l=(0,o.default)("mouseUp"),p=(0,o.default)("isDraggable"),d=(0,o.default)("isDroppable"),v=(0,o.default)("isDragenter"),y=(0,o.default)("dragRect"),h=(0,o.default)("_layerLeave");function g(t){return{detail:t}}function b(t,e){var n=t.renderBox,r=m(t),o=m(e);r=[r[0]-o[0],r[1]-o[1]];var i=[(n[0]+n[2])/2+r[0],(n[1]+n[3])/2+r[1]];return e.pointCollision({offsetX:i[0],offsetY:i[1],layerX:i[0],layerY:i[1]})}function m(t){var e=0,n=0;if(t.parent&&t.parent.tagName&&"layer"!==t.parent.tagName.toLowerCase()){var o=(0,r.default)(t.parent.renderBox,2);e=o[0],n=o[1]}return[e,n]}},function(t,e,n){t.exports={default:n(54),__esModule:!0}},function(t,e,n){n(34),n(38),t.exports=n(63)},function(t,e,n){"use strict";var r=n(56),o=n(57),i=n(11),u=n(7);t.exports=n(35)(Array,"Array",function(t,e){this._t=u(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e){t.exports=function(){}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){"use strict";var r=n(37),o=n(13),i=n(26),u={};n(6)(u,n(1)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(u,{next:o(1,n)}),i(t,e+" Iterator")}},function(t,e,n){var r=n(3),o=n(8),i=n(14);t.exports=n(4)?Object.defineProperties:function(t,e){o(t);for(var n,u=i(e),f=u.length,a=0;f>a;)r.f(t,n=u[a++],e[n]);return t}},function(t,e,n){var r=n(2).document;t.exports=r&&r.documentElement},function(t,e,n){var r=n(5),o=n(32),i=n(22)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,e,n){var r=n(21),o=n(20);t.exports=function(t){return function(e,n){var i,u,f=String(o(e)),a=r(n),c=f.length;return a<0||a>=c?t?"":void 0:(i=f.charCodeAt(a))<55296||i>56319||a+1===c||(u=f.charCodeAt(a+1))<56320||u>57343?t?f.charAt(a):i:t?f.slice(a,a+2):u-56320+(i-55296<<10)+65536}}},function(t,e,n){var r=n(39),o=n(1)("iterator"),i=n(11);t.exports=n(0).isIterable=function(t){var e=Object(t);return void 0!==e[o]||"@@iterator"in e||i.hasOwnProperty(r(e))}},function(t,e,n){t.exports={default:n(65),__esModule:!0}},function(t,e,n){n(34),n(38),t.exports=n(66)},function(t,e,n){var r=n(8),o=n(67);t.exports=n(0).getIterator=function(t){var e=o(t);if("function"!=typeof e)throw TypeError(t+" is not iterable!");return r(e.call(t))}},function(t,e,n){var r=n(39),o=n(1)("iterator"),i=n(11);t.exports=n(0).getIteratorMethod=function(t){if(null!=t)return t[o]||t["@@iterator"]||i[r(t)]}},function(t,e,n){t.exports={default:n(69),__esModule:!0}},function(t,e,n){n(70),n(76),n(77),n(78),t.exports=n(0).Symbol},function(t,e,n){"use strict";var r=n(2),o=n(5),i=n(4),u=n(12),f=n(36),a=n(71).KEY,c=n(10),s=n(23),l=n(26),p=n(16),d=n(1),v=n(40),y=n(27),h=n(72),g=n(73),b=n(8),m=n(9),x=n(7),_=n(18),O=n(13),S=n(37),w=n(74),M=n(75),j=n(3),P=n(14),E=M.f,T=j.f,L=w.f,k=r.Symbol,I=r.JSON,N=I&&I.stringify,A=d("_hidden"),C=d("toPrimitive"),F={}.propertyIsEnumerable,D=s("symbol-registry"),R=s("symbols"),z=s("op-symbols"),V=Object.prototype,G="function"==typeof k,B=r.QObject,W=!B||!B.prototype||!B.prototype.findChild,Y=i&&c(function(){return 7!=S(T({},"a",{get:function(){return T(this,"a",{value:7}).a}})).a})?function(t,e,n){var r=E(V,e);r&&delete V[e],T(t,e,n),r&&t!==V&&T(V,e,r)}:T,H=function(t){var e=R[t]=S(k.prototype);return e._k=t,e},J=G&&"symbol"==typeof k.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof k},X=function(t,e,n){return t===V&&X(z,e,n),b(t),e=_(e,!0),b(n),o(R,e)?(n.enumerable?(o(t,A)&&t[A][e]&&(t[A][e]=!1),n=S(n,{enumerable:O(0,!1)})):(o(t,A)||T(t,A,O(1,{})),t[A][e]=!0),Y(t,e,n)):T(t,e,n)},q=function(t,e){b(t);for(var n,r=h(e=x(e)),o=0,i=r.length;i>o;)X(t,n=r[o++],e[n]);return t},K=function(t){var e=F.call(this,t=_(t,!0));return!(this===V&&o(R,t)&&!o(z,t))&&(!(e||!o(this,t)||!o(R,t)||o(this,A)&&this[A][t])||e)},U=function(t,e){if(t=x(t),e=_(e,!0),t!==V||!o(R,e)||o(z,e)){var n=E(t,e);return!n||!o(R,e)||o(t,A)&&t[A][e]||(n.enumerable=!0),n}},Q=function(t){for(var e,n=L(x(t)),r=[],i=0;n.length>i;)o(R,e=n[i++])||e==A||e==a||r.push(e);return r},Z=function(t){for(var e,n=t===V,r=L(n?z:x(t)),i=[],u=0;r.length>u;)!o(R,e=r[u++])||n&&!o(V,e)||i.push(R[e]);return i};G||(f((k=function(){if(this instanceof k)throw TypeError("Symbol is not a constructor!");var t=p(arguments.length>0?arguments[0]:void 0),e=function(n){this===V&&e.call(z,n),o(this,A)&&o(this[A],t)&&(this[A][t]=!1),Y(this,t,O(1,n))};return i&&W&&Y(V,t,{configurable:!0,set:e}),H(t)}).prototype,"toString",function(){return this._k}),M.f=U,j.f=X,n(41).f=w.f=Q,n(17).f=K,n(25).f=Z,i&&!n(15)&&f(V,"propertyIsEnumerable",K,!0),v.f=function(t){return H(d(t))}),u(u.G+u.W+u.F*!G,{Symbol:k});for(var $="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),tt=0;$.length>tt;)d($[tt++]);for(var et=P(d.store),nt=0;et.length>nt;)y(et[nt++]);u(u.S+u.F*!G,"Symbol",{for:function(t){return o(D,t+="")?D[t]:D[t]=k(t)},keyFor:function(t){if(!J(t))throw TypeError(t+" is not a symbol!");for(var e in D)if(D[e]===t)return e},useSetter:function(){W=!0},useSimple:function(){W=!1}}),u(u.S+u.F*!G,"Object",{create:function(t,e){return void 0===e?S(t):q(S(t),e)},defineProperty:X,defineProperties:q,getOwnPropertyDescriptor:U,getOwnPropertyNames:Q,getOwnPropertySymbols:Z}),I&&u(u.S+u.F*(!G||c(function(){var t=k();return"[null]"!=N([t])||"{}"!=N({a:t})||"{}"!=N(Object(t))})),"JSON",{stringify:function(t){for(var e,n,r=[t],o=1;arguments.length>o;)r.push(arguments[o++]);if(n=e=r[1],(m(e)||void 0!==t)&&!J(t))return g(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!J(e))return e}),r[1]=e,N.apply(I,r)}}),k.prototype[C]||n(6)(k.prototype,C,k.prototype.valueOf),l(k,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},function(t,e,n){var r=n(16)("meta"),o=n(9),i=n(5),u=n(3).f,f=0,a=Object.isExtensible||function(){return!0},c=!n(10)(function(){return a(Object.preventExtensions({}))}),s=function(t){u(t,r,{value:{i:"O"+ ++f,w:{}}})},l=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!a(t))return"F";if(!e)return"E";s(t)}return t[r].i},getWeak:function(t,e){if(!i(t,r)){if(!a(t))return!0;if(!e)return!1;s(t)}return t[r].w},onFreeze:function(t){return c&&l.NEED&&a(t)&&!i(t,r)&&s(t),t}}},function(t,e,n){var r=n(14),o=n(25),i=n(17);t.exports=function(t){var e=r(t),n=o.f;if(n)for(var u,f=n(t),a=i.f,c=0;f.length>c;)a.call(t,u=f[c++])&&e.push(u);return e}},function(t,e,n){var r=n(19);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){var r=n(7),o=n(41).f,i={}.toString,u="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return u&&"[object Window]"==i.call(t)?function(t){try{return o(t)}catch(t){return u.slice()}}(t):o(r(t))}},function(t,e,n){var r=n(17),o=n(13),i=n(7),u=n(18),f=n(5),a=n(28),c=Object.getOwnPropertyDescriptor;e.f=n(4)?c:function(t,e){if(t=i(t),e=u(e,!0),a)try{return c(t,e)}catch(t){}if(f(t,e))return o(!r.f.call(t,e),t[e])}},function(t,e){},function(t,e,n){n(27)("asyncIterator")},function(t,e,n){n(27)("observable")},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Vector=e.Matrix=void 0;var r=i(n(80)),o=i(n(81));function i(t){return t&&t.__esModule?t:{default:t}}e.Matrix=r.default,e.Vector=o.default},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){t=t||[1,0,0,1,0,0],this.m=[t[0],t[1],t[2],t[3],t[4],t[5]]};r.prototype.unit=function(){return this.m=[1,0,0,1,0,0],this},r.prototype.multiply=function(t){var e=this.m,n=void 0;n=t instanceof r?t.m:t;var o=e[0]*n[0]+e[2]*n[1],i=e[1]*n[0]+e[3]*n[1],u=e[0]*n[2]+e[2]*n[3],f=e[1]*n[2]+e[3]*n[3],a=e[0]*n[4]+e[2]*n[5]+e[4],c=e[1]*n[4]+e[3]*n[5]+e[5];return e[0]=o,e[1]=i,e[2]=u,e[3]=f,e[4]=a,e[5]=c,this},r.prototype.inverse=function(){var t=new r(this.m),e=t.m,n=1/(e[0]*e[3]-e[1]*e[2]),o=e[3]*n,i=-e[1]*n,u=-e[2]*n,f=e[0]*n,a=n*(e[2]*e[5]-e[3]*e[4]),c=n*(e[1]*e[4]-e[0]*e[5]);return e[0]=o,e[1]=i,e[2]=u,e[3]=f,e[4]=a,e[5]=c,t},r.prototype.translate=function(t,e){return this.multiply([1,0,0,1,t,e])},r.prototype.rotate=function(t){var e=t*Math.PI/180,n=Math.cos(e),r=Math.sin(e);return this.multiply([n,r,-r,n,0,0])},r.prototype.skew=function(t,e){e|=0;var n=t*Math.PI/180,r=e*Math.PI/180,o=Math.tan(n),i=Math.tan(r);return this.multiply([1,i,o,1,0,0])},r.prototype.scale=function(t,e){return this.multiply([t,0,0,e,0,0])},r.prototype.transformPoint=function(t,e){var n=t,r=e;return[t=n*this.m[0]+r*this.m[2]+this.m[4],e=n*this.m[1]+r*this.m[3]+this.m[5]]},r.prototype.transformVector=function(t,e){var n=t,r=e;return[t=n*this.m[0]+r*this.m[2],e=n*this.m[1]+r*this.m[3]]},e.default=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=u(n(33)),o=u(n(82)),i=u(n(83));function u(t){return t&&t.__esModule?t:{default:t}}var f=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0,0];(0,o.default)(this,t);var i=(0,r.default)(e,3),u=i[0],f=i[1],a=i[2],c=(0,r.default)(n,3),s=c[0],l=c[1],p=c[2];a=a||0,p=p||0,this.x=u-s,this.y=f-l,this.z=a-p}return(0,i.default)(t,[{key:"unit",value:function(){var e=this.length;return new t([this.x/e,this.y/e,this.z/e])}},{key:"dot",value:function(t){return this.x*t.x+this.y*t.y+this.z*t.z}},{key:"cross",value:function(e){var n=this.x,r=this.y,o=this.z,i=e.x,u=e.y,f=e.z;return new t([r*f-o*u,o*i-n*f,n*u-i*r])}},{key:"length",get:function(){var t=this.x,e=this.y,n=this.z;return Math.sqrt(t*t+e*e+n*n)}}]),t}();e.default=f},function(t,e,n){"use strict";e.__esModule=!0,e.default=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e,n){"use strict";e.__esModule=!0;var r,o=n(84),i=(r=o)&&r.__esModule?r:{default:r};e.default=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),(0,i.default)(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}()},function(t,e,n){t.exports={default:n(85),__esModule:!0}},function(t,e,n){n(86);var r=n(0).Object;t.exports=function(t,e,n){return r.defineProperty(t,e,n)}},function(t,e,n){var r=n(12);r(r.S+r.F*!n(4),"Object",{defineProperty:n(3).f})}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sprite-draggable",
 3 |   "version": "0.1.21",
 4 |   "description": "let sprite can draggable",
 5 |   "main": "lib/index.js",
 6 |   "browser": "lib/index.js",
 7 |   "directories": {
 8 |     "lib": "lib"
 9 |   },
10 |   "scripts": {
11 |     "build": "webpack --config ./webpack.config.prod.js",
12 |     "standalone": "babel src -d lib && webpack --env.standalone",
13 |     "start": "npm run build && webpack-dev-server --config ./webpack.config.js",
14 |     "prepublishOnly": "npm run build",
15 |     "lint": "eslint ./ --fix"
16 |   },
17 |   "author": "yaotaiyang",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/spritejs/sprite-draggable/issues"
21 |   },
22 |   "devDependencies": {
23 |     "babel-cli": "^6.26.0",
24 |     "babel-core": "^6.26.3",
25 |     "babel-eslint": "^8.2.5",
26 |     "babel-loader": "^7.1.4",
27 |     "babel-plugin-transform-class-properties": "^6.24.1",
28 |     "babel-plugin-transform-decorators-runtime": "^0.4.0",
29 |     "babel-plugin-transform-runtime": "^6.23.0",
30 |     "babel-preset-env": "^1.7.0",
31 |     "colors": "^1.3.1",
32 |     "coveralls": "^3.0.2",
33 |     "eslint": "^5.0.1",
34 |     "eslint-config-sprite": "^1.0.4",
35 |     "eslint-plugin-html": "^4.0.5",
36 |     "hamming-distance": "^1.0.0",
37 |     "html-webpack-plugin": "^3.2.0",
38 |     "imghash": "^0.0.3",
39 |     "nyc": "^12.0.2",
40 |     "pixelmatch": "^4.0.2",
41 |     "spritejs": "^2.17.1",
42 |     "webpack": "^4.12.2",
43 |     "webpack-cli": "^3.0.8",
44 |     "webpack-dev-server": "^3.1.4"
45 |   },
46 |   "homepage": "https://github.com/spritejs/sprite-draggable",
47 |   "dependencies": {
48 |     "sprite-math": "^1.0.5"
49 |   }
50 | }


--------------------------------------------------------------------------------
/sprite-draggable.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-draggable/5f6ffd15a394ace9bd9259adfae1e725d9e6493f/sprite-draggable.jpg


--------------------------------------------------------------------------------
/src/draggable.js:
--------------------------------------------------------------------------------
  1 | import { Matrix } from 'sprite-math'
  2 | let $drag = null
  3 | let dropList = []
  4 | const _mouseDown = Symbol('mouseDown')
  5 | const _mouseMove = Symbol('mouseMove')
  6 | const _mouseUp = Symbol('mouseUp')
  7 | const _isDraggable = Symbol('isDraggable')
  8 | const _isDroppable = Symbol('isDroppable')
  9 | const _isDragenter = Symbol('isDragenter')
 10 | const _dragRect = Symbol('dragRect')
 11 | const _layerLeave = Symbol('_layerLeave')
 12 | 
 13 | export function draggable(sprite, option) {
 14 |   if (option && option.dragRect !== undefined) {
 15 |     // 拖动范围设置
 16 |     sprite[_dragRect] = option.dragRect
 17 |   }
 18 |   if ((option && option.destroy) || option === false) {
 19 |     //销毁draggable
 20 |     if (!sprite[_isDraggable]) return sprite
 21 |     delete sprite[_isDraggable]
 22 |     return sprite
 23 |       .off('mousedown', sprite[_mouseDown])
 24 |       .off('mousemove', sprite[_mouseMove])
 25 |       .off('mouseup', sprite[_mouseUp])
 26 |       .off('__end', sprite[_mouseUp])
 27 |   } else {
 28 |     if (!sprite[_isDraggable]) {
 29 |       sprite[_isDraggable] = true
 30 |       sprite[_mouseDown] = mouseDown
 31 |       sprite[_mouseMove] = mouseMove
 32 |       sprite[_mouseUp] = mouseUp
 33 |       layerLeave(sprite) //处理drag出了layer的情况
 34 |       return sprite
 35 |         .on('mousedown', sprite[_mouseDown])
 36 |         .on('mousemove', sprite[_mouseMove])
 37 |         .on('mouseup', sprite[_mouseUp])
 38 |         .on('__end', sprite[_mouseUp])
 39 |     }
 40 |   }
 41 |   function mouseDown(evt) {
 42 |     if (evt.originalEvent && evt.originalEvent.which === 3) {
 43 |       return
 44 |     }
 45 |     evt.stopPropagation()
 46 |     $drag = getDragTarget(evt.target)
 47 |     if ($drag !== sprite) return
 48 |     const { offsetX, offsetY } = evt
 49 |     $drag.x0_ = offsetX
 50 |     $drag.y0_ = offsetY
 51 |     $drag.dispatchEvent('dragstart', transEvent(evt), true, true)
 52 |     $drag.setMouseCapture()
 53 |   }
 54 | 
 55 |   function mouseMove(evt) {
 56 |     //evt.stopPropagation();
 57 |     if ($drag && $drag === sprite && $drag.x0_ != null) {
 58 |       const { offsetX, offsetY } = evt
 59 |       let dx = offsetX - sprite.x0_
 60 |       let dy = offsetY - sprite.y0_
 61 |       const [cx, cy] = sprite.attr('pos')
 62 |       const m = new Matrix(sprite.transform.m)
 63 |       ;[dx, dy] = m.transformPoint(dx, dy)
 64 |       let [minX, minY, maxX, maxY] = sprite[_dragRect] || [] //
 65 |       let tarX = cx + dx
 66 |       let tarY = cy + dy
 67 |       if (minX !== undefined) {
 68 |         tarX = Math.max(minX, tarX)
 69 |       }
 70 |       if (maxX !== undefined) {
 71 |         tarX = Math.min(maxX, tarX)
 72 |       }
 73 |       if (minY !== undefined) {
 74 |         tarY = Math.max(minY, tarY)
 75 |       }
 76 |       if (maxY !== undefined) {
 77 |         tarY = Math.min(maxY, tarY)
 78 |       }
 79 | 
 80 |       sprite.attr({ x: tarX, y: tarY })
 81 |       $drag.dispatchEvent('drag', transEvent(evt), true, true)
 82 |       checkDragmove(evt, sprite)
 83 |     }
 84 |   }
 85 | 
 86 |   function mouseUp(evt) {
 87 |     //evt.stopPropagation();
 88 |     if ($drag && $drag.x0_ != null) {
 89 |       $drag.releaseMouseCapture()
 90 |       delete $drag.x0_
 91 |       delete $drag.y0_
 92 |       $drag.dispatchEvent('dragend', transEvent(evt), true, true)
 93 |       checkDragUp(evt, sprite)
 94 |     }
 95 |     $drag = null
 96 |   }
 97 | }
 98 | 
 99 | export function droppable(sprite, option) {
100 |   if ((option && option.destroy) || option === false) {
101 |     //销毁drop
102 |     if (sprite[_isDroppable]) {
103 |       delete sprite[_isDraggable]
104 |       const spriteIndex = dropList.indexOf(sprite)
105 |       if (spriteIndex !== -1) {
106 |         dropList.splice(spriteIndex, 1)
107 |       }
108 |     }
109 |   } else {
110 |     if (!sprite[_isDroppable]) {
111 |       dropList.push(sprite)
112 |       sprite[_isDroppable] = true
113 |     }
114 |   }
115 |   return sprite
116 | }
117 | 
118 | function transEvent(evt) {
119 |   return { detail: evt }
120 | }
121 | 
122 | function checkDragmove(evt, sprite) {
123 |   evt.dragItem = sprite
124 |   //const moveRect = sprite.renderBox;
125 |   dropList.forEach(dropSprite => {
126 |     if (sprite !== dropSprite) {
127 |       let collision = rectCollision(sprite, dropSprite)
128 |       if (collision && !dropSprite[_isDragenter]) {
129 |         dropSprite[_isDragenter] = true
130 |         dropSprite.dispatchEvent('dragenter', transEvent(evt), true, true)
131 |       } else if (!collision && dropSprite[_isDragenter]) {
132 |         delete dropSprite[_isDragenter]
133 |         dropSprite.dispatchEvent('dragleave', transEvent(evt), true, true)
134 |       } else if (collision && dropSprite[_isDragenter]) {
135 |         dropSprite.dispatchEvent('dragover', transEvent(evt), true, true)
136 |       }
137 |     }
138 |   })
139 | }
140 | 
141 | function checkDragUp(evt, sprite) {
142 |   evt.dragItem = sprite
143 |   dropList.forEach(dropSprite => {
144 |     let collision = rectCollision(sprite, dropSprite)
145 |     if (collision && dropSprite[_isDragenter]) {
146 |       delete dropSprite[_isDragenter]
147 |       dropSprite.dispatchEvent('drop', transEvent(evt), true, true)
148 |     }
149 |   })
150 | }
151 | 
152 | function rectCollision(sprite, bgRect) {
153 |   //判断 moveRect的centerPoint是否在bgRect中
154 |   let moveRect = sprite.renderBox
155 |   let dPos = getLayerPos(sprite)
156 |   let bgParentPos = getLayerPos(bgRect)
157 |   dPos = [dPos[0] - bgParentPos[0], dPos[1] - bgParentPos[1]]
158 |   const centerPoint = [(moveRect[0] + moveRect[2]) / 2 + dPos[0], (moveRect[1] + moveRect[3]) / 2 + dPos[1]]
159 |   return bgRect.pointCollision({
160 |     offsetX: centerPoint[0],
161 |     offsetY: centerPoint[1],
162 |     layerX: centerPoint[0],
163 |     layerY: centerPoint[1]
164 |   })
165 | }
166 | 
167 | function getLayerPos(sprite) {
168 |   let x = 0,
169 |     y = 0
170 |   if (sprite.parent && sprite.parent.tagName && sprite.parent.tagName.toLowerCase() !== 'layer') {
171 |     ;[x, y] = sprite.parent.renderBox
172 |   }
173 |   return [x, y]
174 | }
175 | 
176 | function getDragTarget(dom) {
177 |   if (dom[_isDraggable]) {
178 |     return dom
179 |   }
180 |   if (dom.tarName === 'layer') {
181 |     return null
182 |   }
183 |   if (dom.parentNode) {
184 |     return getDragTarget(dom.parentNode)
185 |   }
186 |   return null
187 | }
188 | 
189 | function layerLeave(sprite) {
190 |   if (sprite.layer && !sprite[_layerLeave]) {
191 |     sprite.layer.on('mouseleave', _ => {
192 |       sprite.dispatchEvent('__end', {})
193 |     })
194 |     sprite[_layerLeave] = true
195 |   } else {
196 |     if (!sprite[_layerLeave]) {
197 |       sprite.on('afterdraw', _ => {
198 |         sprite.layer.on('mouseleave', _ => {
199 |           sprite.dispatchEvent('__end', {})
200 |         })
201 |       })
202 |       sprite[_layerLeave] = true
203 |     }
204 |   }
205 | }
206 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { draggable, droppable } from './draggable';
 2 | function install(spritejs){
 3 |   const BaseSprite = spritejs.BaseSprite;
 4 |   Object.assign(BaseSprite.prototype,{
 5 |     draggable:function(option){
 6 |       draggable(this,option)
 7 |     },
 8 |     droppable:function(option){
 9 |       droppable(this,option)
10 |     }
11 |   })
12 | }
13 | export {
14 |   draggable,
15 |   droppable,
16 |   install
17 | };
18 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | const webpack = require('webpack');
 4 | const HTMLPlugin = require('html-webpack-plugin')
 5 | 
 6 | let babelConf;
 7 | if (fs.existsSync('./.babelrc')) {
 8 |   // use babel
 9 |   babelConf = JSON.parse(fs.readFileSync('.babelrc'));
10 | }
11 | 
12 | module.exports = function (env = {}) {
13 |   const externals = {};
14 |   let filename = 'sprite-draggable.standalone.js';
15 |   if (!env.standalone) {
16 |     externals[ 'sprite-core' ] = 'spritejs';
17 |     filename = 'sprite-draggable.js';
18 |   }
19 | 
20 |   return {
21 |     mode: 'development',
22 |     entry: './example/index',
23 |     module: {
24 |       rules: [
25 |         {
26 |           test: /\.js$/,
27 |           exclude: /(node_modules|bower_components)/,
28 |           use: {
29 |             loader: 'babel-loader',
30 |             options: babelConf,
31 |           },
32 |         },
33 |       ],
34 | 
35 |       /* Advanced module configuration (click to show) */
36 |     },
37 | 
38 |     externals,
39 |     // Don't follow/bundle these modules, but request them at runtime from the environment
40 | 
41 |     stats: 'errors-only',
42 |     // lets you precisely control what bundle information gets displayed
43 | 
44 |     devServer: {
45 |       contentBase: path.join(__dirname, 'example'),
46 |       compress: true,
47 |       port: 9092,
48 |       hot: true
49 |       // ...
50 |     },
51 | 
52 |     plugins: [
53 |       // ...
54 |       new HTMLPlugin({
55 |         filename: "index.html",
56 |         template: './example/test.html',
57 |         inject: true
58 |       }),
59 |       new webpack.NamedModulesPlugin(),
60 |       new webpack.HotModuleReplacementPlugin()
61 |     ]
62 |   };
63 | };


--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | const webpack = require('webpack');
 4 | const HTMLPlugin = require('html-webpack-plugin')
 5 | 
 6 | let babelConf;
 7 | if (fs.existsSync('./.babelrc')) {
 8 |   // use babel
 9 |   babelConf = JSON.parse(fs.readFileSync('.babelrc'));
10 | }
11 | 
12 | module.exports = function (env = {}) {
13 |   const externals = {};
14 |   let filename = 'sprite-draggable.standalone.js';
15 |   if (!env.standalone) {
16 |     externals[ 'sprite-core' ] = 'spritejs';
17 |     filename = 'sprite-draggable.js';
18 |   }
19 | 
20 |   return {
21 |     mode: 'production',
22 |     entry: {
23 |       index: path.resolve(__dirname, './src/index')
24 |     },
25 |     output: {
26 |       path: path.resolve(__dirname, './lib'),
27 |       filename: '[name].js',
28 |       library: 'spriteDraggable',
29 |       libraryTarget: 'umd'
30 |     },
31 |     module: {
32 |       rules: [
33 |         {
34 |           test: /\.js$/,
35 |           exclude: /(node_modules|bower_components)/,
36 |           use: {
37 |             loader: 'babel-loader',
38 |             options: babelConf,
39 |           },
40 |         },
41 |       ],
42 | 
43 |       /* Advanced module configuration (click to show) */
44 |     }
45 |     // lets you precisely control what bundle information gets displayed
46 | 
47 |     // list of additional plugins
48 | 
49 | 
50 |     /* Advanced configuration (click to show) */
51 |   };
52 | };


--------------------------------------------------------------------------------