luna-icon-list 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+# Luna Icon List
+
+Show list of icons and their names.
+
+## Demo
+
+https://luna.liriliri.io/?path=/story/icon-list
+
+## Install
+
+Add the following script and style to your page.
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-icon-list/luna-icon-list.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-icon-list/luna-icon-list.js"></script>
+```
+
+You can also get it on npm.
+
+```bash
+npm install luna-icon-list --save
+```
+
+```javascript
+import 'luna-icon-list/luna-icon-list.css'
+import LunaIconList from 'luna-icon-list'
+```
+
+## Usage
+
+```javascript
+const iconList = new LunaIconList(container)
+iconList.setIcons([
+  {
+    src: '/logo.png',
+    name: 'Luna',
+  },
+])
+```
+
+## Configuration
+
+* filter(string | RegExp | AnyFn): Icon filter.
+* selectable(boolean): Whether icon is selectable.
+* size(number): Icon size.
+
+## Api
+
+### append(data: IIcon): void
+
+Append icon.
+
+### clear(): void
+
+Clear all icons.
+
+## Types
+
+### IIcon
+

package/cjs/icon-list/index.d.ts

@@ -0,0 +1,43 @@
+import Component, { IComponentOptions } from '../share/Component';
+import types from 'licia/types';
+export interface IOptions extends IComponentOptions {
+    size?: number;
+    filter?: string | RegExp | types.AnyFn;
+    selectable?: boolean;
+}
+export interface IIcon {
+    src: string;
+    name: string;
+}
+export default class IconList extends Component<IOptions> {
+    private resizeSensor;
+    private icons;
+    private displayIcons;
+    private frag;
+    private appendTimer;
+    private onResize;
+    private selectedIcon;
+    constructor(container: HTMLElement, options?: IOptions);
+    destroy(): void;
+    setIcons(icons: Array<IIcon>): void;
+    clear(): void;
+    append(data: IIcon): void;
+    private _append;
+    private selectIcon;
+    private filterIcon;
+    private bindEvent;
+    private updateColumnCount;
+    private render;
+}
+export declare class Icon {
+    container: HTMLElement;
+    data: IIcon;
+    private $container;
+    private iconList;
+    private $icon;
+    constructor(iconList: IconList, data: IIcon);
+    setSize(size: number): void;
+    select(): void;
+    deselect(): void;
+    render(): void;
+}

package/cjs/icon-list/index.js

@@ -0,0 +1,272 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var Component_1 = __importDefault(require("../share/Component"));
+var util_1 = require("../share/util");
+var throttle_1 = __importDefault(require("licia/throttle"));
+var h_1 = __importDefault(require("licia/h"));
+var _1 = __importDefault(require("licia/$"));
+var isFn_1 = __importDefault(require("licia/isFn"));
+var isRegExp_1 = __importDefault(require("licia/isRegExp"));
+var trim_1 = __importDefault(require("licia/trim"));
+var isStr_1 = __importDefault(require("licia/isStr"));
+var contain_1 = __importDefault(require("licia/contain"));
+var isNull_1 = __importDefault(require("licia/isNull"));
+var each_1 = __importDefault(require("licia/each"));
+var lowerCase_1 = __importDefault(require("licia/lowerCase"));
+var ResizeSensor_1 = __importDefault(require("licia/ResizeSensor"));
+var GAP = 20;
+var MIN_APPEND_INTERVAL = 100;
+var IconList = (function (_super) {
+    __extends(IconList, _super);
+    function IconList(container, options) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, container, { compName: 'icon-list' }, options) || this;
+        _this.icons = [];
+        _this.displayIcons = [];
+        _this.frag = document.createDocumentFragment();
+        _this.appendTimer = null;
+        _this.selectedIcon = null;
+        _this._append = function () {
+            _this.container.appendChild(_this.frag);
+            _this.appendTimer = null;
+            _this.updateColumnCount();
+        };
+        _this.updateColumnCount = function () {
+            var _a = _this, $container = _a.$container, c = _a.c;
+            var containerWidth = $container.offset().width;
+            var size = _this.options.size + 16;
+            var columnCount = Math.floor(containerWidth / (size + GAP));
+            if (_this.icons.length > columnCount) {
+                var gap = Math.floor((containerWidth - columnCount * size) / columnCount);
+                $container.addClass(c('grid'));
+                $container.css({
+                    gridTemplateColumns: "repeat(".concat(columnCount, ", minmax(0, 1fr))"),
+                    gap: "".concat(GAP, "px ").concat(gap, "px"),
+                    paddingLeft: "".concat(gap / 2, "px"),
+                    paddingRight: "".concat(gap / 2, "px"),
+                });
+            }
+            else {
+                $container.rmClass(c('grid'));
+                $container.css({
+                    gap: '0',
+                    paddingLeft: "".concat(GAP / 2, "px"),
+                    paddingRight: "".concat(GAP / 2, "px"),
+                });
+            }
+        };
+        _this.resizeSensor = new ResizeSensor_1.default(container);
+        _this.onResize = (0, throttle_1.default)(function () {
+            _this.updateColumnCount();
+        }, 16);
+        _this.initOptions(options, {
+            size: 72,
+            selectable: true,
+        });
+        _this.bindEvent();
+        return _this;
+    }
+    IconList.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.resizeSensor.destroy();
+    };
+    IconList.prototype.setIcons = function (icons) {
+        var _this = this;
+        this.clear();
+        (0, each_1.default)(icons, function (data) {
+            var icon = new Icon(_this, data);
+            icon.setSize(_this.options.size);
+            _this.icons.push(icon);
+            if (_this.filterIcon(icon)) {
+                _this.displayIcons.push(icon);
+            }
+        });
+        this.render();
+    };
+    IconList.prototype.clear = function () {
+        this.$container.html('');
+        this.icons = [];
+        this.displayIcons = [];
+        this.selectIcon(null);
+        this.updateColumnCount();
+    };
+    IconList.prototype.append = function (data) {
+        var icon = new Icon(this, data);
+        icon.setSize(this.options.size);
+        this.icons.push(icon);
+        var isVisible = this.filterIcon(icon);
+        if (isVisible) {
+            this.displayIcons.push(icon);
+        }
+        this.frag.appendChild(icon.container);
+        if (!this.appendTimer) {
+            this.appendTimer = setTimeout(this._append, MIN_APPEND_INTERVAL);
+        }
+    };
+    IconList.prototype.selectIcon = function (icon) {
+        if (!this.options.selectable) {
+            return;
+        }
+        if (this.selectedIcon === icon) {
+            return;
+        }
+        if (this.selectedIcon) {
+            this.selectedIcon.deselect();
+            this.selectedIcon = null;
+            if ((0, isNull_1.default)(icon)) {
+                this.emit('deselect');
+            }
+        }
+        if (!(0, isNull_1.default)(icon)) {
+            this.selectedIcon = icon;
+            icon.select();
+            this.emit('select', icon);
+        }
+    };
+    IconList.prototype.filterIcon = function (icon) {
+        var filter = this.options.filter;
+        if (filter) {
+            if ((0, isFn_1.default)(filter)) {
+                return filter(icon);
+            }
+            else if ((0, isRegExp_1.default)(filter)) {
+                return filter.test(icon.data.name);
+            }
+            else if ((0, isStr_1.default)(filter)) {
+                filter = (0, trim_1.default)(filter);
+                if (filter) {
+                    return (0, contain_1.default)((0, lowerCase_1.default)(icon.data.name), (0, lowerCase_1.default)(filter));
+                }
+            }
+        }
+        return true;
+    };
+    IconList.prototype.bindEvent = function () {
+        var _this = this;
+        this.resizeSensor.addListener(this.onResize);
+        var self = this;
+        var itemClass = this.c('.icon, .name');
+        this.$container
+            .on('click', itemClass, function (e) {
+            e.stopPropagation();
+            var item = this.parentNode;
+            var icon = item.icon;
+            self.selectIcon(icon);
+            setTimeout(function () {
+                if (item.hasDoubleClick) {
+                    return;
+                }
+                self.emit('click', e.origEvent, icon);
+            }, 200);
+        })
+            .on('dblclick', itemClass, function (e) {
+            e.stopPropagation();
+            var item = this.parentNode;
+            var icon = item.icon;
+            item.hasDoubleClick = true;
+            self.emit('dblclick', e.origEvent, icon);
+            setTimeout(function () {
+                item.hasDoubleClick = false;
+            }, 300);
+        })
+            .on('click', function () { return _this.selectIcon(null); })
+            .on('contextmenu', itemClass, function (e) {
+            e.preventDefault();
+            var icon = this.parentNode.icon;
+            self.selectIcon(icon);
+            self.emit('contextmenu', e.origEvent, icon);
+        });
+        this.on('changeOption', function (name) {
+            switch (name) {
+                case 'size':
+                    (0, each_1.default)(_this.icons, function (icon) {
+                        icon.setSize(_this.options.size);
+                    });
+                    _this.updateColumnCount();
+                    break;
+                case 'filter':
+                    _this.displayIcons = [];
+                    (0, each_1.default)(_this.icons, function (icon) {
+                        if (_this.filterIcon(icon)) {
+                            _this.displayIcons.push(icon);
+                        }
+                    });
+                    if (_this.selectedIcon && !_this.filterIcon(_this.selectedIcon)) {
+                        _this.selectIcon(null);
+                    }
+                    _this.render();
+                    break;
+            }
+        });
+    };
+    IconList.prototype.render = function () {
+        var _a = this, displayIcons = _a.displayIcons, $container = _a.$container, container = _a.container;
+        var frag = document.createDocumentFragment();
+        $container.html('');
+        (0, each_1.default)(displayIcons, function (icon) {
+            frag.appendChild(icon.container);
+        });
+        container.appendChild(frag);
+        this.updateColumnCount();
+    };
+    return IconList;
+}(Component_1.default));
+exports.default = IconList;
+var Icon = (function () {
+    function Icon(iconList, data) {
+        this.container = (0, h_1.default)('div');
+        ;
+        this.container.icon = this;
+        this.$container = (0, _1.default)(this.container);
+        this.$container.addClass(iconList.c('item'));
+        this.iconList = iconList;
+        this.data = data;
+        this.render();
+        this.$icon = this.$container.find(iconList.c('.icon'));
+    }
+    Icon.prototype.setSize = function (size) {
+        var width = "".concat(size + 16, "px");
+        this.$container.css({
+            width: width,
+        });
+        this.$icon.css({
+            width: width,
+            height: width,
+        });
+    };
+    Icon.prototype.select = function () {
+        this.$container.addClass(this.iconList.c('selected'));
+    };
+    Icon.prototype.deselect = function () {
+        this.$container.rmClass(this.iconList.c('selected'));
+    };
+    Icon.prototype.render = function () {
+        var _a = this, data = _a.data, $container = _a.$container;
+        var src = data.src, name = data.name;
+        $container.append(this.iconList.c("\n      <div class=\"icon\">\n        <img src=\"".concat(src, "\" draggable=\"false\"></img>\n      </div>\n      <div class=\"name\">").concat(name, "</div>\n    ")));
+    };
+    return Icon;
+}());
+exports.Icon = Icon;
+if (typeof module !== 'undefined') {
+    (0, util_1.exportCjs)(module, IconList);
+}

package/cjs/icon-list/react.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { IOptions, IIcon, Icon } from './index';
+interface IIconListProps extends IOptions {
+    className?: string;
+    style?: React.CSSProperties;
+    onSelect?: (icon: Icon) => void;
+    onDeselect?: () => void;
+    onClick?: (e: MouseEvent, icon: Icon) => void;
+    onDoubleClick?: (e: MouseEvent, icon: Icon) => void;
+    onContextMenu?: (e: PointerEvent, icon: Icon) => void;
+    icons: Array<IIcon>;
+}
+declare const LunaIconList: FC<IIconListProps>;
+export default LunaIconList;

package/cjs/icon-list/react.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var index_1 = __importDefault(require("./index"));
+var hooks_1 = require("../share/hooks");
+var each_1 = __importDefault(require("licia/each"));
+var LunaIconList = function (props) {
+    var iconListRef = (0, react_1.useRef)(null);
+    var iconList = (0, react_1.useRef)();
+    var prevProps = (0, hooks_1.usePrevious)(props);
+    (0, react_1.useEffect)(function () {
+        iconList.current = new index_1.default(iconListRef.current, {
+            size: props.size,
+            selectable: props.selectable,
+            filter: props.filter,
+        });
+        iconList.current.setIcons(props.icons);
+    }, []);
+    (0, hooks_1.useNonInitialEffect)(function () {
+        if (iconList.current) {
+            iconList.current.setIcons(props.icons);
+        }
+    }, [props.icons]);
+    (0, hooks_1.useEvent)(iconList, 'select', prevProps === null || prevProps === void 0 ? void 0 : prevProps.onSelect, props.onSelect);
+    (0, hooks_1.useEvent)(iconList, 'deselect', prevProps === null || prevProps === void 0 ? void 0 : prevProps.onDeselect, props.onDeselect);
+    (0, hooks_1.useEvent)(iconList, 'click', prevProps === null || prevProps === void 0 ? void 0 : prevProps.onClick, props.onClick);
+    (0, hooks_1.useEvent)(iconList, 'dblclick', prevProps === null || prevProps === void 0 ? void 0 : prevProps.onDoubleClick, props.onDoubleClick);
+    (0, hooks_1.useEvent)(iconList, 'contextmenu', prevProps === null || prevProps === void 0 ? void 0 : prevProps.onContextMenu, props.onContextMenu);
+    (0, each_1.default)(['theme', 'size', 'selectable', 'filter'], function (key) {
+        (0, hooks_1.useOption)(iconList, key, props[key]);
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: props.className || '', style: props.style, ref: iconListRef }));
+};
+exports.default = LunaIconList;

package/cjs/share/Component.d.ts

@@ -0,0 +1,29 @@
+import Emitter from 'licia/Emitter';
+import $ from 'licia/$';
+interface IOptions {
+    compName: string;
+}
+export interface IComponentOptions {
+    theme?: string;
+}
+export default class Component<Options extends IComponentOptions = any> extends Emitter {
+    c: (name: string) => string;
+    container: HTMLElement;
+    $container: $.$;
+    private subComponents;
+    private compName;
+    private theme;
+    protected options: Required<Options>;
+    constructor(container: Element, { compName }: IOptions, { theme: t }?: IComponentOptions);
+    destroy(): void;
+    setOption(name: string | Partial<Options>, val?: any): void;
+    getOption(name: string): any;
+    addSubComponent(component: Component): void;
+    removeSubComponent(component: Component): void;
+    destroySubComponents(): void;
+    protected initOptions(options: Options, defs?: any): void;
+    protected find(selector: string): $.$;
+    private setTheme;
+    private onThemeChange;
+}
+export {};

package/cjs/share/Component.js

@@ -0,0 +1,134 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Emitter_1 = __importDefault(require("licia/Emitter"));
+var _1 = __importDefault(require("licia/$"));
+var util_1 = require("./util");
+var each_1 = __importDefault(require("licia/each"));
+var extend_1 = __importDefault(require("licia/extend"));
+var defaults_1 = __importDefault(require("licia/defaults"));
+var remove_1 = __importDefault(require("licia/remove"));
+var theme_1 = __importDefault(require("licia/theme"));
+var startWith_1 = __importDefault(require("licia/startWith"));
+var Component = (function (_super) {
+    __extends(Component, _super);
+    function Component(container, _a, _b) {
+        var compName = _a.compName;
+        var _c = _b === void 0 ? {} : _b, _d = _c.theme, t = _d === void 0 ? 'light' : _d;
+        var _this = _super.call(this) || this;
+        _this.subComponents = [];
+        _this.theme = '';
+        _this.onThemeChange = function (t) {
+            if (_this.options.theme === 'auto') {
+                _this.setTheme(t);
+            }
+        };
+        _this.compName = compName;
+        _this.c = (0, util_1.classPrefix)(compName);
+        _this.options = {};
+        _this.container = container;
+        _this.$container = (0, _1.default)(container);
+        _this.$container.addClass([
+            "luna-".concat(compName),
+            _this.c("platform-".concat((0, util_1.getPlatform)())),
+        ]);
+        _this.on('changeOption', function (name, val) {
+            if (name === 'theme' && val) {
+                var t_1 = val;
+                if (val === 'auto') {
+                    t_1 = theme_1.default.get();
+                }
+                _this.setTheme(t_1);
+                (0, each_1.default)(_this.subComponents, function (component) {
+                    return component.setOption('theme', val);
+                });
+            }
+        });
+        theme_1.default.on('change', _this.onThemeChange);
+        _this.setOption('theme', t);
+        return _this;
+    }
+    Component.prototype.destroy = function () {
+        var _this = this;
+        this.destroySubComponents();
+        var $container = this.$container;
+        var classes = $container.attr('class');
+        (0, each_1.default)(classes.split(/\s+/), function (c) {
+            if ((0, startWith_1.default)(c, "luna-".concat(_this.compName))) {
+                $container.rmClass(c);
+            }
+        });
+        $container.html('');
+        this.emit('destroy');
+        this.removeAllListeners();
+        theme_1.default.off('change', this.onThemeChange);
+    };
+    Component.prototype.setOption = function (name, val) {
+        var _this = this;
+        var options = this.options;
+        var newOptions = {};
+        if (typeof name === 'string') {
+            newOptions[name] = val;
+        }
+        else {
+            newOptions = name;
+        }
+        (0, each_1.default)(newOptions, function (val, name) {
+            var oldVal = options[name];
+            options[name] = val;
+            if (val === oldVal) {
+                return;
+            }
+            _this.emit('changeOption', name, val, oldVal);
+        });
+    };
+    Component.prototype.getOption = function (name) {
+        return this.options[name];
+    };
+    Component.prototype.addSubComponent = function (component) {
+        component.setOption('theme', this.options.theme);
+        this.subComponents.push(component);
+    };
+    Component.prototype.removeSubComponent = function (component) {
+        (0, remove_1.default)(this.subComponents, function (com) { return com === component; });
+    };
+    Component.prototype.destroySubComponents = function () {
+        (0, each_1.default)(this.subComponents, function (component) { return component.destroy(); });
+        this.subComponents = [];
+    };
+    Component.prototype.initOptions = function (options, defs) {
+        if (defs === void 0) { defs = {}; }
+        (0, defaults_1.default)(options, defs);
+        (0, extend_1.default)(this.options, options);
+    };
+    Component.prototype.find = function (selector) {
+        return this.$container.find(this.c(selector));
+    };
+    Component.prototype.setTheme = function (theme) {
+        var _a = this, c = _a.c, $container = _a.$container;
+        if (this.theme) {
+            $container.rmClass(c("theme-".concat(this.theme)));
+        }
+        $container.addClass(c("theme-".concat(theme)));
+        this.theme = theme;
+    };
+    return Component;
+}(Emitter_1.default));
+exports.default = Component;

package/cjs/share/hooks.d.ts

@@ -0,0 +1,7 @@
+import { DependencyList, EffectCallback } from 'react';
+import Component from './Component';
+export declare function useForceUpdate(): () => void;
+export declare function usePrevious<T>(value: T): T | undefined;
+export declare function useNonInitialEffect(effect: EffectCallback, deps?: DependencyList): void;
+export declare function useEvent<C extends Component>(component: React.MutableRefObject<C | undefined>, event: string, prev: any, prop: any): void;
+export declare function useOption<C extends Component, P>(component: React.MutableRefObject<C | undefined>, key: keyof P, prop: any): void;

package/cjs/share/hooks.js

@@ -0,0 +1,70 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOption = exports.useEvent = exports.useNonInitialEffect = exports.usePrevious = exports.useForceUpdate = void 0;
+var react_1 = require("react");
+function useForceUpdate() {
+    var _a = __read((0, react_1.useState)(0), 2), _ = _a[0], setForceUpdateValue = _a[1];
+    return function () { return setForceUpdateValue(function (value) { return value + 1; }); };
+}
+exports.useForceUpdate = useForceUpdate;
+function usePrevious(value) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = value;
+    });
+    return ref.current;
+}
+exports.usePrevious = usePrevious;
+function useNonInitialEffect(effect, deps) {
+    var initialRender = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () {
+        var effectReturns = function () { };
+        if (initialRender.current) {
+            initialRender.current = false;
+        }
+        else {
+            effectReturns = effect();
+        }
+        if (effectReturns && typeof effectReturns === 'function') {
+            return effectReturns;
+        }
+    }, deps);
+}
+exports.useNonInitialEffect = useNonInitialEffect;
+function useEvent(component, event, prev, prop) {
+    (0, react_1.useEffect)(function () {
+        if (component.current) {
+            if (prev) {
+                component.current.off(event, prev);
+            }
+            if (prop) {
+                component.current.on(event, prop);
+            }
+        }
+    }, [prop]);
+}
+exports.useEvent = useEvent;
+function useOption(component, key, prop) {
+    useNonInitialEffect(function () {
+        if (component.current) {
+            component.current.setOption(key, prop);
+        }
+    }, [prop]);
+}
+exports.useOption = useOption;

package/cjs/share/util.d.ts

@@ -0,0 +1,12 @@
+export declare function exportCjs(module: any, clazz: any): void;
+export declare function classPrefix(name: string): (str: string) => string;
+export declare const hasTouchSupport: boolean;
+export declare function eventClient(type: string, e: any): any;
+export declare function eventPage(type: string, e: any): any;
+export declare function measuredScrollbarWidth(): number;
+export declare function hasVerticalScrollbar(el: HTMLElement): boolean;
+export declare function executeAfterTransition(el: HTMLElement, callback: () => any): any;
+export declare function pxToNum(str: string): number;
+export declare function getPlatform(): string;
+export declare function resetCanvasSize(canvas: HTMLCanvasElement): void;
+export declare function loadImage(url: string): Promise<HTMLImageElement>;