first commit
This commit is contained in:
+76
@@ -0,0 +1,76 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.addPendingUnmount = addPendingUnmount;
|
||||
exports.prepareUnmounts = prepareUnmounts;
|
||||
exports.getEventBatch = getEventBatch;
|
||||
exports.scheduleMicrotask = scheduleMicrotask;
|
||||
exports.batchEvents = batchEvents;
|
||||
const react_dom_1 = require("react-dom");
|
||||
const pending = new Set();
|
||||
const pendingUnmounts = new Set();
|
||||
const enqueue = typeof queueMicrotask === 'function'
|
||||
? queueMicrotask
|
||||
: (callback) => Promise.resolve().then(callback);
|
||||
let depth = 0;
|
||||
const batches = new WeakMap();
|
||||
function addPendingUnmount(callback) {
|
||||
pendingUnmounts.add(callback);
|
||||
return () => {
|
||||
pendingUnmounts.delete(callback);
|
||||
};
|
||||
}
|
||||
// Hidden Stages may be deleted without another layout cleanup. Prepare their
|
||||
// root removals before either a scheduled render or a Stage's inline flush.
|
||||
function prepareUnmounts() {
|
||||
for (const callback of pendingUnmounts)
|
||||
callback();
|
||||
}
|
||||
function getEventBatch(batch) {
|
||||
if (!batch)
|
||||
return batchEvents;
|
||||
let wrapped = batches.get(batch);
|
||||
if (!wrapped) {
|
||||
// Konva deduplicates shared callbacks when several Stages drag together.
|
||||
wrapped = (run) => batchEvents(() => batch(run));
|
||||
batches.set(batch, wrapped);
|
||||
}
|
||||
return wrapped;
|
||||
}
|
||||
// React's host scheduler stays asynchronous while a handler or subscription is
|
||||
// running. A completed native input batch can finish those same scheduled jobs.
|
||||
function scheduleMicrotask(callback) {
|
||||
const run = () => {
|
||||
if (pending.delete(run)) {
|
||||
prepareUnmounts();
|
||||
callback();
|
||||
}
|
||||
};
|
||||
pending.add(run);
|
||||
enqueue(run);
|
||||
}
|
||||
function batchEvents(callback) {
|
||||
if (depth)
|
||||
return callback();
|
||||
depth++;
|
||||
try {
|
||||
// DOM-owned state must be scheduled inside this scope. Flush it before
|
||||
// finishing canvas work, so Stage can transfer the final DOM-owned props.
|
||||
(0, react_dom_1.flushSync)(callback);
|
||||
}
|
||||
finally {
|
||||
try {
|
||||
// Canvas effects can schedule DOM state, and DOM effects can schedule
|
||||
// more canvas work. Finish that work in a DOM scope too. Empty input
|
||||
// does not add a second flush, and queued microtasks become no-ops.
|
||||
while (pending.size) {
|
||||
(0, react_dom_1.flushSync)(() => {
|
||||
for (const run of pending)
|
||||
run();
|
||||
});
|
||||
}
|
||||
}
|
||||
finally {
|
||||
depth--;
|
||||
}
|
||||
}
|
||||
}
|
||||
+25
@@ -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);
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
// 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;
|
||||
onTouchCancel?(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>> {}
|
||||
|
||||
export interface StageProps
|
||||
extends Konva.NodeConfig,
|
||||
KonvaNodeEvents,
|
||||
Pick<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'className' | 'role' | 'style' | 'tabIndex' | 'title'
|
||||
> {
|
||||
/**
|
||||
* Wraps native Konva input inside react-konva's React batch (Konva 10.5+).
|
||||
* Must call its callback exactly once, synchronously. For example: runInAction.
|
||||
*/
|
||||
eventBatchFunc?: (callback: () => void) => void;
|
||||
}
|
||||
|
||||
// Stage is the only React component 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.ContainerConfig>;
|
||||
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 };
|
||||
+244
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* 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 react_dom_1 = require("react-dom");
|
||||
const [reactMajor, reactMinor] = react_1.default.version.split('.').map(Number);
|
||||
if (reactMajor !== 19 || reactMinor < 3) {
|
||||
throw new Error('react-konva requires React 19.3 or later within React 19. ' +
|
||||
'Install matching versions of react and react-dom. ' +
|
||||
'For React 19.2, use react-konva 19.2. For React 18, use react-konva 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 EventBatch_js_1 = require("./EventBatch.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 SuspendCanvas({ promise }) {
|
||||
throw promise;
|
||||
}
|
||||
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 children = react_1.default.useRef(null);
|
||||
const suspension = react_1.default.useRef(null);
|
||||
// DOM and Konva reconcilers have separate useId counters.
|
||||
const identifierPrefix = react_1.default.useId();
|
||||
const formStatus = (0, react_dom_1.useFormStatus)();
|
||||
const previousProps = react_1.default.useRef({});
|
||||
// Keep the render-time snapshot when React replays layout effects.
|
||||
const oldProps = previousProps.current;
|
||||
const Bridge = (0, its_fine_1.useContextBridge)();
|
||||
const fiber = (0, its_fine_1.useFiber)();
|
||||
const isStrictMode = !!(0, its_fine_1.traverseFiber)(fiber, true, (node) => node.type === react_1.default.StrictMode);
|
||||
const effectsDisconnected = react_1.default.useRef(false);
|
||||
const isUnmounting = react_1.default.useRef(false);
|
||||
const cancelUnmount = react_1.default.useRef(null);
|
||||
// Insertion effects stay mounted during hiding and StrictMode replay.
|
||||
// Activity has already disconnected layout and passive effects when hidden.
|
||||
// Its remaining insertion cleanups must still run inside a DOM commit.
|
||||
react_1.default.useInsertionEffect(() => {
|
||||
isUnmounting.current = false;
|
||||
return () => {
|
||||
isUnmounting.current = true;
|
||||
if (effectsDisconnected.current && stage.current)
|
||||
destroyStage();
|
||||
};
|
||||
}, []);
|
||||
const destroyStage = () => {
|
||||
cancelUnmount.current?.();
|
||||
cancelUnmount.current = null;
|
||||
(0, EventBatch_js_1.prepareUnmounts)();
|
||||
// Discard queued child work before destroying the Stage, including updates
|
||||
// from external stores whose objects are no longer alive.
|
||||
exports.KonvaRenderer.flushSyncFromReconciler(() => {
|
||||
exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
|
||||
});
|
||||
stage.current?.destroy();
|
||||
stage.current?.off(makeUpdates_js_1.EVENTS_NAMESPACE);
|
||||
stage.current = null;
|
||||
suspension.current?.resolve();
|
||||
suspension.current = null;
|
||||
};
|
||||
const setCanvasVisibility = (mode) => {
|
||||
if (mode === 'suspended') {
|
||||
if (!suspension.current) {
|
||||
let resolve;
|
||||
const promise = new Promise((done) => {
|
||||
resolve = done;
|
||||
});
|
||||
suspension.current = { promise, resolve };
|
||||
}
|
||||
}
|
||||
else {
|
||||
suspension.current?.resolve();
|
||||
suspension.current = null;
|
||||
}
|
||||
exports.KonvaRenderer.updateContainer(react_1.default.createElement(react_1.default.Activity, {
|
||||
mode: mode === 'hidden' ? 'hidden' : 'visible',
|
||||
children: react_1.default.createElement(react_1.default.Suspense, { fallback: null }, children.current, suspension.current &&
|
||||
react_1.default.createElement(SuspendCanvas, {
|
||||
promise: suspension.current.promise,
|
||||
})),
|
||||
}), fiberRef.current, null);
|
||||
(0, EventBatch_js_1.prepareUnmounts)();
|
||||
// Parent layout effects must see the committed canvas nodes and refs.
|
||||
exports.KonvaRenderer.flushSyncWork();
|
||||
};
|
||||
react_1.default.useLayoutEffect(() => {
|
||||
cancelUnmount.current?.();
|
||||
cancelUnmount.current = null;
|
||||
// Reconnecting layout effects reuses the existing Stage.
|
||||
if (!stage.current) {
|
||||
stage.current = new Core_js_1.default.Stage({
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
container: container.current,
|
||||
});
|
||||
fiberRef.current = exports.KonvaRenderer.createContainer(stage.current, constants_js_1.ConcurrentRoot, null, isStrictMode, null, identifierPrefix, console.error, console.error, console.error, null, null);
|
||||
}
|
||||
return () => {
|
||||
if (!isUnmounting.current) {
|
||||
// If this hidden Stage is deleted, discard queued child work before
|
||||
// another root or the scheduler flushes it.
|
||||
const unmount = () => {
|
||||
if (!isUnmounting.current)
|
||||
return;
|
||||
cancelUnmount.current?.();
|
||||
cancelUnmount.current = null;
|
||||
exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
|
||||
};
|
||||
cancelUnmount.current = (0, EventBatch_js_1.addPendingUnmount)(unmount);
|
||||
// Suspense disconnects layout effects but keeps passive effects.
|
||||
setCanvasVisibility('suspended');
|
||||
}
|
||||
else {
|
||||
destroyStage();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
react_1.default.useEffect(() => {
|
||||
effectsDisconnected.current = false;
|
||||
return () => {
|
||||
effectsDisconnected.current = true;
|
||||
// Activity and StrictMode also disconnect the DOM passive effects.
|
||||
if (!stage.current)
|
||||
return;
|
||||
if (isUnmounting.current)
|
||||
destroyStage();
|
||||
else
|
||||
setCanvasVisibility('hidden');
|
||||
};
|
||||
}, []);
|
||||
react_1.default.useLayoutEffect(() => {
|
||||
// Older Konva versions use the normal asynchronous React scheduler.
|
||||
if (typeof stage.current.eventBatchFunc === 'function') {
|
||||
stage.current.eventBatchFunc((0, EventBatch_js_1.getEventBatch)(props.eventBatchFunc));
|
||||
}
|
||||
}, [props.eventBatchFunc]);
|
||||
react_1.default.useImperativeHandle(props.forwardedRef, () => stage.current, []);
|
||||
react_1.default.useLayoutEffect(() => {
|
||||
previousProps.current = props;
|
||||
(0, makeUpdates_js_1.applyNodeProps)(stage.current, props, oldProps);
|
||||
// updateContainer schedules sync-lane work; with async scheduleMicrotask
|
||||
// the work is queued, so flushSyncWork() drains it inline here so that
|
||||
// a parent useLayoutEffect can read Konva nodes added by subscribing
|
||||
// children. (Lighter than flushSyncFromReconciler — no callback wrapper.)
|
||||
children.current = react_1.default.createElement(HostConfig.HostTransitionContext.Provider, { value: formStatus }, react_1.default.createElement(Bridge, {}, props.children));
|
||||
setCanvasVisibility('visible');
|
||||
});
|
||||
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.3.2';
|
||||
const rendererConfig = {
|
||||
...HostConfig,
|
||||
// React's public context type omits fields used by the reconciler.
|
||||
HostTransitionContext: HostConfig.HostTransitionContext,
|
||||
rendererVersion: exports.version,
|
||||
rendererPackageName: 'react-konva',
|
||||
extraDevToolsConfig: null,
|
||||
};
|
||||
exports.KonvaRenderer = (0, react_reconciler_1.default)(rendererConfig);
|
||||
exports.KonvaRenderer.injectIntoDevTools();
|
||||
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;
|
||||
+306
@@ -0,0 +1,306 @@
|
||||
"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.maySuspendCommitInSyncRender = exports.maySuspendCommitOnUpdate = exports.createViewTransitionInstance = exports.removeChildFromContainer = exports.insertInContainerBefore = exports.appendChildToContainer = 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.createFragmentInstance = createFragmentInstance;
|
||||
exports.updateFragmentInstanceFiber = updateFragmentInstanceFiber;
|
||||
exports.commitNewChildToFragmentInstance = commitNewChildToFragmentInstance;
|
||||
exports.deleteChildFromFragmentInstance = deleteChildFromFragmentInstance;
|
||||
exports.prepareForCommit = prepareForCommit;
|
||||
exports.preparePortalMount = preparePortalMount;
|
||||
exports.resetAfterCommit = resetAfterCommit;
|
||||
exports.resetTextContent = resetTextContent;
|
||||
exports.getRootHostContext = getRootHostContext;
|
||||
exports.getChildHostContext = getChildHostContext;
|
||||
exports.shouldSetTextContent = shouldSetTextContent;
|
||||
exports.appendChild = appendChild;
|
||||
exports.insertBefore = insertBefore;
|
||||
exports.removeChild = removeChild;
|
||||
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.bindToConsole = bindToConsole;
|
||||
exports.beforeActiveInstanceBlur = beforeActiveInstanceBlur;
|
||||
exports.afterActiveInstanceBlur = afterActiveInstanceBlur;
|
||||
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.startViewTransition = startViewTransition;
|
||||
exports.preloadInstance = preloadInstance;
|
||||
exports.startSuspendingCommit = startSuspendingCommit;
|
||||
exports.suspendInstance = suspendInstance;
|
||||
exports.suspendOnActiveViewTransition = suspendOnActiveViewTransition;
|
||||
exports.waitForCommitToBeReady = waitForCommitToBeReady;
|
||||
exports.getSuspendedCommitReason = getSuspendedCommitReason;
|
||||
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 = {};
|
||||
// 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;
|
||||
}
|
||||
// Fragments group Konva children but have no DOM instance or Fragment methods.
|
||||
// This matches React's noop renderer.
|
||||
function createFragmentInstance() {
|
||||
return null;
|
||||
}
|
||||
function updateFragmentInstanceFiber() { }
|
||||
function commitNewChildToFragmentInstance() { }
|
||||
function deleteChildFromFragmentInstance() { }
|
||||
let finishUpdateBatch;
|
||||
function prepareForCommit() {
|
||||
// Older supported Konva versions do not expose commit batching.
|
||||
finishUpdateBatch = Core_js_1.default.beginUpdateBatch?.();
|
||||
return null;
|
||||
}
|
||||
function preparePortalMount() {
|
||||
return null;
|
||||
}
|
||||
function resetAfterCommit() {
|
||||
const finish = finishUpdateBatch;
|
||||
finishUpdateBatch = undefined;
|
||||
// React layout effects must see the final Transformer geometry.
|
||||
finish?.();
|
||||
}
|
||||
function resetTextContent(domElement) {
|
||||
// Noop
|
||||
}
|
||||
function getRootHostContext() {
|
||||
return NO_CONTEXT;
|
||||
}
|
||||
function getChildHostContext() {
|
||||
return NO_CONTEXT;
|
||||
}
|
||||
exports.scheduleTimeout = setTimeout;
|
||||
exports.cancelTimeout = clearTimeout;
|
||||
exports.supportsMicrotasks = true;
|
||||
// Async — fixes the mobx-react-lite snapshot race. Stage's useLayoutEffect
|
||||
// then explicitly calls `flushSyncWork()` to keep parent useLayoutEffect able
|
||||
// to read Konva nodes added by subscribing children (see ReactKonvaCore.tsx).
|
||||
var EventBatch_js_1 = require("./EventBatch.js");
|
||||
Object.defineProperty(exports, "scheduleMicrotask", { enumerable: true, get: function () { return EventBatch_js_1.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);
|
||||
}
|
||||
exports.appendChildToContainer = appendChild;
|
||||
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);
|
||||
}
|
||||
exports.insertInContainerBefore = insertBefore;
|
||||
function removeChild(parentInstance, child) {
|
||||
child.destroy();
|
||||
child.off(makeUpdates_js_1.EVENTS_NAMESPACE);
|
||||
(0, makeUpdates_js_1.updatePicture)(parentInstance);
|
||||
}
|
||||
exports.removeChildFromContainer = removeChild;
|
||||
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();
|
||||
(0, makeUpdates_js_1.updatePicture)(instance);
|
||||
}
|
||||
}
|
||||
function unhideTextInstance(textInstance, text) {
|
||||
// Noop
|
||||
}
|
||||
function clearContainer(container) {
|
||||
// Noop
|
||||
}
|
||||
function detachDeletedInstance(instance) {
|
||||
// React visits every deleted host node here, including descendants of a
|
||||
// removed container. Konva.destroy() alone does not release their listeners.
|
||||
instance.off(makeUpdates_js_1.EVENTS_NAMESPACE);
|
||||
}
|
||||
function getInstanceFromNode() {
|
||||
return null;
|
||||
}
|
||||
function bindToConsole(methodName, args) {
|
||||
return console[methodName].bind(console, ...args);
|
||||
}
|
||||
function beforeActiveInstanceBlur() { }
|
||||
function afterActiveInstanceBlur() { }
|
||||
function prepareScopeUpdate() { }
|
||||
function getInstanceFromScope() {
|
||||
return null;
|
||||
}
|
||||
function setCurrentUpdatePriority(newPriority) {
|
||||
currentUpdatePriority = newPriority;
|
||||
}
|
||||
function getCurrentUpdatePriority() {
|
||||
return currentUpdatePriority;
|
||||
}
|
||||
// Load-bearing: pins secondary commits to React's sync lane so they land
|
||||
// before the scheduler yields. Required for parent useLayoutEffect to read
|
||||
// Konva nodes added by subscribing children. Changing to Default/Continuous/
|
||||
// Idle breaks ~18 tests in test/01-mounting and test/16-scheduling-invariants.
|
||||
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() {
|
||||
// React 19.3 calls this during render only for nodes inside ViewTransition.
|
||||
// Reject before commit, where a view-transition error can escape boundaries.
|
||||
throw new Error('ViewTransition is not supported inside a Stage. ' +
|
||||
'Place ViewTransition around Stage to animate its DOM container.');
|
||||
}
|
||||
exports.createViewTransitionInstance = maySuspendCommit;
|
||||
exports.maySuspendCommitOnUpdate = maySuspendCommit;
|
||||
exports.maySuspendCommitInSyncRender = maySuspendCommit;
|
||||
// Empty ViewTransition boundaries can reach commit without any Konva nodes.
|
||||
// Finish those commits without animation so ref errors can reach a boundary.
|
||||
function startViewTransition(suspendedState, rootContainer, transitionTypes, mutationCallback, layoutCallback, afterMutationCallback, spawnedWorkCallback, passiveCallback, errorCallback, blockedCallback, finishedAnimation) {
|
||||
mutationCallback();
|
||||
layoutCallback();
|
||||
finishedAnimation?.();
|
||||
spawnedWorkCallback();
|
||||
return null;
|
||||
}
|
||||
function preloadInstance() {
|
||||
return true;
|
||||
}
|
||||
function startSuspendingCommit() { }
|
||||
function suspendInstance() { }
|
||||
// React also calls this for Suspense retries without a ViewTransition component.
|
||||
function suspendOnActiveViewTransition() { }
|
||||
function waitForCommitToBeReady() {
|
||||
return null;
|
||||
}
|
||||
function getSuspendedCommitReason() {
|
||||
return null;
|
||||
}
|
||||
// Stage provides the surrounding DOM form status. Standalone roots stay idle.
|
||||
exports.NotPendingTransition = Object.freeze({
|
||||
pending: false,
|
||||
data: null,
|
||||
method: null,
|
||||
action: null,
|
||||
});
|
||||
exports.HostTransitionContext = react_1.default.createContext(exports.NotPendingTransition);
|
||||
function resetFormInstance() { }
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
"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,
|
||||
// Stage's native input boundary is owned by the renderer.
|
||||
eventBatchFunc: 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;
|
||||
}
|
||||
}
|
||||
var updatedProps = {};
|
||||
var hasUpdates = false;
|
||||
// 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);
|
||||
}
|
||||
// Remove by namespace because react-konva binds at most one listener
|
||||
// for each event in that namespace.
|
||||
instance.off(eventName + exports.EVENTS_NAMESPACE);
|
||||
}
|
||||
var toRemove = !props.hasOwnProperty(key);
|
||||
if (!isEvent && toRemove) {
|
||||
updatedProps[key] = undefined;
|
||||
hasUpdates = true;
|
||||
}
|
||||
}
|
||||
var strictUpdate = useStrictMode || props._useStrictMode;
|
||||
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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user