tldraw
Version:
A tiny little drawing editor.
155 lines (154 loc) • 7.35 kB
JavaScript
;
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 StylePanelButtonPicker_exports = {};
__export(StylePanelButtonPicker_exports, {
StylePanelButtonPicker: () => StylePanelButtonPicker,
StylePanelButtonPickerInline: () => StylePanelButtonPickerInline
});
module.exports = __toCommonJS(StylePanelButtonPicker_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_react = require("react");
var import_useDefaultColorTheme = require("../../../shapes/shared/useDefaultColorTheme");
var import_constants = require("../../constants");
var import_breakpoints = require("../../context/breakpoints");
var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
var import_layout = require("../primitives/layout");
var import_StylePanelContext = require("./StylePanelContext");
var import_StylePanelSubheading = require("./StylePanelSubheading");
function StylePanelButtonPickerInner(props) {
const { enhancedA11yMode } = (0, import_StylePanelContext.useStylePanelContext)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: props.title }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: props.title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelButtonPickerInline, { ...props }) })
] });
}
function StylePanelButtonPickerInlineInner(props) {
const ctx = (0, import_StylePanelContext.useStylePanelContext)();
const {
uiType,
items,
title,
style,
value,
onValueChange = ctx.onValueChange,
onHistoryMark = ctx.onHistoryMark
} = props;
const theme = (0, import_useDefaultColorTheme.useDefaultColorTheme)();
const editor = (0, import_editor.useEditor)();
const msg = (0, import_useTranslation.useTranslation)();
const breakpoint = (0, import_breakpoints.useBreakpoint)();
const rPointing = (0, import_react.useRef)(false);
const rPointingOriginalActiveElement = (0, import_react.useRef)(null);
const {
handleButtonClick,
handleButtonPointerDown,
handleButtonPointerEnter,
handleButtonPointerUp
} = (0, import_react.useMemo)(() => {
const handlePointerUp = () => {
rPointing.current = false;
window.removeEventListener("pointerup", handlePointerUp);
const origActiveEl = rPointingOriginalActiveElement.current;
if (origActiveEl && (["TEXTAREA", "INPUT"].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)) {
origActiveEl.focus();
} else if (breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET_SM) {
editor.getContainer().focus();
}
rPointingOriginalActiveElement.current = null;
};
const handleButtonClick2 = (e) => {
const { id } = e.currentTarget.dataset;
if (value.type === "shared" && value.value === id) return;
onHistoryMark?.("point picker item");
onValueChange(style, id);
};
const handleButtonPointerDown2 = (e) => {
const { id } = e.currentTarget.dataset;
onHistoryMark?.("point picker item");
onValueChange(style, id);
rPointing.current = true;
rPointingOriginalActiveElement.current = document.activeElement;
window.addEventListener("pointerup", handlePointerUp);
};
const handleButtonPointerEnter2 = (e) => {
if (!rPointing.current) return;
const { id } = e.currentTarget.dataset;
onValueChange(style, id);
};
const handleButtonPointerUp2 = (e) => {
const { id } = e.currentTarget.dataset;
if (value.type === "shared" && value.value === id) return;
onValueChange(style, id);
};
return {
handleButtonClick: handleButtonClick2,
handleButtonPointerDown: handleButtonPointerDown2,
handleButtonPointerEnter: handleButtonPointerEnter2,
handleButtonPointerUp: handleButtonPointerUp2
};
}, [editor, breakpoint, value, onHistoryMark, onValueChange, style]);
const Layout = items.length > 4 ? import_layout.TldrawUiGrid : import_layout.TldrawUiRow;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_TldrawUiToolbar.TldrawUiToolbarToggleGroup,
{
"data-testid": `style.${uiType}`,
type: "single",
value: value.type === "shared" ? value.value : null,
asChild: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { children: items.map((item) => {
const isActive = value.type === "shared" && value.value === item.value;
const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_TldrawUiToolbar.TldrawUiToolbarToggleItem,
{
type: "icon",
"data-id": item.value,
"data-testid": `style.${uiType}.${item.value}`,
"aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
tooltip: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
"(",
msg("style-panel.selected"),
")"
] }) : null
] }),
value: item.value,
"data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
"data-isactive": isActive,
title: label,
style: style === import_editor.DefaultColorStyle ? { color: (0, import_editor.getColorValue)(theme, item.value, "solid") } : void 0,
onPointerEnter: handleButtonPointerEnter,
onPointerDown: handleButtonPointerDown,
onPointerUp: handleButtonPointerUp,
onClick: handleButtonClick,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon })
},
item.value
);
}) })
}
);
}
const StylePanelButtonPicker = (0, import_react.memo)(StylePanelButtonPickerInner);
const StylePanelButtonPickerInline = (0, import_react.memo)(StylePanelButtonPickerInlineInner);
//# sourceMappingURL=StylePanelButtonPicker.js.map