@pixi/react/lib/components/Application.js

Write PixiJS applications using React declarative style.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var itsFine = require('its-fine');
var pixi_js = require('pixi.js');
var react = require('react');
var createRoot = require('../core/createRoot.js');
var roots = require('../core/roots.js');
var processUnmountQueue = require('../helpers/processUnmountQueue.js');
var queueForUnmount = require('../helpers/queueForUnmount.js');
var unqueueForUnmount = require('../helpers/unqueueForUnmount.js');
var useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.js');

"use strict";
const originalDefaultTextStyle = { ...pixi_js.TextStyle.defaultTextStyle };
const ApplicationImplementation = react.forwardRef(function Application2(props, forwardedRef) {
  const {
    children,
    className,
    defaultTextStyle,
    extensions,
    onInit,
    resizeTo,
    ...applicationProps
  } = props;
  const Bridge = itsFine.useContextBridge();
  const applicationRef = react.useRef(null);
  const canvasRef = react.useRef(null);
  const extensionsRef = react.useRef(/* @__PURE__ */ new Set());
  react.useImperativeHandle(forwardedRef, () => ({
    getApplication() {
      return applicationRef.current;
    },
    getCanvas() {
      return canvasRef.current;
    }
  }));
  const updateResizeTo = react.useCallback(() => {
    const application = applicationRef.current;
    if (application) {
      if (resizeTo) {
        if ("current" in resizeTo) {
          if (resizeTo.current instanceof HTMLElement) {
            application.resizeTo = resizeTo.current;
          }
        } else {
          application.resizeTo = resizeTo;
        }
      } else {
        application.resizeTo = void 0;
      }
    }
  }, [resizeTo]);
  const handleInit = react.useCallback((application) => {
    processUnmountQueue.processUnmountQueue();
    applicationRef.current = application;
    updateResizeTo();
    onInit?.(application);
  }, [onInit]);
  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
    if (extensions) {
      const extensionsToHandle = [...extensions];
      const extensionsState = extensionsRef.current;
      for (const extension of extensionsState.values()) {
        const extensionIndex = extensionsToHandle.indexOf(extension);
        if (extensionIndex === -1) {
          pixi_js.extensions.remove(extension);
          extensionsState.delete(extension);
        }
        extensionsToHandle.splice(extensionIndex, 1);
      }
      for (const extension in extensionsToHandle) {
        pixi_js.extensions.add(extension);
        extensionsState.add(extension);
      }
    }
  }, [extensions]);
  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
    const canvasElement = canvasRef.current;
    if (canvasElement) {
      let root = roots.roots.get(canvasElement);
      if (!root) {
        root = createRoot.createRoot(canvasElement, { onInit: handleInit });
      }
      root.render(/* @__PURE__ */ jsxRuntime.jsx(Bridge, { children }), applicationProps);
    }
  }, [
    applicationProps,
    children,
    handleInit,
    resizeTo
  ]);
  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
    updateResizeTo();
  }, [resizeTo]);
  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
    if (defaultTextStyle) {
      Object.assign(pixi_js.TextStyle.defaultTextStyle, defaultTextStyle);
    } else {
      Object.assign(pixi_js.TextStyle.defaultTextStyle, originalDefaultTextStyle);
    }
  }, [defaultTextStyle]);
  react.useEffect(() => {
    const canvasElement = canvasRef.current;
    if (canvasElement) {
      unqueueForUnmount.unqueueForUnmount(canvasElement);
      return () => {
        queueForUnmount.queueForUnmount(canvasElement);
      };
    }
  }, []);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "canvas",
    {
      ref: canvasRef,
      className
    }
  );
});
const Application = react.forwardRef(function ApplicationWrapper(props, ref) {
  return /* @__PURE__ */ jsxRuntime.jsx(itsFine.FiberProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
    ApplicationImplementation,
    {
      ref,
      ...props
    }
  ) });
});

exports.Application = Application;
//# sourceMappingURL=Application.js.map