CODEWITHSUNDEEP
openseadragoniiifmirador
gramm
gramm

Reputation: 41

Mirador 3 - display windows as columns

When adding windows to mirador, they are displayed in a mosaic of increasingly small images. For example here with three windows. mosaic display 1

The windows are draggable and resizable, but I would like to have directly this sort of display: mosaic display 2

In mirador 2 I have seen a slotAddress option. Is there a way to do that as well with mirador 3?

This is an example with three images but there could be up to 6 or 7, I don't know that in advance.

EDIT I have found an example here where the workspace layout is customized. I would have to adapt it depending on the actual number of windows. Where do the first/second options come from? Does it need to be a combination of first and second? Can I had 'third' or 'fourth' for instance?? Any help welcome!

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
}

}

Upvotes: 0

Views: 128

Answers (1)

Jack
Jack

Reputation: 565

The Mirador 3 layout is a binary tree data structure, allowing for a powerful way to customize the layout. first and second just references to the nodes in the branch of the tree, and the ordering implied by first/second is used with the split percentage.

These types are defined upstream in https://github.com/nomcopter/react-mosaic/blob/master/src/types.ts#L12

There is no concept of third/fourth here. To achieve the layout you are looking for you would want to represent the the equal column widths as a binary tree structure like this:

Example 6 columns

    "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)
    }

Upvotes: 0

Related Questions