@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/DebugPanel.js

@@ -0,0 +1,334 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DebugPanel_exports = {};
+__export(DebugPanel_exports, {
+  DebugPanel: () => DebugPanel
+});
+module.exports = __toCommonJS(DebugPanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var React = __toESM(require("react"));
+var import_useDialogsProvider = require("../hooks/useDialogsProvider");
+var import_useToastsProvider = require("../hooks/useToastsProvider");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var Dialog = __toESM(require("./primitives/Dialog"));
+var DropdownMenu = __toESM(require("./primitives/DropdownMenu"));
+let t = 0;
+function createNShapes(editor, n) {
+  const shapesToCreate = Array(n);
+  const cols = Math.floor(Math.sqrt(n));
+  for (let i = 0; i < n; i++) {
+    t++;
+    shapesToCreate[i] = {
+      id: (0, import_editor.createShapeId)("box" + t),
+      type: "geo",
+      x: i % cols * 132,
+      y: Math.floor(i / cols) * 132
+    };
+  }
+  editor.batch(() => {
+    editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id));
+  });
+}
+const DebugPanel = React.memo(function DebugPanel2({
+  renderDebugMenuItems
+}) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-debug-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentState, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeCount, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu.Root, { id: "debug", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "icon", icon: "dots-horizontal", title: msg("debug-panel.more") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Content, { side: "top", align: "end", alignOffset: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugMenuContent, { renderDebugMenuItems }) })
+    ] })
+  ] });
+});
+const CurrentState = (0, import_editor.track)(function CurrentState2() {
+  const editor = (0, import_editor.useEditor)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-debug-panel__current-state", children: editor.getPath() });
+});
+const ShapeCount = function ShapeCount2() {
+  const editor = (0, import_editor.useEditor)();
+  const count = (0, import_editor.useValue)("rendering shapes count", () => editor.getRenderingShapes().length, [
+    editor
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    count,
+    " Shapes"
+  ] });
+};
+const DebugMenuContent = (0, import_editor.track)(function DebugMenuContent2({
+  renderDebugMenuItems
+}) {
+  const editor = (0, import_editor.useEditor)();
+  const { addToast } = (0, import_useToastsProvider.useToasts)();
+  const { addDialog } = (0, import_useDialogsProvider.useDialogs)();
+  const [error, setError] = React.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            addToast({
+              id: (0, import_editor.uniqueId)(),
+              title: "Something happened",
+              description: "Hey, attend to this thing over here. It might be important!",
+              keepOpen: true
+              // icon?: string
+              // title?: string
+              // description?: string
+              // actions?: TLUiToastAction[]
+            });
+            addToast({
+              id: (0, import_editor.uniqueId)(),
+              title: "Something happened",
+              description: "Hey, attend to this thing over here. It might be important!",
+              keepOpen: true,
+              actions: [
+                {
+                  label: "Primary",
+                  type: "primary",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Normal",
+                  type: "normal",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Danger",
+                  type: "danger",
+                  onClick: () => {
+                  }
+                }
+              ]
+              // icon?: string
+              // title?: string
+              // description?: string
+              // actions?: TLUiToastAction[]
+            });
+            addToast({
+              id: (0, import_editor.uniqueId)(),
+              title: "Something happened",
+              description: "Hey, attend to this thing over here. It might be important!",
+              keepOpen: true,
+              icon: "twitter",
+              actions: [
+                {
+                  label: "Primary",
+                  type: "primary",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Normal",
+                  type: "normal",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Danger",
+                  type: "danger",
+                  onClick: () => {
+                  }
+                }
+              ]
+            });
+          },
+          label: (0, import_useTranslation.untranslated)("Show toast")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            addDialog({
+              component: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ExampleDialog,
+                {
+                  displayDontShowAgain: true,
+                  onCancel: () => {
+                    onClose();
+                  },
+                  onContinue: () => {
+                    onClose();
+                  }
+                }
+              ),
+              onClose: () => {
+              }
+            });
+          },
+          label: (0, import_useTranslation.untranslated)("Show dialog")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => createNShapes(editor, 100),
+          label: (0, import_useTranslation.untranslated)("Create 100 shapes")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            function countDescendants({ children }) {
+              let count = 0;
+              if (!children.length)
+                return 0;
+              for (const el of [...children]) {
+                count++;
+                count += countDescendants(el);
+              }
+              return count;
+            }
+            const selectedShapes = editor.getSelectedShapes();
+            const shapes = selectedShapes.length === 0 ? editor.getRenderingShapes() : selectedShapes;
+            const elms = shapes.map(
+              (shape) => document.getElementById(shape.id).parentElement
+            );
+            let descendants = elms.length;
+            for (const elm of elms) {
+              descendants += countDescendants(elm);
+            }
+            window.alert(`Shapes ${shapes.length}, DOM nodes:${descendants}`);
+          },
+          label: (0, import_useTranslation.untranslated)("Count shapes / nodes")
+        }
+      ),
+      (() => {
+        if (error)
+          throw Error("oh no!");
+      })(),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            setError(true);
+          },
+          label: (0, import_useTranslation.untranslated)("Throw error")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            (0, import_editor.hardResetEditor)();
+          },
+          label: (0, import_useTranslation.untranslated)("Hard reset")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugFlagToggle, { flag: import_editor.debugFlags.debugSvg }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugFlagToggle, { flag: import_editor.debugFlags.forceSrgb }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugFlagToggle, { flag: import_editor.debugFlags.debugGeometry }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugFlagToggle, { flag: import_editor.debugFlags.hideShapes })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Group, { children: Object.values(import_editor.featureFlags).map((flag) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugFlagToggle, { flag }, flag.name);
+    }) }),
+    renderDebugMenuItems?.()
+  ] });
+});
+function Toggle({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DropdownMenu.CheckboxItem,
+    {
+      title: (0, import_useTranslation.untranslated)(label),
+      checked: value,
+      onSelect: () => onChange(!value),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-button__label", draggable: false, children: label })
+    }
+  );
+}
+const DebugFlagToggle = (0, import_editor.track)(function DebugFlagToggle2({
+  flag,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Toggle,
+    {
+      label: flag.name.replace(/([a-z0-9])([A-Z])/g, (m) => `${m[0]} ${m[1].toLowerCase()}`).replace(/^[a-z]/, (m) => m.toUpperCase()),
+      value: flag.get(),
+      onChange: (newValue) => {
+        flag.set(newValue);
+        onChange?.(newValue);
+      }
+    }
+  );
+});
+function ExampleDialog({
+  title = "title",
+  body = "hello hello hello",
+  cancel = "Cancel",
+  confirm = "Continue",
+  displayDontShowAgain = false,
+  onCancel,
+  onContinue
+}) {
+  const [dontShowAgain, setDontShowAgain] = React.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.CloseButton, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Body, { style: { maxWidth: 350 }, children: body }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Footer, { className: "tlui-dialog__footer__actions", children: [
+      displayDontShowAgain && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.Button,
+        {
+          type: "normal",
+          onClick: () => setDontShowAgain(!dontShowAgain),
+          iconLeft: dontShowAgain ? "check" : "checkbox-empty",
+          style: { marginRight: "auto" },
+          children: `Don't show again`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "normal", onClick: onCancel, children: cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "primary", onClick: async () => onContinue(), children: confirm })
+    ] })
+  ] });
+}
+//# sourceMappingURL=DebugPanel.js.map

