pixi-essentials-react-bindings-extended
Version:
React components for display-objects provided by pixi-essentials-transformer-extended, for usage with @pixi/react. Modern Canva-style transformer with enhanced features.
353 lines (251 loc) • 11.8 kB
JavaScript
/* eslint-disable */
/*!
* pixi-essentials-react-bindings-extended - v1.0.9-alpha.6
* Compiled Sat, 25 Oct 2025 08:53:47 UTC
*
* pixi-essentials-react-bindings-extended is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license
*
* Copyright 2019-2020, Irfan Khan (khanzzirfan) - Modern Canva-style upgrade, All Rights Reserved
*/
this.ReactPixi = this.ReactPixi || {};
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@pixi/math'), require('@pixi/react'), require('pixi-essentials-transformer-extended')) :
typeof define === 'function' && define.amd ? define(['exports', '@pixi/math', '@pixi/react', 'pixi-essentials-transformer-extended'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.pixi_essentials_react_bindings_extended = {}, global.PIXI, global.react, global.pixiEssentialsTransformerExtended));
}(this, (function (exports, math, react, pixiEssentialsTransformerExtended) { 'use strict';
/**
* Removes old listeners and applies the new ones passed in the props
*
* @param displayObject - display-object emitting events
* @param events - object mapping handler prop-names to the fired events
* @param oldProps - old props. If calling on first props being passed, this should be `{}`.
* @param newProps - new props.
*/
function applyEventProps(
displayObject,
events,
oldProps,
newProps,
)
{
for (const handlerName in events)
{
const oldHandler = oldProps[handlerName];
const newHandler = newProps[handlerName];
const event = events[handlerName];
if (oldHandler !== newHandler)
{
if (oldHandler)
{
displayObject.off(event, oldHandler);
}
if (newHandler)
{
displayObject.on(event, newHandler);
}
}
}
}
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
const EMPTY = {};
const IDENTITY_MATRIX = math.Matrix.IDENTITY; // Prevent reinstantation each time
/** @internal */
/** @ignore */
const HANDLER_TO_EVENT = {
transformchange: "transformchange",
transformcommit: "transformcommit",
elementfocused: "elementfocused",
elementfocuscleared: "elementfocuscleared",
};
/**
* Transformer component
*
* @see https://github.com/SukantPal/pixi-essentials/tree/master/packages/transformer
*/
const Transformer = react.PixiComponent
("Transformer", {
create: (props) =>
new pixiEssentialsTransformerExtended.Transformer(props ),
applyProps(
instance,
oldProps,
newProps
) {
react.applyDefaultProps(instance, oldProps, newProps);
applyEventProps(instance, HANDLER_TO_EVENT, oldProps, newProps);
if (newProps.cursors) {
Object.assign(instance.cursors, newProps.cursors);
}
instance.group = newProps.group || [];
instance.boundingBoxes = newProps.boundingBoxes || "all";
instance.boxScalingEnabled = newProps.boxScalingEnabled === true;
instance.boxScalingTolerance =
newProps.boxScalingTolerance !== undefined
? newProps.boxScalingTolerance
: instance.boxScalingTolerance;
instance.boxRotationEnabled = newProps.boxRotationEnabled === true;
instance.boxRotationTolerance =
newProps.boxRotationTolerance !== undefined
? newProps.boxRotationTolerance
: instance.boxRotationTolerance;
instance.centeredScaling = newProps.centeredScaling;
instance.enabledHandles = newProps.enabledHandles ;
instance.lockAspectRatio = newProps.lockAspectRatio;
instance.projectionTransform.copyFrom(
newProps.projectionTransform || IDENTITY_MATRIX
);
instance.skewRadius = newProps.skewRadius || instance.skewRadius;
instance.rotateEnabled = newProps.rotateEnabled !== false;
instance.scaleEnabled = newProps.scaleEnabled !== false;
instance.skewEnabled = newProps.skewEnabled === true;
instance.translateEnabled = newProps.translateEnabled !== false;
instance.transientGroupTilt = newProps.transientGroupTilt;
if (oldProps.handleConstructor !== newProps.handleConstructor) {
throw new Error(
"Transformer does not support changing the TransformerHandleConstructor!"
);
}
if (oldProps.rotationSnaps !== newProps.rotationSnaps) {
instance.rotationSnaps = newProps.rotationSnaps;
}
if (oldProps.rotationSnapTolerance !== newProps.rotationSnapTolerance) {
instance.rotationSnapTolerance = newProps.rotationSnapTolerance;
}
if (oldProps.skewSnaps !== newProps.skewSnaps) {
instance.skewSnaps = newProps.skewSnaps;
}
if (oldProps.skewSnapTolerance !== newProps.skewSnapTolerance) {
instance.skewSnapTolerance = newProps.skewSnapTolerance;
}
// Handle modern Canva-style features
const oldColorTheme = oldProps.colorTheme || EMPTY;
const newColorTheme = newProps.colorTheme || EMPTY;
if (
oldColorTheme.primary !== newColorTheme.primary ||
oldColorTheme.secondary !== newColorTheme.secondary ||
oldColorTheme.background !== newColorTheme.background ||
oldColorTheme.glow !== newColorTheme.glow ||
oldColorTheme.glowIntensity !== newColorTheme.glowIntensity
) {
instance.colorTheme = newColorTheme;
}
// Apply explicit styles AFTER colorTheme so user props win over theme-derived values
const oldHandleStyle = oldProps.handleStyle || EMPTY;
const newHandleStyle = newProps.handleStyle || EMPTY;
if (
oldHandleStyle.color !== newHandleStyle.color ||
oldHandleStyle.outlineColor !== newHandleStyle.outlineColor ||
oldHandleStyle.outlineThickness !== newHandleStyle.outlineThickness ||
oldHandleStyle.radius !== newHandleStyle.radius ||
oldHandleStyle.shape !== newHandleStyle.shape ||
oldHandleStyle.rotatorIconColor !== newHandleStyle.rotatorIconColor
) {
instance.handleStyle = newHandleStyle;
}
const oldWireframeStyle = oldProps.wireframeStyle || EMPTY;
const newWireframeStyle = newProps.wireframeStyle || EMPTY;
if (
oldWireframeStyle.color !== newWireframeStyle.color ||
oldWireframeStyle.thickness !== newWireframeStyle.thickness
) {
instance.wireframeStyle = newWireframeStyle;
}
const oldRotatorAnchor = oldProps.rotatorAnchor || EMPTY;
const newRotatorAnchor = newProps.rotatorAnchor || EMPTY;
if (
oldRotatorAnchor.enabled !== newRotatorAnchor.enabled ||
oldRotatorAnchor.startPosition !== newRotatorAnchor.startPosition ||
oldRotatorAnchor.segmentLength !== newRotatorAnchor.segmentLength ||
oldRotatorAnchor.thickness !== newRotatorAnchor.thickness ||
oldRotatorAnchor.color !== newRotatorAnchor.color ||
oldRotatorAnchor.style !== newRotatorAnchor.style ||
JSON.stringify(oldRotatorAnchor.dashPattern) !==
JSON.stringify(newRotatorAnchor.dashPattern) ||
JSON.stringify(oldRotatorAnchor.dotPattern) !==
JSON.stringify(newRotatorAnchor.dotPattern)
) {
instance.rotatorAnchor = newRotatorAnchor;
}
// Handle nested selection properties
if (oldProps.nestedSelectionEnabled !== newProps.nestedSelectionEnabled) {
instance.nestedSelectionEnabled =
newProps.nestedSelectionEnabled !== undefined
? newProps.nestedSelectionEnabled
: true; // Default to enabled
}
if (
oldProps.focusedElementBorderColor !== newProps.focusedElementBorderColor
) {
instance.focusedElementBorderColor =
newProps.focusedElementBorderColor !== undefined
? newProps.focusedElementBorderColor
: 0x8b5cf6; // Default purple
}
if (
oldProps.focusedElementBorderThickness !==
newProps.focusedElementBorderThickness
) {
instance.focusedElementBorderThickness =
newProps.focusedElementBorderThickness;
}
if (oldProps.showNonFocusedBorders !== newProps.showNonFocusedBorders) {
instance.showNonFocusedBorders =
newProps.showNonFocusedBorders !== undefined
? newProps.showNonFocusedBorders
: false; // Default to hiding non-focused
}
if (oldProps.individualBorderColor !== newProps.individualBorderColor) {
instance.individualBorderColor =
newProps.individualBorderColor !== undefined
? newProps.individualBorderColor
: 0x00d4ff; // Default cyan
}
if (
oldProps.individualBorderThickness !== newProps.individualBorderThickness
) {
instance.individualBorderThickness = newProps.individualBorderThickness;
}
if (oldProps.individualBorderAlpha !== newProps.individualBorderAlpha) {
instance.individualBorderAlpha =
newProps.individualBorderAlpha !== undefined
? newProps.individualBorderAlpha
: 1.0; // Default full opacity
}
// Handle programmatic focus control
if (oldProps.focusedElementIndex !== newProps.focusedElementIndex) {
if (newProps.focusedElementIndex !== undefined) {
instance.focusedElementIndex = newProps.focusedElementIndex;
}
}
// Set up focus change callback
if (oldProps.onFocusChange !== newProps.onFocusChange) {
// Remove old listener if it exists
if (oldProps.onFocusChange) {
instance.off("elementfocused", oldProps.onFocusChange);
instance.off("elementfocuscleared", () =>
_optionalChain([oldProps, 'access', _ => _.onFocusChange, 'optionalCall', _2 => _2(-1, null)])
);
}
// Add new listener
if (newProps.onFocusChange) {
instance.on(
"elementfocused",
(element, index) => {
_optionalChain([newProps, 'access', _3 => _3.onFocusChange, 'optionalCall', _4 => _4(index, element)]);
}
);
instance.on("elementfocuscleared", () => {
_optionalChain([newProps, 'access', _5 => _5.onFocusChange, 'optionalCall', _6 => _6(-1, null)]);
});
}
}
},
});
;
;
exports.Transformer = Transformer;
Object.defineProperty(exports, '__esModule', { value: true });
})));
if (typeof pixi_essentials_react_bindings_extended !== 'undefined') { Object.assign(this.ReactPixi, pixi_essentials_react_bindings_extended); }
//# sourceMappingURL=react-bindings.js.map