first commit

node_modules/react-konva/es/ReactKonva.js

@@ -0,0 +1,10 @@
+/**
+ * Based on ReactArt.js
+ * Copyright (c) 2017-present Lavrenov Anton.
+ * All rights reserved.
+ *
+ * MIT
+ */
+'use strict';
+import 'konva';
+export * from './ReactKonvaCore.js';

node_modules/react-konva/es/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/es/ReactKonvaCore.js

@@ -0,0 +1,123 @@
+/**
+ * Based on ReactArt.js
+ * Copyright (c) 2017-present Lavrenov Anton.
+ * All rights reserved.
+ *
+ * MIT
+ */
+'use strict';
+import React from 'react';
+import Konva from 'konva/lib/Core.js';
+import ReactFiberReconciler from 'react-reconciler';
+import { LegacyRoot } from 'react-reconciler/constants.js';
+import * as HostConfig from './ReactKonvaHostConfig.js';
+import { applyNodeProps, toggleStrictMode } from './makeUpdates.js';
+import { useContextBridge, FiberProvider } from 'its-fine';
+function usePrevious(value) {
+    const ref = React.useRef({});
+    React.useLayoutEffect(() => {
+        ref.current = value;
+    });
+    React.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.useRef(null);
+    const stage = React.useRef(null);
+    const fiberRef = React.useRef(null);
+    const oldProps = usePrevious(props);
+    const Bridge = useContextBridge();
+    const _setRef = (stage) => {
+        const { forwardedRef } = props;
+        if (!forwardedRef) {
+            return;
+        }
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(stage);
+        }
+        else {
+            forwardedRef.current = stage;
+        }
+    };
+    React.useLayoutEffect(() => {
+        stage.current = new Konva.Stage({
+            width: props.width,
+            height: props.height,
+            container: container.current,
+        });
+        _setRef(stage.current);
+        // @ts-ignore
+        fiberRef.current = KonvaRenderer.createContainer(stage.current, LegacyRoot, false, null);
+        KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current);
+        return () => {
+            if (!Konva.isBrowser) {
+                return;
+            }
+            _setRef(null);
+            KonvaRenderer.updateContainer(null, fiberRef.current, null);
+            stage.current.destroy();
+        };
+    }, []);
+    React.useLayoutEffect(() => {
+        _setRef(stage.current);
+        applyNodeProps(stage.current, props, oldProps);
+        KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null);
+    });
+    return React.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,
+    });
+};
+export const Layer = 'Layer';
+export const FastLayer = 'FastLayer';
+export const Group = 'Group';
+export const Label = 'Label';
+export const Rect = 'Rect';
+export const Circle = 'Circle';
+export const Ellipse = 'Ellipse';
+export const Wedge = 'Wedge';
+export const Line = 'Line';
+export const Sprite = 'Sprite';
+export const Image = 'Image';
+export const Text = 'Text';
+export const TextPath = 'TextPath';
+export const Star = 'Star';
+export const Ring = 'Ring';
+export const Arc = 'Arc';
+export const Tag = 'Tag';
+export const Path = 'Path';
+export const RegularPolygon = 'RegularPolygon';
+export const Arrow = 'Arrow';
+export const Shape = 'Shape';
+export const Transformer = 'Transformer';
+export const version = '18.2.13';
+// @ts-ignore
+export const KonvaRenderer = ReactFiberReconciler(HostConfig);
+KonvaRenderer.injectIntoDevTools({
+    // @ts-ignore
+    findHostInstanceByFiber: () => null,
+    bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
+    version: React.version,
+    rendererPackageName: 'react-konva',
+});
+export const Stage = React.forwardRef((props, ref) => {
+    return React.createElement(FiberProvider, {}, React.createElement(StageWrap, { ...props, forwardedRef: ref }));
+});
+export const useStrictMode = toggleStrictMode;
+// export useContextBridge from its-fine for reuse in react-konva-utils
+// so react-konva-utils don't use its own version of its-fine (it is possible on pnpm)
+export { useContextBridge };

node_modules/react-konva/es/ReactKonvaHostConfig.js

@@ -0,0 +1,158 @@
+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 { DefaultEventPriority } from 'react-reconciler/constants.js';
+const NO_CONTEXT = {};
+const UPDATE_SIGNAL = {};
+// for react-spring capability
+Konva.Node.prototype._applyProps = applyNodeProps;
+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) {
+        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 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 = true;
+export const supportsMutation = true;
+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, updatePayload, 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 const getCurrentEventPriority = () => DefaultEventPriority;

node_modules/react-konva/es/makeUpdates.js

@@ -0,0 +1,114 @@
+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) {
+        instance.on(eventName + EVENTS_NAMESPACE, newEvents[eventName]);
+    }
+}
+export function updatePicture(node) {
+    if (!Konva.autoDrawEnabled) {
+        var drawingNode = node.getLayer() || node.getStage();
+        drawingNode && drawingNode.batchDraw();
+    }
+}