@dndbuilder.com/react
Version:
Drag and drop builder for React
80 lines (79 loc) • 3.35 kB
JavaScript
"use client";
import { jsx as e, jsxs as B } from "react/jsx-runtime";
import R from "../add-new-section.js";
import E from "../editor-render-content.js";
import { FrameContextManager as N } from "../frame-context-manager.js";
import { RenderFrame as W } from "../render-frame.js";
import { ErrorFallback as $ } from "../../shared/error-fallback.js";
import { BuilderConfiguration as F } from "../../../config/builder.config.js";
import { useAppDispatch as O } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as o } from "../../../hooks/use-app-selector.js";
import { unselectBlock as j } from "../../../store/builder-slice.js";
import { getContent as L, getActiveThemeSettings as M, getCurrentBreakpoint as P, getCurrentLocale as D } from "../../../../../../store/selectors.js";
import { Breakpoint as H } from "../../../types/responsive.js";
import { classNames as p } from "../../../../../../utils.js";
import { useRef as I, useState as T, useMemo as z, useEffect as K } from "react";
import { ErrorBoundary as U } from "../../../../../../node_modules/.pnpm/react-error-boundary@5.0.0_react@19.0.0/node_modules/react-error-boundary/dist/react-error-boundary.esm.js";
import { EditorAssetManager as q } from "../editor-asset-manager.js";
import "../../../store/theme-slice.js";
import "../../../../../../_virtual/cjs.js";
import { useAction as G } from "../../../hooks/use-action.js";
const fe = () => {
const i = o(L), l = o(M), { isLeftPanelOpen: f, activeRightPanel: d } = G(), s = o(P), a = o(D), { previewWidth: t } = F.getBreakpoint(s), n = I(null), [u, m] = T({}), h = O(), g = () => {
h(j());
}, w = z(() => ({ locale: a }), [a]);
return K(() => {
if (!n.current) return;
const x = n.current, c = new ResizeObserver((v) => {
const S = v[0].target, { width: b, height: y } = window.getComputedStyle(S), C = parseInt(b, 10), k = parseInt(y, 10), r = C / t, A = k / r;
if (r > 1) {
m({
width: "100%",
minWidth: `${t}px`,
height: "100%"
});
return;
}
m({
width: `${t}px`,
height: `${A}px`,
transform: r > 1 ? "scale(1)" : `scale(${r})`,
transformOrigin: "top left"
});
});
return c.observe(x), () => {
c.disconnect();
};
}, [t]), /* @__PURE__ */ e(
"div",
{
className: p(
"relative flex grow justify-center bg-gray-100 p-4 transition-all duration-300",
f ? "ms-[290px]" : "ms-0",
d ? "me-[290px]" : "me-0"
),
children: /* @__PURE__ */ e(U, { fallbackRender: $, children: /* @__PURE__ */ e(
"div",
{
className: p(
"transition-width relative flex h-full w-full border border-gray-200 shadow-sm duration-300"
),
onClick: g,
ref: n,
style: {
width: s === H.DESKTOP ? "100%" : `${t}px`
},
children: /* @__PURE__ */ e(W, { className: "absolute mx-auto", style: u, children: /* @__PURE__ */ B(N, { children: [
/* @__PURE__ */ e(E, { content: i, meta: w }),
/* @__PURE__ */ e(R, { className: "p-10" }),
/* @__PURE__ */ e(q, { content: i, themeSettings: l })
] }) })
}
) })
}
);
};
export {
fe as CanvasArea
};
//# sourceMappingURL=canvas-area.js.map