-
-
-
-
-
-
davion
@@ -147,6 +108,50 @@
liao
+
+
+
+
+
+
diff --git a/index.js b/index.js
index dd6599e..ca8f618 100644
--- a/index.js
+++ b/index.js
@@ -294,10 +294,11 @@ if (recVis == 'false') {
let info = document.getElementById('status');
-// Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
-[].forEach(fieldset => {
+Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
+// [].forEach(fieldset => {
+ const identityMtx = [1, 0, 0, 1, 0, 0];
const target = document.getElementById(fieldset.name);
- const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g);
+ const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;
const inputs = fieldset.querySelectorAll('input');
if (transform) {
@@ -310,7 +311,8 @@ let info = document.getElementById('status');
const scaleY = Math.sqrt(b**2 + d**2);
let values = {
- scale: Math.round(scaleX * 10) / 10,
+ scaleX: Math.round(scaleX * 1000) / 1000,
+ scaleY: Math.round(scaleY * 1000) / 1000,
translateX: e,
translateY: f,
rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
@@ -323,12 +325,13 @@ let info = document.getElementById('status');
input.addEventListener('pointerenter', e => e.target.focus());
input.addEventListener('input', e => {
- let { scale, translateX, translateY, rotate} = Object.values(inputs).reduce((acc, input) => {
- acc[input.name] = input.value;
- return acc;
- }, {});
+ let { translateX, translateY, rotate, scaleX, scaleY } =
+ Object.values(inputs).reduce((acc, input) => {
+ acc[input.name] = input.value;
+ return acc;
+ }, {});
- let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scale})`;
+ let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
target.style.transform = transform;
});
@@ -888,11 +891,14 @@ svg.addEventListener('wheel', e => {
let vb = `${newX} ${newY} ${newWidth} ${newHeight}`
+ // TODO attribute change event?
localStorage.setItem('viewBox', vb);
svg.setAttributeNS(null, 'viewBox', vb);
});
svg.addEventListener('pointerdown', e => {
+ e.preventDefault();
+
const minPanDistanceThreshold = 5;
let dist, ctm,
@@ -904,16 +910,19 @@ svg.addEventListener('pointerdown', e => {
function pointerMove(e) {
movePt.x = e.clientX;
movePt.y = e.clientY;
- dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
- if (!pan && dist >= minPanDistanceThreshold) {
- pan = true;
- startPt.x = e.clientX;
- startPt.y = e.clientY;
+ if (!pan) {
+ dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
+
+ if (dist >= minPanDistanceThreshold) {
+ pan = true;
+ svg.setPointerCapture(e.pointerId);
+ startPt.x = e.clientX;
+ startPt.y = e.clientY;
+ }
}
if (pan) {
- svg.setPointerCapture(e.pointerId);
ctm = svg.getScreenCTM().inverse();
const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
@@ -928,7 +937,6 @@ svg.addEventListener('pointerdown', e => {
}
function pointerUp(e) {
- svg.releasePointerCapture(e.pointerId);
svg.removeEventListener('pointermove', pointerMove);
svg.removeEventListener('pointerup', pointerUp);
}
diff --git a/style.css b/style.css
index 3fc07d9..29284dd 100644
--- a/style.css
+++ b/style.css
@@ -24,6 +24,10 @@ svg image.map-scans {
image-rendering: auto;
}
+svg text {
+ user-select: none;
+}
+
div#status {
position: absolute;
bottom: 0;
@@ -159,19 +163,17 @@ g#grid {
}
#map2 {
- transform: rotate(0.1deg);
+ transform-origin: 0px 0px;
+ transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
}
#map3 {
- transform: rotate(0.1deg);
-}
-
-image.map-scans {
- /* transform: scale(1.39, 1.407) rotate(0.07deg); */
- /* opacity: 0.33; */
+ transform-origin: 0px 0px;
+ /* transform: translateY(1518px); */
+ transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
}
-#debug {
+#panel {
display: none;
position: absolute;
right: 0;
@@ -180,7 +182,7 @@ image.map-scans {
padding: 2px;
}
-#debug fieldset label {
+#panel fieldset label {
display: block;
text-align: right;
}
@@ -259,14 +261,6 @@ text.counter, #troop-counter text {
user-select: none;
}
-rect#map {
- fill: black;
- opacity: 0;
- /* fill-opacity: 0;
- stroke: red;
- stroke-width: 4px; */
-}
-
polygon.firing-arc[data-troop-allegiance="davion"] {
fill: red;
}
--
cgit v1.2.3