first commit

node_modules/react-konva/lib/ReactKonva.js

@@ -0,0 +1,25 @@
+/**
+ * Based on ReactArt.js
+ * Copyright (c) 2017-present Lavrenov Anton.
+ * All rights reserved.
+ *
+ * MIT
+ */
+'use strict';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("konva");
+__exportStar(require("./ReactKonvaCore.js"), exports);

node_modules/react-konva/lib/ReactKonvaCore.d.ts

@@ -0,0 +1,110 @@
+// special file for minimal import
+import * as React from 'react';
+import * as ReactReconciler from 'react-reconciler';
+import Konva from 'konva';
+import { useContextBridge } from 'its-fine';
+
+export interface KonvaNodeEvents {
+  onMouseOver?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseMove?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseOut?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseEnter?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseLeave?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseDown?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseUp?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onWheel?(evt: Konva.KonvaEventObject<WheelEvent>): void;
+  onClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onDblClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onTouchStart?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTouchMove?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTap?(evt: Konva.KonvaEventObject<Event>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<Event>): void;
+  onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onDragEnd?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onTransform?(evt: Konva.KonvaEventObject<Event>): void;
+  onTransformStart?(evt: Konva.KonvaEventObject<Event>): void;
+  onTransformEnd?(evt: Konva.KonvaEventObject<Event>): void;
+  onContextMenu?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerDown?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerMove?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerUp?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerCancel?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerEnter?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerLeave?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerOver?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerOut?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerDblClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onGotPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onLostPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+}
+
+export interface KonvaNodeComponent<
+  Node extends Konva.Node,
+  Props = Konva.NodeConfig
+  // We use React.ClassAttributes to fake the 'ref' attribute. This will ensure
+  // consumers get the proper 'Node' type in 'ref' instead of the wrapper
+  // component type.
+> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
+  getPublicInstance(): Node;
+  getNativeNode(): Node;
+  // putEventListener(type: string, listener: Function): void;
+  // handleEvent(event: Event): void;
+}
+
+export interface StageProps
+  extends Konva.NodeConfig,
+    KonvaNodeEvents,
+    Pick<
+      React.HTMLAttributes<HTMLDivElement>,
+      'className' | 'role' | 'style' | 'tabIndex' | 'title'
+    > {}
+
+// Stage is the only real class because the others are stubs that only know how
+// to be rendered when they are under stage. Since there is no real backing
+// class and are in reality are a string literal we don't want users to actually
+// try and use them as a type. By defining them as a variable with an interface
+// consumers will not be able to use the values as a type or constructor.
+// The down side to this approach, is that typescript thinks the type is a
+// function, but if the user tries to call it a runtime exception will occur.
+
+export var Stage: KonvaNodeComponent<Konva.Stage, StageProps>;
+export var Layer: KonvaNodeComponent<Konva.Layer, Konva.LayerConfig>;
+export var FastLayer: KonvaNodeComponent<Konva.FastLayer, Konva.LayerConfig>;
+export var Group: KonvaNodeComponent<Konva.Group, Konva.GroupConfig>;
+export var Label: KonvaNodeComponent<Konva.Label, Konva.LabelConfig>;
+
+/** Shapes */
+export var Rect: KonvaNodeComponent<Konva.Rect, Konva.RectConfig>;
+export var Circle: KonvaNodeComponent<Konva.Circle, Konva.CircleConfig>;
+export var Ellipse: KonvaNodeComponent<Konva.Ellipse, Konva.EllipseConfig>;
+export var Wedge: KonvaNodeComponent<Konva.Wedge, Konva.WedgeConfig>;
+export var Transformer: KonvaNodeComponent<
+  Konva.Transformer,
+  Konva.TransformerConfig
+>;
+export var Line: KonvaNodeComponent<Konva.Line, Konva.LineConfig>;
+export var Sprite: KonvaNodeComponent<Konva.Sprite, Konva.SpriteConfig>;
+export var Image: KonvaNodeComponent<Konva.Image, Konva.ImageConfig>;
+export var Text: KonvaNodeComponent<Konva.Text, Konva.TextConfig>;
+export var TextPath: KonvaNodeComponent<Konva.TextPath, Konva.TextPathConfig>;
+export var Star: KonvaNodeComponent<Konva.Star, Konva.StarConfig>;
+export var Ring: KonvaNodeComponent<Konva.Ring, Konva.RingConfig>;
+export var Arc: KonvaNodeComponent<Konva.Arc, Konva.ArcConfig>;
+export var Tag: KonvaNodeComponent<Konva.Tag, Konva.TagConfig>;
+export var Path: KonvaNodeComponent<Konva.Path, Konva.PathConfig>;
+export var RegularPolygon: KonvaNodeComponent<
+  Konva.RegularPolygon,
+  Konva.RegularPolygonConfig
+>;
+export var Arrow: KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig>;
+export var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;
+
+export var useStrictMode: (useStrictMode: boolean) => void;
+export var KonvaRenderer: ReactReconciler.Reconciler<any, any, any, any, any>;
+
+export var version: string;
+
+export { useContextBridge };

