export WebView in v2 documents

v3/src/components/web-view/web-view-registration.test.ts

@@ -0,0 +1,62 @@
+import { createCodapDocument } from "../../models/codap/create-codap-document"
+import { FreeTileRow, IFreeTileRow } from "../../models/document/free-tile-row"
+import { getTileComponentInfo } from "../../models/tiles/tile-component-info"
+import { getTileContentInfo } from "../../models/tiles/tile-content-info"
+import { getSharedModelManager } from "../../models/tiles/tile-environment"
+import { ITileModelSnapshotIn } from "../../models/tiles/tile-model"
+import { safeJsonParse } from "../../utilities/js-utils"
+import { CodapV2Document } from "../../v2/codap-v2-document"
+import { exportV2Component } from "../../v2/codap-v2-tile-exporters"
+import { importV2Component } from "../../v2/codap-v2-tile-importers"
+import { ICodapV2DocumentJson, ICodapV2WebViewStorage } from "../../v2/codap-v2-types"
+import { kWebViewTileType } from "./web-view-defs"
+import { isWebViewModel } from "./web-view-model"
+import "./web-view-registration"
+
+const path = require("path")
+const fs = require("fs")
+
+describe("WebView registration", () =>  {
+  it("registers content and component info", () => {
+    const contentInfo = getTileContentInfo(kWebViewTileType)
+    expect(contentInfo).toBeDefined()
+    expect(getTileComponentInfo(kWebViewTileType)).toBeDefined()
+    const defaultContent = contentInfo?.defaultContent()
+    expect(defaultContent).toBeDefined();
+  })
+
+  it("imports/exports v2 web view components", () => {
+    // Note: when a image is dropped on CODAPv2 it makes a DG.ImageComponentView not a
+    // DG.WebView. This file was manually modified so the component is a DG.WebView
+    const file = path.join(__dirname, "../../test/v2", "web-view-image.codap")
+    const json = fs.readFileSync(file, "utf8")
+    const doc = safeJsonParse<ICodapV2DocumentJson>(json)!
+    const v2Document = new CodapV2Document(doc)
+
+    const codapDoc = createCodapDocument()
+    const docContent = codapDoc.content!
+    docContent.setRowCreator(() => FreeTileRow.create())
+    const sharedModelManager = getSharedModelManager(docContent)
+    const mockInsertTile = jest.fn((tileSnap: ITileModelSnapshotIn) => {
+      return docContent?.insertTileSnapshotInDefaultRow(tileSnap)
+    })
+
+    const tile = importV2Component({
+      v2Component: v2Document.components[0],
+      v2Document,
+      sharedModelManager,
+      insertTile: mockInsertTile
+    })!
+    expect(tile).toBeDefined()
+    expect(mockInsertTile).toHaveBeenCalledTimes(1)
+    const content = isWebViewModel(tile?.content) ? tile?.content : undefined
+    expect(getTileContentInfo(kWebViewTileType)!.getTitle(tile)).toBe("Walking Rates")
+    expect(content?.url).toBe("https://codap-resources.concord.org/images/walkingrates-50-percent.png")
+
+    const row = docContent.getRowByIndex(0) as IFreeTileRow
+    const componentExport = exportV2Component({ tile, row, sharedModelManager })
+    expect(componentExport?.type).toBe("DG.WebView")
+    const contentStorage = componentExport?.componentStorage as ICodapV2WebViewStorage
+    expect(contentStorage.URL).toBe("https://codap-resources.concord.org/images/walkingrates-50-percent.png")
+  })
+})

v3/src/components/web-view/web-view-registration.ts

@@ -7,7 +7,10 @@ import { ITileModelSnapshotIn } from "../../models/tiles/tile-model"
 import { toV3Id } from "../../utilities/codap-utils"
 import { t } from "../../utilities/translation/translate"
 import { registerV2TileImporter, V2TileImportArgs } from "../../v2/codap-v2-tile-importers"
-import { isV2WebViewComponent, isV2GameViewComponent } from "../../v2/codap-v2-types"
+import { registerV2TileExporter, V2ExportedComponent } from "../../v2/codap-v2-tile-exporters"
+import {
+  isV2WebViewComponent, isV2GameViewComponent, ICodapV2WebViewStorage, ICodapV2WebViewComponent
+} from "../../v2/codap-v2-types"
 import { kV2GameType, kV2WebViewType, kWebViewTileType } from "./web-view-defs"
 import { isWebViewModel, IWebViewSnapshot, WebViewModel } from "./web-view-model"
 import { WebViewComponent } from "./web-view"
@@ -40,6 +43,20 @@ registerTileComponentInfo({
   defaultHeight: kDefaultWebViewHeight
 })
 
+registerV2TileExporter(kWebViewTileType, ({ tile }) => {
+  // This really should be a WebView Model. We shouldn't be called unless
+  // the tile type is kWebViewTileType which is what isWebViewModel is using.
+  const webViewContent = isWebViewModel(tile.content) ? tile.content : undefined
+  const url = webViewContent?.url ?? ""
+  const v2WebView: V2ExportedComponent<ICodapV2WebViewComponent> = {
+    type: "DG.WebView",
+    componentStorage: {
+      URL: url
+    }
+  }
+  return v2WebView
+})
+
 function addWebViewSnapshot(args: V2TileImportArgs, guid: number, url?: string, state?: unknown) {
   const { v2Component, insertTile } = args
   const { name, title, userSetTitle } = v2Component.componentStorage || {}

v3/src/test/v2/web-view-image.codap

@@ -0,0 +1,38 @@
+{
+  "name": "Untitled Document",
+  "guid": 1,
+  "id": 1,
+  "components": [
+    {
+      "type": "DG.WebView",
+      "guid": 2,
+      "id": 2,
+      "componentStorage": {
+        "title": "Walking Rates",
+        "URL": "https://codap-resources.concord.org/images/walkingrates-50-percent.png",
+        "name": "https://codap-resources.concord.org/images/walkingrates-50-percent.png",
+        "userSetTitle": true,
+        "cannotClose": false
+      },
+      "layout": {
+        "left": 145,
+        "top": 90,
+        "width": 450,
+        "height": 385,
+        "zIndex": 104,
+        "isVisible": true,
+        "right": 595,
+        "bottom": 475
+      },
+      "savedHeight": null
+    }
+  ],
+  "contexts": [],
+  "globalValues": [],
+  "appName": "DG",
+  "appVersion": "2.0",
+  "appBuildNum": "0730",
+  "lang": "en",
+  "idCount": 2,
+  "metadata": {}
+}

v3/src/v2/codap-v2-tile-exporters.ts

@@ -20,6 +20,13 @@ export type V2TileExportFn = (args: V2TileExportArgs) => Maybe<V2ExporterOutput>
 // map from v2 component type to export function
 const gV2TileExporters = new Map<string, V2TileExportFn>()
 
+/**
+ * Take a v2 component type and remove the properties which
+ * exportV2Component will handle. This type is what the V2TileExportFn
+ * should return.
+ */
+export type V2ExportedComponent<ComponentType> = Omit<ComponentType, "layout" | "guid" | "id" | "savedHeight">
+
 // register a v2 exporter for the specified tile type
 export function registerV2TileExporter(tileType: string, exportFn: V2TileExportFn) {
   gV2TileExporters.set(tileType, exportFn)