@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js

@@ -0,0 +1,192 @@
+"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 EmbedShapeUtil_exports = {};
+__export(EmbedShapeUtil_exports, {
+  EmbedShapeUtil: () => EmbedShapeUtil
+});
+module.exports = __toCommonJS(EmbedShapeUtil_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = require("react");
+var import_embeds = require("../../utils/embeds/embeds");
+var import_resizeBox = require("../shared/resizeBox");
+var import_rotated_box_shadow = require("../shared/rotated-box-shadow");
+const getSandboxPermissions = (permissions) => {
+  return Object.entries(permissions).filter(([_perm, isEnabled]) => isEnabled).map(([perm]) => perm).join(" ");
+};
+class EmbedShapeUtil extends import_editor.BaseBoxShapeUtil {
+  static type = "embed";
+  static props = import_editor.embedShapeProps;
+  static migrations = import_editor.embedShapeMigrations;
+  hideSelectionBoundsFg = (shape) => !this.canResize(shape);
+  canEdit = () => true;
+  canUnmount = (shape) => {
+    return !!(0, import_embeds.getEmbedInfo)(shape.props.url)?.definition?.canUnmount;
+  };
+  canResize = (shape) => {
+    return !!(0, import_embeds.getEmbedInfo)(shape.props.url)?.definition?.doesResize;
+  };
+  canEditInReadOnly = () => true;
+  getDefaultProps() {
+    return {
+      w: 300,
+      h: 300,
+      url: ""
+    };
+  }
+  isAspectRatioLocked = (shape) => {
+    const embedInfo = (0, import_embeds.getEmbedInfo)(shape.props.url);
+    return embedInfo?.definition.isAspectRatioLocked ?? false;
+  };
+  onResize = (shape, info) => {
+    const isAspectRatioLocked = this.isAspectRatioLocked(shape);
+    const embedInfo = (0, import_embeds.getEmbedInfo)(shape.props.url);
+    let minWidth = embedInfo?.definition.minWidth ?? 200;
+    let minHeight = embedInfo?.definition.minHeight ?? 200;
+    if (isAspectRatioLocked) {
+      const aspectRatio = shape.props.w / shape.props.h;
+      if (aspectRatio > 1) {
+        minWidth *= aspectRatio;
+      } else {
+        minHeight /= aspectRatio;
+      }
+    }
+    return (0, import_resizeBox.resizeBox)(shape, info, { minWidth, minHeight });
+  };
+  component(shape) {
+    const { w, h, url } = shape.props;
+    const isEditing = (0, import_editor.useIsEditing)(shape.id);
+    const embedInfo = (0, import_react.useMemo)(() => (0, import_embeds.getEmbedInfoUnsafely)(url), [url]);
+    const isHoveringWhileEditingSameShape = (0, import_editor.useValue)(
+      "is hovering",
+      () => {
+        const { editingShapeId, hoveredShapeId } = this.editor.getCurrentPageState();
+        if (editingShapeId && hoveredShapeId !== editingShapeId) {
+          const editingShape = this.editor.getShape(editingShapeId);
+          if (editingShape && this.editor.isShapeOfType(editingShape, "embed")) {
+            return true;
+          }
+        }
+        return false;
+      },
+      []
+    );
+    const pageRotation = this.editor.getShapePageTransform(shape).rotation();
+    const isInteractive = isEditing || isHoveringWhileEditingSameShape;
+    if (embedInfo?.definition.type === "github_gist") {
+      const idFromGistUrl = embedInfo.url.split("/").pop();
+      if (!idFromGistUrl)
+        throw Error("No gist id!");
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.HTMLContainer, { className: "tl-embed-container", id: shape.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Gist,
+        {
+          id: idFromGistUrl,
+          width: (0, import_editor.toDomPrecision)(w),
+          height: (0, import_editor.toDomPrecision)(h),
+          isInteractive,
+          pageRotation
+        }
+      ) });
+    }
+    const sandbox = getSandboxPermissions({
+      ...import_editor.embedShapePermissionDefaults,
+      ...embedInfo?.definition.overridePermissions ?? {}
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.HTMLContainer, { className: "tl-embed-container", id: shape.id, children: embedInfo?.definition ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "iframe",
+      {
+        className: "tl-embed",
+        sandbox,
+        src: embedInfo.embedUrl,
+        width: (0, import_editor.toDomPrecision)(w),
+        height: (0, import_editor.toDomPrecision)(h),
+        draggable: false,
+        frameBorder: "0",
+        referrerPolicy: "no-referrer-when-downgrade",
+        style: {
+          border: 0,
+          pointerEvents: isInteractive ? "auto" : "none",
+          // Fix for safari <https://stackoverflow.com/a/49150908>
+          zIndex: isInteractive ? "" : "-1",
+          boxShadow: (0, import_rotated_box_shadow.getRotatedBoxShadow)(pageRotation),
+          borderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,
+          background: embedInfo?.definition.backgroundColor
+        }
+      }
+    ) : null });
+  }
+  indicator(shape) {
+    const embedInfo = (0, import_react.useMemo)(() => (0, import_embeds.getEmbedInfo)(shape.props.url), [shape.props.url]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "rect",
+      {
+        width: (0, import_editor.toDomPrecision)(shape.props.w),
+        height: (0, import_editor.toDomPrecision)(shape.props.h),
+        rx: embedInfo?.definition.overrideOutlineRadius ?? 8,
+        ry: embedInfo?.definition.overrideOutlineRadius ?? 8
+      }
+    );
+  }
+}
+function Gist({
+  id,
+  file,
+  isInteractive,
+  width,
+  height,
+  style,
+  pageRotation
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      className: "tl-embed",
+      draggable: false,
+      width: (0, import_editor.toDomPrecision)(width),
+      height: (0, import_editor.toDomPrecision)(height),
+      frameBorder: "0",
+      scrolling: "no",
+      seamless: true,
+      referrerPolicy: "no-referrer-when-downgrade",
+      style: {
+        ...style,
+        pointerEvents: isInteractive ? "all" : "none",
+        // Fix for safari <https://stackoverflow.com/a/49150908>
+        zIndex: isInteractive ? "" : "-1",
+        boxShadow: (0, import_rotated_box_shadow.getRotatedBoxShadow)(pageRotation)
+      },
+      srcDoc: `
+			<html>
+				<head>
+					<base target="_blank">
+				</head>
+				<body>
+					<script src=${`https://gist.github.com/${id}.js${file ? `?file=${file}` : ""}`}></script>
+					<style type="text/css">
+						* { margin: 0px; }
+						table { height: 100%; background-color: red; }
+						.gist { background-color: none; height: 100%;  }
+						.gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
+					</style>
+				</body>
+			</html>`
+    }
+  );
+}
+//# sourceMappingURL=EmbedShapeUtil.js.map

package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/embed/EmbedShapeUtil.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tTLEmbedShape,\n\tTLEmbedShapePermissions,\n\tTLOnResizeHandler,\n\tTLShapeUtilFlag,\n\tembedShapeMigrations,\n\tembedShapePermissionDefaults,\n\tembedShapeProps,\n\ttoDomPrecision,\n\tuseIsEditing,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport { useMemo } from 'react'\nimport { getEmbedInfo, getEmbedInfoUnsafely } from '../../utils/embeds/embeds'\nimport { resizeBox } from '../shared/resizeBox'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\nconst getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {\n\treturn Object.entries(permissions)\n\t\t.filter(([_perm, isEnabled]) => isEnabled)\n\t\t.map(([perm]) => perm)\n\t\t.join(' ')\n}\n\n/** @public */\nexport class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {\n\tstatic override type = 'embed' as const\n\tstatic override props = embedShapeProps\n\tstatic override migrations = embedShapeMigrations\n\n\toverride hideSelectionBoundsFg: TLShapeUtilFlag<TLEmbedShape> = (shape) => !this.canResize(shape)\n\toverride canEdit: TLShapeUtilFlag<TLEmbedShape> = () => true\n\toverride canUnmount: TLShapeUtilFlag<TLEmbedShape> = (shape: TLEmbedShape) => {\n\t\treturn !!getEmbedInfo(shape.props.url)?.definition?.canUnmount\n\t}\n\toverride canResize = (shape: TLEmbedShape) => {\n\t\treturn !!getEmbedInfo(shape.props.url)?.definition?.doesResize\n\t}\n\toverride canEditInReadOnly = () => true\n\n\toverride getDefaultProps(): TLEmbedShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\turl: '',\n\t\t}\n\t}\n\n\toverride isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape> = (shape) => {\n\t\tconst embedInfo = getEmbedInfo(shape.props.url)\n\t\treturn embedInfo?.definition.isAspectRatioLocked ?? false\n\t}\n\n\toverride onResize: TLOnResizeHandler<TLEmbedShape> = (shape, info) => {\n\t\tconst isAspectRatioLocked = this.isAspectRatioLocked(shape)\n\t\tconst embedInfo = getEmbedInfo(shape.props.url)\n\t\tlet minWidth = embedInfo?.definition.minWidth ?? 200\n\t\tlet minHeight = embedInfo?.definition.minHeight ?? 200\n\t\tif (isAspectRatioLocked) {\n\t\t\t// Enforce aspect ratio\n\t\t\t// Neither the width or height can be less than 200\n\t\t\tconst aspectRatio = shape.props.w / shape.props.h\n\t\t\tif (aspectRatio > 1) {\n\t\t\t\t// Landscape\n\t\t\t\tminWidth *= aspectRatio\n\t\t\t} else {\n\t\t\t\t// Portrait\n\t\t\t\tminHeight /= aspectRatio\n\t\t\t}\n\t\t}\n\n\t\treturn resizeBox(shape, info, { minWidth, minHeight })\n\t}\n\n\toverride component(shape: TLEmbedShape) {\n\t\tconst { w, h, url } = shape.props\n\t\tconst isEditing = useIsEditing(shape.id)\n\t\tconst embedInfo = useMemo(() => getEmbedInfoUnsafely(url), [url])\n\n\t\tconst isHoveringWhileEditingSameShape = useValue(\n\t\t\t'is hovering',\n\t\t\t() => {\n\t\t\t\tconst { editingShapeId, hoveredShapeId } = this.editor.getCurrentPageState()\n\n\t\t\t\tif (editingShapeId && hoveredShapeId !== editingShapeId) {\n\t\t\t\t\tconst editingShape = this.editor.getShape(editingShapeId)\n\t\t\t\t\tif (editingShape && this.editor.isShapeOfType<TLEmbedShape>(editingShape, 'embed')) {\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn false\n\t\t\t},\n\t\t\t[]\n\t\t)\n\n\t\tconst pageRotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\tconst isInteractive = isEditing || isHoveringWhileEditingSameShape\n\n\t\tif (embedInfo?.definition.type === 'github_gist') {\n\t\t\tconst idFromGistUrl = embedInfo.url.split('/').pop()\n\t\t\tif (!idFromGistUrl) throw Error('No gist id!')\n\n\t\t\treturn (\n\t\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t\t<Gist\n\t\t\t\t\t\tid={idFromGistUrl}\n\t\t\t\t\t\twidth={toDomPrecision(w)!}\n\t\t\t\t\t\theight={toDomPrecision(h)!}\n\t\t\t\t\t\tisInteractive={isInteractive}\n\t\t\t\t\t\tpageRotation={pageRotation}\n\t\t\t\t\t/>\n\t\t\t\t</HTMLContainer>\n\t\t\t)\n\t\t}\n\n\t\tconst sandbox = getSandboxPermissions({\n\t\t\t...embedShapePermissionDefaults,\n\t\t\t...(embedInfo?.definition.overridePermissions ?? {}),\n\t\t})\n\n\t\treturn (\n\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t{embedInfo?.definition ? (\n\t\t\t\t\t<iframe\n\t\t\t\t\t\tclassName=\"tl-embed\"\n\t\t\t\t\t\tsandbox={sandbox}\n\t\t\t\t\t\tsrc={embedInfo.embedUrl}\n\t\t\t\t\t\twidth={toDomPrecision(w)}\n\t\t\t\t\t\theight={toDomPrecision(h)}\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\tframeBorder=\"0\"\n\t\t\t\t\t\treferrerPolicy=\"no-referrer-when-downgrade\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: 0,\n\t\t\t\t\t\t\tpointerEvents: isInteractive ? 'auto' : 'none',\n\t\t\t\t\t\t\t// Fix for safari <https://stackoverflow.com/a/49150908>\n\t\t\t\t\t\t\tzIndex: isInteractive ? '' : '-1',\n\t\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t\t\tborderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,\n\t\t\t\t\t\t\tbackground: embedInfo?.definition.backgroundColor,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\toverride indicator(shape: TLEmbedShape) {\n\t\tconst embedInfo = useMemo(() => getEmbedInfo(shape.props.url), [shape.props.url])\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx={embedInfo?.definition.overrideOutlineRadius ?? 8}\n\t\t\t\try={embedInfo?.definition.overrideOutlineRadius ?? 8}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nfunction Gist({\n\tid,\n\tfile,\n\tisInteractive,\n\twidth,\n\theight,\n\tstyle,\n\tpageRotation,\n}: {\n\tid: string\n\tfile?: string\n\tisInteractive: boolean\n\twidth: number\n\theight: number\n\tpageRotation: number\n\tstyle?: React.CSSProperties\n}) {\n\treturn (\n\t\t<iframe\n\t\t\tclassName=\"tl-embed\"\n\t\t\tdraggable={false}\n\t\t\twidth={toDomPrecision(width)}\n\t\t\theight={toDomPrecision(height)}\n\t\t\tframeBorder=\"0\"\n\t\t\tscrolling=\"no\"\n\t\t\tseamless\n\t\t\treferrerPolicy=\"no-referrer-when-downgrade\"\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tpointerEvents: isInteractive ? 'all' : 'none',\n\t\t\t\t// Fix for safari <https://stackoverflow.com/a/49150908>\n\t\t\t\tzIndex: isInteractive ? '' : '-1',\n\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t}}\n\t\t\tsrcDoc={`\n\t\t\t<html>\n\t\t\t\t<head>\n\t\t\t\t\t<base target=\"_blank\">\n\t\t\t\t</head>\n\t\t\t\t<body>\n\t\t\t\t\t<script src=${`https://gist.github.com/${id}.js${file ? `?file=${file}` : ''}`}></script>\n\t\t\t\t\t<style type=\"text/css\">\n\t\t\t\t\t\t* { margin: 0px; }\n\t\t\t\t\t\ttable { height: 100%; background-color: red; }\n\t\t\t\t\t\t.gist { background-color: none; height: 100%;  }\n\t\t\t\t\t\t.gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }\n\t\t\t\t\t</style>\n\t\t\t\t</body>\n\t\t\t</html>`}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/lib/shapes/frame/FrameShapeTool.js

@@ -0,0 +1,66 @@
+"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 FrameShapeTool_exports = {};
+__export(FrameShapeTool_exports, {
+  FrameShapeTool: () => FrameShapeTool
+});
+module.exports = __toCommonJS(FrameShapeTool_exports);
+var import_editor = require("@bigbluebutton/editor");
+class FrameShapeTool extends import_editor.BaseBoxShapeTool {
+  static id = "frame";
+  static initial = "idle";
+  shapeType = "frame";
+  onCreate = (shape) => {
+    if (!shape)
+      return;
+    const bounds = this.editor.getShapePageBounds(shape);
+    const shapesToAddToFrame = [];
+    const ancestorIds = this.editor.getShapeAncestors(shape).map((shape2) => shape2.id);
+    this.editor.getCurrentPageShapes().map((pageShape) => {
+      if (pageShape.id === shape.id)
+        return;
+      if (pageShape.isLocked)
+        return;
+      const pageShapeBounds = this.editor.getShapePageBounds(pageShape);
+      if (!pageShapeBounds)
+        return;
+      if (bounds.contains(pageShapeBounds)) {
+        if (canEnclose(pageShape, ancestorIds, shape)) {
+          shapesToAddToFrame.push(pageShape.id);
+        }
+      }
+    });
+    this.editor.reparentShapes(shapesToAddToFrame, shape.id);
+    if (this.editor.getInstanceState().isToolLocked) {
+      this.editor.setCurrentTool("frame");
+    } else {
+      this.editor.setCurrentTool("select.idle");
+    }
+  };
+}
+function canEnclose(shape, ancestorIds, frame) {
+  if (ancestorIds.includes(shape.id)) {
+    return false;
+  }
+  if (shape.parentId === frame.parentId) {
+    return true;
+  }
+  return false;
+}
+//# sourceMappingURL=FrameShapeTool.js.map

package/dist-cjs/lib/shapes/frame/FrameShapeTool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/frame/FrameShapeTool.ts"],
+  "sourcesContent": ["import { BaseBoxShapeTool, TLShape, TLShapeId } from '@bigbluebutton/editor'\n\n/** @public */\nexport class FrameShapeTool extends BaseBoxShapeTool {\n\tstatic override id = 'frame'\n\tstatic override initial = 'idle'\n\toverride shapeType = 'frame'\n\n\toverride onCreate = (shape: TLShape | null): void => {\n\t\tif (!shape) return\n\n\t\tconst bounds = this.editor.getShapePageBounds(shape)!\n\t\tconst shapesToAddToFrame: TLShapeId[] = []\n\t\tconst ancestorIds = this.editor.getShapeAncestors(shape).map((shape) => shape.id)\n\n\t\tthis.editor.getCurrentPageShapes().map((pageShape) => {\n\t\t\t// We don't want to frame the frame itself\n\t\t\tif (pageShape.id === shape.id) return\n\t\t\tif (pageShape.isLocked) return\n\n\t\t\tconst pageShapeBounds = this.editor.getShapePageBounds(pageShape)\n\t\t\tif (!pageShapeBounds) return\n\n\t\t\t// Frame shape encloses page shape\n\t\t\tif (bounds.contains(pageShapeBounds)) {\n\t\t\t\tif (canEnclose(pageShape, ancestorIds, shape)) {\n\t\t\t\t\tshapesToAddToFrame.push(pageShape.id)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\tthis.editor.reparentShapes(shapesToAddToFrame, shape.id)\n\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.editor.setCurrentTool('frame')\n\t\t} else {\n\t\t\tthis.editor.setCurrentTool('select.idle')\n\t\t}\n\t}\n}\n\n/** @internal */\nfunction canEnclose(shape: TLShape, ancestorIds: TLShapeId[], frame: TLShape): boolean {\n\t// We don't want to pull in shapes that are ancestors of the frame (can create a cycle)\n\tif (ancestorIds.includes(shape.id)) {\n\t\treturn false\n\t}\n\t// We only want to pull in shapes that are siblings of the frame\n\tif (shape.parentId === frame.parentId) {\n\t\treturn true\n\t}\n\treturn false\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAqD;AAG9C,MAAM,uBAAuB,+BAAiB;AAAA,EACpD,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EACjB,YAAY;AAAA,EAEZ,WAAW,CAAC,UAAgC;AACpD,QAAI,CAAC;AAAO;AAEZ,UAAM,SAAS,KAAK,OAAO,mBAAmB,KAAK;AACnD,UAAM,qBAAkC,CAAC;AACzC,UAAM,cAAc,KAAK,OAAO,kBAAkB,KAAK,EAAE,IAAI,CAACA,WAAUA,OAAM,EAAE;AAEhF,SAAK,OAAO,qBAAqB,EAAE,IAAI,CAAC,cAAc;AAErD,UAAI,UAAU,OAAO,MAAM;AAAI;AAC/B,UAAI,UAAU;AAAU;AAExB,YAAM,kBAAkB,KAAK,OAAO,mBAAmB,SAAS;AAChE,UAAI,CAAC;AAAiB;AAGtB,UAAI,OAAO,SAAS,eAAe,GAAG;AACrC,YAAI,WAAW,WAAW,aAAa,KAAK,GAAG;AAC9C,6BAAmB,KAAK,UAAU,EAAE;AAAA,QACrC;AAAA,MACD;AAAA,IACD,CAAC;AAED,SAAK,OAAO,eAAe,oBAAoB,MAAM,EAAE;AAEvD,QAAI,KAAK,OAAO,iBAAiB,EAAE,cAAc;AAChD,WAAK,OAAO,eAAe,OAAO;AAAA,IACnC,OAAO;AACN,WAAK,OAAO,eAAe,aAAa;AAAA,IACzC;AAAA,EACD;AACD;AAGA,SAAS,WAAW,OAAgB,aAA0B,OAAyB;AAEtF,MAAI,YAAY,SAAS,MAAM,EAAE,GAAG;AACnC,WAAO;AAAA,EACR;AAEA,MAAI,MAAM,aAAa,MAAM,UAAU;AACtC,WAAO;AAAA,EACR;AACA,SAAO;AACR;",
+  "names": ["shape"]
+}

package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js

@@ -0,0 +1,234 @@
+"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 FrameShapeUtil_exports = {};
+__export(FrameShapeUtil_exports, {
+  FrameShapeUtil: () => FrameShapeUtil,
+  defaultEmptyAs: () => defaultEmptyAs
+});
+module.exports = __toCommonJS(FrameShapeUtil_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_classnames = __toESM(require("classnames"));
+var import_ShapeFill = require("../shared/ShapeFill");
+var import_createTextSvgElementFromSpans = require("../shared/createTextSvgElementFromSpans");
+var import_FrameHeading = require("./components/FrameHeading");
+function defaultEmptyAs(str, dflt) {
+  if (str.match(/^\s*$/)) {
+    return dflt;
+  }
+  return str;
+}
+class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
+  static type = "frame";
+  static props = import_editor.frameShapeProps;
+  static migrations = import_editor.frameShapeMigrations;
+  canBind = () => true;
+  canEdit = () => true;
+  getDefaultProps() {
+    return { w: 160 * 2, h: 90 * 2, name: "" };
+  }
+  getGeometry(shape) {
+    return new import_editor.Rectangle2d({
+      width: shape.props.w,
+      height: shape.props.h,
+      isFilled: false
+    });
+  }
+  component(shape) {
+    const bounds = this.editor.getShapeGeometry(shape).bounds;
+    const theme = (0, import_ShapeFill.useDefaultColorTheme)();
+    const isCreating = (0, import_editor.useValue)(
+      "is creating this shape",
+      () => {
+        const resizingState = this.editor.getStateDescendant("select.resizing");
+        if (!resizingState)
+          return false;
+        if (!resizingState.getIsActive())
+          return false;
+        const info = resizingState?.info;
+        if (!info)
+          return false;
+        return info.isCreating && this.editor.getOnlySelectedShape()?.id === shape.id;
+      },
+      [shape.id]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.SVGContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "rect",
+        {
+          className: (0, import_classnames.default)("tl-frame__body", { "tl-frame__creating": isCreating }),
+          width: bounds.width,
+          height: bounds.height,
+          fill: theme.solid,
+          stroke: theme.text
+        }
+      ) }),
+      isCreating ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_FrameHeading.FrameHeading,
+        {
+          id: shape.id,
+          name: shape.props.name,
+          width: bounds.width,
+          height: bounds.height
+        }
+      )
+    ] });
+  }
+  toSvg(shape) {
+    const theme = (0, import_editor.getDefaultColorTheme)({ isDarkMode: this.editor.user.getIsDarkMode() });
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("width", shape.props.w.toString());
+    rect.setAttribute("height", shape.props.h.toString());
+    rect.setAttribute("fill", theme.solid);
+    rect.setAttribute("stroke", theme.black.solid);
+    rect.setAttribute("stroke-width", "1");
+    rect.setAttribute("rx", "1");
+    rect.setAttribute("ry", "1");
+    g.appendChild(rect);
+    const pageRotation = (0, import_editor.canonicalizeRotation)(
+      this.editor.getShapePageTransform(shape.id).rotation()
+    );
+    const offsetRotation = pageRotation + Math.PI / 4;
+    const scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4;
+    const labelSide = ["top", "left", "bottom", "right"][Math.floor(scaledRotation)];
+    let labelTranslate;
+    switch (labelSide) {
+      case "top":
+        labelTranslate = ``;
+        break;
+      case "right":
+        labelTranslate = `translate(${(0, import_editor.toDomPrecision)(shape.props.w)}px, 0px) rotate(90deg)`;
+        break;
+      case "bottom":
+        labelTranslate = `translate(${(0, import_editor.toDomPrecision)(shape.props.w)}px, ${(0, import_editor.toDomPrecision)(
+          shape.props.h
+        )}px) rotate(180deg)`;
+        break;
+      case "left":
+        labelTranslate = `translate(0px, ${(0, import_editor.toDomPrecision)(shape.props.h)}px) rotate(270deg)`;
+        break;
+      default:
+        labelTranslate = ``;
+    }
+    const opts = {
+      fontSize: 12,
+      fontFamily: "Inter, sans-serif",
+      textAlign: "start",
+      width: shape.props.w,
+      height: 32,
+      padding: 0,
+      lineHeight: 1,
+      fontStyle: "normal",
+      fontWeight: "normal",
+      overflow: "truncate-ellipsis",
+      verticalTextAlign: "middle"
+    };
+    const spans = this.editor.textMeasure.measureTextSpans(
+      defaultEmptyAs(shape.props.name, "Frame") + String.fromCharCode(8203),
+      opts
+    );
+    const firstSpan = spans[0];
+    const lastSpan = (0, import_editor.last)(spans);
+    const labelTextWidth = lastSpan.box.w + lastSpan.box.x - firstSpan.box.x;
+    const text = (0, import_createTextSvgElementFromSpans.createTextSvgElementFromSpans)(this.editor, spans, {
+      offsetY: -opts.height - 2,
+      ...opts
+    });
+    text.style.setProperty("transform", labelTranslate);
+    const textBg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    textBg.setAttribute("x", "-8px");
+    textBg.setAttribute("y", -opts.height - 4 + "px");
+    textBg.setAttribute("width", labelTextWidth + 16 + "px");
+    textBg.setAttribute("height", `${opts.height}px`);
+    textBg.setAttribute("rx", "4px");
+    textBg.setAttribute("ry", "4px");
+    textBg.setAttribute("fill", theme.background);
+    g.appendChild(textBg);
+    g.appendChild(text);
+    return g;
+  }
+  indicator(shape) {
+    const bounds = this.editor.getShapeGeometry(shape).bounds;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "rect",
+      {
+        width: (0, import_editor.toDomPrecision)(bounds.width),
+        height: (0, import_editor.toDomPrecision)(bounds.height),
+        className: `tl-frame-indicator`
+      }
+    );
+  }
+  canReceiveNewChildrenOfType = (shape, _type) => {
+    return !shape.isLocked;
+  };
+  providesBackgroundForChildren() {
+    return true;
+  }
+  canDropShapes = (shape, _shapes) => {
+    return !shape.isLocked;
+  };
+  onDragShapesOver = (frame, shapes) => {
+    if (!shapes.every((child) => child.parentId === frame.id)) {
+      this.editor.reparentShapes(
+        shapes.map((shape) => shape.id),
+        frame.id
+      );
+      return { shouldHint: true };
+    }
+    return { shouldHint: false };
+  };
+  onDragShapesOut = (_shape, shapes) => {
+    const parent = this.editor.getShape(_shape.parentId);
+    const isInGroup = parent && this.editor.isShapeOfType(parent, "group");
+    if (isInGroup) {
+      this.editor.reparentShapes(shapes, parent.id);
+    } else {
+      this.editor.reparentShapes(shapes, this.editor.getCurrentPageId());
+    }
+  };
+  onResizeEnd = (shape) => {
+    const bounds = this.editor.getShapePageBounds(shape);
+    const children = this.editor.getSortedChildIdsForParent(shape.id);
+    const shapesToReparent = [];
+    for (const childId of children) {
+      const childBounds = this.editor.getShapePageBounds(childId);
+      if (!bounds.includes(childBounds)) {
+        shapesToReparent.push(childId);
+      }
+    }
+    if (shapesToReparent.length > 0) {
+      this.editor.reparentShapes(shapesToReparent, this.editor.getCurrentPageId());
+    }
+  };
+  onResize = (shape, info) => {
+    return (0, import_editor.resizeBox)(shape, info);
+  };
+}
+//# sourceMappingURL=FrameShapeUtil.js.map