node_modules/react-konva/lib/ReactKonvaCore.js

@@ -0,0 +1,159 @@
+/**
+ * Based on ReactArt.js
+ * Copyright (c) 2017-present Lavrenov Anton.
+ * All rights reserved.
+ *
+ * MIT
+ */
+'use strict';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
+exports.useContextBridge = exports.useStrictMode = exports.Stage = exports.KonvaRenderer = exports.version = exports.Transformer = exports.Shape = exports.Arrow = exports.RegularPolygon = exports.Path = exports.Tag = exports.Arc = exports.Ring = exports.Star = exports.TextPath = exports.Text = exports.Image = exports.Sprite = exports.Line = exports.Wedge = exports.Ellipse = exports.Circle = exports.Rect = exports.Label = exports.Group = exports.FastLayer = exports.Layer = void 0;
+const react_1 = __importDefault(require("react"));
+const Core_js_1 = __importDefault(require("konva/lib/Core.js"));
+const react_reconciler_1 = __importDefault(require("react-reconciler"));
+const constants_js_1 = require("react-reconciler/constants.js");
+const HostConfig = __importStar(require("./ReactKonvaHostConfig.js"));
+const makeUpdates_js_1 = require("./makeUpdates.js");
+const its_fine_1 = require("its-fine");
+Object.defineProperty(exports, "useContextBridge", { enumerable: true, get: function () { return its_fine_1.useContextBridge; } });
+function usePrevious(value) {
+    const ref = react_1.default.useRef({});
+    react_1.default.useLayoutEffect(() => {
+        ref.current = value;
+    });
+    react_1.default.useLayoutEffect(() => {
+        return () => {
+            // when using suspense it is possible that stage is unmounted
+            // but React still keep component ref
+            // in that case we need to manually flush props
+            // we have a special test for that
+            ref.current = {};
+        };
+    }, []);
+    return ref.current;
+}
+const StageWrap = (props) => {
+    const container = react_1.default.useRef(null);
+    const stage = react_1.default.useRef(null);
+    const fiberRef = react_1.default.useRef(null);
+    const oldProps = usePrevious(props);
+    const Bridge = (0, its_fine_1.useContextBridge)();
+    const _setRef = (stage) => {
+        const { forwardedRef } = props;
+        if (!forwardedRef) {
+            return;
+        }
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(stage);
+        }
+        else {
+            forwardedRef.current = stage;
+        }
+    };
+    react_1.default.useLayoutEffect(() => {
+        stage.current = new Core_js_1.default.Stage({
+            width: props.width,
+            height: props.height,
+            container: container.current,
+        });
+        _setRef(stage.current);
+        // @ts-ignore
+        fiberRef.current = exports.KonvaRenderer.createContainer(stage.current, constants_js_1.LegacyRoot, false, null);
+        exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current);
+        return () => {
+            if (!Core_js_1.default.isBrowser) {
+                return;
+            }
+            _setRef(null);
+            exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
+            stage.current.destroy();
+        };
+    }, []);
+    react_1.default.useLayoutEffect(() => {
+        _setRef(stage.current);
+        (0, makeUpdates_js_1.applyNodeProps)(stage.current, props, oldProps);
+        exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current, null);
+    });
+    return react_1.default.createElement('div', {
+        ref: container,
+        id: props.id,
+        accessKey: props.accessKey,
+        className: props.className,
+        role: props.role,
+        style: props.style,
+        tabIndex: props.tabIndex,
+        title: props.title,
+    });
+};
+exports.Layer = 'Layer';
+exports.FastLayer = 'FastLayer';
+exports.Group = 'Group';
+exports.Label = 'Label';
+exports.Rect = 'Rect';
+exports.Circle = 'Circle';
+exports.Ellipse = 'Ellipse';
+exports.Wedge = 'Wedge';
+exports.Line = 'Line';
+exports.Sprite = 'Sprite';
+exports.Image = 'Image';
+exports.Text = 'Text';
+exports.TextPath = 'TextPath';
+exports.Star = 'Star';
+exports.Ring = 'Ring';
+exports.Arc = 'Arc';
+exports.Tag = 'Tag';
+exports.Path = 'Path';
+exports.RegularPolygon = 'RegularPolygon';
+exports.Arrow = 'Arrow';
+exports.Shape = 'Shape';
+exports.Transformer = 'Transformer';
+exports.version = '18.2.13';
+// @ts-ignore
+exports.KonvaRenderer = (0, react_reconciler_1.default)(HostConfig);
+exports.KonvaRenderer.injectIntoDevTools({
+    // @ts-ignore
+    findHostInstanceByFiber: () => null,
+    bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
+    version: react_1.default.version,
+    rendererPackageName: 'react-konva',
+});
+exports.Stage = react_1.default.forwardRef((props, ref) => {
+    return react_1.default.createElement(its_fine_1.FiberProvider, {}, react_1.default.createElement(StageWrap, { ...props, forwardedRef: ref }));
+});
+exports.useStrictMode = makeUpdates_js_1.toggleStrictMode;

