From 6a8624623e57da94b56e79ebe17feb286296c70b Mon Sep 17 00:00:00 2001 From: ivmartel Date: Fri, 5 May 2023 19:09:08 +0200 Subject: [PATCH] Revised less dependent architecture --- resources/locales/de/overlays.json | 36 +-- resources/locales/en/overlays.json | 36 +-- resources/locales/es/overlays.json | 36 +-- resources/locales/fr/overlays.json | 36 +-- resources/locales/it/overlays.json | 36 +-- resources/locales/jp/overlays.json | 36 +-- resources/locales/ro/overlays.json | 36 +-- resources/locales/ru/overlays.json | 36 +-- resources/locales/zh/overlays.json | 36 +-- src/applauncher.js | 14 +- src/gui/infoController.js | 337 ++++++++++++++++++++++------- src/gui/infoOverlay.js | 307 +++++++------------------- src/gui/listen.js | 72 ++++++ 13 files changed, 590 insertions(+), 464 deletions(-) create mode 100644 src/gui/listen.js diff --git a/resources/locales/de/overlays.json b/resources/locales/de/overlays.json index f9549c19..d05cb943 100644 --- a/resources/locales/de/overlays.json +++ b/resources/locales/de/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Grauwert: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Grauwert: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Grauwert: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Grauwert: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Grauwert: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Grauwert: {v2}"} ] } diff --git a/resources/locales/en/overlays.json b/resources/locales/en/overlays.json index 1e991ac3..dbe902d2 100644 --- a/resources/locales/en/overlays.json +++ b/resources/locales/en/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ] } diff --git a/resources/locales/es/overlays.json b/resources/locales/es/overlays.json index 1e991ac3..dbe902d2 100644 --- a/resources/locales/es/overlays.json +++ b/resources/locales/es/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ] } diff --git a/resources/locales/fr/overlays.json b/resources/locales/fr/overlays.json index ed3195c5..e6597519 100644 --- a/resources/locales/fr/overlays.json +++ b/resources/locales/fr/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Valeur: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Valeur: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Valeur: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Valeur: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Valeur: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Valeur: {v2}"} ] } diff --git a/resources/locales/it/overlays.json b/resources/locales/it/overlays.json index 58fd00f6..34ebd85b 100644 --- a/resources/locales/it/overlays.json +++ b/resources/locales/it/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Valore: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Valore: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Valore: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Valore: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Valore: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Valore: {v2}"} ] } diff --git a/resources/locales/jp/overlays.json b/resources/locales/jp/overlays.json index 1e991ac3..dbe902d2 100644 --- a/resources/locales/jp/overlays.json +++ b/resources/locales/jp/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ] } diff --git a/resources/locales/ro/overlays.json b/resources/locales/ro/overlays.json index 1e991ac3..dbe902d2 100644 --- a/resources/locales/ro/overlays.json +++ b/resources/locales/ro/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Value: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Value: {v2}"} ] } diff --git a/resources/locales/ru/overlays.json b/resources/locales/ru/overlays.json index 9925bd18..49c289fd 100644 --- a/resources/locales/ru/overlays.json +++ b/resources/locales/ru/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Значение: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Значение: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Значение: {v1}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Значение: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "WC: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "WW: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "Pos: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "Значение: {v2}"} + {"event": "wlchange", "pos": "br", "format": "WC: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "WW: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "Pos: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "Значение: {v2}"} ] } diff --git a/resources/locales/zh/overlays.json b/resources/locales/zh/overlays.json index 735021f1..97ad42ee 100644 --- a/resources/locales/zh/overlays.json +++ b/resources/locales/zh/overlays.json @@ -12,12 +12,12 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "窗位: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "窗宽: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "位置: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "值: {v2}"} + {"event": "wlchange", "pos": "br", "format": "窗位: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "窗宽: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "位置: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "值: {v2}"} ], "DOM": [ {"tags": ["fileName"], "pos": "tl"}, @@ -26,12 +26,12 @@ {"tags": ["imageWidth", "imageHeight"], "pos": "bl", "format": "RES: {v0}x{v1}"}, - {"value": "wlchange", "pos": "br", "format": "窗位: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "窗宽: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "位置: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "值: {v1}"} + {"event": "wlchange", "pos": "br", "format": "窗位: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "窗宽: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "位置: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "值: {v1}"} ], "*": [ {"tags": ["x00100020"], "pos": "tl"}, @@ -49,11 +49,11 @@ {"tags": ["x00080020", "x00080030"], "pos": "tr", "format": "{v0} {v1}"}, {"tags": ["x00080060"], "pos": "tr"}, - {"value": "wlchange", "pos": "br", "format": "窗位: {v0}"}, - {"value": "wlchange", "pos": "br", "format": "窗宽: {v1}"}, - {"value": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, - {"value": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, - {"value": "positionchange", "pos": "br", "format": "位置: {v0}"}, - {"value": "positionchange", "pos": "br", "format": "值: {v2}"} + {"event": "wlchange", "pos": "br", "format": "窗位: {v0}"}, + {"event": "wlchange", "pos": "br", "format": "窗宽: {v1}"}, + {"event": "zoomchange", "pos": "br", "format": "Z: {v0}", "precision": "3"}, + {"event": "offsetchange", "pos": "br", "format": "Off: {v0},{v1}", "precision": "round"}, + {"event": "positionchange", "pos": "br", "format": "位置: {v0}"}, + {"event": "positionchange", "pos": "br", "format": "值: {v2}"} ] } diff --git a/src/applauncher.js b/src/applauncher.js index 748fb21b..785afff7 100644 --- a/src/applauncher.js +++ b/src/applauncher.js @@ -79,9 +79,12 @@ function startApp() { loadboxGui.setup(loaderList); // info layer - var infoController = new dwvjq.gui.info.Controller(myapp, 'dwv'); + var infoController = new dwvjq.gui.info.Controller(myapp); infoController.init(); + var infoElement = document.getElementById('infoLayer'); + var infoOverlay = new dwvjq.gui.info.Overlay(infoElement); + // setup the tool gui var toolboxGui = new dwvjq.gui.ToolboxContainer(myapp, infoController); toolboxGui.setup(toolList); @@ -119,7 +122,7 @@ function startApp() { dwvjq.gui.displayProgress(0); // update info controller if (event.loadtype === 'image') { - infoController.onLoadStart(); + infoController.reset(); } // allow to cancel via crtl-x window.addEventListener('keydown', abortOnCrtlX); @@ -135,10 +138,14 @@ function startApp() { infoController.onLoadItem(event); } }); + myapp.addEventListener('renderstart', function (/*event*/) { + if (isFirstRender) { + infoController.addEventListener('valuechange', infoOverlay.onDataChange); + } + }); myapp.addEventListener('renderend', function (/*event*/) { if (isFirstRender) { isFirstRender = false; - infoController.fitContainer(); // initialise and display the toolbox on first render toolboxGui.initialise(); toolboxGui.display(true); @@ -203,7 +210,6 @@ function startApp() { // (for example resizing while viewing the meta data table) window.addEventListener('resize', function () { myapp.onResize(); - infoController.fitContainer(); }); // possible load from location diff --git a/src/gui/infoController.js b/src/gui/infoController.js index 898c0bb6..9d7ec7a7 100644 --- a/src/gui/infoController.js +++ b/src/gui/infoController.js @@ -4,38 +4,33 @@ var dwvjq = dwvjq || {}; dwvjq.gui = dwvjq.gui || {}; dwvjq.gui.info = dwvjq.gui.info || {}; +// get a number toprecision function with the povided precision +function getNumberToPrecision(precision) { + return function (num) { + return Number(num).toPrecision(precision); + }; +} + /** * DICOM Header overlay info controller. * @constructor * @param {Object} app The assciated app. */ dwvjq.gui.info.Controller = function (app) { - // Info layer overlay guis - var overlayGuis = []; - // flag to tell if guis have been created - var guisCreated = false; // overlay data var overlayData = []; - + // current data uid: set on pos change + var currentDataUid; // flag to know if the info layer is listening on the image. var isInfoLayerListening = false; + // listener handler + var listenerHandler = new dwv.utils.ListenerHandler(); /** * Create the different info elements. */ this.init = function () { - // create overlay info at each corner - var pos_list = ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br']; - - for (var n = 0; n < pos_list.length; ++n) { - var pos = pos_list[n]; - var infoElement = document.getElementById('info' + pos); - if (infoElement) { - overlayGuis.push(new dwvjq.gui.info.Overlay(infoElement, pos)); - } - } - // listen to update data app.addEventListener('positionchange', onSliceChange); // first toggle: set to listening @@ -43,17 +38,15 @@ dwvjq.gui.info.Controller = function (app) { }; /** - * Handle a load start event: reset local vars. - * @param {Object} event The load-start event. + * Reset the controller: clean internals. */ - this.onLoadStart = function (/*event*/) { + this.reset = function () { overlayData = []; - guisCreated = false; }; /** * Handle a new loaded item event. - * @param {Object} event The load-item event. + * @param {Object} event The loaditem event. */ this.onLoadItem = function (event) { // create and store overlay data @@ -67,7 +60,7 @@ dwvjq.gui.info.Controller = function (app) { } else { dataUid = overlayData.length; } - overlayData[dataUid] = dwvjq.gui.info.createOverlayData( + overlayData[dataUid] = createOverlayData( new dwv.dicom.DicomElementsWrapper(data) ); } else { @@ -80,21 +73,10 @@ dwvjq.gui.info.Controller = function (app) { break; } } - overlayData[dataUid] = dwvjq.gui.info.createOverlayDataForDom(data); - } - - for (var i = 0; i < overlayGuis.length; ++i) { - overlayGuis[i].setOverlayData(overlayData[dataUid]); - } - - // create overlay guis if not done - // TODO The first gui is maybe not the one disaplyed... - if (!guisCreated) { - for (var j = 0; j < overlayGuis.length; ++j) { - overlayGuis[j].create(); - } - guisCreated = true; + overlayData[dataUid] = createOverlayDataForDom(data); } + // store uid + currentDataUid = dataUid; }; /** @@ -102,74 +84,281 @@ dwvjq.gui.info.Controller = function (app) { * @param {Object} event The slicechange event. */ function onSliceChange(event) { - // change the overlay data to the one of the new slice if (typeof event.data !== 'undefined' && typeof event.data.imageUid !== 'undefined') { - var dataUid = event.data.imageUid; - for (var i = 0; i < overlayGuis.length; ++i) { - overlayGuis[i].setOverlayData(overlayData[dataUid]); - } + currentDataUid = event.data.imageUid; + updateData(event); } } /** - * Toggle info listeners. + * Update the overlay data + * + * @param {object} event An event defined by the overlay map and + * registered in toggleListeners */ - this.toggleListeners = function () { - if (overlayGuis.length === 0) { + function updateData(event) { + + var sliceOverlayData = overlayData[currentDataUid]; + if (typeof sliceOverlayData === 'undefined') { + console.warn('No slice overlay data'); return; } + for (var n = 0; n < sliceOverlayData.length; ++n) { + var text = undefined; + if (typeof sliceOverlayData[n].tags !== 'undefined') { + // update tags only on slice change + if (event.type === 'positionchange') { + text = sliceOverlayData[n].value; + } + } else { + // update text if the value is an event type + if (typeof sliceOverlayData[n].event !== 'undefined' && + sliceOverlayData[n].event === event.type) { + var format = sliceOverlayData[n].format; + var values = event.value; + // optional number precision + if (typeof sliceOverlayData[n].precision !== 'undefined') { + var mapFunc = null; + if (sliceOverlayData[n].precision === 'round') { + mapFunc = Math.round; + } else { + mapFunc = getNumberToPrecision(sliceOverlayData[n].precision); + } + values = values.map(mapFunc); + } + text = dwv.utils.replaceFlags2(format, values); + } + } + if (typeof text !== 'undefined') { + sliceOverlayData[n].value = text; + } + } + + // fire valuechange for listeners + fireEvent({type: 'valuechange', data: sliceOverlayData}); + } + + /** + * Toggle info listeners. + */ + this.toggleListeners = function () { // parse overlays to get the list of events to listen to - var events = []; + var eventNames = []; var keys = Object.keys(dwvjq.gui.info.overlayMaps); for (var i = 0; i < keys.length; ++i) { var map = dwvjq.gui.info.overlayMaps[keys[i]]; for (var j = 0; j < map.length; ++j) { - var value = map[j].value; - if (typeof value !== 'undefined') { - if (!events.includes(value)) { - events.push(value); + var eventType = map[j].event; + if (typeof eventType !== 'undefined') { + if (!eventNames.includes(eventType)) { + eventNames.push(eventType); } } } } - - var n; - var e; + // add or remove listeners if (isInfoLayerListening) { - for (n = 0; n < overlayGuis.length; ++n) { - // default slice change for tags - app.removeEventListener('positionchange', overlayGuis[n].update); - // from config - for (e = 0; e < events.length; ++e) { - app.removeEventListener(events[e], overlayGuis[n].update); - } + for (var e = 0; e < eventNames.length; ++e) { + app.removeEventListener(eventNames[e], updateData); } } else { - for (n = 0; n < overlayGuis.length; ++n) { - // default slice change for tags - app.addEventListener('positionchange', overlayGuis[n].update); - // from config - for (e = 0; e < events.length; ++e) { - app.addEventListener(events[e], overlayGuis[n].update); - } + for (e = 0; e < eventNames.length; ++e) { + app.addEventListener(eventNames[e], updateData); } } + // update flag isInfoLayerListening = !isInfoLayerListening; }; /** - * Fit layer info to layer canvas. + * Add an event listener to this class. + * + * @param {string} type The event type. + * @param {object} callback The method associated with the provided + * event type, will be called with the fired event. */ - this.fitContainer = function () { - var layer = document.getElementById('layer-0-0'); - if (layer) { - var canvas = layer.querySelector('canvas'); - var container = document.getElementById('infoLayer'); - container.style.width = canvas.width + 'px'; - } + this.addEventListener = function (type, callback) { + listenerHandler.add(type, callback); + }; + + /** + * Remove an event listener from this class. + * + * @param {string} type The event type. + * @param {object} callback The method associated with the provided + * event type. + */ + this.removeEventListener = function (type, callback) { + listenerHandler.remove(type, callback); }; + /** + * Fire an event: call all associated listeners with the input event object. + * + * @param {object} event The event to fire. + * @private + */ + function fireEvent(event) { + listenerHandler.fireEvent(event); + } + }; // class dwvjq.gui.info.Controller + +/** + * Replace flags in a input string. Flags are keywords surrounded with curly + * braces in the form: '{v0}, {v1}'. + * + * @param {string} inputStr The input string. + * @param {Array} values An array of strings. + * @example + * var values = ["a", "b"]; + * var str = "The length is: {v0}. The size is: {v1}"; + * var res = replaceFlags2(str, values); + * // "The length is: a. The size is: b" + * @returns {string} The result string. + */ +function replaceFlags(inputStr, values) { + var res = inputStr; + for (var j = 0; j < values.length; ++j) { + res = res.replace('{v' + j + '}', values[j]); + } + return res; +} + +/** + * Create a default replace format from a given length. + * For example: '{v0}, {v1}'. + * + * @param {number} length The length of the format. + * @returns {string} A replace format. + */ +function createDefaultReplaceFormat(length) { + var res = ''; + for (var j = 0; j < length; ++j) { + if (j !== 0) { + res += ', '; + } + res += '{v' + j + '}'; + } + return res; +} + +/** + * Create overlay string array of the image in each corner + * @param {Object} dicomElements DICOM elements of the image + * @return {Array} Array of string to be shown in each corner + */ +function createOverlayData(dicomElements) { + var overlays = []; + var modality = dicomElements.getFromKey('x00080060'); + if (!modality) { + return overlays; + } + var omaps = dwvjq.gui.info.overlayMaps; + if (!omaps) { + return overlays; + } + var omap = omaps[modality] || omaps['*']; + if (!omap) { + return overlays; + } + + for (var n = 0; n < omap.length; ++n) { + // deep copy + var overlay = JSON.parse(JSON.stringify(omap[n])); + + // add tag values + var tags = overlay.tags; + if (typeof tags !== 'undefined' && tags.length !== 0) { + // get values + var values = []; + for (var i = 0; i < tags.length; ++i) { + values.push(dicomElements.getElementValueAsStringFromKey(tags[i])); + } + // format + if (typeof overlay.format === 'undefined' || overlay.format === null) { + overlay.format = createDefaultReplaceFormat(values.length); + } + overlay.value = replaceFlags(overlay.format, values).trim(); + } + + // store + overlays.push(overlay); + } + + // (0020,0020) Patient Orientation + var valuePO = dicomElements.getFromKey('x00200020'); + if ( + typeof valuePO !== 'undefined' && + valuePO !== null && + valuePO.length === 2 + ) { + var po0 = dwv.dicom.cleanString(valuePO[0]); + var po1 = dwv.dicom.cleanString(valuePO[1]); + overlays.push({ + pos: 'cr', value: po0, format: '{v0}' + }); + overlays.push({ + pos: 'cl', value: dwv.dicom.getReverseOrientation(po0), format: '{v0}' + }); + overlays.push({ + pos: 'bc', value: po1, format: '{v0}' + }); + overlays.push({ + pos: 'tc', value: dwv.dicom.getReverseOrientation(po1), format: '{v0}' + }); + } + + return overlays; +} + +/** + * Create overlay string array of the image in each corner + * @param {Object} dicomElements DICOM elements of the image + * @return {Array} Array of string to be shown in each corner + */ +function createOverlayDataForDom(info) { + var overlays = []; + var omaps = dwvjq.gui.info.overlayMaps; + if (!omaps) { + return overlays; + } + var omap = omaps.DOM; + if (!omap) { + return overlays; + } + + var infoKeys = Object.keys(info); + + for (var n = 0; n < omap.length; ++n) { + // deep copy + var overlay = JSON.parse(JSON.stringify(omap[n])); + + // add tag values + var tags = overlay.tags; + if (typeof tags !== 'undefined' && tags.length !== 0) { + // get values + var values = []; + for (var i = 0; i < tags.length; ++i) { + for (var j = 0; j < infoKeys.length; ++j) { + if (tags[i] === infoKeys[j]) { + values.push(info[infoKeys[j]].value); + } + } + } + // format + if (typeof overlay.format === 'undefined' || overlay.format === null) { + overlay.format = createDefaultReplaceFormat(values.length); + } + overlay.value = replaceFlags(overlay.format, values).trim(); + } + + // store + overlays.push(overlay); + } + + return overlays; +} diff --git a/src/gui/infoOverlay.js b/src/gui/infoOverlay.js index 1a350b93..8db89e6e 100644 --- a/src/gui/infoOverlay.js +++ b/src/gui/infoOverlay.js @@ -4,257 +4,116 @@ var dwvjq = dwvjq || {}; dwvjq.gui = dwvjq.gui || {}; dwvjq.gui.info = dwvjq.gui.info || {}; +/** + * Get the HTML LI class name for a data. + * + * @param {object} data The associated data. + * @returns {string} The class name. + */ +function getLiClassName(data) { + var type = ''; + if (typeof data.tags !== 'undefined') { + var tagStr = ''; + for (var i = 0; i < data.tags.length; ++i) { + tagStr += data.tags[i]; + } + type = tagStr; + } else { + type = data.event; + } + var format = encodeURIComponent(data.format.toLowerCase()); + format = format.replace(/%[0-9A-F]{2}/gi, ''); + + return 'info-' + data.pos + '-' + type + '-' + format; +} + /** * DICOM Header overlay info layer. + * * @constructor - * @param {Object} div The HTML element to add Header overlay info to. - * @param {String} pos The string to specify the corner position: - * (tl,tc,tr,cl,cr,bl,bc,br) + * @param {Object} div The HTML element to add overlay info to. */ -dwvjq.gui.info.Overlay = function (div, pos) { - var overlayData = null; +dwvjq.gui.info.Overlay = function (div) { + // closure to self + var self = this; + // html creation flag + var created = false; /** - * Set the overlay data. - * @param {Object} data The overlay data for all positions. + * Handle overlay data change. + * + * @param {Array} data The overlay data for all positions. */ - this.setOverlayData = function (data) { - overlayData = data[pos]; - }; - - function getLiClassName(pos, data) { - var type = ''; - if (typeof data.tags !== 'undefined') { - var tagStr = ''; - for (var i = 0; i < data.tags.length; ++i) { - tagStr += data.tags[i]; - } - type = tagStr; - } else { - type = data.value; + this.onDataChange = function (event) { + if (typeof event.data === 'undefined') { + return; } - var format = encodeURIComponent(data.format.toLowerCase()); - format = format.replace(/%[0-9A-F]{2}/gi, ''); - return 'info-' + pos + '-' + type + '-' + format; - } + if (!created) { + self.create(event.data); + created = true; + } + self.update(event.data); + }; /** - * Create the overlay info div. + * Create the overlay info HTML. + * + * @param {Array} data The overlay data array. */ - this.create = function () { - // check data - if (!overlayData) { - return; + this.create = function (data) { + // possible info pos + var posList = []; + for (var j = 0; j < data.length; ++j) { + var dataPos = data[j].pos; + if (!posList.includes(dataPos)) { + posList.push(dataPos); + } } - // remove all elements from ref element - dwvjq.html.cleanNode(div); - - if (pos === 'bc' || pos === 'tc' || pos === 'cr' || pos === 'cl') { - div.textContent = overlayData[0].value; - } else { + for (var i = 0; i < posList.length; ++i) { + var pos = posList[i]; // create list element var ul = document.createElement('ul'); // list items - for (var n = 0; n < overlayData.length; ++n) { - var li = document.createElement('li'); - li.className = getLiClassName(pos, overlayData[n]); - // fill in tags - if (typeof overlayData[n].tags !== 'undefined') { - li.appendChild(document.createTextNode(overlayData[n].value)); + for (var n = 0; n < data.length; ++n) { + if (data[n].pos === pos) { + var li = document.createElement('li'); + li.className = getLiClassName(data[n]); + // fill in tags + if (typeof data[n].tags !== 'undefined') { + li.appendChild(document.createTextNode(data[n].value)); + } + // append to list + ul.appendChild(li); } - // append to list - ul.appendChild(li); } // append list element to ref element - div.appendChild(ul); + var posElement = document.getElementById('info' + pos); + // clean node + dwvjq.html.cleanNode(posElement); + // append list + posElement.appendChild(ul); } + }; /** - * Update the overlay info div. - * @param {Object} event A change event. + * Update the overlay info HTML. + * + * @param {Array} data The overlay data array. */ - this.update = function (event) { - if (!overlayData) { - return; - } - - // get a number toprecision function with the povided precision - function getNumberToPrecision(precision) { - return function (num) { - return Number(num).toPrecision(precision); - }; - } - - if (pos === 'bc' || pos === 'tc' || pos === 'cr' || pos === 'cl') { - div.textContent = overlayData[0].value; - } else { - for (var n = 0; n < overlayData.length; ++n) { - var text = null; - var value = overlayData[n].value; - if (typeof overlayData[n].tags !== 'undefined') { - // update tags only on slice change - if (event.type === 'positionchange') { - text = value; - } - } else { - // update text if the value is an event type - if (value === event.type) { - var format = overlayData[n].format; - var values = event.value; - // optional number precision - if (typeof overlayData[n].precision !== 'undefined') { - var mapFunc = null; - if (overlayData[n].precision === 'round') { - mapFunc = Math.round; - } else { - mapFunc = getNumberToPrecision(overlayData[n].precision); - } - values = values.map(mapFunc); - } - text = dwv.utils.replaceFlags2(format, values); - } - } - - var className = getLiClassName(pos, overlayData[n]); - var li = div.getElementsByClassName(className)[0]; - - if (text && li) { - dwvjq.html.cleanNode(li); - li.appendChild(document.createTextNode(text)); - } + this.update = function (data) { + // updates all the data + for (var n = 0; n < data.length; ++n) { + var className = getLiClassName(data[n]); + var li = div.getElementsByClassName(className)[0]; + var text = data[n].value; + if (text && li) { + dwvjq.html.cleanNode(li); + li.appendChild(document.createTextNode(text)); } } }; }; // class dwvjq.gui.info.Overlay - -/** - * Create overlay string array of the image in each corner - * @param {Object} dicomElements DICOM elements of the image - * @return {Array} Array of string to be shown in each corner - */ -dwvjq.gui.info.createOverlayData = function (dicomElements) { - var overlays = {}; - var modality = dicomElements.getFromKey('x00080060'); - if (!modality) { - return overlays; - } - - var omaps = dwvjq.gui.info.overlayMaps; - if (!omaps) { - return overlays; - } - var omap = omaps[modality] || omaps['*']; - - for (var n = 0; n < omap.length; n++) { - // deep copy - var overlay = JSON.parse(JSON.stringify(omap[n])); - - var value = overlay.value; - - // add tag values - var tags = overlay.tags; - if (typeof tags !== 'undefined' && tags.length !== 0) { - // get values - var values = []; - for (var i = 0; i < tags.length; ++i) { - values.push(dicomElements.getElementValueAsStringFromKey(tags[i])); - } - // format - if (typeof overlay.format === 'undefined' || overlay.format === null) { - overlay.format = dwv.utils.createDefaultReplaceFormat(values); - } - value = dwv.utils.replaceFlags2(overlay.format, values); - } - - if (!value || value.length === 0) { - continue; - } - - overlay.value = value.trim(); - - // add value to overlays - var pos = overlay.pos; - if (!overlays[pos]) { - overlays[pos] = []; - } - overlays[pos].push(overlay); - } - - // (0020,0020) Patient Orientation - var valuePO = dicomElements.getFromKey('x00200020'); - if ( - typeof valuePO !== 'undefined' && - valuePO !== null && - valuePO.length === 2 - ) { - var po0 = dwv.dicom.cleanString(valuePO[0]); - var po1 = dwv.dicom.cleanString(valuePO[1]); - overlays.cr = [{value: po0}]; - overlays.cl = [{value: dwv.dicom.getReverseOrientation(po0)}]; - overlays.bc = [{value: po1}]; - overlays.tc = [{value: dwv.dicom.getReverseOrientation(po1)}]; - } - - return overlays; -}; - -/** - * Create overlay string array of the image in each corner - * @param {Object} dicomElements DICOM elements of the image - * @return {Array} Array of string to be shown in each corner - */ -dwvjq.gui.info.createOverlayDataForDom = function (info) { - var overlays = {}; - var omaps = dwvjq.gui.info.overlayMaps; - if (!omaps) { - return overlays; - } - var omap = omaps.DOM; - if (!omap) { - return overlays; - } - - for (var n = 0; n < omap.length; n++) { - // deep copy - var overlay = JSON.parse(JSON.stringify(omap[n])); - - var value = overlay.value; - - var tags = overlay.tags; - if (typeof tags !== 'undefined' && tags.length !== 0) { - // get values - var values = []; - for (var i = 0; i < tags.length; ++i) { - for (var j = 0; j < info.length; ++j) { - if (tags[i] === info[j].name) { - values.push(info[j].value); - } - } - } - // format - if (typeof overlay.format === 'undefined' || overlay.format === null) { - overlay.format = dwv.utils.createDefaultReplaceFormat(values); - } - value = dwv.utils.replaceFlags2(overlay.format, values); - } - - if (!value || value.length === 0) { - continue; - } - - overlay.value = value.trim(); - - // add value to overlays - var pos = overlay.pos; - if (!overlays[pos]) { - overlays[pos] = []; - } - overlays[pos].push(overlay); - } - - return overlays; -}; diff --git a/src/gui/listen.js b/src/gui/listen.js new file mode 100644 index 00000000..d9cf8a50 --- /dev/null +++ b/src/gui/listen.js @@ -0,0 +1,72 @@ +// namespaces +var dwv = dwv || {}; +dwv.utils = dwv.utils || {}; + +/** + * ListenerHandler class: handles add/removing and firing listeners. + * + * @class + * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#example + */ +dwv.utils.ListenerHandler = function () { + /** + * listeners. + * + * @private + */ + var listeners = {}; + + /** + * Add an event listener. + * + * @param {string} type The event type. + * @param {object} callback The method associated with the provided + * event type, will be called with the fired event. + */ + this.add = function (type, callback) { + // create array if not present + if (typeof listeners[type] === 'undefined') { + listeners[type] = []; + } + // add callback to listeners array + listeners[type].push(callback); + }; + + /** + * Remove an event listener. + * + * @param {string} type The event type. + * @param {object} callback The method associated with the provided + * event type. + */ + this.remove = function (type, callback) { + // check if the type is present + if (typeof listeners[type] === 'undefined') { + return; + } + // remove from listeners array + for (var i = 0; i < listeners[type].length; ++i) { + if (listeners[type][i] === callback) { + listeners[type].splice(i, 1); + } + } + }; + + /** + * Fire an event: call all associated listeners with the input event object. + * + * @param {object} event The event to fire. + */ + this.fireEvent = function (event) { + // check if they are listeners for the event type + if (typeof listeners[event.type] === 'undefined') { + return; + } + // fire events from a copy of the listeners array + // to avoid interference from possible add/remove + var stack = listeners[event.type].slice(); + for (var i = 0; i < stack.length; ++i) { + stack[i](event); + } + }; +};