Mirador 3 - 将窗口显示为列答案

【问题标题】：Mirador 3 - display windows as columnsMirador 3 - 将窗口显示为列
【发布时间】：2022-10-15 19:37:32
【问题描述】：

在向 mirador 添加窗口时，它们会显示为越来越小的图像马赛克。例如这里有三个窗口。

窗口是可拖动和调整大小的，但我想直接有这种显示：

在 mirador 2 中，我看到了 slotAddress 选项。 mirador 3有没有办法做到这一点？

这是一个包含三个图像的示例，但最多可能有 6 个或 7 个，我事先不知道。

编辑我找到了 an example here 自定义工作区布局的地方。我将不得不根据实际的窗口数量来调整它。第一个/第二个选项来自哪里？它需要是第一和第二的组合吗？例如，我可以有“第三”或“第四”吗？欢迎任何帮助！

workspace: {
layout: {
  direction: "row",
  first: {
    first: "a",
    second: "d",
    direction: "column"
  },
  second: {
    first: {
      first: "b",
      second: "e",
      direction: "column"
    },
    second: {
      first: "c",
      second: "f",
      direction: "column"
    },
    direction: "row"
  },
  splitPercentage: 33.33
}

}

【问题讨论】：

标签： openseadragon iiif mirador

【解决方案1】：

Mirador 3 布局是一种二叉树数据结构，提供了一种自定义布局的强大方式。 first 和 second 只是引用树分支中的节点，first/second 隐含的排序与拆分百分比一起使用。

这些类型在https://github.com/nomcopter/react-mosaic/blob/master/src/types.ts#L12 上游定义

这里没有third/fourth的概念。要实现您正在寻找的布局，您需要将相等的列宽表示为二叉树结构，如下所示：

示例 6 列

    "layout": {
      "first": {
        "first": "a",
        "second": "b",
        "direction": "row"
      },
      "second": {
        "first": "c",
        "second": {
          "first": "d",
          "second": {
            "first": "e",
            "second": "f",
            "direction": "row",
            "splitPercentage": 50 // Last two nodes split the remaining space (note this is not required as 50 is the default)
          },
          "direction": "row",
          "splitPercentage": 33.33 // First node (d) gets 1/3 of remaining space
        },
        "direction": "row",
        "splitPercentage": 25 // First node (c) gets 1/4 of remaining space
      },
      "direction": "row",
      "splitPercentage": 33.33 // First node (a + b windows) gets 1/3 of layout space for two columns (1/3 of total columns)
    }

【讨论】：