microsoft / microsoft/maker.js

Captions are not drawn relative to model origin

Open
#469 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
TypeScript
Stars
2k
Forks
302
Avg merge
21h 28m
Merged PRs (30d)
5

Description

Maybe this is working as intended, but I found it surprising.

Steps to reproduce

  1. Write a script with a top-level model that includes sub-models with captions. For example:
var m = require("makerjs");

function box1() {
  return {
    paths: {},
    origin: [0, 0],
    models: {
      inner: new m.models.Rectangle(10, 10)
    },
    caption: {
      text: "B1",
      anchor: new m.paths.Line([5, 5], [5, 5])
    }
  };
}

function box2() {
  return {
    paths: {},
    origin: [11, 0],
    models: {
      inner: new m.models.Rectangle(10, 10)
    },
    caption: {
      text: "B2",
      anchor: new m.paths.Line([5, 5], [5, 5])
    }
  };
}

function main() {
  return {
    paths: {},
    models: {
      box1: box1(),
      box2: box2()
    }
  };
}

module.exports = main();
  1. Render the script in the playground or with SVG.

Expected result

Each caption is in the middle of its box.

Actual result

Captions are displayed on top of each other.

Workaround

Calling originate() on the overall model puts the captions into their proper places:

function main() {
  return originate({
    paths: {},
    models: {
      box1: box1(),
      box2: box2()
    }
  });
}

Commentary

I think this is very confusing, considering everything else is drawn relative to the model's origin.

If I put the caption in its own sub-model, then it works as I expected:

function box2() {
  return {
    paths: {},
    origin: [11, 0],
    models: {
      inner: new m.models.Rectangle(10, 10),
      cap: {
        caption: {
          text: "B2",
          anchor: new m.paths.Line([5, 5], [5, 5])
        }
      }
    }
  };
}

Is this the intended use case? If so addCaption is a little weird for not doing it that way.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the nested box example in the playground or with SVG, comparing direct captions with the sub-model workaround. Start by tracing caption handling around addCaption and model positioning, then verify that each caption follows its containing model origin without requiring originate().

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.