@depup/react-konva 19.2.3-depup.0

package/lib/ReactKonvaCore.js

@@ -0,0 +1,221 @@
+/**
+ * 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"));
+if (react_1.default.version.indexOf('19') === -1) {
+    throw new Error('react-konva version 19 is only compatible with React 19. Make sure to have the last version of react-konva and react or downgrade react-konva to version 18.');
+}
+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 useIsReactStrictMode = () => {
+    const memoCount = react_1.default.useRef(0);
+    // in strict mode, memo will be called twice
+    react_1.default.useMemo(() => {
+        memoCount.current++;
+    }, []);
+    return memoCount.current > 1;
+};
+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 pendingDestroy = react_1.default.useRef(null);
+    const _setRef = (stage) => {
+        const { forwardedRef } = props;
+        if (!forwardedRef) {
+            return;
+        }
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(stage);
+        }
+        else {
+            forwardedRef.current = stage;
+        }
+    };
+    const isStrictMode = useIsReactStrictMode();
+    const destroyStage = () => {
+        _setRef(null);
+        // CRITICAL: flushSyncFromReconciler is required here to ensure pending work
+        // (e.g. stale MobX updates on child components) is flushed synchronously
+        // before the tree is torn down. Without it, unmounting a Stage can leave
+        // pending Konva work that runs after the stage is already destroyed.
+        exports.KonvaRenderer.flushSyncFromReconciler(() => {
+            exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
+        });
+        stage.current?.destroy();
+        stage.current = null;
+    };
+    react_1.default.useLayoutEffect(() => {
+        // Cancel any pending destruction (happens during re-ordering in strict mode)
+        if (pendingDestroy.current) {
+            clearTimeout(pendingDestroy.current);
+            pendingDestroy.current = null;
+        }
+        // If stage already exists (re-ordering scenario), reuse it
+        if (stage.current) {
+            _setRef(stage.current);
+        }
+        else {
+            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.ConcurrentRoot, null, false, null, '', console.error, console.error, console.error, null);
+            exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current, null, () => { });
+        }
+        return () => {
+            if (isStrictMode) {
+                // Delay destruction to allow cancellation on remount
+                pendingDestroy.current = setTimeout(destroyStage, 0);
+            }
+            else {
+                destroyStage();
+            }
+        };
+    }, []);
+    react_1.default.useLayoutEffect(() => {
+        _setRef(stage.current);
+        (0, makeUpdates_js_1.applyNodeProps)(stage.current, props, oldProps);
+        // =============================================================================
+        // CRITICAL FIX - DO NOT REMOVE
+        // =============================================================================
+        // This flushSyncFromReconciler wrapper is CRITICAL for React 19 compatibility.
+        //
+        // THE BUG:
+        // When using useSyncExternalStore (MobX, Zustand, etc.) with react-konva,
+        // parent component's useLayoutEffect couldn't find newly added Konva nodes.
+        // The nodes were added to the store, but not yet rendered to the canvas.
+        //
+        // ROOT CAUSE:
+        // React 19's updateContainer can defer Konva reconciler work to a later
+        // microtask. Combined with Bridge component (from its-fine) and Html components
+        // that create secondary React roots, this caused child components to render
+        // AFTER parent's useLayoutEffect completed.
+        //
+        // THE FIX:
+        // flushSyncFromReconciler forces ALL scheduled Konva reconciler work to
+        // complete synchronously within this useLayoutEffect, ensuring child
+        // components render before any parent effects run.
+        //
+        // WARNING - NOT COVERED BY TESTS:
+        // This bug CANNOT be reproduced in local test environments (Vitest/Playwright).
+        // It only manifests in production builds with specific conditions:
+        // - MobX/useSyncExternalStore for state management
+        // - Html components with secondary React roots using Bridge
+        // - Complex component hierarchies (multiple pages/stages)
+        // The fix was verified in Polotno production app.
+        // =============================================================================
+        exports.KonvaRenderer.flushSyncFromReconciler(() => {
+            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 = '19.2.3';
+// @ts-ignore
+exports.KonvaRenderer = (0, react_reconciler_1.default)(HostConfig);
+// Update Stage component declaration
+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;

package/lib/ReactKonvaHostConfig.js

@@ -0,0 +1,277 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HostTransitionContext = exports.NotPendingTransition = exports.supportsHydration = exports.supportsPersistence = exports.supportsMutation = exports.warnsIfNotActing = exports.isPrimaryRenderer = exports.noTimeout = exports.scheduleMicrotask = exports.supportsMicrotasks = 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;
+exports.getInstanceFromNode = getInstanceFromNode;
+exports.beforeActiveInstanceBlur = beforeActiveInstanceBlur;
+exports.afterActiveInstanceBlur = afterActiveInstanceBlur;
+exports.getCurrentEventPriority = getCurrentEventPriority;
+exports.prepareScopeUpdate = prepareScopeUpdate;
+exports.getInstanceFromScope = getInstanceFromScope;
+exports.setCurrentUpdatePriority = setCurrentUpdatePriority;
+exports.getCurrentUpdatePriority = getCurrentUpdatePriority;
+exports.resolveUpdatePriority = resolveUpdatePriority;
+exports.shouldAttemptEagerTransition = shouldAttemptEagerTransition;
+exports.trackSchedulerEvent = trackSchedulerEvent;
+exports.resolveEventType = resolveEventType;
+exports.resolveEventTimeStamp = resolveEventTimeStamp;
+exports.requestPostPaintCallback = requestPostPaintCallback;
+exports.maySuspendCommit = maySuspendCommit;
+exports.preloadInstance = preloadInstance;
+exports.startSuspendingCommit = startSuspendingCommit;
+exports.suspendInstance = suspendInstance;
+exports.waitForCommitToBeReady = waitForCommitToBeReady;
+exports.resetFormInstance = resetFormInstance;
+const react_1 = __importDefault(require("react"));
+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;
+// let currentUpdatePriority: number = NoEventPriority;
+let currentUpdatePriority = constants_js_1.DefaultEventPriority;
+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) {
+        // ignore ref
+        if (key === 'ref') {
+            continue;
+        }
+        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.supportsMicrotasks = true;
+// Run microtasks synchronously for immediate updates
+const scheduleMicrotask = (fn) => {
+    fn();
+};
+exports.scheduleMicrotask = scheduleMicrotask;
+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 = false;
+exports.supportsMutation = true;
+exports.supportsPersistence = false;
+exports.supportsHydration = false;
+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, 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() { }
+function getInstanceFromNode() {
+    return null;
+}
+function beforeActiveInstanceBlur() { }
+function afterActiveInstanceBlur() { }
+function getCurrentEventPriority() {
+    return constants_js_1.DefaultEventPriority;
+}
+function prepareScopeUpdate() { }
+function getInstanceFromScope() {
+    return null;
+}
+function setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+}
+function getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+}
+function resolveUpdatePriority() {
+    return constants_js_1.DiscreteEventPriority;
+}
+function shouldAttemptEagerTransition() {
+    return false;
+}
+function trackSchedulerEvent() { }
+function resolveEventType() {
+    return null;
+}
+function resolveEventTimeStamp() {
+    return -1.1;
+}
+function requestPostPaintCallback() { }
+function maySuspendCommit() {
+    return false;
+}
+function preloadInstance() {
+    return true;
+}
+function startSuspendingCommit() { }
+function suspendInstance() { }
+function waitForCommitToBeReady() {
+    return null;
+}
+exports.NotPendingTransition = null;
+// React 19 transition context - create as React context that can be cast by reconciler
+exports.HostTransitionContext = react_1.default.createContext(null);
+function resetFormInstance() { }

package/lib/makeUpdates.js

@@ -0,0 +1,123 @@
+"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) {
+        // first clear any existing listeners, it is required for strict mode
+        instance.off(eventName + exports.EVENTS_NAMESPACE);
+        // then attach new one
+        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();
+    }
+}