Vectors are not drawn at the correct coordinates

[marvin-j97]

What it should look like:

import {
  Axes,
  Group,
  Scene,
  DrawAxes,
  Vector,
  Vector2,
  COLOR,
  Create
} from "../src/index";

/// This variable keeps track of the time goes by during the animations
/// We'll use this to control time, so don't forget to include it to your code
/// In this example, the scene has only one group, so we don't need `elapsed`
let elapsed = 0;

function graphingFunctions() {
  const scene = new Scene("graphing-functions");
  const group = new Group("graphing-group", scene);

  const axes = new Axes({
    group: group,
    CONFIG: {
      xRange: [-5, 5],
      yRange: [-5, 5],
      hasNums: true,
    },
  }).render();
  group.play([new DrawAxes(axes)]);

  const vector = new Vector({
    group,
    startPoint: new Vector2(1, 0),
    endPoint: new Vector2(1, 1),
    CONFIG: {
      lineColor: COLOR.TEAL_1,
    },
  }).render();

  group.play([new Create({ cubicon: vector })]);
}

graphingFunctions();

[imaphatduc]

Vector() and Axes() object have their own scale methods (d3-scale), because I want the users to customize axes' unit lengths but not the shared grid coordinates (which all cubicons depend on). You can include a Grid() to the scene to see this in action.

Actually, I find this a little bit annoying because I have to switch between axes and grid coordinate system every time I utilize geometry shape to axes coords (this bug happens because Vector() has not been utilized in coordinate system). Do you have any ideas to handle this better?

[marvin-j97]

I'm not really proficient enough with d3, but to me, the Axes and Grid should line up by default unless choosing some other unit length.

So this is what I would expect using no custom lengths:

I recreated the grid size by using xLength, yLength = 43 in this case

---

Maybe the scaling should be defined in the group, because grid and axes should line up by default, that way the vectors etc can use the group's scaling to get the correct coordinates.

[imaphatduc]

Hmm, I wonder whether the users should control or customize grid's (aka "world" SVG's) unit length. If so, when Axes() and Geometry() shapes have the same scaling method, that means customizing unit lengths through Group()s affects the unit lengths of all axes and geometry shapes (vectors and grid in this example).

Okay, I'll consider your solution. Thank you!