node_modules/react-konva/lib/ReactKonvaHostConfig.js

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentEventPriority = exports.supportsMutation = exports.warnsIfNotActing = exports.isPrimaryRenderer = exports.noTimeout = exports.cancelTimeout = exports.scheduleTimeout = exports.run = exports.idlePriority = exports.now = void 0;
+exports.appendInitialChild = appendInitialChild;
+exports.createInstance = createInstance;
+exports.createTextInstance = createTextInstance;
+exports.finalizeInitialChildren = finalizeInitialChildren;
+exports.getPublicInstance = getPublicInstance;
+exports.prepareForCommit = prepareForCommit;
+exports.preparePortalMount = preparePortalMount;
+exports.prepareUpdate = prepareUpdate;
+exports.resetAfterCommit = resetAfterCommit;
+exports.resetTextContent = resetTextContent;
+exports.shouldDeprioritizeSubtree = shouldDeprioritizeSubtree;
+exports.getRootHostContext = getRootHostContext;
+exports.getChildHostContext = getChildHostContext;
+exports.shouldSetTextContent = shouldSetTextContent;
+exports.appendChild = appendChild;
+exports.appendChildToContainer = appendChildToContainer;
+exports.insertBefore = insertBefore;
+exports.insertInContainerBefore = insertInContainerBefore;
+exports.removeChild = removeChild;
+exports.removeChildFromContainer = removeChildFromContainer;
+exports.commitTextUpdate = commitTextUpdate;
+exports.commitMount = commitMount;
+exports.commitUpdate = commitUpdate;
+exports.hideInstance = hideInstance;
+exports.hideTextInstance = hideTextInstance;
+exports.unhideInstance = unhideInstance;
+exports.unhideTextInstance = unhideTextInstance;
+exports.clearContainer = clearContainer;
+exports.detachDeletedInstance = detachDeletedInstance;
+const Core_js_1 = __importDefault(require("konva/lib/Core.js"));
+const makeUpdates_js_1 = require("./makeUpdates.js");
+var scheduler_1 = require("scheduler");
+Object.defineProperty(exports, "now", { enumerable: true, get: function () { return scheduler_1.unstable_now; } });
+Object.defineProperty(exports, "idlePriority", { enumerable: true, get: function () { return scheduler_1.unstable_IdlePriority; } });
+Object.defineProperty(exports, "run", { enumerable: true, get: function () { return scheduler_1.unstable_runWithPriority; } });
+const constants_js_1 = require("react-reconciler/constants.js");
+const NO_CONTEXT = {};
+const UPDATE_SIGNAL = {};
+// for react-spring capability
+Core_js_1.default.Node.prototype._applyProps = makeUpdates_js_1.applyNodeProps;
+function appendInitialChild(parentInstance, child) {
+    if (typeof child === 'string') {
+        // Noop for string children of Text (eg <Text>foo</Text>)
+        console.error(`Do not use plain text as child of Konva.Node. You are using text: ${child}`);
+        return;
+    }
+    parentInstance.add(child);
+    (0, makeUpdates_js_1.updatePicture)(parentInstance);
+}
+function createInstance(type, props, internalInstanceHandle) {
+    let NodeClass = Core_js_1.default[type];
+    if (!NodeClass) {
+        console.error(`Konva has no node with the type ${type}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${type}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`);
+        NodeClass = Core_js_1.default.Group;
+    }
+    // we need to split props into events and non events
+    // we we can pass non events into constructor directly
+    // that way the performance should be better
+    // we we apply change "applyNodeProps"
+    // then it will trigger change events on first run
+    // but we don't need them!
+    const propsWithoutEvents = {};
+    const propsWithOnlyEvents = {};
+    for (var key in props) {
+        var isEvent = key.slice(0, 2) === 'on';
+        if (isEvent) {
+            propsWithOnlyEvents[key] = props[key];
+        }
+        else {
+            propsWithoutEvents[key] = props[key];
+        }
+    }
+    const instance = new NodeClass(propsWithoutEvents);
+    (0, makeUpdates_js_1.applyNodeProps)(instance, propsWithOnlyEvents);
+    return instance;
+}
+function createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
+    console.error(`Text components are not supported for now in ReactKonva. Your text is: "${text}"`);
+}
+function finalizeInitialChildren(domElement, type, props) {
+    return false;
+}
+function getPublicInstance(instance) {
+    return instance;
+}
+function prepareForCommit() {
+    return null;
+}
+function preparePortalMount() {
+    return null;
+}
+function prepareUpdate(domElement, type, oldProps, newProps) {
+    return UPDATE_SIGNAL;
+}
+function resetAfterCommit() {
+    // Noop
+}
+function resetTextContent(domElement) {
+    // Noop
+}
+function shouldDeprioritizeSubtree(type, props) {
+    return false;
+}
+function getRootHostContext() {
+    return NO_CONTEXT;
+}
+function getChildHostContext() {
+    return NO_CONTEXT;
+}
+exports.scheduleTimeout = setTimeout;
+exports.cancelTimeout = clearTimeout;
+exports.noTimeout = -1;
+// export const schedulePassiveEffects = scheduleDeferredCallback;
+// export const cancelPassiveEffects = cancelDeferredCallback;
+function shouldSetTextContent(type, props) {
+    return false;
+}
+// The Konva renderer is secondary to the React DOM renderer.
+exports.isPrimaryRenderer = false;
+exports.warnsIfNotActing = true;
+exports.supportsMutation = true;
+function appendChild(parentInstance, child) {
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    (0, makeUpdates_js_1.updatePicture)(parentInstance);
+}
+function appendChildToContainer(parentInstance, child) {
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    (0, makeUpdates_js_1.updatePicture)(parentInstance);
+}
+function insertBefore(parentInstance, child, beforeChild) {
+    // child._remove() will not stop dragging
+    // but child.remove() will stop it, but we don't need it
+    // removing will reset zIndexes
+    child._remove();
+    parentInstance.add(child);
+    child.setZIndex(beforeChild.getZIndex());
+    (0, makeUpdates_js_1.updatePicture)(parentInstance);
+}
+function insertInContainerBefore(parentInstance, child, beforeChild) {
+    insertBefore(parentInstance, child, beforeChild);
+}
+function removeChild(parentInstance, child) {
+    child.destroy();
+    child.off(makeUpdates_js_1.EVENTS_NAMESPACE);
+    (0, makeUpdates_js_1.updatePicture)(parentInstance);
+}
+function removeChildFromContainer(parentInstance, child) {
+    child.destroy();
+    child.off(makeUpdates_js_1.EVENTS_NAMESPACE);
+    (0, makeUpdates_js_1.updatePicture)(parentInstance);
+}
+function commitTextUpdate(textInstance, oldText, newText) {
+    console.error(`Text components are not yet supported in ReactKonva. You text is: "${newText}"`);
+}
+function commitMount(instance, type, newProps) {
+    // Noop
+}
+function commitUpdate(instance, updatePayload, type, oldProps, newProps) {
+    (0, makeUpdates_js_1.applyNodeProps)(instance, newProps, oldProps);
+}
+function hideInstance(instance) {
+    instance.hide();
+    (0, makeUpdates_js_1.updatePicture)(instance);
+}
+function hideTextInstance(textInstance) {
+    // Noop
+}
+function unhideInstance(instance, props) {
+    if (props.visible == null || props.visible) {
+        instance.show();
+    }
+}
+function unhideTextInstance(textInstance, text) {
+    // Noop
+}
+function clearContainer(container) {
+    // Noop
+}
+function detachDeletedInstance() { }
+const getCurrentEventPriority = () => constants_js_1.DefaultEventPriority;
+exports.getCurrentEventPriority = getCurrentEventPriority;

