73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
|
import { CORNERS, DRAG_ELEMENT_PARTS } from './constants'
|
||
|
|
|
||
|
|
// 鼠标样式类
|
||
|
|
export default class Cursor {
|
||
|
|
constructor(app) {
|
||
|
|
this.app = app
|
||
|
|
this.currentType = 'default'
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置鼠标指针样式
|
||
|
|
set(type = 'default') {
|
||
|
|
this.currentType = type
|
||
|
|
let style = type
|
||
|
|
if (type === 'eraser') {
|
||
|
|
style = `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAktJREFUWEfFlj+LFEEQxV+1GCiYmPgnEMVMAwM1VBQ/gIF46SnsdMuKYCRooiYaGJiI0jWB3ImBHuhFIhh4cOldYmJi4FcwX6a05XaZbWd7qnsObJhk6Kn366pX1UP4z4uG6o/H48OTyeQGgDNEtOK9/5wTcxCAc+6UiLwHcLol+piZH2khigHa4kT0BcDdFowaogggOvkHZr4WThy9V0FkA0QiK8wc6j9buRBZAFHwF8x8p6vWORBqgKjmT733D1JG00KoALTBYiDNd70AmiBDMpEEGCo+BUvFWQhgrT0CIPR3GDKqltJmgoiWvferYX8K4HkYLrshHmViU0S+1XV9OQlQVdUrIroFYImZ17SjNbVvNBpdMsZ8FZGNJEDHjB8MMRX/e+pUCWLDAHi4c6piiLZ4XNI5D0Tiz5j5nrU23GzFECnxOQ+0xUXkZV3Xt6f1LIXoE48BnojIfRFZret6OTZTLoRGfA7AWivhBTOnWlNVjh3xTwD29bXxTMxaG/5srv8ZPGvMvLSonfoy4Zy7KCIfARzsE48zEMQDRFhFEFVVnQewTkRHNeL/DCJrbTGEMeZ70zTrAE5qxTsn4QCIadWy7o1Ow2kgQrqJ6B2AEyLywxjzK3jYe885Yzvl+IXlcM5dEZG3AA7lpLsLLPk/0JUJ59xVEXkD4MBQ8eRt2JqCs0yEW4yILgDYsxviXV2wF8D+judYq0XDd1lGS3liVgLn3JaInM0xUOleItr23p+L74LXTdMcLw2a850x5qf3/qbKAzmBS/b+BpHvnTDlnKVDAAAAAElFTkSuQmCC) 10 10, auto`
|
||
|
|
}
|
||
|
|
this.app.container.style.cursor = style
|
||
|
|
}
|
||
|
|
|
||
|
|
// 隐藏鼠标指针
|
||
|
|
hide() {
|
||
|
|
this.set('none')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 复位鼠标指针
|
||
|
|
reset() {
|
||
|
|
this.set()
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置为 ✚ 字型
|
||
|
|
setCrosshair() {
|
||
|
|
this.set('crosshair')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置为 可移动 状态
|
||
|
|
setMove() {
|
||
|
|
this.set('move')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置为某个方向的可移动状态
|
||
|
|
setResize(dir) {
|
||
|
|
let type = ''
|
||
|
|
switch (dir) {
|
||
|
|
case DRAG_ELEMENT_PARTS.BODY:
|
||
|
|
type = 'move'
|
||
|
|
break
|
||
|
|
case DRAG_ELEMENT_PARTS.ROTATE:
|
||
|
|
type = 'grab'
|
||
|
|
break
|
||
|
|
case DRAG_ELEMENT_PARTS.TOP_LEFT_BTN:
|
||
|
|
type = 'nw-resize'
|
||
|
|
break
|
||
|
|
case DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN:
|
||
|
|
type = 'ne-resize'
|
||
|
|
break
|
||
|
|
case DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN:
|
||
|
|
type = 'se-resize'
|
||
|
|
break
|
||
|
|
case DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN:
|
||
|
|
type = 'sw-resize'
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
break
|
||
|
|
}
|
||
|
|
this.set(type)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置为橡皮擦样式
|
||
|
|
setEraser() {
|
||
|
|
this.set('eraser')
|
||
|
|
}
|
||
|
|
}
|