MarkerJS Live giving error in Angular 14

[darkl1ght]

I am trying to pre-load the annotations on an image using MarkerJS Live in Angular 14. When I am calling

const maState = {
    width: 945,
    height: 470,
    markers: [
      {
        arrowType: 'end',
        strokeColor: '#EF4444',
        strokeWidth: 3,
        strokeDasharray: '',
        x1: 468.343862596124,
        y1: 56.5,
        x2: 425.112885660955,
        y2: 183.5,
        typeName: 'ArrowMarker',
        state: 'select',
      },
      {
        arrowType: 'end',
        strokeColor: '#EF4444',
        strokeWidth: 3,
        strokeDasharray: '',
        x1: 514.241382301297,
        y1: 61.5,
        x2: 703.514257189213,
        y2: 225.5,
        typeName: 'ArrowMarker',
        state: 'select',
      },
      {
        fillColor: '#000000',
        strokeColor: 'transparent',
        strokeWidth: 0,
        strokeDasharray: '',
        opacity: 0.25,
        left: 448.823651441752,
        top: 56.5,
        width: 169.121955615733,
        height: 78,
        rotationAngle: 0,
        visualTransformMatrix: {
          a: 1,
          b: 0,
          c: 0,
          d: 1,
          e: 0,
          f: 0,
        },
        containerTransformMatrix: {
          a: 1,
          b: 0,
          c: 0,
          d: 1,
          e: 0,
          f: 0,
        },
        typeName: 'HighlightMarker',
        state: 'select',
      },
    ],
  };

const snapshotEl = document.getElementById("snapshot") as HTMLImageElement; const markerView = new mjslive.MarkerView(snapshotEl); markerView.show(this.maState);

the show call gives error that it cannot be assigned in angular as type is not matching. You can check the error in stackblitz demo link

[ailon]

As you are using TypeScript you'd have to cast the type of these marker states. Something like a ... as mjslive.MarkerBaseState should do, if your goal is just to get rid of the errors.

Here's an example with your sample state.

[darkl1ght]

I have got the react code from your website https://markerjs.com/ that helped me clear my issues. Just needed to go to debugger and in Sources(tab) > webpack > src > components > frontPageDemo.tsx. Great work on the package.