ijprest / kle-serial Goto Github PK

Add member or utility function to keys to get the position of their stem(s). For most keys, this will be their x,y plus half of their width/height. Some keys don't follow this rule, namely stepped, non-rectangular keys and space bars with off-center stems. In those cases, undefined could be returned (at least until there's a way to encode the position in the serialization format).

Stem position is helpful when creating plates and PCBs.

All that said, it's very easy for a client application to calculate the regular positions itself, so the need for such a feature isn't huge. More of a nice-to-have.

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!