package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/frame/FrameShapeUtil.tsx"],
+  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tGeometry2d,\n\tRectangle2d,\n\tSVGContainer,\n\tSelectionEdge,\n\tTLFrameShape,\n\tTLGroupShape,\n\tTLOnResizeEndHandler,\n\tTLOnResizeHandler,\n\tTLShape,\n\tTLShapeId,\n\tcanonicalizeRotation,\n\tframeShapeMigrations,\n\tframeShapeProps,\n\tgetDefaultColorTheme,\n\tlast,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport { useDefaultColorTheme } from '../shared/ShapeFill'\nimport { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'\nimport { FrameHeading } from './components/FrameHeading'\n\nexport function defaultEmptyAs(str: string, dflt: string) {\n\tif (str.match(/^\\s*$/)) {\n\t\treturn dflt\n\t}\n\treturn str\n}\n\n/** @public */\nexport class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {\n\tstatic override type = 'frame' as const\n\tstatic override props = frameShapeProps\n\tstatic override migrations = frameShapeMigrations\n\n\toverride canBind = () => true\n\n\toverride canEdit = () => true\n\n\toverride getDefaultProps(): TLFrameShape['props'] {\n\t\treturn { w: 160 * 2, h: 90 * 2, name: '' }\n\t}\n\n\toverride getGeometry(shape: TLFrameShape): Geometry2d {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: false,\n\t\t})\n\t}\n\n\toverride component(shape: TLFrameShape) {\n\t\tconst bounds = this.editor.getShapeGeometry(shape).bounds\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst theme = useDefaultColorTheme()\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst isCreating = useValue(\n\t\t\t'is creating this shape',\n\t\t\t() => {\n\t\t\t\tconst resizingState = this.editor.getStateDescendant('select.resizing')\n\t\t\t\tif (!resizingState) return false\n\t\t\t\tif (!resizingState.getIsActive()) return false\n\t\t\t\tconst info = (resizingState as typeof resizingState & { info: { isCreating: boolean } })\n\t\t\t\t\t?.info\n\t\t\t\tif (!info) return false\n\t\t\t\treturn info.isCreating && this.editor.getOnlySelectedShape()?.id === shape.id\n\t\t\t},\n\t\t\t[shape.id]\n\t\t)\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SVGContainer>\n\t\t\t\t\t<rect\n\t\t\t\t\t\tclassName={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}\n\t\t\t\t\t\twidth={bounds.width}\n\t\t\t\t\t\theight={bounds.height}\n\t\t\t\t\t\tfill={theme.solid}\n\t\t\t\t\t\tstroke={theme.text}\n\t\t\t\t\t/>\n\t\t\t\t</SVGContainer>\n\t\t\t\t{isCreating ? null : (\n\t\t\t\t\t<FrameHeading\n\t\t\t\t\t\tid={shape.id}\n\t\t\t\t\t\tname={shape.props.name}\n\t\t\t\t\t\twidth={bounds.width}\n\t\t\t\t\t\theight={bounds.height}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)\n\t}\n\n\toverride toSvg(shape: TLFrameShape): SVGElement | Promise<SVGElement> {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\tconst g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\n\t\tconst rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\n\t\trect.setAttribute('width', shape.props.w.toString())\n\t\trect.setAttribute('height', shape.props.h.toString())\n\t\trect.setAttribute('fill', theme.solid)\n\t\trect.setAttribute('stroke', theme.black.solid)\n\t\trect.setAttribute('stroke-width', '1')\n\t\trect.setAttribute('rx', '1')\n\t\trect.setAttribute('ry', '1')\n\t\tg.appendChild(rect)\n\n\t\t// Text label\n\t\tconst pageRotation = canonicalizeRotation(\n\t\t\tthis.editor.getShapePageTransform(shape.id)!.rotation()\n\t\t)\n\t\t// rotate right 45 deg\n\t\tconst offsetRotation = pageRotation + Math.PI / 4\n\t\tconst scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4\n\t\tconst labelSide: SelectionEdge = (['top', 'left', 'bottom', 'right'] as const)[\n\t\t\tMath.floor(scaledRotation)\n\t\t]\n\n\t\tlet labelTranslate: string\n\t\tswitch (labelSide) {\n\t\t\tcase 'top':\n\t\t\t\tlabelTranslate = ``\n\t\t\t\tbreak\n\t\t\tcase 'right':\n\t\t\t\tlabelTranslate = `translate(${toDomPrecision(shape.props.w)}px, 0px) rotate(90deg)`\n\t\t\t\tbreak\n\t\t\tcase 'bottom':\n\t\t\t\tlabelTranslate = `translate(${toDomPrecision(shape.props.w)}px, ${toDomPrecision(\n\t\t\t\t\tshape.props.h\n\t\t\t\t)}px) rotate(180deg)`\n\t\t\t\tbreak\n\t\t\tcase 'left':\n\t\t\t\tlabelTranslate = `translate(0px, ${toDomPrecision(shape.props.h)}px) rotate(270deg)`\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tlabelTranslate = ``\n\t\t}\n\n\t\t// Truncate with ellipsis\n\t\tconst opts = {\n\t\t\tfontSize: 12,\n\t\t\tfontFamily: 'Inter, sans-serif',\n\t\t\ttextAlign: 'start' as const,\n\t\t\twidth: shape.props.w,\n\t\t\theight: 32,\n\t\t\tpadding: 0,\n\t\t\tlineHeight: 1,\n\t\t\tfontStyle: 'normal',\n\t\t\tfontWeight: 'normal',\n\t\t\toverflow: 'truncate-ellipsis' as const,\n\t\t\tverticalTextAlign: 'middle' as const,\n\t\t}\n\n\t\tconst spans = this.editor.textMeasure.measureTextSpans(\n\t\t\tdefaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203),\n\t\t\topts\n\t\t)\n\n\t\tconst firstSpan = spans[0]\n\t\tconst lastSpan = last(spans)!\n\t\tconst labelTextWidth = lastSpan.box.w + lastSpan.box.x - firstSpan.box.x\n\t\tconst text = createTextSvgElementFromSpans(this.editor, spans, {\n\t\t\toffsetY: -opts.height - 2,\n\t\t\t...opts,\n\t\t})\n\t\ttext.style.setProperty('transform', labelTranslate)\n\n\t\tconst textBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\n\t\ttextBg.setAttribute('x', '-8px')\n\t\ttextBg.setAttribute('y', -opts.height - 4 + 'px')\n\t\ttextBg.setAttribute('width', labelTextWidth + 16 + 'px')\n\t\ttextBg.setAttribute('height', `${opts.height}px`)\n\t\ttextBg.setAttribute('rx', 4 + 'px')\n\t\ttextBg.setAttribute('ry', 4 + 'px')\n\t\ttextBg.setAttribute('fill', theme.background)\n\n\t\tg.appendChild(textBg)\n\t\tg.appendChild(text)\n\n\t\treturn g\n\t}\n\n\tindicator(shape: TLFrameShape) {\n\t\tconst bounds = this.editor.getShapeGeometry(shape).bounds\n\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(bounds.width)}\n\t\t\t\theight={toDomPrecision(bounds.height)}\n\t\t\t\tclassName={`tl-frame-indicator`}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride canReceiveNewChildrenOfType = (shape: TLShape, _type: TLShape['type']) => {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canDropShapes = (shape: TLFrameShape, _shapes: TLShape[]): boolean => {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride onDragShapesOver = (frame: TLFrameShape, shapes: TLShape[]): { shouldHint: boolean } => {\n\t\tif (!shapes.every((child) => child.parentId === frame.id)) {\n\t\t\tthis.editor.reparentShapes(\n\t\t\t\tshapes.map((shape) => shape.id),\n\t\t\t\tframe.id\n\t\t\t)\n\t\t\treturn { shouldHint: true }\n\t\t}\n\t\treturn { shouldHint: false }\n\t}\n\n\toverride onDragShapesOut = (_shape: TLFrameShape, shapes: TLShape[]): void => {\n\t\tconst parent = this.editor.getShape(_shape.parentId)\n\t\tconst isInGroup = parent && this.editor.isShapeOfType<TLGroupShape>(parent, 'group')\n\n\t\t// If frame is in a group, keep the shape\n\t\t// moved out in that group\n\n\t\tif (isInGroup) {\n\t\t\tthis.editor.reparentShapes(shapes, parent.id)\n\t\t} else {\n\t\t\tthis.editor.reparentShapes(shapes, this.editor.getCurrentPageId())\n\t\t}\n\t}\n\n\toverride onResizeEnd: TLOnResizeEndHandler<TLFrameShape> = (shape) => {\n\t\tconst bounds = this.editor.getShapePageBounds(shape)!\n\t\tconst children = this.editor.getSortedChildIdsForParent(shape.id)\n\n\t\tconst shapesToReparent: TLShapeId[] = []\n\n\t\tfor (const childId of children) {\n\t\t\tconst childBounds = this.editor.getShapePageBounds(childId)!\n\t\t\tif (!bounds.includes(childBounds)) {\n\t\t\t\tshapesToReparent.push(childId)\n\t\t\t}\n\t\t}\n\n\t\tif (shapesToReparent.length > 0) {\n\t\t\tthis.editor.reparentShapes(shapesToReparent, this.editor.getCurrentPageId())\n\t\t}\n\t}\n\n\toverride onResize: TLOnResizeHandler<any> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["classNames"]
+}