tldraw/dist-cjs/lib/TldrawImage.js

A tiny little drawing editor.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var TldrawImage_exports = {};
__export(TldrawImage_exports, {
  TldrawImage: () => TldrawImage
});
module.exports = __toCommonJS(TldrawImage_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_react = require("react");
var import_defaultBindingUtils = require("./defaultBindingUtils");
var import_defaultShapeUtils = require("./defaultShapeUtils");
var import_assetUrls2 = require("./utils/static-assets/assetUrls");
var import_richText = require("./utils/text/richText");
const defaultOptions = {
  text: {
    tipTapConfig: {
      extensions: import_richText.tipTapDefaultExtensions
    },
    addFontsFromNode: import_richText.defaultAddFontsFromNode
  }
};
const TldrawImage = (0, import_react.memo)(function TldrawImage2(props) {
  const [url, setUrl] = (0, import_react.useState)(null);
  const [container, setContainer] = (0, import_react.useState)(null);
  const _shapeUtils = (0, import_editor.useShallowArrayIdentity)(props.shapeUtils ?? []);
  const shapeUtilsWithDefaults = (0, import_react.useMemo)(
    () => (0, import_editor.mergeArraysAndReplaceDefaults)("type", _shapeUtils, import_defaultShapeUtils.defaultShapeUtils),
    [_shapeUtils]
  );
  const _bindingUtils = (0, import_editor.useShallowArrayIdentity)(props.bindingUtils ?? []);
  const bindingUtilsWithDefaults = (0, import_react.useMemo)(
    () => (0, import_editor.mergeArraysAndReplaceDefaults)("type", _bindingUtils, import_defaultBindingUtils.defaultBindingUtils),
    [_bindingUtils]
  );
  const store = (0, import_editor.useTLStore)({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults });
  const {
    pageId,
    bounds,
    scale,
    pixelRatio,
    background,
    padding,
    darkMode,
    preserveAspectRatio,
    format = "svg",
    licenseKey,
    assetUrls,
    options: _options,
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    textOptions: _textOptions
  } = props;
  const options = (0, import_react.useMemo)(
    () => ({
      ...defaultOptions,
      ..._options,
      text: {
        ...defaultOptions.text,
        ..._options?.text ?? _textOptions
      }
    }),
    [_options, _textOptions]
  );
  const assetUrlsWithOverrides = (0, import_assetUrls2.useDefaultEditorAssetsWithOverrides)(assetUrls);
  (0, import_react.useLayoutEffect)(() => {
    if (!container) return;
    if (!store) return;
    let isCancelled = false;
    const tempElm = document.createElement("div");
    container.appendChild(tempElm);
    container.classList.add("tl-container", "tl-theme__light");
    const editor = new import_editor.Editor({
      store,
      shapeUtils: shapeUtilsWithDefaults,
      bindingUtils: bindingUtilsWithDefaults,
      tools: [],
      getContainer: () => tempElm,
      licenseKey,
      fontAssetUrls: assetUrlsWithOverrides.fonts,
      options
    });
    if (pageId) editor.setCurrentPage(pageId);
    const shapeIds = editor.getCurrentPageShapeIds();
    async function setSvg() {
      await editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender);
      const imageResult = await editor.toImage([...shapeIds], {
        bounds,
        scale,
        background,
        padding,
        darkMode,
        preserveAspectRatio,
        format
      });
      if (!imageResult || isCancelled) return;
      const url2 = URL.createObjectURL(imageResult.blob);
      setUrl(url2);
      editor.dispose();
    }
    setSvg();
    return () => {
      isCancelled = true;
    };
  }, [
    format,
    container,
    store,
    shapeUtilsWithDefaults,
    bindingUtilsWithDefaults,
    pageId,
    bounds,
    scale,
    background,
    padding,
    darkMode,
    preserveAspectRatio,
    licenseKey,
    pixelRatio,
    assetUrlsWithOverrides,
    options
  ]);
  (0, import_react.useEffect)(() => {
    return () => {
      if (url) URL.revokeObjectURL(url);
    };
  }, [url]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: setContainer, style: { position: "relative", width: "100%", height: "100%" }, children: url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "img",
    {
      src: url,
      referrerPolicy: "strict-origin-when-cross-origin",
      style: { width: "100%", height: "100%" }
    }
  ) });
});
//# sourceMappingURL=TldrawImage.js.map