Browse Source

TS MoveComponent

ts-style-manager
Artur Arseniev 4 years ago
parent
commit
eb1f3e0d95
  1. 2
      src/canvas/index.ts
  2. 20
      src/commands/view/MoveComponent.ts

2
src/canvas/index.ts

@ -185,7 +185,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
* @returns {HTMLElement} * @returns {HTMLElement}
* @private * @private
*/ */
getHighlighter(compView: any) { getHighlighter(compView?: any) {
return this._getLocalEl(this.getCanvasView().hlEl, compView, 'getHighlighter'); return this._getLocalEl(this.getCanvasView().hlEl, compView, 'getHighlighter');
} }

20
src/commands/view/MoveComponent.js → src/commands/view/MoveComponent.ts

@ -3,11 +3,13 @@ import Backbone from 'backbone';
import { on, off } from '../../utils/mixins'; import { on, off } from '../../utils/mixins';
import SelectComponent from './SelectComponent'; import SelectComponent from './SelectComponent';
import SelectPosition from './SelectPosition'; import SelectPosition from './SelectPosition';
import { CustomCommand } from './CommandAbstract';
import Component from '../../dom_components/model/Component';
const $ = Backbone.$; const $ = Backbone.$;
export default extend({}, SelectPosition, SelectComponent, { export default extend({}, SelectPosition, SelectComponent, {
init(o) { init(o: any) {
SelectComponent.init.apply(this, arguments); SelectComponent.init.apply(this, arguments);
bindAll(this, 'initSorter', 'rollback', 'onEndMove'); bindAll(this, 'initSorter', 'rollback', 'onEndMove');
this.opt = o; this.opt = o;
@ -16,7 +18,7 @@ export default extend({}, SelectPosition, SelectComponent, {
this.noSelClass = this.ppfx + 'no-select'; this.noSelClass = this.ppfx + 'no-select';
}, },
enable(...args) { enable(...args: any) {
SelectComponent.enable.apply(this, args); SelectComponent.enable.apply(this, args);
this.getBadgeEl().addClass(this.badgeClass); this.getBadgeEl().addClass(this.badgeClass);
this.getHighlighterEl().addClass(this.hoverClass); this.getHighlighterEl().addClass(this.hoverClass);
@ -39,7 +41,7 @@ export default extend({}, SelectPosition, SelectComponent, {
* @param {Event} e * @param {Event} e
* @private * @private
* */ * */
initSorter(e) { initSorter(e: any) {
var el = $(e.target).data('model'); var el = $(e.target).data('model');
var drag = el.get('draggable'); var drag = el.get('draggable');
if (!drag) return; if (!drag) return;
@ -59,11 +61,12 @@ export default extend({}, SelectPosition, SelectComponent, {
* @param {Object} model * @param {Object} model
* @private * @private
*/ */
initSorterFromModel(model) { initSorterFromModel(model: Component) {
var drag = model.get('draggable'); var drag = model.get('draggable');
if (!drag) return; if (!drag) return;
// Avoid badge showing on move // Avoid badge showing on move
this.cacheEl = null; this.cacheEl = null;
// @ts-ignore
var el = model.view.el; var el = model.view.el;
this.startSelectPosition(el, this.frameEl.contentDocument); this.startSelectPosition(el, this.frameEl.contentDocument);
this.sorter.draggable = drag; this.sorter.draggable = drag;
@ -86,7 +89,7 @@ export default extend({}, SelectPosition, SelectComponent, {
* @param {Object} model * @param {Object} model
* @private * @private
*/ */
initSorterFromModels(models) { initSorterFromModels(models: Component[]) {
// TODO: if one only check for `draggable` // TODO: if one only check for `draggable`
// Avoid badge showing on move // Avoid badge showing on move
this.cacheEl = null; this.cacheEl = null;
@ -122,7 +125,7 @@ export default extend({}, SelectPosition, SelectComponent, {
* @param {Object} Selected element * @param {Object} Selected element
* @private * @private
* */ * */
onSelect(e, el) {}, onSelect(e: any, el: any) {},
/** /**
* Used to bring the previous situation before start moving the component * Used to bring the previous situation before start moving the component
@ -130,7 +133,7 @@ export default extend({}, SelectPosition, SelectComponent, {
* @param {Boolean} Indicates if rollback in anycase * @param {Boolean} Indicates if rollback in anycase
* @private * @private
* */ * */
rollback(e, force) { rollback(e: any, force: boolean) {
var key = e.which || e.keyCode; var key = e.which || e.keyCode;
if (key == 27 || force) { if (key == 27 || force) {
this.sorter.moved = false; this.sorter.moved = false;
@ -160,10 +163,11 @@ export default extend({}, SelectPosition, SelectComponent, {
}, },
stop(...args) { stop(...args) {
// @ts-ignore
SelectComponent.stop.apply(this, args); SelectComponent.stop.apply(this, args);
this.getBadgeEl().removeClass(this.badgeClass); this.getBadgeEl().removeClass(this.badgeClass);
this.getHighlighterEl().removeClass(this.hoverClass); this.getHighlighterEl().removeClass(this.hoverClass);
var wp = this.$wrapper; var wp = this.$wrapper;
wp.css('cursor', '').unbind().removeClass(this.noSelClass); wp.css('cursor', '').unbind().removeClass(this.noSelClass);
}, },
}); } as CustomCommand<{}, { [k: string]: any }>);
Loading…
Cancel
Save