package/dist-cjs/lib/ui/components/DebugPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/DebugPanel.tsx"],
+  "sourcesContent": ["import {\n\tcreateShapeId,\n\tDebugFlag,\n\tdebugFlags,\n\tEditor,\n\tfeatureFlags,\n\thardResetEditor,\n\tTLShapePartial,\n\ttrack,\n\tuniqueId,\n\tuseEditor,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport * as React from 'react'\nimport { useDialogs } from '../hooks/useDialogsProvider'\nimport { useToasts } from '../hooks/useToastsProvider'\nimport { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport * as Dialog from './primitives/Dialog'\nimport * as DropdownMenu from './primitives/DropdownMenu'\n\nlet t = 0\n\nfunction createNShapes(editor: Editor, n: number) {\n\tconst shapesToCreate: TLShapePartial[] = Array(n)\n\tconst cols = Math.floor(Math.sqrt(n))\n\n\tfor (let i = 0; i < n; i++) {\n\t\tt++\n\t\tshapesToCreate[i] = {\n\t\t\tid: createShapeId('box' + t),\n\t\t\ttype: 'geo',\n\t\t\tx: (i % cols) * 132,\n\t\t\ty: Math.floor(i / cols) * 132,\n\t\t}\n\t}\n\n\teditor.batch(() => {\n\t\teditor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))\n\t})\n}\n\n/** @internal */\nexport const DebugPanel = React.memo(function DebugPanel({\n\trenderDebugMenuItems,\n}: {\n\trenderDebugMenuItems: (() => React.ReactNode) | null\n}) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<div className=\"tlui-debug-panel\">\n\t\t\t<CurrentState />\n\t\t\t<ShapeCount />\n\t\t\t<DropdownMenu.Root id=\"debug\">\n\t\t\t\t<DropdownMenu.Trigger>\n\t\t\t\t\t<Button type=\"icon\" icon=\"dots-horizontal\" title={msg('debug-panel.more')} />\n\t\t\t\t</DropdownMenu.Trigger>\n\t\t\t\t<DropdownMenu.Content side=\"top\" align=\"end\" alignOffset={0}>\n\t\t\t\t\t<DebugMenuContent renderDebugMenuItems={renderDebugMenuItems} />\n\t\t\t\t</DropdownMenu.Content>\n\t\t\t</DropdownMenu.Root>\n\t\t</div>\n\t)\n})\n\nconst CurrentState = track(function CurrentState() {\n\tconst editor = useEditor()\n\treturn <div className=\"tlui-debug-panel__current-state\">{editor.getPath()}</div>\n})\n\nconst ShapeCount = function ShapeCount() {\n\tconst editor = useEditor()\n\tconst count = useValue('rendering shapes count', () => editor.getRenderingShapes().length, [\n\t\teditor,\n\t])\n\n\treturn <div>{count} Shapes</div>\n}\n\nconst DebugMenuContent = track(function DebugMenuContent({\n\trenderDebugMenuItems,\n}: {\n\trenderDebugMenuItems: (() => React.ReactNode) | null\n}) {\n\tconst editor = useEditor()\n\tconst { addToast } = useToasts()\n\tconst { addDialog } = useDialogs()\n\tconst [error, setError] = React.useState<boolean>(false)\n\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu.Group>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\t\t\ttitle: 'Something happened',\n\t\t\t\t\t\t\tdescription: 'Hey, attend to this thing over here. It might be important!',\n\t\t\t\t\t\t\tkeepOpen: true,\n\t\t\t\t\t\t\t// icon?: string\n\t\t\t\t\t\t\t// title?: string\n\t\t\t\t\t\t\t// description?: string\n\t\t\t\t\t\t\t// actions?: TLUiToastAction[]\n\t\t\t\t\t\t})\n\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\t\t\ttitle: 'Something happened',\n\t\t\t\t\t\t\tdescription: 'Hey, attend to this thing over here. It might be important!',\n\t\t\t\t\t\t\tkeepOpen: true,\n\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Primary',\n\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\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\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Normal',\n\t\t\t\t\t\t\t\t\ttype: 'normal',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\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\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Danger',\n\t\t\t\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\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],\n\t\t\t\t\t\t\t// icon?: string\n\t\t\t\t\t\t\t// title?: string\n\t\t\t\t\t\t\t// description?: string\n\t\t\t\t\t\t\t// actions?: TLUiToastAction[]\n\t\t\t\t\t\t})\n\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\t\t\ttitle: 'Something happened',\n\t\t\t\t\t\t\tdescription: 'Hey, attend to this thing over here. It might be important!',\n\t\t\t\t\t\t\tkeepOpen: true,\n\t\t\t\t\t\t\ticon: 'twitter',\n\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Primary',\n\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\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\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Normal',\n\t\t\t\t\t\t\t\t\ttype: 'normal',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\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\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Danger',\n\t\t\t\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\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],\n\t\t\t\t\t\t})\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Show toast')}\n\t\t\t\t/>\n\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\taddDialog({\n\t\t\t\t\t\t\tcomponent: ({ onClose }) => (\n\t\t\t\t\t\t\t\t<ExampleDialog\n\t\t\t\t\t\t\t\t\tdisplayDontShowAgain\n\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\tonClose()\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonContinue={() => {\n\t\t\t\t\t\t\t\t\t\tonClose()\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),\n\t\t\t\t\t\t\tonClose: () => {\n\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Show dialog')}\n\t\t\t\t/>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => createNShapes(editor, 100)}\n\t\t\t\t\tlabel={untranslated('Create 100 shapes')}\n\t\t\t\t/>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tfunction countDescendants({ children }: HTMLElement) {\n\t\t\t\t\t\t\tlet count = 0\n\t\t\t\t\t\t\tif (!children.length) return 0\n\t\t\t\t\t\t\tfor (const el of [...(children as any)]) {\n\t\t\t\t\t\t\t\tcount++\n\t\t\t\t\t\t\t\tcount += countDescendants(el)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn count\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\n\t\t\t\t\t\tconst shapes =\n\t\t\t\t\t\t\tselectedShapes.length === 0 ? editor.getRenderingShapes() : selectedShapes\n\n\t\t\t\t\t\tconst elms = shapes.map(\n\t\t\t\t\t\t\t(shape) => (document.getElementById(shape.id) as HTMLElement)!.parentElement!\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tlet descendants = elms.length\n\n\t\t\t\t\t\tfor (const elm of elms) {\n\t\t\t\t\t\t\tdescendants += countDescendants(elm)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\twindow.alert(`Shapes ${shapes.length}, DOM nodes:${descendants}`)\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Count shapes / nodes')}\n\t\t\t\t/>\n\t\t\t\t{(() => {\n\t\t\t\t\tif (error) throw Error('oh no!')\n\t\t\t\t})()}\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetError(true)\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Throw error')}\n\t\t\t\t/>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\thardResetEditor()\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Hard reset')}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Group>\n\t\t\t<DropdownMenu.Group>\n\t\t\t\t<DebugFlagToggle flag={debugFlags.debugSvg} />\n\t\t\t\t<DebugFlagToggle flag={debugFlags.forceSrgb} />\n\t\t\t\t<DebugFlagToggle flag={debugFlags.debugGeometry} />\n\t\t\t\t<DebugFlagToggle flag={debugFlags.hideShapes} />\n\t\t\t</DropdownMenu.Group>\n\t\t\t<DropdownMenu.Group>\n\t\t\t\t{Object.values(featureFlags).map((flag) => {\n\t\t\t\t\treturn <DebugFlagToggle key={flag.name} flag={flag} />\n\t\t\t\t})}\n\t\t\t</DropdownMenu.Group>\n\t\t\t{renderDebugMenuItems?.()}\n\t\t</>\n\t)\n})\n\nfunction Toggle({\n\tlabel,\n\tvalue,\n\tonChange,\n}: {\n\tlabel: string\n\tvalue: boolean\n\tonChange: (newValue: boolean) => void\n}) {\n\treturn (\n\t\t<DropdownMenu.CheckboxItem\n\t\t\ttitle={untranslated(label)}\n\t\t\tchecked={value}\n\t\t\tonSelect={() => onChange(!value)}\n\t\t>\n\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t{label}\n\t\t\t</span>\n\t\t</DropdownMenu.CheckboxItem>\n\t)\n}\n\nconst DebugFlagToggle = track(function DebugFlagToggle({\n\tflag,\n\tonChange,\n}: {\n\tflag: DebugFlag<boolean>\n\tonChange?: (newValue: boolean) => void\n}) {\n\treturn (\n\t\t<Toggle\n\t\t\tlabel={flag.name\n\t\t\t\t.replace(/([a-z0-9])([A-Z])/g, (m) => `${m[0]} ${m[1].toLowerCase()}`)\n\t\t\t\t.replace(/^[a-z]/, (m) => m.toUpperCase())}\n\t\t\tvalue={flag.get()}\n\t\t\tonChange={(newValue) => {\n\t\t\t\tflag.set(newValue)\n\t\t\t\tonChange?.(newValue)\n\t\t\t}}\n\t\t/>\n\t)\n})\n\nfunction ExampleDialog({\n\ttitle = 'title',\n\tbody = 'hello hello hello',\n\tcancel = 'Cancel',\n\tconfirm = 'Continue',\n\tdisplayDontShowAgain = false,\n\tonCancel,\n\tonContinue,\n}: {\n\ttitle?: string\n\tbody?: string\n\tcancel?: string\n\tconfirm?: string\n\tdisplayDontShowAgain?: boolean\n\tonCancel: () => void\n\tonContinue: () => void\n}) {\n\tconst [dontShowAgain, setDontShowAgain] = React.useState(false)\n\n\treturn (\n\t\t<>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t\t<Dialog.CloseButton />\n\t\t\t</Dialog.Header>\n\t\t\t<Dialog.Body style={{ maxWidth: 350 }}>{body}</Dialog.Body>\n\t\t\t<Dialog.Footer className=\"tlui-dialog__footer__actions\">\n\t\t\t\t{displayDontShowAgain && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\tonClick={() => setDontShowAgain(!dontShowAgain)}\n\t\t\t\t\t\ticonLeft={dontShowAgain ? 'check' : 'checkbox-empty'}\n\t\t\t\t\t\tstyle={{ marginRight: 'auto' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{`Don't show again`}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t<Button type=\"normal\" onClick={onCancel}>\n\t\t\t\t\t{cancel}\n\t\t\t\t</Button>\n\t\t\t\t<Button type=\"primary\" onClick={async () => onContinue()}>\n\t\t\t\t\t{confirm}\n\t\t\t\t</Button>\n\t\t\t</Dialog.Footer>\n\t\t</>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["DebugPanel", "CurrentState", "ShapeCount", "DebugMenuContent", "DebugFlagToggle"]
+}

