jaromino.com
WIP WYSIWYG ~3D SVG editor.
Make dragging up on inputs increase the value.
However, the old behavior was kinda nice for rotations and
translations, so modify their step values to be negative.
+8
-7
+7
-6
index.html
+7
-6
index.html
···
24
24
<svg id="overlay" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
25
25
<svg id="canvas" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
26
26
<svg id="defs">
27
+
<!-- TODO: Find a better filter. This one scares the pants off Safari, and on Firefox is a bit slow to render. -->
27
28
<filter id="better-highlight" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
28
29
<feMorphology operator="dilate" radius="2" result="outer" />
29
30
<feComposite in="SourceGraphic" operator="xor" result="outline" />
···
41
42
<div id="translate" class="vector prop">
42
43
<h4>Translate</h4>
43
44
<label for="translate-x">X</label>
44
-
<input type="number" id="translate-x" />
45
+
<input type="number" id="translate-x" step="-1" />
45
46
<label for="translate-y">Y</label>
46
-
<input type="number" id="translate-y" />
47
+
<input type="number" id="translate-y" step="-1" />
47
48
<label for="translate-z">Z</label>
48
-
<input type="number" id="translate-z" />
49
+
<input type="number" id="translate-z" step="-1" />
49
50
</div>
50
51
<div id="rotate" class="vector prop">
51
52
<h4>Rotate</h4>
52
53
<label for="rotate-x">X</label>
53
-
<input type="number" id="rotate-x" step="0.1" />
54
+
<input type="number" id="rotate-x" step="-0.1" />
54
55
<label for="rotate-y">Y</label>
55
-
<input type="number" id="rotate-y" step="0.1" />
56
+
<input type="number" id="rotate-y" step="-0.1" />
56
57
<label for="rotate-z">Z</label>
57
-
<input type="number" id="rotate-z" step="0.1" />
58
+
<input type="number" id="rotate-z" step="-0.1" />
58
59
</div>
59
60
<div id="scale" class="vector prop">
60
61
<h4>Scale</h4> <label for="scale-x">X</label>
+1
-1
input-enhancements.js
+1
-1
input-enhancements.js
···
38
38
const dx = event.screenX - this.startX;
39
39
const dy = event.screenY - this.startY;
40
40
let step = this.input.step ? parseFloat(this.input.step) : 1;
41
-
this.input.valueAsNumber = this.startValue + dy * 0.1 * step;
41
+
this.input.valueAsNumber = this.startValue + dy * 0.1 * step * -1;
42
42
43
43
// Manually fire input event since updating it programmatically won't.
44
44
const inputEvent = new Event('input', {