scalableminds · philippotto · Jul 18, 2023 · Jun 23, 2023 · Jun 26, 2023 · Jun 26, 2023
diff --git a/.circleci/not-on-master.sh b/.circleci/not-on-master.sh
@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
 set -Eeuo pipefail
 
-if [ "${CIRCLE_BRANCH}" == "master" ]; then
+# if [ "${CIRCLE_BRANCH}" == "master" ]; then
   echo "Skipping this step on master..."
-else
-  exec "$@"
-fi
+# else
+#   exec "$@"
+# fi
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Changed
 - Redesigned the info tab in the right-hand sidebar to be fit the new branding and design language. [#7110](https://github.com/scalableminds/webknossos/pull/7110)
+- Improved support for touch devices by adding floating buttons for easier navigation and layout changes. [#7178](https://github.com/scalableminds/webknossos/pull/7178)
 - Optimized processing of parallel requests (new thread pool configuration, asynchronous FossilDB client), improving performance and reducing idle waiting. [#7139](https://github.com/scalableminds/webknossos/pull/7139)
 
 ### Fixed

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -2,7 +2,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=yes"
+    />
     <meta name="commit-hash" content="@(webknossos.BuildInfo.commitHash)" />
     <title>@(conf.WebKnossos.tabTitle)</title>
     @if(conf.Features.isWkorgInstance){
@@ -67,12 +70,20 @@
     <main id="main-container"></main>
 
     @if(conf.GoogleAnalytics.trackingId.nonEmpty) {
-    <script async src="https://www.googletagmanager.com/gtag/js?id=@(conf.GoogleAnalytics.trackingId)"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=@(conf.GoogleAnalytics.trackingId)"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag() { dataLayer.push(arguments); }
-      gtag('js', new Date());
-      gtag('config', '@(conf.GoogleAnalytics.trackingId)', { 'anonymize_ip': true, 'cookie_expires': 0 });
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "@(conf.GoogleAnalytics.trackingId)", {
+        anonymize_ip: true,
+        cookie_expires: 0,
+      });
     </script>
     }
   </body>

diff --git a/frontend/javascripts/components/adapt_viewport_metatag.ts b/frontend/javascripts/components/adapt_viewport_metatag.ts
diff --git a/frontend/javascripts/components/brain_spinner.tsx b/frontend/javascripts/components/brain_spinner.tsx
@@ -20,8 +20,8 @@ export default function BrainSpinner({ message, isLoading = true }: Props) {
             src="/assets/images/brain.svg"
             alt=""
             style={{
-              width: 375,
-              height: 299,
+              width: "100%",
+              height: "100%",
               marginLeft: "auto",
               marginRight: "auto",
               marginTop: "10%",

diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts
@@ -617,7 +617,7 @@ export class InputMouse {
     if (this.lastScale != null) {
       const delta = evt.scale - this.lastScale;
       this.lastScale = evt.scale;
-      this.emitter.emit("pinch", 10 * delta);
+      this.emitter.emit("pinch", 10 * delta, this.position);
     }
   };
 

diff --git a/frontend/javascripts/libs/react_hooks.ts b/frontend/javascripts/libs/react_hooks.ts
@@ -90,6 +90,39 @@ export function useKeyPress(targetKey: "Shift" | "Alt" | "Control") {
   return keyPressed;
 }
 
+export function useRepeatedButtonTrigger(triggerCallback: () => void, repeatDelay: number = 150) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  useEffect(() => {
+    let timerId: NodeJS.Timeout;
+
+    if (isPressed) {
+      const trigger = () => {
+        timerId = setTimeout(() => {
+          triggerCallback();
+          trigger();
+        }, repeatDelay);
+      };
+
+      trigger();
+    }
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [isPressed, triggerCallback]);
+
+  const onTouchStart = () => {
+    setIsPressed(true);
+  };
+
+  const onTouchEnd = () => {
+    setIsPressed(false);
+  };
+
+  return { onClick: triggerCallback, onTouchStart, onTouchEnd };
+}
+
 export function useSearchParams() {
   const location = useLocation();
   return Object.fromEntries(new URLSearchParams(location.search).entries());

diff --git a/frontend/javascripts/libs/utils.ts b/frontend/javascripts/libs/utils.ts
@@ -24,6 +24,10 @@ export function mod(x: number, n: number) {
   return ((x % n) + n) % n;
 }
 
+export function keys<T extends string | number | symbol>(o: Record<T, any>): T[] {
+  return Object.keys(o) as Array<keyof typeof o>;
+}
+
 export function values<T>(o: { [s: string]: T } | ArrayLike<T>): T[] {
   return Object.values(o);
 }
@@ -1070,16 +1074,6 @@ export function getWindowBounds(): [number, number] {
   return [width, height];
 }
 
-export function disableViewportMetatag() {
-  const viewport = document.querySelector("meta[name=viewport]");
-
-  if (!viewport) {
-    return;
-  }
-
-  viewport.setAttribute("content", "");
-}
-
 /**
  * Deep diff between two object, using lodash
  * @param  {Object} object Object compared

diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx
@@ -739,17 +739,6 @@ function Navbar({
     isHelpMenuOpen,
   );
 
-  const navbarStyle: Record<string, any> = {
-    padding: 0,
-    overflowX: "auto",
-    overflowY: "hidden",
-    position: "fixed",
-    height: navbarHeight,
-    display: "flex",
-    alignItems: "center",
-    whiteSpace: "nowrap",
-  };
-
   const _isAuthenticated = isAuthenticated && activeUser != null;
 
   const isAdminOrManager = activeUser != null ? Utils.isUserAdminOrManager(activeUser) : false;
@@ -826,7 +815,6 @@ function Navbar({
 
   return (
     <Header
-      style={navbarStyle}
       className={classnames("navbar-header", {
         "collapsed-nav-header": collapseAllNavItems,
       })}

diff --git a/frontend/javascripts/oxalis/constants.ts b/frontend/javascripts/oxalis/constants.ts
@@ -49,7 +49,7 @@ export enum OrthoViews {
   PLANE_XZ = "PLANE_XZ",
   TDView = "TDView",
 }
-export const enum OrthoViewsToName {
+export enum OrthoViewsToName {
   PLANE_XY = "XY",
   PLANE_YZ = "YZ",
   PLANE_XZ = "XZ",

diff --git a/frontend/javascripts/oxalis/controller.tsx b/frontend/javascripts/oxalis/controller.tsx
@@ -72,9 +72,6 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
   // controller - a controller for each row, each column and each
   // cross in this matrix.
   componentDidMount() {
-    // The annotation view should be rendered without the special mobile-friendly
-    // viewport meta tag.
-    Utils.disableViewportMetatag();
     this._isMounted = true;
     Store.dispatch(setIsInAnnotationViewAction(true));
     UrlManager.initialize();

diff --git a/frontend/javascripts/oxalis/controller/combinations/tool_controls.ts b/frontend/javascripts/oxalis/controller/combinations/tool_controls.ts
@@ -134,7 +134,10 @@ export class MoveTool {
 
         handleClickSegment(pos);
       },
-      pinch: (delta: number) => MoveHandlers.zoom(delta, true),
+      pinch: (delta: number, center: Point2) => {
+        MoveHandlers.setMousePosition(center);
+        MoveHandlers.zoom(delta, true);
+      },
       mouseMove: MoveHandlers.moveWhenAltIsPressed,
       out: () => {
         MoveHandlers.setMousePosition(null);

diff --git a/frontend/javascripts/oxalis/model/actions/actions.ts b/frontend/javascripts/oxalis/model/actions/actions.ts
@@ -29,14 +29,22 @@ export type Action =
   | SegmentationAction
   | ConnectomeAction
   | ProofreadAction
-  | OrganizationAction;
+  | OrganizationAction
+  | ReturnType<typeof wkReadyAction>
+  | ReturnType<typeof sceneControllerReadyAction>
+  | ReturnType<typeof restartSagaAction>;
 
-export const wkReadyAction = () => ({
-  type: "WK_READY",
-});
-export const sceneControllerReadyAction = () => ({
-  type: "SCENE_CONTROLLER_READY",
-});
-export const restartSagaAction = () => ({
-  type: "RESTART_SAGA",
-});
+export const wkReadyAction = () =>
+  ({
+    type: "WK_READY",
+  } as const);
+
+export const sceneControllerReadyAction = () =>
+  ({
+    type: "SCENE_CONTROLLER_READY",
+  } as const);
+
+export const restartSagaAction = () =>
+  ({
+    type: "RESTART_SAGA",
+  } as const);
diff --git a/frontend/javascripts/oxalis/view/components/border_toggle_button.tsx b/frontend/javascripts/oxalis/view/components/border_toggle_button.tsx
@@ -34,15 +34,15 @@ function BorderToggleButton(props: Props) {
         className={className}
         size="small"
         /*
-    Normally, a simple onClick handler would be enough for this button
-    to support both desktops as mobile devices with touchscreens.
-    However, since the button is placed in the FlexLayout's panels,
-    its presence interferes with the existing mouse drag / touch drag
-    behavior to move tabs around.
-    For this reason, we have to call stopPropagation and preventDefault.
-    Additionally, we need to detect whether the user has dragged a tab
-    across screen (to move a tab). In that case, onTouchEnd does nothing.
-    */
+          Normally, a simple onClick handler would be enough for this button
+          to support both desktops as mobile devices with touchscreens.
+          However, since the button is placed in the FlexLayout's panels,
+          its presence interferes with the existing mouse drag / touch drag
+          behavior to move tabs around.
+          For this reason, we have to call stopPropagation and preventDefault.
+          Additionally, we need to detect whether the user has dragged a tab
+          across screen (to move a tab). In that case, onTouchEnd does nothing.
+        */
         onClick={(event) => {
           if (event != null) {
             // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'EventTarge... Remove this comment to see the full error message

diff --git a/frontend/javascripts/oxalis/view/layouting/default_layout_configs.ts b/frontend/javascripts/oxalis/view/layouting/default_layout_configs.ts
@@ -112,20 +112,14 @@ const borderTabs: Record<keyof typeof BorderTabs, TabNode> = {};
 Utils.entries(BorderTabs).forEach(([tabKey, borderTab]: [string, BorderTabType]) => {
   borderTabs[tabKey] = getTabDescriptorForBorderTab(borderTab);
 });
-// @ts-expect-error ts-migrate(2739) FIXME: Type '{}' is missing the following properties from... Remove this comment to see the full error message
-const OrthoViewports: Record<keyof typeof OrthoViews, TabNode> = {};
-Object.keys(OrthoViews).forEach((viewportId) => {
-  // @ts-expect-error ts-migrate(2476) FIXME: A const enum member can only be accessed using a s... Remove this comment to see the full error message
+const OrthoViewports = {} as Record<keyof typeof OrthoViews, TabNode>;
+Utils.keys(OrthoViews).forEach((viewportId) => {
   const name = OrthoViewsToName[viewportId];
-  // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
   OrthoViewports[viewportId] = Tab(name, viewportId, "viewport");
 });
-// @ts-expect-error ts-migrate(2739) FIXME: Type '{}' is missing the following properties from... Remove this comment to see the full error message
-const ArbitraryViewports: Record<keyof typeof ArbitraryViews, TabNode> = {};
-Object.keys(ArbitraryViews).forEach((viewportId) => {
-  // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+const ArbitraryViewports = {} as Record<keyof typeof ArbitraryViews, TabNode>;
+Utils.keys(ArbitraryViews).forEach((viewportId) => {
   const name = ArbitraryViewsToName[viewportId];
-  // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
   ArbitraryViewports[viewportId] = Tab(name, viewportId, "viewport");
 });
 const globalLayoutSettings: GlobalConfig = {
@@ -149,8 +143,12 @@ function buildTabsets(setsOfTabs: Array<Array<TabNode>>): Array<TabsetNode> {
   return tabsets;
 }
 
-// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'side' implicitly has an 'any' type.
-function buildBorder(side, tabset: Array<TabNode>, width: number, isBorderOpen: boolean): Border {
+function buildBorder(
+  side: "left" | "right",
+  tabset: Array<TabNode>,
+  width: number,
+  isBorderOpen: boolean,
+): Border {
   const buildTabset = Tabset(tabset, 100);
   const border: Border = {
     type: "border",

diff --git a/frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.tsx b/frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.tsx
@@ -42,7 +42,9 @@ import {
 } from "./flex_layout_helper";
 import { layoutEmitter, getLayoutConfig } from "./layout_persistence";
 import BorderToggleButton from "../components/border_toggle_button";
+
 const { Footer } = Layout;
+
 type Model = InstanceType<typeof FlexLayout.Model>;
 type Action = InstanceType<typeof FlexLayout.Action>;
 type StateProps = {
@@ -124,6 +126,11 @@ class FlexLayoutWrapper extends React.PureComponent<Props, State> {
         this.toggleBorder(side);
       }),
     );
+    this.unbindListeners.push(
+      layoutEmitter.on("toggleMaximize", () => {
+        this.toggleMaximize();
+      }),
+    );
     this.unbindListeners.push(this.attachKeyboardShortcuts());
   }
 
@@ -210,23 +217,23 @@ class FlexLayoutWrapper extends React.PureComponent<Props, State> {
     }
   }
 
-  attachKeyboardShortcuts() {
-    const toggleMaximize = () => {
-      const { model } = this.state;
-      const activeNode = model.getActiveTabset();
+  toggleMaximize = () => {
+    const { model } = this.state;
+    const activeNode = model.getActiveTabset();
 
-      if (activeNode == null) {
-        return;
-      }
+    if (activeNode == null) {
+      return;
+    }
 
-      const toggleMaximiseAction = FlexLayout.Actions.maximizeToggle(activeNode.getId());
-      model.doAction(toggleMaximiseAction);
-      this.onAction(toggleMaximiseAction);
-    };
+    const toggleMaximiseAction = FlexLayout.Actions.maximizeToggle(activeNode.getId());
+    model.doAction(toggleMaximiseAction);
+    this.onAction(toggleMaximiseAction);
+  };
 
+  attachKeyboardShortcuts() {
     const keyboardNoLoop = new InputKeyboardNoLoop(
       {
-        ".": toggleMaximize,
+        ".": this.toggleMaximize,
         k: () => this.toggleBorder("left"),
         l: () => this.toggleBorder("right"),
       },