package/dist-cjs/lib/ui/components/Dialogs.js

@@ -0,0 +1,64 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dialogs_exports = {};
+__export(Dialogs_exports, {
+  Dialogs: () => Dialogs
+});
+module.exports = __toCommonJS(Dialogs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var _Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_react = __toESM(require("react"));
+var import_useDialogsProvider = require("../hooks/useDialogsProvider");
+const Dialog = ({ id, component: ModalContent, onClose }) => {
+  const { removeDialog } = (0, import_useDialogsProvider.useDialogs)();
+  const container = (0, import_editor.useContainer)();
+  const handleOpenChange = (0, import_react.useCallback)(
+    (isOpen) => {
+      if (!isOpen) {
+        if (onClose) {
+          try {
+            onClose();
+          } catch (err) {
+            console.warn(err);
+          }
+        }
+        removeDialog(id);
+      }
+    },
+    [id, onClose, removeDialog]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_Dialog.Root, { onOpenChange: handleOpenChange, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_Dialog.Overlay, { dir: "ltr", className: "tlui-dialog__overlay", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_Dialog.Content, { dir: "ltr", className: "tlui-dialog__content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContent, { onClose: () => handleOpenChange(false) }) }) }) }) });
+};
+function _Dialogs() {
+  const { dialogs } = (0, import_useDialogsProvider.useDialogs)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dialogs.map((dialog) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, { ...dialog }, dialog.id)) });
+}
+const Dialogs = import_react.default.memo(_Dialogs);
+//# sourceMappingURL=Dialogs.js.map

package/dist-cjs/lib/ui/components/Dialogs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Dialogs.tsx"],
+  "sourcesContent": ["import { useContainer } from '@bigbluebutton/editor'\nimport * as _Dialog from '@radix-ui/react-dialog'\nimport React, { useCallback } from 'react'\nimport { TLUiDialog, useDialogs } from '../hooks/useDialogsProvider'\n\nconst Dialog = ({ id, component: ModalContent, onClose }: TLUiDialog) => {\n\tconst { removeDialog } = useDialogs()\n\n\tconst container = useContainer()\n\n\tconst handleOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tif (onClose) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClose()\n\t\t\t\t\t} catch (err: any) {\n\t\t\t\t\t\tconsole.warn(err)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tremoveDialog(id)\n\t\t\t}\n\t\t},\n\t\t[id, onClose, removeDialog]\n\t)\n\n\treturn (\n\t\t<_Dialog.Root onOpenChange={handleOpenChange} defaultOpen>\n\t\t\t<_Dialog.Portal container={container}>\n\t\t\t\t<_Dialog.Overlay dir=\"ltr\" className=\"tlui-dialog__overlay\">\n\t\t\t\t\t<_Dialog.Content dir=\"ltr\" className=\"tlui-dialog__content\">\n\t\t\t\t\t\t<ModalContent onClose={() => handleOpenChange(false)} />\n\t\t\t\t\t</_Dialog.Content>\n\t\t\t\t</_Dialog.Overlay>\n\t\t\t</_Dialog.Portal>\n\t\t</_Dialog.Root>\n\t)\n}\n\nfunction _Dialogs() {\n\tconst { dialogs } = useDialogs()\n\n\treturn (\n\t\t<>\n\t\t\t{dialogs.map((dialog: TLUiDialog) => (\n\t\t\t\t<Dialog key={dialog.id} {...dialog} />\n\t\t\t))}\n\t\t</>\n\t)\n}\n\nexport const Dialogs = React.memo(_Dialogs)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BM;AA/BN,oBAA6B;AAC7B,cAAyB;AACzB,mBAAmC;AACnC,gCAAuC;AAEvC,MAAM,SAAS,CAAC,EAAE,IAAI,WAAW,cAAc,QAAQ,MAAkB;AACxE,QAAM,EAAE,aAAa,QAAI,sCAAW;AAEpC,QAAM,gBAAY,4BAAa;AAE/B,QAAM,uBAAmB;AAAA,IACxB,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,YAAI,SAAS;AACZ,cAAI;AACH,oBAAQ;AAAA,UACT,SAAS,KAAU;AAClB,oBAAQ,KAAK,GAAG;AAAA,UACjB;AAAA,QACD;AACA,qBAAa,EAAE;AAAA,MAChB;AAAA,IACD;AAAA,IACA,CAAC,IAAI,SAAS,YAAY;AAAA,EAC3B;AAEA,SACC,4CAAC,QAAQ,MAAR,EAAa,cAAc,kBAAkB,aAAW,MACxD,sDAAC,QAAQ,QAAR,EAAe,WACf,sDAAC,QAAQ,SAAR,EAAgB,KAAI,OAAM,WAAU,wBACpC,sDAAC,QAAQ,SAAR,EAAgB,KAAI,OAAM,WAAU,wBACpC,sDAAC,gBAAa,SAAS,MAAM,iBAAiB,KAAK,GAAG,GACvD,GACD,GACD,GACD;AAEF;AAEA,SAAS,WAAW;AACnB,QAAM,EAAE,QAAQ,QAAI,sCAAW;AAE/B,SACC,2EACE,kBAAQ,IAAI,CAAC,WACb,4CAAC,UAAwB,GAAG,UAAf,OAAO,EAAgB,CACpC,GACF;AAEF;AAEO,MAAM,UAAU,aAAAA,QAAM,KAAK,QAAQ;",
+  "names": ["React"]
+}

package/dist-cjs/lib/ui/components/DuplicateButton.js

@@ -0,0 +1,47 @@
+"use strict";
+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 DuplicateButton_exports = {};
+__export(DuplicateButton_exports, {
+  DuplicateButton: () => DuplicateButton
+});
+module.exports = __toCommonJS(DuplicateButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_useActions = require("../hooks/useActions");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var import_shared = require("./primitives/shared");
+const DuplicateButton = (0, import_editor.track)(function DuplicateButton2() {
+  const editor = (0, import_editor.useEditor)();
+  const actions = (0, import_useActions.useActions)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const action = actions["duplicate"];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      icon: action.icon,
+      type: "icon",
+      onClick: () => action.onSelect("quick-actions"),
+      disabled: !(editor.isIn("select") && editor.getSelectedShapeIds().length > 0),
+      title: `${msg(action.label)} ${(0, import_shared.kbdStr)(action.kbd)}`,
+      smallIcon: true
+    }
+  );
+});
+//# sourceMappingURL=DuplicateButton.js.map

package/dist-cjs/lib/ui/components/DuplicateButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/DuplicateButton.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const DuplicateButton = track(function DuplicateButton() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst action = actions['duplicate']\n\n\treturn (\n\t\t<Button\n\t\t\ticon={action.icon}\n\t\t\ttype=\"icon\"\n\t\t\tonClick={() => action.onSelect('quick-actions')}\n\t\t\tdisabled={!(editor.isIn('select') && editor.getSelectedShapeIds().length > 0)}\n\t\t\ttitle={`${msg(action.label!)} ${kbdStr(action.kbd!)}`}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaE;AAbF,oBAAiC;AACjC,wBAA2B;AAC3B,4BAA+B;AAC/B,oBAAuB;AACvB,oBAAuB;AAEhB,MAAM,sBAAkB,qBAAM,SAASA,mBAAkB;AAC/D,QAAM,aAAS,yBAAU;AACzB,QAAM,cAAU,8BAAW;AAC3B,QAAM,UAAM,sCAAe;AAC3B,QAAM,SAAS,QAAQ,WAAW;AAElC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAK;AAAA,MACL,SAAS,MAAM,OAAO,SAAS,eAAe;AAAA,MAC9C,UAAU,EAAE,OAAO,KAAK,QAAQ,KAAK,OAAO,oBAAoB,EAAE,SAAS;AAAA,MAC3E,OAAO,GAAG,IAAI,OAAO,KAAM,CAAC,QAAI,sBAAO,OAAO,GAAI,CAAC;AAAA,MACnD,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["DuplicateButton"]
+}