101 lines
3.7 KiB
HTML
101 lines
3.7 KiB
HTML
<cat-template>
|
|
<cat-control-section label="Translate">
|
|
<cat-hbox>
|
|
<label for="transform2d-x">X</label>
|
|
<cat-input type='number' class='transform2d-x' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label for="transform2d-y">Y</label>
|
|
<cat-input type='number' class='transform2d-y' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Scale">
|
|
<cat-hbox>
|
|
<label for="scale2d-x">X</label>
|
|
<cat-input type='number' class='scale2d-x' value=1.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label for="scale2d-y">Y</label>
|
|
<cat-input type='number' class='scale2d-y' value=1.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Skew">
|
|
<cat-hbox>
|
|
<label for="skew2d-x">X</label>
|
|
<cat-input type='number' class='skew2d-x' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label for="skew2d-y">Y</label>
|
|
<cat-input type='number' class='skew2d-y' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Rotation">
|
|
<cat-hbox>
|
|
<label for="rotation2d-x">X</label>
|
|
<cat-input type='number' class='rotation2d-x' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label for="rotation2d-y">Y</label>
|
|
<cat-input type='number' class='rotation2d-y' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Matrix">
|
|
<cat-vbox>
|
|
<cat-hbox>
|
|
<label>a</label>
|
|
<cat-input type='number' class='matrix2d-a' value=0.000 step=0.010></cat-input>
|
|
<label>c</label>
|
|
<cat-input type='number' class='matrix2d-c' value=0.000 step=0.010></cat-input>
|
|
<label>tx</label>
|
|
<cat-input type='number' class='matrix2d-tx' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label>b</label>
|
|
<cat-input type='number' class='matrix2d-b' value=0.000 step=0.010></cat-input>
|
|
<label>d</label>
|
|
<cat-input type='number' class='matrix2d-d' value=0.000 step=0.010></cat-input>
|
|
<label>ty</label>
|
|
<cat-input type='number' class='matrix2d-ty' value=0.000 step=0.010></cat-input>
|
|
</cat-hbox>
|
|
</cat-vbox>
|
|
</cat-control-section>
|
|
</cat-template>
|
|
|
|
<script>
|
|
customElements.define('cat-ctl-2dtransform', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
document.currentScript.ownerDocument.getElementsByTagName('cat-template')[0].cloneTo(this);
|
|
}
|
|
connectedCallback() {
|
|
// WTF: the following causes electron's cat-input fields to all behave normally (i.e., mousewheel adjusts value). Without it, mousewheel behavior does not work.
|
|
this.querySelector('.transform2d-x').addEventListener('mousewheel', e => { });
|
|
// looping is easier
|
|
let emitters = [
|
|
['.transform2d-x', '2d-transform-x'],
|
|
['.transform2d-y', '2d-transform-y'],
|
|
['.scale2d-x', '2d-scale-x'],
|
|
['.scale2d-y', '2d-scale-y'],
|
|
['.skew2d-x', '2d-skew-x'],
|
|
['.skew2d-y', '2d-skew-y'],
|
|
['.rotation2d-x', '2d-rotation-x'],
|
|
['.rotation2d-y', '2d-rotation-y'],
|
|
['.matrix2d-a', '2d-matrix-a'],
|
|
['.matrix2d-b', '2d-matrix-b'],
|
|
['.matrix2d-c', '2d-matrix-c'],
|
|
['.matrix2d-d', '2d-matrix-d'],
|
|
['.matrix2d-tx', '2d-matrix-tx'],
|
|
['.matrix2d-ty', '2d-matrix-ty'],
|
|
];
|
|
emitters.forEach(e => {
|
|
this.querySelector(e[0]).addEventListener('input', ev => {
|
|
this.dispatchEvent(new CustomEvent('value-change', {'detail': {
|
|
type: e[1],
|
|
value: ev.target.value
|
|
}}));
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|