rx/y inconsistent with site

Hey there, firstly thanks for providing this utility, I hope to use it to support kle layouts in an app that I am making.

I have had success so far with standard keymaps (planck, 60, 104) however once I use rotation and specifically rx and ry in a layout I get very different positioning.. wondering if you can shed some light on this for me, or if it is indeed a bug in kle-serial?

heres the simple map I am starting with:

  [""],
  [{r:30,x:1,rx:1},"",""]

Here it is on your site:

And here in my react app:

As you can see the positioning is off..

here is my code that is converting the key options into styles:

import React, { useMemo } from "react";

import "./Key.css";
const U = 54;

function Key({ opts }) {
  const {
    x,
    y,
    width,
    height,
    rotation_angle: ra,
    rotation_x: rx,
    rotation_y: ry,
  } = opts;

  const keyStyle = useMemo(() => {
    const s = {};
    if (ra) {
      s.transform = `rotate(${ra}deg)`;
      s.transformOrigin = `${rx * U}px ${ry * U}px`;
    }
    return s;
  }, [ra, rx, ry]);

  const outerStyle = useMemo(() => {
    const s = {
      width: U * width,
      height: U * height,
      left: U * x,
      top: U * y,
    };
    return s;
  }, [width, height, x, y]);

  return (
    <div style={keyStyle} className="key">
      <div style={outerStyle} className="outer">
        <div className="inner"></div>
      </div>
    </div>
  );
}

export default Key;

This results in the following markup (for key 2):

<div style="transform: rotate(30deg); transform-origin: 54px 0px 0px;" class="key">
  <div style="width: 54px; height: 54px; left: 54px; top: 54px;" class="outer">
    <div class="inner"></div>
  </div>
</div>

whereas the markup on the site looks like this:

<div ng-repeat="key in keys()" class="key" ng-mouseover="hoveredKey=key" ng-mouseleave="hoveredKey=null" ng-class="{hover: hoveredKey==key, selected: selectedKeys.indexOf(key)>=0, HOMING:key.nub}" ng-bind-html="key.html">
  <div class="  keycap" style="transform:rotate(30deg); transform-origin:54px 0px;">
    <div style="left: 108px; top: 0px; width: 54px; height: 54px; border-width: 1px; border-radius: 5px; background-color: #cccccc;" class="keyborder"></div>
    --snip (keytop/keylabels) --  
  </div>
</div>

I looked in the source for how this positioning is achieved and believe my example at least should have the same values

parms.outercapx       = parms.capx       + sizes.keySpacing;
parms.capx       = sizes.unit * key.x;

I'm not sure how I should get those left (2 unit) and top (0 unit) values, any help would be greatly appreciated!

ijprest / kle-serial

rx/y inconsistent with site #7