@depup/react-konva 19.2.3-depup.0

package/es/ReactKonvaHostConfig.js

@@ -0,0 +1,220 @@
+import React from 'react';
+import Konva from 'konva/lib/Core.js';
+import { applyNodeProps, updatePicture, EVENTS_NAMESPACE, } from './makeUpdates.js';
+export { unstable_now as now, unstable_IdlePriority as idlePriority, unstable_runWithPriority as run, } from 'scheduler';
+import { 
+// NoEventPriority,
+DefaultEventPriority, DiscreteEventPriority, } from 'react-reconciler/constants.js';
+const NO_CONTEXT = {};
+const UPDATE_SIGNAL = {};
+// for react-spring capability
+Konva.Node.prototype._applyProps = applyNodeProps;
+// let currentUpdatePriority: number = NoEventPriority;
+let currentUpdatePriority = DefaultEventPriority;
+export 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);
+    updatePicture(parentInstance);
+}
+export function createInstance(type, props, internalInstanceHandle) {
+    let NodeClass = Konva[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 = Konva.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);
+    applyNodeProps(instance, propsWithOnlyEvents);
+    return instance;
+}
+export function createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
+    console.error(`Text components are not supported for now in ReactKonva. Your text is: "${text}"`);
+}
+export function finalizeInitialChildren(domElement, type, props) {
+    return false;
+}
+export function getPublicInstance(instance) {
+    return instance;
+}
+export function prepareForCommit() {
+    return null;
+}
+export function preparePortalMount() {
+    return null;
+}
+export function prepareUpdate(domElement, type, oldProps, newProps) {
+    return UPDATE_SIGNAL;
+}
+export function resetAfterCommit() {
+    // Noop
+}
+export function resetTextContent(domElement) {
+    // Noop
+}
+export function shouldDeprioritizeSubtree(type, props) {
+    return false;
+}
+export function getRootHostContext() {
+    return NO_CONTEXT;
+}
+export function getChildHostContext() {
+    return NO_CONTEXT;
+}
+export const scheduleTimeout = setTimeout;
+export const cancelTimeout = clearTimeout;
+export const supportsMicrotasks = true;
+// Run microtasks synchronously for immediate updates
+export const scheduleMicrotask = (fn) => {
+    fn();
+};
+export const noTimeout = -1;
+// export const schedulePassiveEffects = scheduleDeferredCallback;
+// export const cancelPassiveEffects = cancelDeferredCallback;
+export function shouldSetTextContent(type, props) {
+    return false;
+}
+// The Konva renderer is secondary to the React DOM renderer.
+export const isPrimaryRenderer = false;
+export const warnsIfNotActing = false;
+export const supportsMutation = true;
+export const supportsPersistence = false;
+export const supportsHydration = false;
+export function appendChild(parentInstance, child) {
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    updatePicture(parentInstance);
+}
+export function appendChildToContainer(parentInstance, child) {
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    updatePicture(parentInstance);
+}
+export 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());
+    updatePicture(parentInstance);
+}
+export function insertInContainerBefore(parentInstance, child, beforeChild) {
+    insertBefore(parentInstance, child, beforeChild);
+}
+export function removeChild(parentInstance, child) {
+    child.destroy();
+    child.off(EVENTS_NAMESPACE);
+    updatePicture(parentInstance);
+}
+export function removeChildFromContainer(parentInstance, child) {
+    child.destroy();
+    child.off(EVENTS_NAMESPACE);
+    updatePicture(parentInstance);
+}
+export function commitTextUpdate(textInstance, oldText, newText) {
+    console.error(`Text components are not yet supported in ReactKonva. You text is: "${newText}"`);
+}
+export function commitMount(instance, type, newProps) {
+    // Noop
+}
+export function commitUpdate(instance, type, oldProps, newProps) {
+    applyNodeProps(instance, newProps, oldProps);
+}
+export function hideInstance(instance) {
+    instance.hide();
+    updatePicture(instance);
+}
+export function hideTextInstance(textInstance) {
+    // Noop
+}
+export function unhideInstance(instance, props) {
+    if (props.visible == null || props.visible) {
+        instance.show();
+    }
+}
+export function unhideTextInstance(textInstance, text) {
+    // Noop
+}
+export function clearContainer(container) {
+    // Noop
+}
+export function detachDeletedInstance() { }
+export function getInstanceFromNode() {
+    return null;
+}
+export function beforeActiveInstanceBlur() { }
+export function afterActiveInstanceBlur() { }
+export function getCurrentEventPriority() {
+    return DefaultEventPriority;
+}
+export function prepareScopeUpdate() { }
+export function getInstanceFromScope() {
+    return null;
+}
+export function setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+}
+export function getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+}
+export function resolveUpdatePriority() {
+    return DiscreteEventPriority;
+}
+export function shouldAttemptEagerTransition() {
+    return false;
+}
+export function trackSchedulerEvent() { }
+export function resolveEventType() {
+    return null;
+}
+export function resolveEventTimeStamp() {
+    return -1.1;
+}
+export function requestPostPaintCallback() { }
+export function maySuspendCommit() {
+    return false;
+}
+export function preloadInstance() {
+    return true;
+}
+export function startSuspendingCommit() { }
+export function suspendInstance() { }
+export function waitForCommitToBeReady() {
+    return null;
+}
+export const NotPendingTransition = null;
+// React 19 transition context - create as React context that can be cast by reconciler
+export const HostTransitionContext = /* @__PURE__ */ React.createContext(null);
+export function resetFormInstance() { }

package/es/makeUpdates.js

@@ -0,0 +1,117 @@
+import { Konva } from '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;
+export const EVENTS_NAMESPACE = '.react-konva-event';
+let useStrictMode = false;
+export 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 = {};
+export 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 + EVENTS_NAMESPACE);
+        // then attach new one
+        instance.on(eventName + EVENTS_NAMESPACE, newEvents[eventName]);
+    }
+}
+export function updatePicture(node) {
+    if (!Konva.autoDrawEnabled) {
+        var drawingNode = node.getLayer() || node.getStage();
+        drawingNode && drawingNode.batchDraw();
+    }
+}

package/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);

package/lib/ReactKonvaCore.d.ts

@@ -0,0 +1,117 @@
+// 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<TouchEvent>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<TouchEvent>): 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,
+  any
+>;
+
+export var version: string;
+
+export { useContextBridge };