@tldraw/editor/dist-esm/lib/license/Watermark.mjs

tldraw infinite canvas SDK (editor).

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useValue } from "@tldraw/state-react";
import { memo, useRef } from "react";
import { useCanvasEvents } from "../hooks/useCanvasEvents.mjs";
import { useEditor } from "../hooks/useEditor.mjs";
import { usePassThroughWheelEvents } from "../hooks/usePassThroughWheelEvents.mjs";
import { preventDefault, stopEventPropagation } from "../utils/dom.mjs";
import { runtime } from "../utils/runtime.mjs";
import { watermarkDesktopSvg, watermarkMobileSvg } from "../watermarks.mjs";
import { LicenseManager } from "./LicenseManager.mjs";
import { useLicenseContext } from "./LicenseProvider.mjs";
import { useLicenseManagerState } from "./useLicenseManagerState.mjs";
const WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`;
const WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`;
const Watermark = memo(function Watermark2() {
  const licenseManager = useLicenseContext();
  const editor = useEditor();
  const isMobile = useValue("is mobile", () => editor.getViewportScreenBounds().width < 700, [
    editor
  ]);
  const licenseManagerState = useLicenseManagerState(licenseManager);
  if (!["licensed-with-watermark", "unlicensed"].includes(licenseManagerState)) return null;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(LicenseStyles, {}),
    /* @__PURE__ */ jsx(WatermarkInner, { src: isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC })
  ] });
});
const WatermarkInner = memo(function WatermarkInner2({ src }) {
  const editor = useEditor();
  const isDebugMode = useValue("debug mode", () => editor.getInstanceState().isDebugMode, [editor]);
  const isMobile = useValue("is mobile", () => editor.getViewportScreenBounds().width < 700, [
    editor
  ]);
  const events = useCanvasEvents();
  const ref = useRef(null);
  usePassThroughWheelEvents(ref);
  const maskCss = `url('${src}') center 100% / 100% no-repeat`;
  const url = "https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark";
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: LicenseManager.className,
      "data-debug": isDebugMode,
      "data-mobile": isMobile,
      draggable: false,
      ...events,
      children: /* @__PURE__ */ jsx(
        "button",
        {
          draggable: false,
          role: "button",
          onPointerDown: (e) => {
            stopEventPropagation(e);
            preventDefault(e);
          },
          title: "made with tldraw",
          onClick: () => runtime.openWindow(url, "_blank"),
          style: { mask: maskCss, WebkitMask: maskCss }
        }
      )
    }
  );
});
const LicenseStyles = memo(function LicenseStyles2() {
  const editor = useEditor();
  const className = LicenseManager.className;
  const CSS = `/* ------------------- SEE LICENSE -------------------
The tldraw watermark is part of tldraw's license. It is shown for unlicensed
or "licensed-with-watermark" users. By using this library, you agree to
preserve the watermark's behavior, keeping it visible, unobscured, and
available to user-interaction.

To remove the watermark, please purchase a license at tldraw.dev.
*/

	.${className} {
		position: absolute;
		bottom: var(--space-2);
		right: var(--space-2);
		width: 96px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: var(--layer-watermark) !important;
		background-color: color-mix(in srgb, var(--color-background) 62%, transparent);
		opacity: 1;
		border-radius: 5px;
		pointer-events: all;
		padding: 2px;
		box-sizing: content-box;
	}

	.${className} > button {
		position: absolute;
		width: 96px;
		height: 32px;
		pointer-events: all;
		cursor: inherit;
		color: var(--color-text);
		opacity: .38;
		border: 0;
		padding: 0;
		background-color: currentColor;
	}

	.${className}[data-debug='true'] {
		bottom: 46px;
	}

	.${className}[data-mobile='true'] {
		border-radius: 4px 0px 0px 4px;
		right: -2px;
		width: 8px;
		height: 48px;
	}

	.${className}[data-mobile='true'] > button {
		width: 8px;
		height: 32px;
	}

	@media (hover: hover) {
		.${className} > button {
			pointer-events: none;
		}

		.${className}:hover {
			background-color: var(--color-background);
			transition: background-color 0.2s ease-in-out;
			transition-delay: 0.32s;
		}

		.${className}:hover > button {
			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
			animation-delay: 0.32s;
		}

		.${className} > button:focus-visible {
			opacity: 1;
		}
	}


	@keyframes ${className}_delayed_link {
		0% {
			cursor: inherit;
			opacity: .38;
			pointer-events: none;
		}
		100% {
			cursor: pointer;
			opacity: 1;
			pointer-events: all;
		}
	}`;
  return /* @__PURE__ */ jsx("style", { nonce: editor.options.nonce, children: CSS });
});
export {
  Watermark
};
//# sourceMappingURL=Watermark.mjs.map