Up files and TS

src/block_manager/view/BlockView.ts

@@ -1,7 +1,8 @@
 import { isFunction } from 'underscore';
 import { View } from '../../common';
 import EditorModel from '../../editor/model/Editor';
-import { on, off, hasDnd } from '../../utils/mixins';
+import { on, off } from '../../utils/dom';
+import { hasDnd } from '../../utils/mixins';
 import { BlockManagerConfig } from '../config/config';
 import Block from '../model/Block';
 

src/canvas/view/CanvasView.ts

@@ -4,8 +4,8 @@ import { ModuleView } from '../../abstract';
 import { BoxRect, Coordinates, ElementRect } from '../../common';
 import Component from '../../dom_components/model/Component';
 import ComponentView from '../../dom_components/view/ComponentView';
-import { createEl, getDocumentScroll, isTextNode, getElRect } from '../../utils/dom';
-import { getComponentView, getElement, getKeyChar, getUiClass, off, on } from '../../utils/mixins';
+import { createEl, getDocumentScroll, getElRect, getKeyChar, isTextNode, off, on } from '../../utils/dom';
+import { getComponentView, getElement, getUiClass } from '../../utils/mixins';
 import Canvas from '../model/Canvas';
 import Frame from '../model/Frame';
 import FrameView from './FrameView';

src/canvas/view/FrameView.ts

@@ -1,13 +1,22 @@
-import { bindAll, isString, debounce, isUndefined } from 'underscore';
-import { appendVNodes, append, createEl, createCustomEvent, motionsEv } from '../../utils/dom';
-import { on, off, setViewEl, hasDnd, getPointerEvent } from '../../utils/mixins';
+import { bindAll, debounce, isString, isUndefined } from 'underscore';
 import { ModuleView } from '../../abstract';
+import { BoxRect } from '../../common';
 import CssRulesView from '../../css_composer/view/CssRulesView';
 import Droppable from '../../utils/Droppable';
-import Frame from '../model/Frame';
+import {
+  append,
+  appendVNodes,
+  createCustomEvent,
+  createEl,
+  getPointerEvent,
+  motionsEv,
+  off,
+  on,
+} from '../../utils/dom';
+import { hasDnd, setViewEl } from '../../utils/mixins';
 import Canvas from '../model/Canvas';
+import Frame from '../model/Frame';
 import FrameWrapView from './FrameWrapView';
-import { BoxRect } from '../../common';
 
 export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
   /** @ts-ignore */

src/commands/view/CanvasMove.ts

@@ -1,6 +1,6 @@
 import { bindAll } from 'underscore';
-import { on, off, getKeyChar } from '../../utils/mixins';
 import Dragger from '../../utils/Dragger';
