javascript - 动态设置 `grid-template-areas` 的问题

Question

背景:我正在用 vanilla JS 编写一个应用程序，它可以动态生成和更新 CSS 网格属性。特别是，我对动态设置 grid-template-areas 很感兴趣。这个例子可能会很复杂，所以 here's a CodeSandbox link to the current state of the project .

---

预期行为:我能够在初始渲染时设置这些属性，没有任何问题。代码看起来像这样:

function GridMap(targetElement, { 
    aspectWidth, 
    aspectHeight, 
    density, 
    defaultTrackName = `x` 
}) {

    /* output: [`x x`, `x x`] */
    this.areaMap = Array.from(
        Array(aspectHeight)
            .map(() => `${defaultTrackName} `
                .repeat(aspectWidth)
                .trim()
            )
    )

    /* assign CSS grid properties to target element */
    this.targetElement.style.display = `grid`
    this.targetElement.style.gridTemplateAreas = this.areaMap
        .map(row => `"${row}"`) // output: [`"x x"`, `"x x"`]
        .join(` `) // output: `"x x" " x x"`
}

const target = document.getElementById(`target`)
const grid = new GridMap(target, {
    aspectWidth: 2,
    aspectHeight: 2,
    density: 1,
})

这会产生以下元素:

<div id="target" style="display: grid; grid-template-areas: "x x" "x x";"></div>

---

问题:以上代码在初始渲染 上有效。它将生成一个正确的元素，就像我上面显示的那样。但是当我之后尝试使用不同的(动态生成的)属性来执行此操作时，该元素不会得到更新。从这一点开始，很难隔离代码来给出一个很好的例子，所以 here's the project so far on CodeSandbox .这是有问题的代码的样子:

function Entity({ trackName, shape }) {
  this.trackName = trackName
  this.shape = shape
    .split(`\n`)
    .filter(track => track)
    .map(track => track.trim())
    .filter(track => track)
}

grid.placeEntity = function placeEntity(
    { x = 0, y = 0 },
    { shape, trackName },
  ) {
    let currentEntityRow = 0

    grid.areaMap = grid.areaMap.map((row, i) => {
      if (currentEntityRow < shape.length) {
        if (i >= y) {
          row = row.split(` `)
          row.splice(
            x,
            shape[currentEntityRow].split(` `).length,
            ...shape[currentEntityRow].split(` `).map(() => trackName),
          )

          row = row.join(` `)
          currentEntityRow += 1
        }
      }

      return row
    })

    grid.update()
}

const entity = new Entity({
    trackName: `entity`,
    shape: `
        o o
        o
    `
})

grid.placeEntity({ x = 1, y = 1 }, entity)

查看我的 CodeSandbox example 中的控制台输出，您会看到确实生成了新的 grid.areaMap。但出于某种原因，当尝试通过 grid.placeEntity() 更新它时，更新不会反射(reflect)在新呈现的元素中。

---

我尝试过的:

• 摆脱整个 grid.placeEntity 调用并:
  • ...直接将 element.style.gridTemplateAreas 设置为类似 "foo bar""hello world" 的简单内容。 这按预期工作。
  • ...直接将 element.style.gridTemplateAreas 设置为我在上面的示例中生成的完全相同的字符串。 这不起作用!这告诉我生成 grid.areaMap 的方式存在问题，但我无法指出该问题。

Answer 1

我发现了问题:命名的 CSS 网格轨道必须始终相邻并且必须始终形成一个矩形。 Example here :

#grid {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(4, 100px);

  /* this isn't valid CSS */
  grid-template-areas:
    'entity-1 entity-2'
    'entity-2 entity-4';

  /* this is valid */
  grid-template-areas:
     'entity-1 entity-2'
     'entity-3 entity-4';
}

有道理，但就这个元素试图做的事情而言有点糟透了。我确信这里可以找到解决方法!