Update TLdraw to 2.2.0 (#1762)

* all api changes fixed (i think), bugs and styling to fix though

* languages work again

* deleting icons on background change + fixed style panel thing

* all features should be working and updated

* ran prettier on Planner.tsx

* fixed backgrounds not being deleted + undoing works now after changing background

* ran prettier

* removed an outdated comment

app/features/map-planner/components/Planner.tsx

@@ -1,5 +1,19 @@
-import { ColorStyle, TDAssetType, TDShapeType, Tldraw } from "@tldraw/tldraw";
-import type { TDImageAsset, TldrawApp } from "@tldraw/tldraw";
+import {
+  AssetRecordType,
+  DefaultQuickActions,
+  DefaultStylePanel,
+  DefaultZoomMenu,
+  Tldraw,
+  createShapeId,
+} from "@tldraw/tldraw";
+import type {
+  Editor,
+  TLAssetId,
+  TLComponents,
+  TLImageAsset,
+  TLShapeId,
+  TLUiStylePanelProps,
+} from "@tldraw/tldraw";
 import randomInt from "just-random-integer";
 import * as React from "react";
 import { usePlannerBg } from "~/hooks/usePlannerBg";
@@ -12,7 +26,6 @@ import {
   weaponCategories,
 } from "~/modules/in-game-lists";
 import { modesShort } from "~/modules/in-game-lists/modes";
-import { semiRandomId } from "~/utils/strings";
 import {
   mainWeaponImageUrl,
   outlinedMainWeaponImageUrl,
@@ -33,16 +46,14 @@ export default function Planner() {
   const { i18n } = useTranslation();
   const plannerBgParams = usePlannerBg();
 
-  const [app, setApp] = React.useState<TldrawApp | null>(null);
+  const [editor, setEditor] = React.useState<Editor | null>(null);
 
   const handleMount = React.useCallback(
-    (mountedApp: TldrawApp) => {
-      setApp(mountedApp);
-      mountedApp.setSetting(
-        "language",
-        ourLanguageToTldrawLanguage(i18n.language),
-      );
-      mountedApp.style({ color: ColorStyle.Red });
+    (mountedEditor: Editor) => {
+      setEditor(mountedEditor);
+      mountedEditor.user.updateUserPreferences({
+        locale: ourLanguageToTldrawLanguage(i18n.language),
+      });
     },
     [i18n],
   );
@@ -61,37 +72,50 @@ export default function Planner() {
       point: number[];
       cb?: () => void;
     }) => {
-      if (!app) return;
-
-      const asset: TDImageAsset = {
-        id: src,
-        type: TDAssetType.Image,
-        fileName: "img",
-        src,
-        size,
-      };
+      if (!editor) return;
 
       // tldraw creator:
       // "So image shapes in tldraw work like this: we add an asset to the app.assets table, then we reference that asset in the shape object itself.
       // This lets us have multiple copies of an image on the canvas without having all of those take up memory individually"
+      const assetId: TLAssetId = AssetRecordType.createId();
 
-      app.insertContent({
-        assets: [asset],
-        shapes: [],
-      });
+      // idk if this is the best solution, but it was the example given and it seems to cope well with lots of shapes at once
+      const imageAsset: TLImageAsset = {
+        id: assetId,
+        type: "image",
+        typeName: "asset",
+        props: {
+          name: "img",
+          src: src,
+          w: size[0],
+          h: size[1],
+          mimeType: null,
+          isAnimated: false,
+        },
+        meta: {},
+      };
+
+      editor.createAssets([imageAsset]);
+
+      const shapeId: TLShapeId = createShapeId();
+
+      const shape = {
+        type: "image",
+        x: point[0],
+        y: point[1],
+        isLocked: isLocked,
+        id: shapeId,
+        props: {
+          assetId: assetId,
+          w: size[0],
+          h: size[1],
+        },
+      };
+      editor.createShape(shape);
 
-      app.createShapes({
-        id: semiRandomId(),
-        type: TDShapeType.Image,
-        assetId: src,
-        size,
-        isAspectRatioLocked: true,
-        isLocked,
-        point,
-      });
       cb?.();
     },
-    [app],
+    [editor],
   );
 
   const handleAddWeapon = React.useCallback(
@@ -133,11 +157,11 @@ export default function Planner() {
           randomInt(imageSpawnBoxLeft, imageSpawnBoxRight),
           randomInt(imageSpawnBoxTop, imageSpawnBoxBottom),
         ],
-        cb: () => app?.selectTool("select"),
+        cb: () => editor?.setCurrentTool("select"),
       });
     },
     [
-      app,
+      editor,
       handleAddImage,
       plannerBgParams.bgHeight,
       plannerBgParams.bgWidth,
@@ -152,8 +176,17 @@ export default function Planner() {
       mode: ModeShort;
       style: StageBackgroundStyle;
     }) => {
-      if (!app) return;
-      app.resetDocument();
+      if (!editor) return;
+
+      editor.mark("pre-background-change");
+
+      const shapes = editor.getCurrentPageShapes();
+      // i dont think locked shapes can be deleted
+      shapes.forEach((value) => {
+        editor.updateShape({ id: value.id, type: value.type, isLocked: false });
+      });
+      editor.deleteShapes(shapes);
+
       handleAddImage({
         src: stageMinimapImageUrlWithEnding(urlArgs),
         size: [plannerBgParams.bgWidth, plannerBgParams.bgHeight],
@@ -162,7 +195,7 @@ export default function Planner() {
       });
     },
     [
-      app,
+      editor,
       handleAddImage,
       plannerBgParams.bgHeight,
       plannerBgParams.bgWidth,
@@ -171,6 +204,27 @@ export default function Planner() {
     ],
   );
 
+  // removes all tldraw ui that isnt needed
+  const tldrawComponents: TLComponents = {
+    ActionsMenu: null,
+    ContextMenu: null,
+    DebugMenu: null,
+    DebugPanel: null,
+    HelperButtons: null,
+    HelpMenu: null,
+    KeyboardShortcutsDialog: null,
+    MainMenu: null,
+    MenuPanel: null,
+    Minimap: null,
+    NavigationPanel: null,
+    PageMenu: null,
+    QuickActions: null,
+    SharePanel: null,
+    StylePanel: CustomStylePanel,
+    TopPanel: null,
+    ZoomMenu: null,
+  };
+
   return (
     <>
       <StageBackgroundSelector onAddBackground={handleAddBackgroundImage} />
@@ -180,11 +234,34 @@ export default function Planner() {
           {t("common:plans.poweredBy", { name: "tldraw" })}
         </a>
       </div>
-      <Tldraw id="sendou" showMultiplayerMenu={false} onMount={handleMount} />
+      <div style={{ position: "fixed", inset: 0 }}>
+        <Tldraw
+          onMount={handleMount}
+          components={tldrawComponents}
+          inferDarkMode
+        />
+      </div>
     </>
   );
 }
 
+// Formats the style panel so it can have classnames, this is needed so it can be moved below the header bar which blocks clicks (idk why this is different to the old version), also needed to format the quick actions bar and zoom menu nicely
+function CustomStylePanel(props: TLUiStylePanelProps) {
+  return (
+    <div className="plans__style-panel">
+      <DefaultStylePanel {...props} />
+      <div className="plans__zoom-quick-actions">
+        <div className="plans__quick-actions">
+          <DefaultQuickActions />
+        </div>
+        <div className="plans__zoom-menu">
+          <DefaultZoomMenu />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function WeaponImageSelector({
   handleAddWeapon,
 }: {

app/features/map-planner/plans.css

@@ -1,5 +1,6 @@
 /* https://github.com/tldraw/tldraw/blob/2352985e949d14270fc89dc60144239c37c8ff91/packages/tldraw/src/hooks/useStylesheet.ts */
 @import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block");
+@import url("tldraw/tldraw.css");
 
 @font-face {
   font-family: "Recursive";
@@ -138,3 +139,25 @@ button[data-state="closed"][aria-haspopup="dialog"] {
   color: var(--theme-error);
   font-size: var(--fonts-xs);
 }
+
+.plans__style-panel {
+  position: fixed;
+  z-index: 10;
+  margin-top: 50px;
+}
+
+.plans__zoom-quick-actions {
+  position: absolute;
+  z-index: 10;
+  display: block;
+}
+
+.plans__zoom-menu {
+  position: absolute;
+  right: 0;
+}
+
+.plans__quick-actions {
+  display: flex;
+  right: 0;
+}

package.json

@@ -43,7 +43,7 @@
     "@remix-run/node": "^2.9.2",
     "@remix-run/react": "^2.9.2",
     "@remix-run/serve": "^2.9.2",
-    "@tldraw/tldraw": "^1.29.2",
+    "@tldraw/tldraw": "^2.2.0",
     "aws-sdk": "^2.1642.0",
     "better-sqlite3": "^11.0.0",
     "clsx": "^2.1.1",