+import { getKeyChar, off, on } from '../../utils/dom';
 import { CommandObject } from './CommandAbstract';
 
 export default {

src/commands/view/MoveComponent.ts

@@ -1,10 +1,10 @@
-import { extend, bindAll } from 'underscore';
+import { bindAll, extend } from 'underscore';
 import { $ } from '../../common';
-import { on, off } from '../../utils/mixins';
+import Component from '../../dom_components/model/Component';
+import { off, on } from '../../utils/dom';
+import { CommandObject } from './CommandAbstract';
 import SelectComponent from './SelectComponent';
 import SelectPosition from './SelectPosition';
-import { CommandObject } from './CommandAbstract';
-import Component from '../../dom_components/model/Component';
 
 export default extend({}, SelectPosition, SelectComponent, {
   init(o: any) {

src/commands/view/SelectComponent.ts

@@ -3,8 +3,8 @@ import { $ } from '../../common';
 import Component from '../../dom_components/model/Component';
 import Toolbar from '../../dom_components/model/Toolbar';
 import ToolbarView from '../../dom_components/view/ToolbarView';
-import { isDoc, isTaggableNode, isVisible } from '../../utils/dom';
-import { getComponentView, getUnitFromValue, getViewEl, hasWin, off, on } from '../../utils/mixins';
+import { isDoc, isTaggableNode, isVisible, off, on } from '../../utils/dom';
+import { getComponentView, getUnitFromValue, getViewEl, hasWin } from '../../utils/mixins';
 import { CommandObject } from './CommandAbstract';
 
 let showOffsets: boolean;

src/dom_components/view/ComponentTextView.ts

@@ -2,10 +2,11 @@ import { bindAll } from 'underscore';
 import { ObjectAny } from '../../common';
 import RichTextEditorModule from '../../rich_text_editor';
 import RichTextEditor from '../../rich_text_editor/model/RichTextEditor';
-import { getModel, off, on } from '../../utils/mixins';
+import { off, on } from '../../utils/dom';
+import { getModel } from '../../utils/mixins';
 import Component from '../model/Component';
-import { getComponentIds } from '../model/Components';
 import ComponentText from '../model/ComponentText';
+import { getComponentIds } from '../model/Components';
 import { ComponentDefinition } from '../model/types';
 import ComponentView from './ComponentView';
 

src/domain_abstract/ui/InputNumber.ts

@@ -1,5 +1,5 @@
-import { bindAll, isUndefined, indexOf } from 'underscore';
-import { on, off } from '../../utils/mixins';
+import { bindAll, indexOf, isUndefined } from 'underscore';
+import { off, on } from '../../utils/dom';
 import Input from './Input';
 
 export default class InputNumber extends Input {

src/navigator/view/ItemView.ts

@@ -1,11 +1,12 @@
-import { isString, bindAll } from 'underscore';
+import { bindAll, isString } from 'underscore';
 import { View, ViewOptions } from '../../common';
-import { getModel, isEscKey, isEnterKey } from '../../utils/mixins';
-import ComponentView from '../../dom_components/view/ComponentView';
 import Component, { eventDrag } from '../../dom_components/model/Component';
-import ItemsView from './ItemsView';
+import ComponentView from '../../dom_components/view/ComponentView';
 import EditorModel from '../../editor/model/Editor';
+import { isEnterKey, isEscKey } from '../../utils/dom';
+import { getModel } from '../../utils/mixins';
 import LayerManager from '../index';
+import ItemsView from './ItemsView';
 
 export type ItemViewProps = ViewOptions & {
   ItemView: ItemView;

src/rich_text_editor/index.ts

@@ -42,8 +42,8 @@ import { Module } from '../abstract';
 import { Debounced, Model } from '../common';
 import ComponentView from '../dom_components/view/ComponentView';
 import EditorModel from '../editor/model/Editor';
-import { createEl, cx, removeEl } from '../utils/dom';
-import { hasWin, isDef, on } from '../utils/mixins';
+import { createEl, cx, on, removeEl } from '../utils/dom';
+import { hasWin, isDef } from '../utils/mixins';
 import defaults, { CustomRTE, RichTextEditorConfig } from './config/config';
 import RichTextEditor, { RichTextEditorAction } from './model/RichTextEditor';
 

src/rich_text_editor/model/RichTextEditor.ts

@@ -4,7 +4,8 @@
 import { isString } from 'underscore';
 import RichTextEditorModule from '..';
 import EditorModel from '../../editor/model/Editor';
-import { on, off, getPointerEvent, getModel } from '../../utils/mixins';
+import { getPointerEvent, off, on } from '../../utils/dom';
+import { getModel } from '../../utils/mixins';
 
 export interface RichTextEditorAction {
   name: string;

src/utils/Dragger.ts

@@ -1,6 +1,6 @@
-import { bindAll, isFunction, result, isUndefined } from 'underscore';
+import { bindAll, isFunction, isUndefined, result } from 'underscore';
 import { Position } from '../common';
-import { on, off, isEscKey, getPointerEvent } from './mixins';
+import { getPointerEvent, isEscKey, off, on } from './dom';
 
 type DraggerPosition = Position & { end?: boolean };
 

src/utils/Droppable.ts

@@ -2,8 +2,7 @@ import { bindAll, indexOf } from 'underscore';
 import CanvasModule from '../canvas';
 import { ObjectStrings } from '../common';
 import EditorModel from '../editor/model/Editor';
-import { getDocumentScroll } from './dom';
-import { off, on } from './mixins';
+import { getDocumentScroll, off, on } from './dom';
 
 // TODO move in sorter
 type SorterOptions = {

src/utils/Resizer.ts

@@ -1,7 +1,8 @@
-import { bindAll, isFunction, each } from 'underscore';
-import { Position } from '../common';
-import { on, off, normalizeFloat } from './mixins';
+import { bindAll, each, isFunction } from 'underscore';
 import { ElementPosOpts } from '../canvas/view/CanvasView';
+import { Position } from '../common';
+import { off, on } from './dom';
+import { normalizeFloat } from './mixins';
 
 type RectDim = {
   t: number;
@@ -457,7 +458,7 @@ export default class Resizer {
     const resizer = this;
     const config = this.opts || {};
     const mouseFetch = this.mousePosFetcher;
-    const attrName = 'data-' + config.prefix + 'handler';    
+    const attrName = 'data-' + config.prefix + 'handler';
     const rect = this.getElementPos(el!, { avoidFrameZoom: true, avoidFrameOffset: true });
     const parentRect = this.getElementPos(parentEl!);
     const target = e.target as HTMLElement;

src/utils/Sorter.ts

@@ -3,8 +3,8 @@ import { BlockProperties } from '../block_manager/model/Block';
 import CanvasModule from '../canvas';
 import { $, Collection, Model, View } from '../common';
 import EditorModel from '../editor/model/Editor';
-import { isTextNode } from './dom';
-import { getElement, getModel, getPointerEvent, matches, off, on } from './mixins';
+import { getPointerEvent, isTextNode, off, on } from './dom';
+import { getElement, getModel, matches } from './mixins';
 
 const noop = () => {};
 

src/utils/dom.ts

@@ -1,4 +1,4 @@
-import { each, isUndefined, isString } from 'underscore';
+import { each, isArray, isString, isUndefined } from 'underscore';
 import { ObjectAny } from '../common';
 
 type vNode = {
@@ -190,3 +190,41 @@ export const getDocumentScroll = (el?: HTMLElement) => {
     y: (win.pageYOffset || docEl.scrollTop || 0) - (docEl.clientTop || 0),
   };
 };
+
+export const getKeyCode = (ev: KeyboardEvent) => ev.which || ev.keyCode;
+
+export const getKeyChar = (ev: KeyboardEvent) => String.fromCharCode(getKeyCode(ev));
+
+export const getPointerEvent = (ev: any): PointerEvent => (ev.touches && ev.touches[0] ? ev.touches[0] : ev);
+
+export const isEscKey = (ev: KeyboardEvent) => getKeyCode(ev) === 27;
+
+export const isEnterKey = (ev: KeyboardEvent) => getKeyCode(ev) === 13;
+
+export const on = <E extends Event = Event>(
+  el: EventTarget | EventTarget[],
+  ev: string,
+  fn: (ev: E) => void,
+  opts?: AddEventListenerOptions
+) => {
+  const evs = ev.split(/\s+/);
+  const els = isArray(el) ? el : [el];
+
+  evs.forEach(ev => {
+    els.forEach(el => el?.addEventListener(ev, fn as EventListener, opts));
+  });
+};
+
+export const off = <E extends Event = Event>(
+  el: EventTarget | EventTarget[],
+  ev: string,
+  fn: (ev: E) => void,
+  opts?: AddEventListenerOptions
+) => {
+  const evs = ev.split(/\s+/);
+  const els = isArray(el) ? el : [el];
+
+  evs.forEach(ev => {
+    els.forEach(el => el?.removeEventListener(ev, fn as EventListener, opts));
+  });
+};

src/utils/mixins.ts

@@ -89,34 +89,6 @@ const shallowDiff = (objOrig: Record<string, any>, objNew: Record<string, any>)
   return result;
 };
 
-const on = (
-  el: HTMLElement | Window | Document | (Window | HTMLElement | Document)[],
-  ev: string,
-  fn: (ev: Event) => void,
-  opts?: AddEventListenerOptions
-) => {
-  const evs = ev.split(/\s+/);
-  el = el instanceof Array ? el : [el];
-
-  for (let i = 0; i < evs.length; ++i) {
-    el.forEach(elem => elem && elem.addEventListener(evs[i], fn, opts));
-  }
-};
-
-const off = (
-  el: HTMLElement | Window | Document | (Window | HTMLElement | Document)[],
-  ev: string,
-  fn: (ev: Event) => void,
-  opts?: AddEventListenerOptions
-) => {
-  const evs = ev.split(/\s+/);
-  el = el instanceof Array ? el : [el];
-
-  for (let i = 0; i < evs.length; ++i) {
-    el.forEach(elem => elem && elem.removeEventListener(evs[i], fn, opts));
-  }
-};
-
 const getUnitFromValue = (value: any) => {
   return value.replace(parseFloat(value), '');
 };
@@ -215,24 +187,6 @@ const getModel = (el: any, $?: any) => {
   return model;
 };
 
-/**
- * Get cross-device pointer event
- * @param  {Event} ev
- * @return {PointerEvent}
- */
-const getPointerEvent = (ev: Event) =>
-  // @ts-ignore
-  ev.touches && ev.touches[0] ? ev.touches[0] : ev;
-
-/**
- * Get cross-browser keycode
- * @param  {Event} ev
- * @return {Number}
- */
-const getKeyCode = (ev: KeyboardEvent) => ev.which || ev.keyCode;
-const getKeyChar = (ev: KeyboardEvent) => String.fromCharCode(getKeyCode(ev));
-const isEscKey = (ev: KeyboardEvent) => getKeyCode(ev) === 27;
-const isEnterKey = (ev: KeyboardEvent) => getKeyCode(ev) === 13;
 const isObject = (val: any): val is Object => val !== null && !Array.isArray(val) && typeof val === 'object';
 const isEmptyObj = (val: Record<string, any>) => Object.keys(val).length <= 0;
 
@@ -273,21 +227,14 @@ export const buildBase64UrlFromSvg = (svg: string) => {
 };
 
 export {
-  on,
-  off,
   hasDnd,
   upFirst,
   matches,
   getModel,
   camelCase,
-  getKeyCode,
-  getKeyChar,
-  isEscKey,
-  isEnterKey,
   getElement,
   shallowDiff,
   normalizeFloat,
-  getPointerEvent,
   getUnitFromValue,
   capitalize,
   getViewEl,