tldraw 4.1.0-next.58b63dd1ac80 → 4.1.0-next.74327a60f18a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +2 -11
- package/dist-cjs/index.js +1 -4
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +55 -63
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +47 -54
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js +55 -62
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js +5 -12
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +2 -11
- package/dist-esm/index.mjs +4 -10
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +57 -68
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +47 -54
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +3 -3
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs +56 -63
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs +5 -12
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +0 -3
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +49 -60
- package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx +53 -70
- package/src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx +90 -105
- package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +51 -72
- package/src/lib/ui/version.ts +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { tlmenus, useEditor } from "@tldraw/editor";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
|
|
@@ -11,16 +11,10 @@ import {
|
|
|
11
11
|
import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
|
|
12
12
|
import { TldrawUiMenuContextProvider } from "../primitives/menus/TldrawUiMenuContext.mjs";
|
|
13
13
|
import { useStylePanelContext } from "./StylePanelContext.mjs";
|
|
14
|
-
function
|
|
15
|
-
const msg = useTranslation();
|
|
16
|
-
return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__double-select-picker", children: [
|
|
17
|
-
/* @__PURE__ */ jsx("div", { title: msg(props.label), className: "tlui-style-panel__double-select-picker-label", children: msg(props.label) }),
|
|
18
|
-
/* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg(props.label), children: /* @__PURE__ */ jsx(StylePanelDoubleDropdownPickerInline, { ...props }) })
|
|
19
|
-
] });
|
|
20
|
-
}
|
|
21
|
-
function StylePanelDoubleDropdownPickerInlineInner(props) {
|
|
14
|
+
function DoubleDropdownPickerInner(props) {
|
|
22
15
|
const ctx = useStylePanelContext();
|
|
23
16
|
const {
|
|
17
|
+
label,
|
|
24
18
|
uiTypeA,
|
|
25
19
|
uiTypeB,
|
|
26
20
|
labelA,
|
|
@@ -48,71 +42,70 @@ function StylePanelDoubleDropdownPickerInlineInner(props) {
|
|
|
48
42
|
if (valueA === void 0 && valueB === void 0) return null;
|
|
49
43
|
const idA = `style panel ${uiTypeA} A`;
|
|
50
44
|
const idB = `style panel ${uiTypeB} B`;
|
|
51
|
-
return /* @__PURE__ */ jsxs(
|
|
52
|
-
/* @__PURE__ */
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
{
|
|
56
|
-
type: "icon",
|
|
57
|
-
"data-testid": `style.${uiTypeA}`,
|
|
58
|
-
title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
|
|
59
|
-
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: iconA, small: true, invertIcon: true })
|
|
60
|
-
}
|
|
61
|
-
) }),
|
|
62
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 80, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelA), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsA.map((item) => {
|
|
63
|
-
return /* @__PURE__ */ jsx(
|
|
45
|
+
return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__double-select-picker", children: [
|
|
46
|
+
/* @__PURE__ */ jsx("div", { title: msg(label), className: "tlui-style-panel__double-select-picker-label", children: msg(label) }),
|
|
47
|
+
/* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg(label), children: [
|
|
48
|
+
/* @__PURE__ */ jsxs(TldrawUiPopover, { id: idA, open: isOpenA, onOpenChange: setIsOpenA, children: [
|
|
49
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
|
|
64
50
|
TldrawUiToolbarButton,
|
|
65
51
|
{
|
|
66
|
-
"data-testid": `style.${uiTypeA}.${item.value}`,
|
|
67
52
|
type: "icon",
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
53
|
+
"data-testid": `style.${uiTypeA}`,
|
|
54
|
+
title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
|
|
55
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: iconA, small: true, invertIcon: true })
|
|
56
|
+
}
|
|
57
|
+
) }),
|
|
58
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 80, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelA), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsA.map((item) => {
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
TldrawUiToolbarButton,
|
|
61
|
+
{
|
|
62
|
+
"data-testid": `style.${uiTypeA}.${item.value}`,
|
|
63
|
+
type: "icon",
|
|
64
|
+
onClick: () => {
|
|
65
|
+
onValueChange(styleA, item.value);
|
|
66
|
+
tlmenus.deleteOpenMenu(idA, editor.contextId);
|
|
67
|
+
setIsOpenA(false);
|
|
68
|
+
},
|
|
69
|
+
title: `${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`,
|
|
70
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon, invertIcon: true })
|
|
72
71
|
},
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
] }),
|
|
80
|
-
/* @__PURE__ */ jsxs(TldrawUiPopover, { id: idB, open: isOpenB, onOpenChange: setIsOpenB, children: [
|
|
81
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
|
|
82
|
-
TldrawUiToolbarButton,
|
|
83
|
-
{
|
|
84
|
-
type: "icon",
|
|
85
|
-
"data-testid": `style.${uiTypeB}`,
|
|
86
|
-
title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
|
|
87
|
-
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: iconB, small: true })
|
|
88
|
-
}
|
|
89
|
-
) }),
|
|
90
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 116, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelB), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsB.map((item) => {
|
|
91
|
-
return /* @__PURE__ */ jsx(
|
|
72
|
+
item.value
|
|
73
|
+
);
|
|
74
|
+
}) }) }) })
|
|
75
|
+
] }),
|
|
76
|
+
/* @__PURE__ */ jsxs(TldrawUiPopover, { id: idB, open: isOpenB, onOpenChange: setIsOpenB, children: [
|
|
77
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
|
|
92
78
|
TldrawUiToolbarButton,
|
|
93
79
|
{
|
|
94
80
|
type: "icon",
|
|
95
|
-
|
|
96
|
-
"
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
81
|
+
"data-testid": `style.${uiTypeB}`,
|
|
82
|
+
title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
|
|
83
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: iconB, small: true })
|
|
84
|
+
}
|
|
85
|
+
) }),
|
|
86
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 116, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelB), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsB.map((item) => {
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
TldrawUiToolbarButton,
|
|
89
|
+
{
|
|
90
|
+
type: "icon",
|
|
91
|
+
title: `${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}`)}`,
|
|
92
|
+
"data-testid": `style.${uiTypeB}.${item.value}`,
|
|
93
|
+
onClick: () => {
|
|
94
|
+
onValueChange(styleB, item.value);
|
|
95
|
+
tlmenus.deleteOpenMenu(idB, editor.contextId);
|
|
96
|
+
setIsOpenB(false);
|
|
97
|
+
},
|
|
98
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon })
|
|
101
99
|
},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}) }) }) })
|
|
100
|
+
item.value
|
|
101
|
+
);
|
|
102
|
+
}) }) }) })
|
|
103
|
+
] })
|
|
107
104
|
] })
|
|
108
105
|
] });
|
|
109
106
|
}
|
|
110
|
-
const StylePanelDoubleDropdownPicker = React.memo(
|
|
111
|
-
const StylePanelDoubleDropdownPickerInline = React.memo(
|
|
112
|
-
StylePanelDoubleDropdownPickerInlineInner
|
|
113
|
-
);
|
|
107
|
+
const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner);
|
|
114
108
|
export {
|
|
115
|
-
StylePanelDoubleDropdownPicker
|
|
116
|
-
StylePanelDoubleDropdownPickerInline
|
|
109
|
+
StylePanelDoubleDropdownPicker
|
|
117
110
|
};
|
|
118
111
|
//# sourceMappingURL=StylePanelDoubleDropdownPicker.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction DoubleDropdownPickerInner<T extends string>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tlabel,\n\t\tuiTypeA,\n\t\tuiTypeB,\n\t\tlabelA,\n\t\tlabelB,\n\t\titemsA,\n\t\titemsB,\n\t\tstyleA,\n\t\tstyleB,\n\t\tvalueA,\n\t\tvalueB,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst [isOpenA, setIsOpenA] = React.useState(false)\n\tconst [isOpenB, setIsOpenB] = React.useState(false)\n\n\tconst iconA = React.useMemo(\n\t\t() =>\n\t\t\titemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsA, valueA]\n\t)\n\tconst iconB = React.useMemo(\n\t\t() =>\n\t\t\titemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsB, valueB]\n\t)\n\n\tif (valueA === undefined && valueB === undefined) return null\n\n\tconst idA = `style panel ${uiTypeA} A`\n\tconst idB = `style panel ${uiTypeB} B`\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(label)}\n\t\t\t</div>\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg(label)}>\n\t\t\t\t<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconA} small invertIcon />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={80} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelA)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleA, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idA, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenA(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} invertIcon />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t\t<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconB} small />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={116} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelB)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleB, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idB, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenB(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// need to memo like this to get generics\n/** @public @react */\nexport const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) => React.JSX.Element\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,12 +12,7 @@ import {
|
|
|
12
12
|
import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
|
|
13
13
|
import { TldrawUiMenuContextProvider } from "../primitives/menus/TldrawUiMenuContext.mjs";
|
|
14
14
|
import { useStylePanelContext } from "./StylePanelContext.mjs";
|
|
15
|
-
function
|
|
16
|
-
const msg = useTranslation();
|
|
17
|
-
const toolbarLabel = props.label ? msg(props.label) : msg(`style-panel.${props.stylePanelType}`);
|
|
18
|
-
return /* @__PURE__ */ jsx(TldrawUiToolbar, { label: toolbarLabel, children: /* @__PURE__ */ jsx(StylePanelDropdownPickerInline, { ...props }) });
|
|
19
|
-
}
|
|
20
|
-
function StylePanelDropdownPickerInlineInner(props) {
|
|
15
|
+
function DropdownPickerInner(props) {
|
|
21
16
|
const ctx = useStylePanelContext();
|
|
22
17
|
const {
|
|
23
18
|
id,
|
|
@@ -41,7 +36,7 @@ function StylePanelDropdownPickerInlineInner(props) {
|
|
|
41
36
|
const titleStr = value.type === "mixed" ? msg("style-panel.mixed") : stylePanelName + " \u2014 " + msg(`${uiType}-style.${value.value}`);
|
|
42
37
|
const labelStr = label ? msg(label) : "";
|
|
43
38
|
const popoverId = `style panel ${id}`;
|
|
44
|
-
return /* @__PURE__ */ jsxs(
|
|
39
|
+
return /* @__PURE__ */ jsx(TldrawUiToolbar, { label: stylePanelName, children: /* @__PURE__ */ jsxs(
|
|
45
40
|
TldrawUiPopover,
|
|
46
41
|
{
|
|
47
42
|
id: popoverId,
|
|
@@ -83,12 +78,10 @@ function StylePanelDropdownPickerInlineInner(props) {
|
|
|
83
78
|
}) }) }) })
|
|
84
79
|
]
|
|
85
80
|
}
|
|
86
|
-
);
|
|
81
|
+
) });
|
|
87
82
|
}
|
|
88
|
-
const StylePanelDropdownPicker = React.memo(
|
|
89
|
-
const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner);
|
|
83
|
+
const StylePanelDropdownPicker = React.memo(DropdownPickerInner);
|
|
90
84
|
export {
|
|
91
|
-
StylePanelDropdownPicker
|
|
92
|
-
StylePanelDropdownPickerInline
|
|
85
|
+
StylePanelDropdownPicker
|
|
93
86
|
};
|
|
94
87
|
//# sourceMappingURL=StylePanelDropdownPicker.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiToolbar label={stylePanelName}>\n\t\t\t<TldrawUiPopover\n\t\t\t\tid={popoverId}\n\t\t\t\topen={isOpen}\n\t\t\t\tonOpenChange={setIsOpen}\n\t\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t\t>\n\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t</TldrawUiPopover>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
|
|
5
|
+
"mappings": "AAsEK,SAMc,KANd;AAtEL,SAAiC,SAAS,iBAAiB;AAC3D,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AAerC,SAAS,oBAAsC,OAAyC;AACvF,QAAM,MAAM,qBAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,EACrB,IAAI;AACJ,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC,oBAAC,mBAAgB,OAAO,gBACvB;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,oBAAC,uBAAqB,oBAAS;AAAA,cAC5C,oBAAC,sBAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UACzC,8BAAC,mBAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,8BAAC,+BAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,wBAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,mBAAmB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const version = "4.1.0-next.
|
|
1
|
+
const version = "4.1.0-next.74327a60f18a";
|
|
2
2
|
const publishDates = {
|
|
3
3
|
major: "2025-09-18T14:39:22.803Z",
|
|
4
|
-
minor: "2025-10-
|
|
5
|
-
patch: "2025-10-
|
|
4
|
+
minor: "2025-10-15T10:52:21.047Z",
|
|
5
|
+
patch: "2025-10-15T10:52:21.047Z"
|
|
6
6
|
};
|
|
7
7
|
export {
|
|
8
8
|
publishDates,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/ui/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-next.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-next.74327a60f18a'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-15T10:52:21.047Z',\n\tpatch: '2025-10-15T10:52:21.047Z',\n}\n"],
|
|
5
5
|
"mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tldraw",
|
|
3
3
|
"description": "A tiny little drawing editor.",
|
|
4
|
-
"version": "4.1.0-next.
|
|
4
|
+
"version": "4.1.0-next.74327a60f18a",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"@tiptap/pm": "^2.9.1",
|
|
63
63
|
"@tiptap/react": "^2.9.1",
|
|
64
64
|
"@tiptap/starter-kit": "^2.9.1",
|
|
65
|
-
"@tldraw/editor": "4.1.0-next.
|
|
66
|
-
"@tldraw/store": "4.1.0-next.
|
|
65
|
+
"@tldraw/editor": "4.1.0-next.74327a60f18a",
|
|
66
|
+
"@tldraw/store": "4.1.0-next.74327a60f18a",
|
|
67
67
|
"classnames": "^2.5.1",
|
|
68
68
|
"hotkeys-js": "^3.13.9",
|
|
69
69
|
"idb": "^7.1.1",
|
package/src/index.ts
CHANGED
|
@@ -464,7 +464,6 @@ export {
|
|
|
464
464
|
} from './lib/ui/components/StylePanel/DefaultStylePanelContent'
|
|
465
465
|
export {
|
|
466
466
|
StylePanelButtonPicker,
|
|
467
|
-
StylePanelButtonPickerInline,
|
|
468
467
|
type StylePanelButtonPickerProps,
|
|
469
468
|
} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
|
|
470
469
|
export {
|
|
@@ -475,12 +474,10 @@ export {
|
|
|
475
474
|
} from './lib/ui/components/StylePanel/StylePanelContext'
|
|
476
475
|
export {
|
|
477
476
|
StylePanelDoubleDropdownPicker,
|
|
478
|
-
StylePanelDoubleDropdownPickerInline,
|
|
479
477
|
type StylePanelDoubleDropdownPickerProps,
|
|
480
478
|
} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
|
|
481
479
|
export {
|
|
482
480
|
StylePanelDropdownPicker,
|
|
483
|
-
StylePanelDropdownPickerInline,
|
|
484
481
|
type StylePanelDropdownPickerProps,
|
|
485
482
|
} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
|
|
486
483
|
export {
|
|
@@ -25,13 +25,10 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
|
|
|
25
25
|
import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
|
|
26
26
|
import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
|
|
27
27
|
import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
|
|
28
|
-
import { StylePanelButtonPicker
|
|
28
|
+
import { StylePanelButtonPicker } from './StylePanelButtonPicker'
|
|
29
29
|
import { useStylePanelContext } from './StylePanelContext'
|
|
30
30
|
import { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'
|
|
31
|
-
import {
|
|
32
|
-
StylePanelDropdownPicker,
|
|
33
|
-
StylePanelDropdownPickerInline,
|
|
34
|
-
} from './StylePanelDropdownPicker'
|
|
31
|
+
import { StylePanelDropdownPicker } from './StylePanelDropdownPicker'
|
|
35
32
|
import { StylePanelSubheading } from './StylePanelSubheading'
|
|
36
33
|
|
|
37
34
|
/** @public @react */
|
|
@@ -228,78 +225,70 @@ export function StylePanelFontPicker() {
|
|
|
228
225
|
|
|
229
226
|
/** @public @react */
|
|
230
227
|
export function StylePanelTextAlignPicker() {
|
|
231
|
-
const { styles
|
|
228
|
+
const { styles } = useStylePanelContext()
|
|
232
229
|
const msg = useTranslation()
|
|
233
230
|
const textAlign = styles.get(DefaultTextAlignStyle)
|
|
234
231
|
if (textAlign === undefined) return null
|
|
235
|
-
const title = msg('style-panel.align')
|
|
236
232
|
|
|
237
233
|
return (
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
</TldrawUiToolbarButton>
|
|
256
|
-
</TldrawUiToolbar>
|
|
257
|
-
</>
|
|
234
|
+
<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
|
|
235
|
+
<StylePanelButtonPicker
|
|
236
|
+
title={msg('style-panel.align')}
|
|
237
|
+
uiType="align"
|
|
238
|
+
style={DefaultTextAlignStyle}
|
|
239
|
+
items={STYLES.textAlign}
|
|
240
|
+
value={textAlign}
|
|
241
|
+
/>
|
|
242
|
+
<TldrawUiToolbarButton
|
|
243
|
+
type="icon"
|
|
244
|
+
title={msg('style-panel.vertical-align')}
|
|
245
|
+
data-testid="vertical-align"
|
|
246
|
+
disabled
|
|
247
|
+
>
|
|
248
|
+
<TldrawUiButtonIcon icon="vertical-align-middle" />
|
|
249
|
+
</TldrawUiToolbarButton>
|
|
250
|
+
</TldrawUiToolbar>
|
|
258
251
|
)
|
|
259
252
|
}
|
|
260
253
|
|
|
261
254
|
/** @public @react */
|
|
262
255
|
export function StylePanelLabelAlignPicker() {
|
|
263
|
-
const { styles
|
|
256
|
+
const { styles } = useStylePanelContext()
|
|
264
257
|
const msg = useTranslation()
|
|
265
258
|
const labelAlign = styles.get(DefaultHorizontalAlignStyle)
|
|
266
259
|
const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)
|
|
267
260
|
if (labelAlign === undefined) return null
|
|
268
|
-
const title = msg('style-panel.label-align')
|
|
269
261
|
|
|
270
262
|
return (
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
263
|
+
<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
|
|
264
|
+
<StylePanelButtonPicker
|
|
265
|
+
title={msg('style-panel.label-align')}
|
|
266
|
+
uiType="align"
|
|
267
|
+
style={DefaultHorizontalAlignStyle}
|
|
268
|
+
items={STYLES.horizontalAlign}
|
|
269
|
+
value={labelAlign}
|
|
270
|
+
/>
|
|
271
|
+
{verticalLabelAlign === undefined ? (
|
|
272
|
+
<TldrawUiToolbarButton
|
|
273
|
+
type="icon"
|
|
274
|
+
title={msg('style-panel.vertical-align')}
|
|
275
|
+
data-testid="vertical-align"
|
|
276
|
+
disabled
|
|
277
|
+
>
|
|
278
|
+
<TldrawUiButtonIcon icon="vertical-align-middle" />
|
|
279
|
+
</TldrawUiToolbarButton>
|
|
280
|
+
) : (
|
|
281
|
+
<StylePanelDropdownPicker
|
|
282
|
+
type="icon"
|
|
283
|
+
id="geo-vertical-alignment"
|
|
284
|
+
uiType="verticalAlign"
|
|
285
|
+
stylePanelType="vertical-align"
|
|
286
|
+
style={DefaultVerticalAlignStyle}
|
|
287
|
+
items={STYLES.verticalAlign}
|
|
288
|
+
value={verticalLabelAlign}
|
|
280
289
|
/>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
type="icon"
|
|
284
|
-
title={msg('style-panel.vertical-align')}
|
|
285
|
-
data-testid="vertical-align"
|
|
286
|
-
disabled
|
|
287
|
-
>
|
|
288
|
-
<TldrawUiButtonIcon icon="vertical-align-middle" />
|
|
289
|
-
</TldrawUiToolbarButton>
|
|
290
|
-
) : (
|
|
291
|
-
<StylePanelDropdownPickerInline
|
|
292
|
-
type="icon"
|
|
293
|
-
id="geo-vertical-alignment"
|
|
294
|
-
uiType="verticalAlign"
|
|
295
|
-
stylePanelType="vertical-align"
|
|
296
|
-
style={DefaultVerticalAlignStyle}
|
|
297
|
-
items={STYLES.verticalAlign}
|
|
298
|
-
value={verticalLabelAlign}
|
|
299
|
-
/>
|
|
300
|
-
)}
|
|
301
|
-
</TldrawUiToolbar>
|
|
302
|
-
</>
|
|
290
|
+
)}
|
|
291
|
+
</TldrawUiToolbar>
|
|
303
292
|
)
|
|
304
293
|
}
|
|
305
294
|
|