react-design-editor 0.0.50 → 0.0.52

package/dist/react-design-editor.min.js.LICENSE.txt

@@ -21,6 +21,8 @@
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
 /**
  * @license
  * Lodash <https://lodash.com/>

package/lib/Canvas.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import Handler, { HandlerOptions } from './handlers/Handler';
-import './styles/canvas.less';
-import './styles/contextmenu.less';
-import './styles/fabricjs.less';
-import './styles/tooltip.less';
-import { FabricCanvas } from './utils';
-export interface CanvasInstance {
-    handler: Handler;
-    canvas: FabricCanvas;
-    container: HTMLDivElement;
-}
-export declare type CanvasProps = HandlerOptions & {
-    responsive?: boolean;
-    style?: React.CSSProperties;
-};
-declare const Canvas: React.FC<CanvasProps>;
-export default Canvas;
+import React from 'react';
+import Handler, { HandlerOptions } from './handlers/Handler';
+import './styles/canvas.less';
+import './styles/contextmenu.less';
+import './styles/fabricjs.less';
+import './styles/tooltip.less';
+import { FabricCanvas } from './utils';
+export interface CanvasInstance {
+    handler: Handler;
+    canvas: FabricCanvas;
+    container: HTMLDivElement;
+}
+export declare type CanvasProps = HandlerOptions & {
+    responsive?: boolean;
+    style?: React.CSSProperties;
+};
+declare const Canvas: React.FC<CanvasProps>;
+export default Canvas;

package/lib/Canvas.js

@@ -1,172 +1,172 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-const react_1 = __importStar(require("react"));
-const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-const uuidv4_1 = require("uuidv4");
-const constants_1 = require("./constants");
-const Handler_1 = __importDefault(require("./handlers/Handler"));
-require("./styles/canvas.less");
-require("./styles/contextmenu.less");
-require("./styles/fabricjs.less");
-require("./styles/tooltip.less");
-class InternalCanvas extends react_1.Component {
-    constructor() {
-        super(...arguments);
-        this.containerRef = react_1.default.createRef();
-        this.state = {
-            id: uuidv4_1.uuid(),
-            loaded: false,
-        };
-        this.createObserver = () => {
-            this.resizeObserver = new resize_observer_polyfill_1.default((entries) => {
-                const { width = 0, height = 0 } = (entries[0] && entries[0].contentRect) || {};
-                this.handler.eventHandler.resize(width, height);
-                if (!this.state.loaded) {
-                    this.handleLoad();
-                }
-            });
-            this.resizeObserver.observe(this.containerRef.current);
-        };
-        this.destroyObserver = () => {
-            if (this.resizeObserver) {
-                this.resizeObserver.disconnect();
-                this.resizeObserver = null;
-            }
-        };
-        this.handleLoad = () => {
-            this.setState({
-                loaded: true,
-            }, () => {
-                if (this.props.onLoad) {
-                    this.props.onLoad(this.handler, this.canvas);
-                }
-            });
-        };
-    }
-    componentDidMount() {
-        const { editable, canvasOption, width, height, responsive, ...other } = this.props;
-        const { id } = this.state;
-        const mergedCanvasOption = Object.assign({}, constants_1.defaults.canvasOption, canvasOption, {
-            width,
-            height,
-            selection: editable,
-        });
-        this.canvas = new fabric_1.fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
-        this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
-        this.canvas.renderAll();
-        this.container = this.containerRef.current;
-        this.handler = new Handler_1.default({
-            id,
-            width,
-            height,
-            editable,
-            canvas: this.canvas,
-            container: this.containerRef.current,
-            canvasOption: mergedCanvasOption,
-            ...other,
-        });
-        if (this.props.responsive) {
-            this.createObserver();
-        }
-        else {
-            this.handleLoad();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.width !== prevProps.width || this.props.height !== prevProps.height) {
-            this.handler.eventHandler.resize(this.props.width, this.props.height);
-        }
-        if (this.props.editable !== prevProps.editable) {
-            this.handler.editable = this.props.editable;
-        }
-        if (this.props.responsive !== prevProps.responsive) {
-            if (!this.props.responsive) {
-                this.destroyObserver();
-            }
-            else {
-                this.destroyObserver();
-                this.createObserver();
-            }
-        }
-        if (JSON.stringify(this.props.canvasOption) !== JSON.stringify(prevProps.canvasOption)) {
-            this.handler.setCanvasOption(this.props.canvasOption);
-        }
-        if (JSON.stringify(this.props.keyEvent) !== JSON.stringify(prevProps.keyEvent)) {
-            this.handler.setKeyEvent(this.props.keyEvent);
-        }
-        if (JSON.stringify(this.props.fabricObjects) !== JSON.stringify(prevProps.fabricObjects)) {
-            this.handler.setFabricObjects(this.props.fabricObjects);
-        }
-        if (JSON.stringify(this.props.workareaOption) !== JSON.stringify(prevProps.workareaOption)) {
-            this.handler.setWorkareaOption(this.props.workareaOption);
-        }
-        if (JSON.stringify(this.props.guidelineOption) !== JSON.stringify(prevProps.guidelineOption)) {
-            this.handler.setGuidelineOption(this.props.guidelineOption);
-        }
-        if (JSON.stringify(this.props.objectOption) !== JSON.stringify(prevProps.objectOption)) {
-            this.handler.setObjectOption(this.props.objectOption);
-        }
-        if (JSON.stringify(this.props.gridOption) !== JSON.stringify(prevProps.gridOption)) {
-            this.handler.setGridOption(this.props.gridOption);
-        }
-        if (JSON.stringify(this.props.propertiesToInclude) !== JSON.stringify(prevProps.propertiesToInclude)) {
-            this.handler.setPropertiesToInclude(this.props.propertiesToInclude);
-        }
-        if (JSON.stringify(this.props.activeSelectionOption) !== JSON.stringify(prevProps.activeSelectionOption)) {
-            this.handler.setActiveSelectionOption(this.props.activeSelectionOption);
-        }
-    }
-    componentWillUnmount() {
-        this.destroyObserver();
-        this.handler.destroy();
-    }
-    render() {
-        const { style } = this.props;
-        const { id } = this.state;
-        return (react_1.default.createElement("div", { ref: this.containerRef, id: id, className: "rde-canvas", style: { width: '100%', height: '100%', ...style } },
-            react_1.default.createElement("canvas", { id: `canvas_${id}` })));
-    }
-}
-InternalCanvas.defaultProps = {
-    id: uuidv4_1.uuid(),
-    editable: true,
-    zoomEnabled: true,
-    minZoom: 30,
-    maxZoom: 300,
-    responsive: true,
-    width: 0,
-    height: 0,
-};
-const Canvas = react_1.default.forwardRef((props, ref) => {
-    const canvasRef = react_1.useRef();
-    react_1.default.useImperativeHandle(ref, () => ({
-        handler: canvasRef.current.handler,
-        canvas: canvasRef.current.canvas,
-        container: canvasRef.current.container,
-    }));
-    return react_1.default.createElement(InternalCanvas, Object.assign({ ref: canvasRef }, props));
-});
-exports.default = Canvas;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const react_1 = __importStar(require("react"));
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const uuidv4_1 = require("uuidv4");
+const constants_1 = require("./constants");
+const Handler_1 = __importDefault(require("./handlers/Handler"));
+require("./styles/canvas.less");
+require("./styles/contextmenu.less");
+require("./styles/fabricjs.less");
+require("./styles/tooltip.less");
+class InternalCanvas extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.containerRef = react_1.default.createRef();
+        this.state = {
+            id: uuidv4_1.uuid(),
+            loaded: false,
+        };
+        this.createObserver = () => {
+            this.resizeObserver = new resize_observer_polyfill_1.default((entries) => {
+                const { width = 0, height = 0 } = (entries[0] && entries[0].contentRect) || {};
+                this.handler.eventHandler.resize(width, height);
+                if (!this.state.loaded) {
+                    this.handleLoad();
+                }
+            });
+            this.resizeObserver.observe(this.containerRef.current);
+        };
+        this.destroyObserver = () => {
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+        };
+        this.handleLoad = () => {
+            this.setState({
+                loaded: true,
+            }, () => {
+                if (this.props.onLoad) {
+                    this.props.onLoad(this.handler, this.canvas);
+                }
+            });
+        };
+    }
+    componentDidMount() {
+        const { editable, canvasOption, width, height, responsive, ...other } = this.props;
+        const { id } = this.state;
+        const mergedCanvasOption = Object.assign({}, constants_1.defaults.canvasOption, canvasOption, {
+            width,
+            height,
+            selection: (typeof canvasOption?.selection !== 'undefined' && canvasOption?.selection) || editable,
+        });
+        this.canvas = new fabric_1.fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
+        this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
+        this.canvas.renderAll();
+        this.container = this.containerRef.current;
+        this.handler = new Handler_1.default({
+            id,
+            width,
+            height,
+            editable,
+            canvas: this.canvas,
+            container: this.containerRef.current,
+            canvasOption: mergedCanvasOption,
+            ...other,
+        });
+        if (this.props.responsive) {
+            this.createObserver();
+        }
+        else {
+            this.handleLoad();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.width !== prevProps.width || this.props.height !== prevProps.height) {
+            this.handler.eventHandler.resize(this.props.width, this.props.height);
+        }
+        if (this.props.editable !== prevProps.editable) {
+            this.handler.editable = this.props.editable;
+        }
+        if (this.props.responsive !== prevProps.responsive) {
+            if (!this.props.responsive) {
+                this.destroyObserver();
+            }
+            else {
+                this.destroyObserver();
+                this.createObserver();
+            }
+        }
+        if (JSON.stringify(this.props.canvasOption) !== JSON.stringify(prevProps.canvasOption)) {
+            this.handler.setCanvasOption(this.props.canvasOption);
+        }
+        if (JSON.stringify(this.props.keyEvent) !== JSON.stringify(prevProps.keyEvent)) {
+            this.handler.setKeyEvent(this.props.keyEvent);
+        }
+        if (JSON.stringify(this.props.fabricObjects) !== JSON.stringify(prevProps.fabricObjects)) {
+            this.handler.setFabricObjects(this.props.fabricObjects);
+        }
+        if (JSON.stringify(this.props.workareaOption) !== JSON.stringify(prevProps.workareaOption)) {
+            this.handler.setWorkareaOption(this.props.workareaOption);
+        }
+        if (JSON.stringify(this.props.guidelineOption) !== JSON.stringify(prevProps.guidelineOption)) {
+            this.handler.setGuidelineOption(this.props.guidelineOption);
+        }
+        if (JSON.stringify(this.props.objectOption) !== JSON.stringify(prevProps.objectOption)) {
+            this.handler.setObjectOption(this.props.objectOption);
+        }
+        if (JSON.stringify(this.props.gridOption) !== JSON.stringify(prevProps.gridOption)) {
+            this.handler.setGridOption(this.props.gridOption);
+        }
+        if (JSON.stringify(this.props.propertiesToInclude) !== JSON.stringify(prevProps.propertiesToInclude)) {
+            this.handler.setPropertiesToInclude(this.props.propertiesToInclude);
+        }
+        if (JSON.stringify(this.props.activeSelectionOption) !== JSON.stringify(prevProps.activeSelectionOption)) {
+            this.handler.setActiveSelectionOption(this.props.activeSelectionOption);
+        }
+    }
+    componentWillUnmount() {
+        this.destroyObserver();
+        this.handler.destroy();
+    }
+    render() {
+        const { style } = this.props;
+        const { id } = this.state;
+        return (react_1.default.createElement("div", { ref: this.containerRef, id: id, className: "rde-canvas", style: { width: '100%', height: '100%', ...style } },
+            react_1.default.createElement("canvas", { id: `canvas_${id}` })));
+    }
+}
+InternalCanvas.defaultProps = {
+    id: uuidv4_1.uuid(),
+    editable: true,
+    zoomEnabled: true,
+    minZoom: 30,
+    maxZoom: 300,
+    responsive: true,
+    width: 0,
+    height: 0,
+};
+const Canvas = react_1.default.forwardRef((props, ref) => {
+    const canvasRef = react_1.useRef();
+    react_1.default.useImperativeHandle(ref, () => ({
+        handler: canvasRef.current.handler,
+        canvas: canvasRef.current.canvas,
+        container: canvasRef.current.container,
+    }));
+    return react_1.default.createElement(InternalCanvas, Object.assign({ ref: canvasRef }, props));
+});
+exports.default = Canvas;

package/lib/CanvasObject.d.ts

@@ -1,10 +1,10 @@
-import { fabric } from 'fabric';
-export interface ObjectSchema {
-    create: (...option: any) => fabric.Object;
-}
-export interface CanvasObjectSchema {
-    [key: string]: ObjectSchema;
-}
-export declare const createCanvasObject: (objectSchema: CanvasObjectSchema) => CanvasObjectSchema;
-declare const CanvasObject: CanvasObjectSchema;
-export default CanvasObject;
+import { fabric } from 'fabric';
+export interface ObjectSchema {
+    create: (...option: any) => fabric.Object;
+}
+export interface CanvasObjectSchema {
+    [key: string]: ObjectSchema;
+}
+export declare const createCanvasObject: (objectSchema: CanvasObjectSchema) => CanvasObjectSchema;
+declare const CanvasObject: CanvasObjectSchema;
+export default CanvasObject;

package/lib/CanvasObject.js

@@ -1,96 +1,96 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCanvasObject = void 0;
-const fabric_1 = require("fabric");
-const objects_1 = require("./objects");
-const Svg_1 = __importDefault(require("./objects/Svg"));
-exports.createCanvasObject = (objectSchema) => objectSchema;
-const CanvasObject = {
-    group: {
-        create: ({ objects, ...option }) => new fabric_1.fabric.Group(objects, option),
-    },
-    'i-text': {
-        create: ({ text, ...option }) => new fabric_1.fabric.IText(text, option),
-    },
-    textbox: {
-        create: ({ text, ...option }) => new fabric_1.fabric.Textbox(text, option),
-    },
-    triangle: {
-        create: (option) => new fabric_1.fabric.Triangle(option),
-    },
-    circle: {
-        create: (option) => new fabric_1.fabric.Circle(option),
-    },
-    rect: {
-        create: (option) => new fabric_1.fabric.Rect(option),
-    },
-    cube: {
-        create: (option) => new objects_1.Cube(option),
-    },
-    image: {
-        create: ({ element = new Image(), ...option }) => new fabric_1.fabric.Image(element, {
-            ...option,
-            crossOrigin: 'anonymous',
-        }),
-    },
-    polygon: {
-        create: ({ points, ...option }) => new fabric_1.fabric.Polygon(points, {
-            ...option,
-            perPixelTargetFind: true,
-        }),
-    },
-    line: {
-        create: ({ points, ...option }) => new objects_1.Line(points, option),
-    },
-    arrow: {
-        create: ({ points, ...option }) => new objects_1.Arrow(points, option),
-    },
-    chart: {
-        create: (option) => new objects_1.Chart(option.chartOption || {
-            xAxis: {},
-            yAxis: {},
-            series: [
-                {
-                    type: 'line',
-                    data: [
-                        [0, 1],
-                        [1, 2],
-                        [2, 3],
-                        [3, 4],
-                    ],
-                },
-            ],
-        }, option),
-    },
-    element: {
-        create: ({ code, ...option }) => new objects_1.Element(code, option),
-    },
-    iframe: {
-        create: ({ src, ...option }) => new objects_1.Iframe(src, option),
-    },
-    video: {
-        create: ({ src, file, ...option }) => new objects_1.Video(src || file, option),
-    },
-    gif: {
-        create: (option) => new objects_1.Gif(option),
-    },
-    node: {
-        create: (option) => new objects_1.Node(option),
-    },
-    link: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.Link(fromNode, fromPort, toNode, toPort, option),
-    },
-    curvedLink: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.CurvedLink(fromNode, fromPort, toNode, toPort, option),
-    },
-    orthogonalLink: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.OrthogonalLink(fromNode, fromPort, toNode, toPort, option),
-    },
-    svg: {
-        create: (option) => new Svg_1.default(option),
-    },
-};
-exports.default = CanvasObject;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCanvasObject = void 0;
+const fabric_1 = require("fabric");
+const objects_1 = require("./objects");
+const Svg_1 = __importDefault(require("./objects/Svg"));
+exports.createCanvasObject = (objectSchema) => objectSchema;
+const CanvasObject = {
+    group: {
+        create: ({ objects, ...option }) => new fabric_1.fabric.Group(objects, option),
+    },
+    'i-text': {
+        create: ({ text, ...option }) => new fabric_1.fabric.IText(text, option),
+    },
+    textbox: {
+        create: ({ text, ...option }) => new fabric_1.fabric.Textbox(text, option),
+    },
+    triangle: {
+        create: (option) => new fabric_1.fabric.Triangle(option),
+    },
+    circle: {
+        create: (option) => new fabric_1.fabric.Circle(option),
+    },
+    rect: {
+        create: (option) => new fabric_1.fabric.Rect(option),
+    },
+    cube: {
+        create: (option) => new objects_1.Cube(option),
+    },
+    image: {
+        create: ({ element = new Image(), ...option }) => new fabric_1.fabric.Image(element, {
+            ...option,
+            crossOrigin: 'anonymous',
+        }),
+    },
+    polygon: {
+        create: ({ points, ...option }) => new fabric_1.fabric.Polygon(points, {
+            ...option,
+            perPixelTargetFind: true,
+        }),
+    },
+    line: {
+        create: ({ points, ...option }) => new objects_1.Line(points, option),
+    },
+    arrow: {
+        create: ({ points, ...option }) => new objects_1.Arrow(points, option),
+    },
+    chart: {
+        create: (option) => new objects_1.Chart(option.chartOption || {
+            xAxis: {},
+            yAxis: {},
+            series: [
+                {
+                    type: 'line',
+                    data: [
+                        [0, 1],
+                        [1, 2],
+                        [2, 3],
+                        [3, 4],
+                    ],
+                },
+            ],
+        }, option),
+    },
+    element: {
+        create: ({ code, ...option }) => new objects_1.Element(code, option),
+    },
+    iframe: {
+        create: ({ src, ...option }) => new objects_1.Iframe(src, option),
+    },
+    video: {
+        create: ({ src, file, ...option }) => new objects_1.Video(src || file, option),
+    },
+    gif: {
+        create: (option) => new objects_1.Gif(option),
+    },
+    node: {
+        create: (option) => new objects_1.Node(option),
+    },
+    link: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.Link(fromNode, fromPort, toNode, toPort, option),
+    },
+    curvedLink: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.CurvedLink(fromNode, fromPort, toNode, toPort, option),
+    },
+    orthogonalLink: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.OrthogonalLink(fromNode, fromPort, toNode, toPort, option),
+    },
+    svg: {
+        create: (option) => new Svg_1.default(option),
+    },
+};
+exports.default = CanvasObject;

package/lib/constants/code.d.ts

@@ -1,19 +1,19 @@
-export declare const ESCAPE = "Escape";
-export declare const DELETE = "Delete";
-export declare const BACKSPACE = "Backspace";
-export declare const EQUAL = "Equal";
-export declare const MINUS = "Minus";
-export declare const KEY_A = "KeyA";
-export declare const KEY_Q = "KeyQ";
-export declare const KEY_W = "KeyW";
-export declare const KEY_C = "KeyC";
-export declare const KEY_V = "KeyV";
-export declare const KEY_Z = "KeyZ";
-export declare const KEY_Y = "KeyY";
-export declare const KEY_O = "KeyO";
-export declare const KEY_P = "KeyP";
-export declare const KEY_X = "KeyX";
-export declare const ARROW_UP = "ArrowUp";
-export declare const ARROW_DOWN = "ArrowDown";
-export declare const ARROW_LEFT = "ArrowLeft";
-export declare const ARROW_RIGHT = "ArrowRight";
+export declare const ESCAPE = "Escape";
+export declare const DELETE = "Delete";
+export declare const BACKSPACE = "Backspace";
+export declare const EQUAL = "Equal";
+export declare const MINUS = "Minus";
+export declare const KEY_A = "KeyA";
+export declare const KEY_Q = "KeyQ";
+export declare const KEY_W = "KeyW";
+export declare const KEY_C = "KeyC";
+export declare const KEY_V = "KeyV";
+export declare const KEY_Z = "KeyZ";
+export declare const KEY_Y = "KeyY";
+export declare const KEY_O = "KeyO";
+export declare const KEY_P = "KeyP";
+export declare const KEY_X = "KeyX";
+export declare const ARROW_UP = "ArrowUp";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare const ARROW_RIGHT = "ArrowRight";