@bigbluebutton/tldraw 2.0.0-alpha.21 → 2.0.0-alpha.23
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/lib/tools/HandTool/HandTool.js +0 -19
- package/dist-cjs/lib/tools/HandTool/HandTool.js.map +2 -2
- package/dist-cjs/lib/ui/components/ContextMenu.js +5 -5
- package/dist-cjs/lib/ui/components/ContextMenu.js.map +3 -3
- package/dist-esm/lib/tools/HandTool/HandTool.mjs +1 -20
- package/dist-esm/lib/tools/HandTool/HandTool.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ContextMenu.mjs +5 -5
- package/dist-esm/lib/ui/components/ContextMenu.mjs.map +3 -3
- package/package.json +2 -2
- package/src/lib/tools/HandTool/HandTool.ts +19 -19
- package/src/lib/ui/components/ContextMenu.tsx +3 -5
|
@@ -30,29 +30,10 @@ class HandTool extends import_editor.StateNode {
|
|
|
30
30
|
static initial = "idle";
|
|
31
31
|
static children = () => [import_Idle.Idle, import_Pointing.Pointing, import_Dragging.Dragging];
|
|
32
32
|
onDoubleClick = (info) => {
|
|
33
|
-
if (info.phase === "settle") {
|
|
34
|
-
const { currentScreenPoint } = this.editor.inputs;
|
|
35
|
-
this.editor.zoomIn(currentScreenPoint, { duration: 220, easing: import_editor.EASINGS.easeOutQuint });
|
|
36
|
-
}
|
|
37
33
|
};
|
|
38
34
|
onTripleClick = (info) => {
|
|
39
|
-
if (info.phase === "settle") {
|
|
40
|
-
const { currentScreenPoint } = this.editor.inputs;
|
|
41
|
-
this.editor.zoomOut(currentScreenPoint, { duration: 320, easing: import_editor.EASINGS.easeOutQuint });
|
|
42
|
-
}
|
|
43
35
|
};
|
|
44
36
|
onQuadrupleClick = (info) => {
|
|
45
|
-
if (info.phase === "settle") {
|
|
46
|
-
const zoomLevel = this.editor.getZoomLevel();
|
|
47
|
-
const {
|
|
48
|
-
inputs: { currentScreenPoint }
|
|
49
|
-
} = this.editor;
|
|
50
|
-
if (zoomLevel === 1) {
|
|
51
|
-
this.editor.zoomToFit({ duration: 400, easing: import_editor.EASINGS.easeOutQuint });
|
|
52
|
-
} else {
|
|
53
|
-
this.editor.resetZoom(currentScreenPoint, { duration: 320, easing: import_editor.EASINGS.easeOutQuint });
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
37
|
};
|
|
57
38
|
}
|
|
58
39
|
//# sourceMappingURL=HandTool.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/tools/HandTool/HandTool.ts"],
|
|
4
|
-
"sourcesContent": ["import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'\nimport { Dragging } from './childStates/Dragging'\nimport { Idle } from './childStates/Idle'\nimport { Pointing } from './childStates/Pointing'\n\n/** @public */\nexport class HandTool extends StateNode {\n\tstatic override id = 'hand'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing, Dragging]\n\n\toverride onDoubleClick: TLClickEvent = (info) => {\n\t\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiD;AACjD,sBAAyB;AACzB,kBAAqB;AACrB,sBAAyB;AAGlB,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,kBAAM,0BAAU,wBAAQ;AAAA,EAEjD,gBAA8B,CAAC,SAAS;
|
|
4
|
+
"sourcesContent": ["import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'\nimport { Dragging } from './childStates/Dragging'\nimport { Idle } from './childStates/Idle'\nimport { Pointing } from './childStates/Pointing'\n\n/** @public */\nexport class HandTool extends StateNode {\n\tstatic override id = 'hand'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing, Dragging]\n\n\toverride onDoubleClick: TLClickEvent = (info) => {\n\t\t// if (info.phase === 'settle') {\n\t\t// \tconst { currentScreenPoint } = this.editor.inputs\n\t\t// \tthis.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint })\n\t\t// }\n\t}\n\n\toverride onTripleClick: TLClickEvent = (info) => {\n\t\t// if (info.phase === 'settle') {\n\t\t// \tconst { currentScreenPoint } = this.editor.inputs\n\t\t// \tthis.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })\n\t\t// }\n\t}\n\n\toverride onQuadrupleClick: TLClickEvent = (info) => {\n\t\t// if (info.phase === 'settle') {\n\t\t// \tconst zoomLevel = this.editor.getZoomLevel()\n\t\t// \tconst {\n\t\t// \t\tinputs: { currentScreenPoint },\n\t\t// \t} = this.editor\n\n\t\t// \tif (zoomLevel === 1) {\n\t\t// \t\tthis.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint })\n\t\t// \t} else {\n\t\t// \t\tthis.editor.resetZoom(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })\n\t\t// \t}\n\t\t// }\n\t}\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiD;AACjD,sBAAyB;AACzB,kBAAqB;AACrB,sBAAyB;AAGlB,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,kBAAM,0BAAU,wBAAQ;AAAA,EAEjD,gBAA8B,CAAC,SAAS;AAAA,EAKjD;AAAA,EAES,gBAA8B,CAAC,SAAS;AAAA,EAKjD;AAAA,EAES,mBAAiC,CAAC,SAAS;AAAA,EAapD;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,8 +49,8 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
49
49
|
const editor = (0, import_editor.useEditor)();
|
|
50
50
|
const contextTLUiMenuSchema = (0, import_useContextMenuSchema.useContextMenuSchema)();
|
|
51
51
|
const cb = (0, import_react.useCallback)(
|
|
52
|
-
(
|
|
53
|
-
if (!
|
|
52
|
+
(isOpen2) => {
|
|
53
|
+
if (!isOpen2) {
|
|
54
54
|
const onlySelectedShape = editor.getOnlySelectedShape();
|
|
55
55
|
if (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {
|
|
56
56
|
editor.setSelectedShapes([]);
|
|
@@ -78,7 +78,7 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
78
78
|
[editor]
|
|
79
79
|
);
|
|
80
80
|
const container = (0, import_editor.useContainer)();
|
|
81
|
-
const [
|
|
81
|
+
const [isOpen, handleOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)("context menu", cb);
|
|
82
82
|
const isReadonly = (0, import_useReadonly.useReadonly)();
|
|
83
83
|
const noItemsToShow = contextTLUiMenuSchema.length === 0 || isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk);
|
|
84
84
|
const selectToolActive = (0, import_editor.useValue)(
|
|
@@ -87,7 +87,7 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
87
87
|
[editor]
|
|
88
88
|
);
|
|
89
89
|
const disabled = !selectToolActive || noItemsToShow;
|
|
90
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(_ContextMenu.Root, { dir: "ltr", onOpenChange: handleOpenChange, children: [
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(_ContextMenu.Root, { dir: "ltr", onOpenChange: handleOpenChange, modal: false, children: [
|
|
91
91
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
92
|
_ContextMenu.Trigger,
|
|
93
93
|
{
|
|
@@ -97,7 +97,7 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
97
97
|
children
|
|
98
98
|
}
|
|
99
99
|
),
|
|
100
|
-
|
|
100
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuContent, {})
|
|
101
101
|
] });
|
|
102
102
|
};
|
|
103
103
|
const ContextMenuContent = (0, import_react.forwardRef)(function ContextMenuContent2() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/components/ContextMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Editor, preventDefault, useContainer, useEditor, useValue } from '@bigbluebutton/editor'\nimport * as _ContextMenu from '@radix-ui/react-context-menu'\nimport classNames from 'classnames'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useBreakpoint } from '../hooks/useBreakpoint'\nimport { useContextMenuSchema } from '../hooks/useContextMenuSchema'\nimport { useMenuIsOpen } from '../hooks/useMenuIsOpen'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { MoveToPageMenu } from './MoveToPageMenu'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\nimport { Kbd } from './primitives/Kbd'\n\n/** @public */\nexport interface TLUiContextMenuProps {\n\tchildren: any\n}\n\n/** @public */\nexport const ContextMenu = function ContextMenu({ children }: { children: any }) {\n\tconst editor = useEditor()\n\n\tconst contextTLUiMenuSchema = useContextMenuSchema()\n\n\tconst cb = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\t\t\tif (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {\n\t\t\t\t\teditor.setSelectedShapes([])\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Weird route: selecting locked shapes on long press\n\t\t\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\t\t\tconst {\n\t\t\t\t\t\tinputs: { currentPagePoint },\n\t\t\t\t\t} = editor\n\n\t\t\t\t\t// get all of the shapes under the current pointer\n\t\t\t\t\tconst shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t// if there are no selected shapes\n\t\t\t\t\t\t!editor.getSelectedShapes().length ||\n\t\t\t\t\t\t// OR if none of the shapes at the point include the selected shape\n\t\t\t\t\t\t!shapesAtPoint.some((s) => selectedShapes.includes(s))\n\t\t\t\t\t) {\n\t\t\t\t\t\t// then are there any locked shapes under the current pointer?\n\t\t\t\t\t\tconst lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))\n\n\t\t\t\t\t\tif (lockedShapes.length) {\n\t\t\t\t\t\t\t// nice, let's select them\n\t\t\t\t\t\t\teditor.select(...lockedShapes.map((s) => s.id))\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst container = useContainer()\n\n\tconst [
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFE;AAvFF,oBAA0E;AAC1E,mBAA8B;AAC9B,wBAAuB;AACvB,mBAAkD;AAElD,2BAA8B;AAC9B,kCAAqC;AACrC,2BAA8B;AAC9B,yBAA4B;AAE5B,4BAA+B;AAE/B,4BAA+B;AAC/B,oBAAuB;AACvB,kBAAqB;AACrB,iBAAoB;AAQb,MAAM,cAAc,SAASA,aAAY,EAAE,SAAS,GAAsB;AAChF,QAAM,aAAS,yBAAU;AAEzB,QAAM,4BAAwB,kDAAqB;AAEnD,QAAM,SAAK;AAAA,IACV,
|
|
6
|
-
"names": ["ContextMenu", "ContextMenuContent", "editor", "classNames"]
|
|
4
|
+
"sourcesContent": ["import { Editor, preventDefault, useContainer, useEditor, useValue } from '@bigbluebutton/editor'\nimport * as _ContextMenu from '@radix-ui/react-context-menu'\nimport classNames from 'classnames'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useBreakpoint } from '../hooks/useBreakpoint'\nimport { useContextMenuSchema } from '../hooks/useContextMenuSchema'\nimport { useMenuIsOpen } from '../hooks/useMenuIsOpen'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { MoveToPageMenu } from './MoveToPageMenu'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\nimport { Kbd } from './primitives/Kbd'\n\n/** @public */\nexport interface TLUiContextMenuProps {\n\tchildren: any\n}\n\n/** @public */\nexport const ContextMenu = function ContextMenu({ children }: { children: any }) {\n\tconst editor = useEditor()\n\n\tconst contextTLUiMenuSchema = useContextMenuSchema()\n\n\tconst cb = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\t\t\tif (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {\n\t\t\t\t\teditor.setSelectedShapes([])\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Weird route: selecting locked shapes on long press\n\t\t\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\t\t\tconst {\n\t\t\t\t\t\tinputs: { currentPagePoint },\n\t\t\t\t\t} = editor\n\n\t\t\t\t\t// get all of the shapes under the current pointer\n\t\t\t\t\tconst shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t// if there are no selected shapes\n\t\t\t\t\t\t!editor.getSelectedShapes().length ||\n\t\t\t\t\t\t// OR if none of the shapes at the point include the selected shape\n\t\t\t\t\t\t!shapesAtPoint.some((s) => selectedShapes.includes(s))\n\t\t\t\t\t) {\n\t\t\t\t\t\t// then are there any locked shapes under the current pointer?\n\t\t\t\t\t\tconst lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))\n\n\t\t\t\t\t\tif (lockedShapes.length) {\n\t\t\t\t\t\t\t// nice, let's select them\n\t\t\t\t\t\t\teditor.select(...lockedShapes.map((s) => s.id))\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst container = useContainer()\n\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)\n\n\t// If every item in the menu is readonly, then we don't want to show the menu\n\tconst isReadonly = useReadonly()\n\n\tconst noItemsToShow =\n\t\tcontextTLUiMenuSchema.length === 0 ||\n\t\t(isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk))\n\n\tconst selectToolActive = useValue(\n\t\t'isSelectToolActive',\n\t\t() => editor.getCurrentToolId() === 'select',\n\t\t[editor]\n\t)\n\n\tconst disabled = !selectToolActive || noItemsToShow\n\n\treturn (\n\t\t<_ContextMenu.Root dir=\"ltr\" onOpenChange={handleOpenChange} modal={false}>\n\t\t\t<_ContextMenu.Trigger\n\t\t\t\tonContextMenu={disabled ? preventDefault : undefined}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_ContextMenu.Trigger>\n\t\t\t{isOpen && <ContextMenuContent />}\n\t\t</_ContextMenu.Root>\n\t)\n}\n\nconst ContextMenuContent = forwardRef(function ContextMenuContent() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst menuSchema = useContextMenuSchema()\n\tconst [_, handleSubOpenChange] = useMenuIsOpen('context menu sub')\n\n\tconst isReadonly = useReadonly()\n\tconst breakpoint = useBreakpoint()\n\tconst container = useContainer()\n\n\tconst [disableClicks, setDisableClicks] = useState(false)\n\n\tfunction getContextMenuItem(\n\t\teditor: Editor,\n\t\titem: TLUiMenuChild,\n\t\tparent: TLUiMenuChild | null,\n\t\tdepth: number\n\t) {\n\t\tif (!item) return null\n\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\tswitch (item.type) {\n\t\t\tcase 'custom': {\n\t\t\t\tswitch (item.id) {\n\t\t\t\t\tcase 'MOVE_TO_PAGE_MENU': {\n\t\t\t\t\t\treturn <MoveToPageMenu key={item.id} />\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'group': {\n\t\t\t\treturn (\n\t\t\t\t\t<_ContextMenu.Group\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tclassName={classNames('tlui-menu__group', {\n\t\t\t\t\t\t\t'tlui-menu__group__small': parent?.type === 'submenu',\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdata-testid={`menu-item.${item.id}`}\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.children.map((child) => getContextMenuItem(editor, child, item, depth + 1))}\n\t\t\t\t\t</_ContextMenu.Group>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'submenu': {\n\t\t\t\treturn (\n\t\t\t\t\t<_ContextMenu.Sub key={item.id} onOpenChange={handleSubOpenChange}>\n\t\t\t\t\t\t<_ContextMenu.SubTrigger dir=\"ltr\" disabled={item.disabled} asChild>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\t\tlabel={item.label as TLUiTranslationKey}\n\t\t\t\t\t\t\t\tdata-testid={`menu-item.${item.id}`}\n\t\t\t\t\t\t\t\ticon=\"chevron-right\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</_ContextMenu.SubTrigger>\n\t\t\t\t\t\t<_ContextMenu.Portal container={container}>\n\t\t\t\t\t\t\t<_ContextMenu.SubContent className=\"tlui-menu\" sideOffset={-4} collisionPadding={4}>\n\t\t\t\t\t\t\t\t{item.children.map((child) => getContextMenuItem(editor, child, item, depth + 1))}\n\t\t\t\t\t\t\t</_ContextMenu.SubContent>\n\t\t\t\t\t\t</_ContextMenu.Portal>\n\t\t\t\t\t</_ContextMenu.Sub>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'item': {\n\t\t\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\t\t\tconst { id, checkbox, contextMenuLabel, label, onSelect, kbd, icon } = item.actionItem\n\t\t\t\tconst labelToUse = contextMenuLabel ?? label\n\t\t\t\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\t\t\t\tif (checkbox) {\n\t\t\t\t\t// Item is in a checkbox group\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<_ContextMenu.CheckboxItem\n\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\tonSelect('context-menu')\n\t\t\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttitle={labelStr ? labelStr : undefined}\n\t\t\t\t\t\t\tchecked={item.checked}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon small icon={item.checked ? 'check' : 'checkbox-empty'} />\n\t\t\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{kbd && <Kbd>{kbd}</Kbd>}\n\t\t\t\t\t\t</_ContextMenu.CheckboxItem>\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<_ContextMenu.Item key={id} dir=\"ltr\" asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\tdata-testid={`menu-item.${id}`}\n\t\t\t\t\t\t\tkbd={kbd}\n\t\t\t\t\t\t\tlabel={labelToUse as TLUiTranslationKey}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\ticonLeft={breakpoint < 3 && depth > 2 ? (icon as TLUiIconType) : undefined}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonSelect('context-menu')\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</_ContextMenu.Item>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<_ContextMenu.Portal container={container}>\n\t\t\t<_ContextMenu.Content\n\t\t\t\tclassName=\"tlui-menu scrollable\"\n\t\t\t\talignOffset={-4}\n\t\t\t\tcollisionPadding={4}\n\t\t\t\tonContextMenu={preventDefault}\n\t\t\t>\n\t\t\t\t{menuSchema.map((item) => getContextMenuItem(editor, item, null, 0))}\n\t\t\t</_ContextMenu.Content>\n\t\t</_ContextMenu.Portal>\n\t)\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ContextMenu", "isOpen", "ContextMenuContent", "editor", "classNames"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { StateNode } from "@bigbluebutton/editor";
|
|
2
2
|
import { Dragging } from "./childStates/Dragging.mjs";
|
|
3
3
|
import { Idle } from "./childStates/Idle.mjs";
|
|
4
4
|
import { Pointing } from "./childStates/Pointing.mjs";
|
|
@@ -7,29 +7,10 @@ class HandTool extends StateNode {
|
|
|
7
7
|
static initial = "idle";
|
|
8
8
|
static children = () => [Idle, Pointing, Dragging];
|
|
9
9
|
onDoubleClick = (info) => {
|
|
10
|
-
if (info.phase === "settle") {
|
|
11
|
-
const { currentScreenPoint } = this.editor.inputs;
|
|
12
|
-
this.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint });
|
|
13
|
-
}
|
|
14
10
|
};
|
|
15
11
|
onTripleClick = (info) => {
|
|
16
|
-
if (info.phase === "settle") {
|
|
17
|
-
const { currentScreenPoint } = this.editor.inputs;
|
|
18
|
-
this.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint });
|
|
19
|
-
}
|
|
20
12
|
};
|
|
21
13
|
onQuadrupleClick = (info) => {
|
|
22
|
-
if (info.phase === "settle") {
|
|
23
|
-
const zoomLevel = this.editor.getZoomLevel();
|
|
24
|
-
const {
|
|
25
|
-
inputs: { currentScreenPoint }
|
|
26
|
-
} = this.editor;
|
|
27
|
-
if (zoomLevel === 1) {
|
|
28
|
-
this.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint });
|
|
29
|
-
} else {
|
|
30
|
-
this.editor.resetZoom(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint });
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
14
|
};
|
|
34
15
|
}
|
|
35
16
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/tools/HandTool/HandTool.ts"],
|
|
4
|
-
"sourcesContent": ["import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'\nimport { Dragging } from './childStates/Dragging'\nimport { Idle } from './childStates/Idle'\nimport { Pointing } from './childStates/Pointing'\n\n/** @public */\nexport class HandTool extends StateNode {\n\tstatic override id = 'hand'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing, Dragging]\n\n\toverride onDoubleClick: TLClickEvent = (info) => {\n\t\
|
|
5
|
-
"mappings": "AAAA,
|
|
4
|
+
"sourcesContent": ["import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'\nimport { Dragging } from './childStates/Dragging'\nimport { Idle } from './childStates/Idle'\nimport { Pointing } from './childStates/Pointing'\n\n/** @public */\nexport class HandTool extends StateNode {\n\tstatic override id = 'hand'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing, Dragging]\n\n\toverride onDoubleClick: TLClickEvent = (info) => {\n\t\t// if (info.phase === 'settle') {\n\t\t// \tconst { currentScreenPoint } = this.editor.inputs\n\t\t// \tthis.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint })\n\t\t// }\n\t}\n\n\toverride onTripleClick: TLClickEvent = (info) => {\n\t\t// if (info.phase === 'settle') {\n\t\t// \tconst { currentScreenPoint } = this.editor.inputs\n\t\t// \tthis.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })\n\t\t// }\n\t}\n\n\toverride onQuadrupleClick: TLClickEvent = (info) => {\n\t\t// if (info.phase === 'settle') {\n\t\t// \tconst zoomLevel = this.editor.getZoomLevel()\n\t\t// \tconst {\n\t\t// \t\tinputs: { currentScreenPoint },\n\t\t// \t} = this.editor\n\n\t\t// \tif (zoomLevel === 1) {\n\t\t// \t\tthis.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint })\n\t\t// \t} else {\n\t\t// \t\tthis.editor.resetZoom(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })\n\t\t// \t}\n\t\t// }\n\t}\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAkB,iBAA+B;AACjD,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAGlB,MAAM,iBAAiB,UAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,MAAM,UAAU,QAAQ;AAAA,EAEjD,gBAA8B,CAAC,SAAS;AAAA,EAKjD;AAAA,EAES,gBAA8B,CAAC,SAAS;AAAA,EAKjD;AAAA,EAES,mBAAiC,CAAC,SAAS;AAAA,EAapD;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,8 +16,8 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
16
16
|
const editor = useEditor();
|
|
17
17
|
const contextTLUiMenuSchema = useContextMenuSchema();
|
|
18
18
|
const cb = useCallback(
|
|
19
|
-
(
|
|
20
|
-
if (!
|
|
19
|
+
(isOpen2) => {
|
|
20
|
+
if (!isOpen2) {
|
|
21
21
|
const onlySelectedShape = editor.getOnlySelectedShape();
|
|
22
22
|
if (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {
|
|
23
23
|
editor.setSelectedShapes([]);
|
|
@@ -45,7 +45,7 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
45
45
|
[editor]
|
|
46
46
|
);
|
|
47
47
|
const container = useContainer();
|
|
48
|
-
const [
|
|
48
|
+
const [isOpen, handleOpenChange] = useMenuIsOpen("context menu", cb);
|
|
49
49
|
const isReadonly = useReadonly();
|
|
50
50
|
const noItemsToShow = contextTLUiMenuSchema.length === 0 || isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk);
|
|
51
51
|
const selectToolActive = useValue(
|
|
@@ -54,7 +54,7 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
54
54
|
[editor]
|
|
55
55
|
);
|
|
56
56
|
const disabled = !selectToolActive || noItemsToShow;
|
|
57
|
-
return /* @__PURE__ */ jsxs(_ContextMenu.Root, { dir: "ltr", onOpenChange: handleOpenChange, children: [
|
|
57
|
+
return /* @__PURE__ */ jsxs(_ContextMenu.Root, { dir: "ltr", onOpenChange: handleOpenChange, modal: false, children: [
|
|
58
58
|
/* @__PURE__ */ jsx(
|
|
59
59
|
_ContextMenu.Trigger,
|
|
60
60
|
{
|
|
@@ -64,7 +64,7 @@ const ContextMenu = function ContextMenu2({ children }) {
|
|
|
64
64
|
children
|
|
65
65
|
}
|
|
66
66
|
),
|
|
67
|
-
|
|
67
|
+
isOpen && /* @__PURE__ */ jsx(ContextMenuContent, {})
|
|
68
68
|
] });
|
|
69
69
|
};
|
|
70
70
|
const ContextMenuContent = forwardRef(function ContextMenuContent2() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/components/ContextMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Editor, preventDefault, useContainer, useEditor, useValue } from '@bigbluebutton/editor'\nimport * as _ContextMenu from '@radix-ui/react-context-menu'\nimport classNames from 'classnames'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useBreakpoint } from '../hooks/useBreakpoint'\nimport { useContextMenuSchema } from '../hooks/useContextMenuSchema'\nimport { useMenuIsOpen } from '../hooks/useMenuIsOpen'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { MoveToPageMenu } from './MoveToPageMenu'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\nimport { Kbd } from './primitives/Kbd'\n\n/** @public */\nexport interface TLUiContextMenuProps {\n\tchildren: any\n}\n\n/** @public */\nexport const ContextMenu = function ContextMenu({ children }: { children: any }) {\n\tconst editor = useEditor()\n\n\tconst contextTLUiMenuSchema = useContextMenuSchema()\n\n\tconst cb = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\t\t\tif (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {\n\t\t\t\t\teditor.setSelectedShapes([])\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Weird route: selecting locked shapes on long press\n\t\t\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\t\t\tconst {\n\t\t\t\t\t\tinputs: { currentPagePoint },\n\t\t\t\t\t} = editor\n\n\t\t\t\t\t// get all of the shapes under the current pointer\n\t\t\t\t\tconst shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t// if there are no selected shapes\n\t\t\t\t\t\t!editor.getSelectedShapes().length ||\n\t\t\t\t\t\t// OR if none of the shapes at the point include the selected shape\n\t\t\t\t\t\t!shapesAtPoint.some((s) => selectedShapes.includes(s))\n\t\t\t\t\t) {\n\t\t\t\t\t\t// then are there any locked shapes under the current pointer?\n\t\t\t\t\t\tconst lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))\n\n\t\t\t\t\t\tif (lockedShapes.length) {\n\t\t\t\t\t\t\t// nice, let's select them\n\t\t\t\t\t\t\teditor.select(...lockedShapes.map((s) => s.id))\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst container = useContainer()\n\n\tconst [
|
|
5
|
-
"mappings": "AAuFE,SACC,KADD;AAvFF,SAAiB,gBAAgB,cAAc,WAAW,gBAAgB;AAC1E,YAAY,kBAAkB;AAC9B,OAAO,gBAAgB;AACvB,SAAS,YAAY,aAAa,gBAAgB;AAElD,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAE/B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,WAAW;AAQb,MAAM,cAAc,SAASA,aAAY,EAAE,SAAS,GAAsB;AAChF,QAAM,SAAS,UAAU;AAEzB,QAAM,wBAAwB,qBAAqB;AAEnD,QAAM,KAAK;AAAA,IACV,
|
|
6
|
-
"names": ["ContextMenu", "ContextMenuContent", "editor"]
|
|
4
|
+
"sourcesContent": ["import { Editor, preventDefault, useContainer, useEditor, useValue } from '@bigbluebutton/editor'\nimport * as _ContextMenu from '@radix-ui/react-context-menu'\nimport classNames from 'classnames'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useBreakpoint } from '../hooks/useBreakpoint'\nimport { useContextMenuSchema } from '../hooks/useContextMenuSchema'\nimport { useMenuIsOpen } from '../hooks/useMenuIsOpen'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { MoveToPageMenu } from './MoveToPageMenu'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\nimport { Kbd } from './primitives/Kbd'\n\n/** @public */\nexport interface TLUiContextMenuProps {\n\tchildren: any\n}\n\n/** @public */\nexport const ContextMenu = function ContextMenu({ children }: { children: any }) {\n\tconst editor = useEditor()\n\n\tconst contextTLUiMenuSchema = useContextMenuSchema()\n\n\tconst cb = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\t\t\tif (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {\n\t\t\t\t\teditor.setSelectedShapes([])\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Weird route: selecting locked shapes on long press\n\t\t\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\t\t\tconst {\n\t\t\t\t\t\tinputs: { currentPagePoint },\n\t\t\t\t\t} = editor\n\n\t\t\t\t\t// get all of the shapes under the current pointer\n\t\t\t\t\tconst shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t// if there are no selected shapes\n\t\t\t\t\t\t!editor.getSelectedShapes().length ||\n\t\t\t\t\t\t// OR if none of the shapes at the point include the selected shape\n\t\t\t\t\t\t!shapesAtPoint.some((s) => selectedShapes.includes(s))\n\t\t\t\t\t) {\n\t\t\t\t\t\t// then are there any locked shapes under the current pointer?\n\t\t\t\t\t\tconst lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))\n\n\t\t\t\t\t\tif (lockedShapes.length) {\n\t\t\t\t\t\t\t// nice, let's select them\n\t\t\t\t\t\t\teditor.select(...lockedShapes.map((s) => s.id))\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst container = useContainer()\n\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)\n\n\t// If every item in the menu is readonly, then we don't want to show the menu\n\tconst isReadonly = useReadonly()\n\n\tconst noItemsToShow =\n\t\tcontextTLUiMenuSchema.length === 0 ||\n\t\t(isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk))\n\n\tconst selectToolActive = useValue(\n\t\t'isSelectToolActive',\n\t\t() => editor.getCurrentToolId() === 'select',\n\t\t[editor]\n\t)\n\n\tconst disabled = !selectToolActive || noItemsToShow\n\n\treturn (\n\t\t<_ContextMenu.Root dir=\"ltr\" onOpenChange={handleOpenChange} modal={false}>\n\t\t\t<_ContextMenu.Trigger\n\t\t\t\tonContextMenu={disabled ? preventDefault : undefined}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_ContextMenu.Trigger>\n\t\t\t{isOpen && <ContextMenuContent />}\n\t\t</_ContextMenu.Root>\n\t)\n}\n\nconst ContextMenuContent = forwardRef(function ContextMenuContent() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst menuSchema = useContextMenuSchema()\n\tconst [_, handleSubOpenChange] = useMenuIsOpen('context menu sub')\n\n\tconst isReadonly = useReadonly()\n\tconst breakpoint = useBreakpoint()\n\tconst container = useContainer()\n\n\tconst [disableClicks, setDisableClicks] = useState(false)\n\n\tfunction getContextMenuItem(\n\t\teditor: Editor,\n\t\titem: TLUiMenuChild,\n\t\tparent: TLUiMenuChild | null,\n\t\tdepth: number\n\t) {\n\t\tif (!item) return null\n\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\tswitch (item.type) {\n\t\t\tcase 'custom': {\n\t\t\t\tswitch (item.id) {\n\t\t\t\t\tcase 'MOVE_TO_PAGE_MENU': {\n\t\t\t\t\t\treturn <MoveToPageMenu key={item.id} />\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'group': {\n\t\t\t\treturn (\n\t\t\t\t\t<_ContextMenu.Group\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tclassName={classNames('tlui-menu__group', {\n\t\t\t\t\t\t\t'tlui-menu__group__small': parent?.type === 'submenu',\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdata-testid={`menu-item.${item.id}`}\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.children.map((child) => getContextMenuItem(editor, child, item, depth + 1))}\n\t\t\t\t\t</_ContextMenu.Group>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'submenu': {\n\t\t\t\treturn (\n\t\t\t\t\t<_ContextMenu.Sub key={item.id} onOpenChange={handleSubOpenChange}>\n\t\t\t\t\t\t<_ContextMenu.SubTrigger dir=\"ltr\" disabled={item.disabled} asChild>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\t\tlabel={item.label as TLUiTranslationKey}\n\t\t\t\t\t\t\t\tdata-testid={`menu-item.${item.id}`}\n\t\t\t\t\t\t\t\ticon=\"chevron-right\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</_ContextMenu.SubTrigger>\n\t\t\t\t\t\t<_ContextMenu.Portal container={container}>\n\t\t\t\t\t\t\t<_ContextMenu.SubContent className=\"tlui-menu\" sideOffset={-4} collisionPadding={4}>\n\t\t\t\t\t\t\t\t{item.children.map((child) => getContextMenuItem(editor, child, item, depth + 1))}\n\t\t\t\t\t\t\t</_ContextMenu.SubContent>\n\t\t\t\t\t\t</_ContextMenu.Portal>\n\t\t\t\t\t</_ContextMenu.Sub>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'item': {\n\t\t\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\t\t\tconst { id, checkbox, contextMenuLabel, label, onSelect, kbd, icon } = item.actionItem\n\t\t\t\tconst labelToUse = contextMenuLabel ?? label\n\t\t\t\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\t\t\t\tif (checkbox) {\n\t\t\t\t\t// Item is in a checkbox group\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<_ContextMenu.CheckboxItem\n\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\tonSelect('context-menu')\n\t\t\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttitle={labelStr ? labelStr : undefined}\n\t\t\t\t\t\t\tchecked={item.checked}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon small icon={item.checked ? 'check' : 'checkbox-empty'} />\n\t\t\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{kbd && <Kbd>{kbd}</Kbd>}\n\t\t\t\t\t\t</_ContextMenu.CheckboxItem>\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<_ContextMenu.Item key={id} dir=\"ltr\" asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\tdata-testid={`menu-item.${id}`}\n\t\t\t\t\t\t\tkbd={kbd}\n\t\t\t\t\t\t\tlabel={labelToUse as TLUiTranslationKey}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\ticonLeft={breakpoint < 3 && depth > 2 ? (icon as TLUiIconType) : undefined}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonSelect('context-menu')\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</_ContextMenu.Item>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<_ContextMenu.Portal container={container}>\n\t\t\t<_ContextMenu.Content\n\t\t\t\tclassName=\"tlui-menu scrollable\"\n\t\t\t\talignOffset={-4}\n\t\t\t\tcollisionPadding={4}\n\t\t\t\tonContextMenu={preventDefault}\n\t\t\t>\n\t\t\t\t{menuSchema.map((item) => getContextMenuItem(editor, item, null, 0))}\n\t\t\t</_ContextMenu.Content>\n\t\t</_ContextMenu.Portal>\n\t)\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ContextMenu", "isOpen", "ContextMenuContent", "editor"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbluebutton/tldraw",
|
|
3
3
|
"description": "BigBlueButton's fork of tldraw 2.0-alpha.19 - A tiny little drawing editor.",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.23",
|
|
5
5
|
"packageManager": "yarn@3.5.0",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "tldraw GB Ltd.",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"src"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@bigbluebutton/editor": "2.0.0-alpha.
|
|
38
|
+
"@bigbluebutton/editor": "2.0.0-alpha.22",
|
|
39
39
|
"@radix-ui/react-alert-dialog": "^1.0.0",
|
|
40
40
|
"@radix-ui/react-context-menu": "^2.1.5",
|
|
41
41
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
@@ -10,31 +10,31 @@ export class HandTool extends StateNode {
|
|
|
10
10
|
static override children = () => [Idle, Pointing, Dragging]
|
|
11
11
|
|
|
12
12
|
override onDoubleClick: TLClickEvent = (info) => {
|
|
13
|
-
if (info.phase === 'settle') {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
13
|
+
// if (info.phase === 'settle') {
|
|
14
|
+
// const { currentScreenPoint } = this.editor.inputs
|
|
15
|
+
// this.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint })
|
|
16
|
+
// }
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
override onTripleClick: TLClickEvent = (info) => {
|
|
20
|
-
if (info.phase === 'settle') {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
20
|
+
// if (info.phase === 'settle') {
|
|
21
|
+
// const { currentScreenPoint } = this.editor.inputs
|
|
22
|
+
// this.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })
|
|
23
|
+
// }
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
override onQuadrupleClick: TLClickEvent = (info) => {
|
|
27
|
-
if (info.phase === 'settle') {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
// if (info.phase === 'settle') {
|
|
28
|
+
// const zoomLevel = this.editor.getZoomLevel()
|
|
29
|
+
// const {
|
|
30
|
+
// inputs: { currentScreenPoint },
|
|
31
|
+
// } = this.editor
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
33
|
+
// if (zoomLevel === 1) {
|
|
34
|
+
// this.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint })
|
|
35
|
+
// } else {
|
|
36
|
+
// this.editor.resetZoom(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })
|
|
37
|
+
// }
|
|
38
|
+
// }
|
|
39
39
|
}
|
|
40
40
|
}
|
|
@@ -67,7 +67,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
|
|
|
67
67
|
|
|
68
68
|
const container = useContainer()
|
|
69
69
|
|
|
70
|
-
const [
|
|
70
|
+
const [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)
|
|
71
71
|
|
|
72
72
|
// If every item in the menu is readonly, then we don't want to show the menu
|
|
73
73
|
const isReadonly = useReadonly()
|
|
@@ -85,7 +85,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
|
|
|
85
85
|
const disabled = !selectToolActive || noItemsToShow
|
|
86
86
|
|
|
87
87
|
return (
|
|
88
|
-
<_ContextMenu.Root dir="ltr" onOpenChange={handleOpenChange}>
|
|
88
|
+
<_ContextMenu.Root dir="ltr" onOpenChange={handleOpenChange} modal={false}>
|
|
89
89
|
<_ContextMenu.Trigger
|
|
90
90
|
onContextMenu={disabled ? preventDefault : undefined}
|
|
91
91
|
dir="ltr"
|
|
@@ -93,9 +93,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
|
|
|
93
93
|
>
|
|
94
94
|
{children}
|
|
95
95
|
</_ContextMenu.Trigger>
|
|
96
|
-
<
|
|
97
|
-
<ContextMenuContent />
|
|
98
|
-
</_ContextMenu.Portal>
|
|
96
|
+
{isOpen && <ContextMenuContent />}
|
|
99
97
|
</_ContextMenu.Root>
|
|
100
98
|
)
|
|
101
99
|
}
|