Zoom messes with display flex

[SingularisArt]

When I wrap my div with the Zoom tag, it messes with the width and height. Here's a picture with and without the element:

Here's the code snippets:

      <Grid container spacing={2} className="card-grid">
        {data[currentWeek] &&
          data[currentWeek].map((card, index) => (
            <Grid item key={index} xs={12} sm={6} md={6} lg={4}>
              <Zoom zoomMargin={50}>
                <div className="card">
                  <div className="card-title">
                    {card.title}
                  </div>
                  <div className="card-content">
                    <img
                      className="card-image"
                      src={`data:image/svg+xml;utf8,${encodeURIComponent(card.content || "")}`}
                      alt={card.title}
                      onContextMenu={(e) => {
                        e.preventDefault();
                        openFigure(card);
                      }}
                    />
                    <BsTrash className={`delete-icon ${deleteFigureState ? "yes-delete" : "no-delete"}`} />
                  </div>
                </div>
              </Zoom>

            </Grid>
          ))}
      </Grid>

.card {
  background-color: var(--figure-bg);
  color: var(--figure-color);
  border: none;
  display: flex;
  flex-direction: column;
}

.card-title {
  background-color: var(--figure-title-bg);
  color: var(--figure-title-color);
  padding: 5px;
  text-align: center;
  margin-bottom: -10px;
}

.card-content {
  background-color: var(--figure-content-bg);
  color: var(--figure-content-color);
  position: relative;
  padding: 10px;
  flex-grow: 1;
  margin-top: 10px;
  height: 200px;
}

.card-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.delete-icon {
  color: red;
  width: 80%;
  height: 80%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.yes-delete {
  visibility: visible;
}

.no-delete {
  visibility: hidden;
}

I'm currently using version 4.4.3 because I want to zoom in the div as well, which can't be done with any other versions according to issue #442.

Lastly, how can I disable the zoom? When the state variable editMode is true, I don't want the user to be able to click on the div and zoom in. Is there a parameter I can pass like disable or enable or something?

[SingularisArt]

Found the solution to the first issue. I also re-named all the classes:

      <Grid container spacing={2} className="figure-grid">
        {data[currentWeek] &&
          data[currentWeek].map((figure, index) => (
            <Grid item key={index} xs={12} sm={6} md={6} lg={4}>
              <Zoom zoomMargin={50}>
                <div className="figure">
                  <div className="figure-title">
                    {editMode ? (
                      <input
                        className="figure-name"
                        placeholder="Figure Name"
                        type="text"
                        spellCheck={false}
                        defaultValue={figure.title}
                        onKeyDown={(e) => {
                          if (e.key === 'Enter') {
                            const newTitle = e.currentTarget.value;
                            renameFigure(figure.title, newTitle, index);

                            e.currentTarget.value = titleText(newTitle);
                            e.currentTarget.blur();
                            setEditMode(false);
                          }
                        }}
                      />
                    ) : (
                      figure.title
                    )}
                  </div>
                  <div className="figure-content">
                    <img
                      className="figure-image"
                      src={`data:image/svg+xml;utf8,${encodeURIComponent(
                        figure.content || ''
                      )}`}
                      alt={figure.title}
                      onContextMenu={(e) => {
                        e.preventDefault();
                        openFigure(figure, index);
                      }}
                    />
                    <BsTrash
                      onClick={() => {
                        setIsDeletePopupOpen(true);
                        setDeleteFigureIndex(index);
                        setDeleteFigureIndex(index);
                      }}
                      className={`edit-figure ${editMode ? 'enable' : 'disable'
                        }`}
                    />
                  </div>
                </div>
              </Zoom>
            </Grid>
          ))}
      </Grid>

And updated the CSS accordingly:

.figure,
[data-rmiz-wrap='visible'] {
  background-color: var(--figure-bg);
  color: var(--figure-color);
  border: none;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  height: auto;
}

[data-rmiz-wrap='hidden'] {
  width: 100%;
  height: 100%;
}

.figure-title,
.figure-name {
  background-color: var(--figure-title-bg);
  color: var(--figure-title-color);
  padding: 5px;
  text-align: center;
  margin-bottom: -10px;
  border: none;
  font-size: 16px;
}

.figure-name {
  margin: -5px;
  white-space: normal;
  width: 100%;
}

.figure-name:focus {
  outline: none;
}

.figure-name:placeholder,
.create-figure-text:placeholder {
  color: var(--figure-title-placeholder);
}

.figure-grid,
[data-rmiz-wrap='visible'] {
  justify-content: center;
  align-items: stretch;
  padding-bottom: 10px;
}

.figure-content {
  background-color: var(--figure-content-bg);
  color: var(--figure-content-color);
  position: relative;
  padding: 10px;
  flex-grow: 1;
  margin-top: 10px;
  height: 200px;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.svg-content {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.figure-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

I'm still trying to figure out a solution to the second issue.

[rpearce]

@SingularisArt I'm sorry for the delay; I have been busy with children.

Regarding the sizes being messed up, that's because v4 was using display: inline-flex;, which was ultimately a mistake, but it was necessary at the time to achieve what v4 was trying to do. I went back to the original drawing board with rewriting things for v5.

To answer your second question, there are 2 ways to disable this:

1. (preferred) When it's not supposed to be enabled, don't wrap your components in <Zoom>

2. Otherwise, you can control the zoomed state yourself. The README for 4.4.3, found on https://www.npmjs.com/package/react-medium-image-zoom/v/4.4.3, shows that you can use a controlled zoom component where you control the isZoomed nature of the component.

   

   The onZoomChange callback is there to provide hints as to whether you probably should zoom the image or unzoom it. In that handleZoomChange callback, you could also include your app logic so that nothing happens. It's a little hacky, but it's there if you desperately need this.

---

All that said, this library kind of does what you're looking for, but it's not meant to do that, so it may be a weird experience, so if there's something else out there that you think you could benefit from, then do check out other projects!