From b5f7ce33e8382ecfaba10e36b5e18e8d4b7efcc1 Mon Sep 17 00:00:00 2001 From: Ju99ernaut Date: Fri, 5 Mar 2021 14:40:05 +0200 Subject: [PATCH] Preserve `config.dragMode` #4 --- src/index.js | 166 +++++++++++++++++++++++++-------------------------- 1 file changed, 81 insertions(+), 85 deletions(-) diff --git a/src/index.js b/src/index.js index 4eb32f9..898e069 100644 --- a/src/index.js +++ b/src/index.js @@ -1,98 +1,94 @@ -import { - ruler -} from './ruler'; +import { ruler } from './ruler'; export default (editor, opts = {}) => { - const options = { - ...{ - // default options - dragMode: 'translate', - rulerHeight: 15, - canvasZoom: 94, - rulerOpts: {}, - }, - ...opts - }; + const options = { + ...{ + // default options + dragMode: 'translate', + rulerHeight: 15, + canvasZoom: 94, + rulerOpts: {}, + }, + ...opts + }; - const cm = editor.Commands; - const rulH = options.rulerHeight; - let zoom = options.canvasZoom - let scale = 100 / zoom; - let rulers; + const cm = editor.Commands; + const rulH = options.rulerHeight; + const defaultDragMode = editor.getConfig('dragMode'); + let zoom = options.canvasZoom + let scale = 100 / zoom; + let rulers; - cm.add('ruler-visibility', { - run(editor) { - !rulers && (rulers = new ruler({ - container: editor.Canvas.getCanvasView().el, - rulerHeight: rulH, - strokeStyle: 'white', - fillStyle: 'white', - ...options.rulerOpts - })) && editor.on('canvasScroll frame:scroll change:canvasOffset', () => { - setOffset(); - }); - editor.Rulers = rulers; - rulers.api.toggleRulerVisibility(true); - editor.Canvas.setZoom(zoom); - editor.setDragMode(options.dragMode); - setOffset(); - rulers.api.setScale(scale); - }, - stop(editor) { - rulers && rulers.api.toggleRulerVisibility(false); - editor.Canvas.setZoom(100); - editor.setDragMode(''); - } - }); - - const setOffset = () => { - const { - top, - left - } = editor.Canvas.getOffset(); - const scrollX = editor.Canvas.getBody().scrollLeft; - const scrollY = editor.Canvas.getBody().scrollTop; - rulers.api.setPos({ - x: left - rulH - scrollX / scale, - y: top - rulH - scrollY / scale + cm.add('ruler-visibility', { + run(editor) { + !rulers && (rulers = new ruler({ + container: editor.Canvas.getCanvasView().el, + rulerHeight: rulH, + strokeStyle: 'white', + fillStyle: 'white', + ...options.rulerOpts + })) && editor.on('canvasScroll frame:scroll change:canvasOffset', () => { + setOffset(); + }); + editor.Rulers = rulers; + rulers.api.toggleRulerVisibility(true); + editor.Canvas.setZoom(zoom); + editor.setDragMode(options.dragMode); + setOffset(); + rulers.api.setScale(scale); + }, + stop(editor) { + rulers && rulers.api.toggleRulerVisibility(false); + editor.Canvas.setZoom(100); + editor.setDragMode(defaultDragMode); + } }); - rulers.api.setScroll({ - x: scrollX, - y: scrollY - }); - } - cm.add('guides-visibility', { - run() { - rulers && rulers.api.toggleGuideVisibility(true); - }, - stop() { - rulers && rulers.api.toggleGuideVisibility(false); + const setOffset = () => { + const { top, left } = editor.Canvas.getOffset(); + const scrollX = editor.Canvas.getBody().scrollLeft; + const scrollY = editor.Canvas.getBody().scrollTop; + rulers.api.setPos({ + x: left - rulH - scrollX / scale, + y: top - rulH - scrollY / scale + }); + rulers.api.setScroll({ + x: scrollX, + y: scrollY + }); } - }); - cm.add('clear-guides', () => { - rulers && rulers.api.clearGuides(); - }); + cm.add('guides-visibility', { + run() { + rulers && rulers.api.toggleGuideVisibility(true); + }, + stop() { + rulers && rulers.api.toggleGuideVisibility(false); + } + }); + + cm.add('clear-guides', () => { + rulers && rulers.api.clearGuides(); + }); - cm.add('get-guides', () => { - if (rulers) return rulers.api.getGuides(); - else return 0; - }); + cm.add('get-guides', () => { + if (rulers) return rulers.api.getGuides(); + else return 0; + }); - cm.add('set-guides', (editor, sender, options = {}) => { - rulers && options.guides && rulers.api.setGuides(options.guides); - }); + cm.add('set-guides', (editor, sender, options = {}) => { + rulers && options.guides && rulers.api.setGuides(options.guides); + }); - cm.add('set-zoom', (editor, sender, options = {}) => { - zoom = options.zoom; - scale = 100 / zoom; - editor.Canvas.setZoom(zoom); - setOffset(); - rulers && rulers.api.setScale(scale); - }); + cm.add('set-zoom', (editor, sender, options = {}) => { + zoom = options.zoom; + scale = 100 / zoom; + editor.Canvas.setZoom(zoom); + setOffset(); + rulers && rulers.api.setScale(scale); + }); - cm.add('destroy-ruler', () => { - rulers && rulers.api.destroy(); - }); + cm.add('destroy-ruler', () => { + rulers && rulers.api.destroy(); + }); }; \ No newline at end of file