/** * javascript comment * @Author: 王林25 * @Date: 2021-04-07 14:45:24 * @Desc: 视图操作类 */ class View { /** * javascript comment * @Author: 王林25 * @Date: 2021-04-07 14:45:40 * @Desc: 构造函数 */ constructor(opt = {}) { this.opt = opt this.mindMap = this.opt.mindMap this.scale = 1 this.sx = 0 this.sy = 0 this.x = 0 this.y = 0 this.bind() } /** * javascript comment * @Author: 王林25 * @Date: 2021-04-07 15:38:51 * @Desc: 绑定 */ bind() { // 拖动视图 this.mindMap.event.on('mousedown', () => { this.sx = this.x this.sy = this.y }) this.mindMap.event.on('drag', (e, event) => { this.x = this.sx + event.mousemoveOffset.x this.y = this.sy + event.mousemoveOffset.y this.transform() }) // 放大缩小视图 this.mindMap.event.on('mousewheel', (e, dir) => { // // 放大 if (dir === 'down') { this.enlarge() } else { // 缩小 this.narrow() } }) } /** * @Author: 王林 * @Date: 2021-07-04 17:13:14 * @Desc: 应用变换 */ transform() { this.mindMap.draw.transform({ scale: this.scale, origin: 'left center', translate: [this.x, this.y], }) } /** * @Author: 王林 * @Date: 2021-07-04 17:10:34 * @Desc: 缩小 */ narrow() { if (this.scale - this.mindMap.opt.scaleRatio > 0.1) { this.scale -= this.mindMap.opt.scaleRatio } else { this.scale = 0.1 } this.transform() this.mindMap.emit('scale', this.scale) } /** * @Author: 王林 * @Date: 2021-07-04 17:10:41 * @Desc: 放大 */ enlarge() { this.scale += this.mindMap.opt.scaleRatio this.transform() this.mindMap.emit('scale', this.scale) } /** * javascript comment * @Author: 王林25 * @Date: 2021-04-07 15:43:26 * @Desc: 设置视图 */ setViewBox({ x, y, width, height }) { this.opt.draw.viewbox(x, y, width, height) } } export default View