node_modules/react-konva/lib/makeUpdates.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVENTS_NAMESPACE = void 0;
+exports.toggleStrictMode = toggleStrictMode;
+exports.applyNodeProps = applyNodeProps;
+exports.updatePicture = updatePicture;
+const Global_js_1 = require("konva/lib/Global.js");
+const propsToSkip = {
+    children: true,
+    ref: true,
+    key: true,
+    style: true,
+    forwardedRef: true,
+    unstable_applyCache: true,
+    unstable_applyDrawHitFromCache: true,
+};
+let zIndexWarningShowed = false;
+let dragWarningShowed = false;
+exports.EVENTS_NAMESPACE = '.react-konva-event';
+let useStrictMode = false;
+function toggleStrictMode(value) {
+    useStrictMode = value;
+}
+const DRAGGABLE_WARNING = `ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.
+Position of a node will be changed during drag&drop, so you should update state of the react app as well.
+Consider to add onDragMove or onDragEnd events.
+For more info see: https://github.com/konvajs/react-konva/issues/256
+`;
+const Z_INDEX_WARNING = `ReactKonva: You are using "zIndex" attribute for a Konva node.
+react-konva may get confused with ordering. Just define correct order of elements in your render function of a component.
+For more info see: https://github.com/konvajs/react-konva/issues/194
+`;
+const EMPTY_PROPS = {};
+function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
+    // don't use zIndex in react-konva
+    if (!zIndexWarningShowed && 'zIndex' in props) {
+        console.warn(Z_INDEX_WARNING);
+        zIndexWarningShowed = true;
+    }
+    // check correct draggable usage
+    if (!dragWarningShowed && props.draggable) {
+        var hasPosition = props.x !== undefined || props.y !== undefined;
+        var hasEvents = props.onDragEnd || props.onDragMove;
+        if (hasPosition && !hasEvents) {
+            console.warn(DRAGGABLE_WARNING);
+            dragWarningShowed = true;
+        }
+    }
+    // check old props
+    // we need to unset properties that are not in new props
+    // and remove all events
+    for (var key in oldProps) {
+        if (propsToSkip[key]) {
+            continue;
+        }
+        var isEvent = key.slice(0, 2) === 'on';
+        var propChanged = oldProps[key] !== props[key];
+        // if that is a changed event, we need to remove it
+        if (isEvent && propChanged) {
+            var eventName = key.substr(2).toLowerCase();
+            if (eventName.substr(0, 7) === 'content') {
+                eventName =
+                    'content' +
+                        eventName.substr(7, 1).toUpperCase() +
+                        eventName.substr(8);
+            }
+            instance.off(eventName, oldProps[key]);
+        }
+        var toRemove = !props.hasOwnProperty(key);
+        if (toRemove) {
+            instance.setAttr(key, undefined);
+        }
+    }
+    var strictUpdate = useStrictMode || props._useStrictMode;
+    var updatedProps = {};
+    var hasUpdates = false;
+    const newEvents = {};
+    for (var key in props) {
+        if (propsToSkip[key]) {
+            continue;
+        }
+        var isEvent = key.slice(0, 2) === 'on';
+        var toAdd = oldProps[key] !== props[key];
+        if (isEvent && toAdd) {
+            var eventName = key.substr(2).toLowerCase();
+            if (eventName.substr(0, 7) === 'content') {
+                eventName =
+                    'content' +
+                        eventName.substr(7, 1).toUpperCase() +
+                        eventName.substr(8);
+            }
+            // check that event is not undefined
+            if (props[key]) {
+                newEvents[eventName] = props[key];
+            }
+        }
+        if (!isEvent &&
+            (props[key] !== oldProps[key] ||
+                (strictUpdate && props[key] !== instance.getAttr(key)))) {
+            hasUpdates = true;
+            updatedProps[key] = props[key];
+        }
+    }
+    if (hasUpdates) {
+        instance.setAttrs(updatedProps);
+        updatePicture(instance);
+    }
+    // subscribe to events AFTER we set attrs
+    // we need it to fix https://github.com/konvajs/react-konva/issues/471
+    // settings attrs may add events. Like "draggable: true" will add "mousedown" listener
+    for (var eventName in newEvents) {
+        instance.on(eventName + exports.EVENTS_NAMESPACE, newEvents[eventName]);
+    }
+}
+function updatePicture(node) {
+    if (!Global_js_1.Konva.autoDrawEnabled) {
+        var drawingNode = node.getLayer() || node.getStage();
+        drawingNode && drawingNode.batchDraw();
+    }
+}