remove css zoom usage

frontend/farm_designer/index.tsx

@@ -11,7 +11,8 @@ import { NumericSetting, BooleanSetting } from "../session_keys";
 import { isUndefined, last, isFinite } from "lodash";
 import { AxisNumberProperty, BotSize } from "./map/interfaces";
 import {
-  getBotSize, round, getPanelStatus, MapPanelStatus, mapPanelClassName
+  getBotSize, round, getPanelStatus, MapPanelStatus, mapPanelClassName,
+  getMapPadding,
 } from "./map/util";
 import {
   calcZoomLevel, getZoomLevelIndex, saveZoomLevelIndex
@@ -136,6 +137,9 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
       : 1;
     const imageAgeInfo = { newestDate, toOldest };
 
+    const mapPadding = getMapPadding(getPanelStatus());
+    const padHeightOffset = mapPadding.top - mapPadding.top / zoom_level;
+
     return <div className="farm-designer">
 
       <GardenMapLegend
@@ -162,7 +166,11 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
 
       <div
         className={`farm-designer-map ${this.mapPanelClassName}`}
-        style={{ zoom: zoom_level }}>
+        style={{
+          transform: `scale(${zoom_level})`,
+          transformOrigin: `${mapPadding.left}px ${mapPadding.top}px`,
+          height: `calc(${100 / zoom_level}% + ${padHeightOffset}px)`
+        }}>
         <GardenMap
           showPoints={show_points}
           showPlants={show_plants}

frontend/farm_designer/map/__tests__/util_test.ts

@@ -360,7 +360,7 @@ describe("getGardenCoordinates()", () => {
       configurable: true
     });
     Object.defineProperty(window, "getComputedStyle", {
-      value: () => ({ zoom: 1 }), configurable: true
+      value: () => ({ transform: "scale(1)" }), configurable: true
     });
   });
 
@@ -378,7 +378,7 @@ describe("getGardenCoordinates()", () => {
 
   it("falls back to zoom level", () => {
     Object.defineProperty(window, "getComputedStyle", {
-      value: () => ({ zoom: undefined }), configurable: true
+      value: () => ({ transform: undefined }), configurable: true
     });
     const result = getGardenCoordinates(fakeProps());
     expect(result).toEqual({ x: 170, y: 70 });

frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.tsx

@@ -109,11 +109,11 @@ describe("dropPlant", () => {
 describe("dragPlant", () => {
   beforeEach(function () {
     Object.defineProperty(document, "querySelector", {
-      value: () => { return { scrollLeft: 1, scrollTop: 2 }; },
+      value: () => ({ scrollLeft: 1, scrollTop: 2 }),
       configurable: true
     });
     Object.defineProperty(window, "getComputedStyle", {
-      value: () => { return { zoom: 1 }; }, configurable: true
+      value: () => ({ transform: "scale(1)" }), configurable: true
     });
   });
 
@@ -147,7 +147,7 @@ describe("dragPlant", () => {
 
   it("moves plant while swapped in odd quadrant", () => {
     Object.defineProperty(window, "getComputedStyle", {
-      value: () => { return { zoom: 0.5 }; }, configurable: true
+      value: () => ({ transform: "scale(0.5)" }), configurable: true
     });
     const p = fakeProps();
     p.mapTransformProps.quadrant = 3;
@@ -167,7 +167,7 @@ describe("dragPlant", () => {
 
   it("moves plant: zoom unknown", () => {
     Object.defineProperty(window, "getComputedStyle", {
-      value: () => { return { zoom: undefined }; }, configurable: true
+      value: () => ({ transform: undefined }), configurable: true
     });
     const p = fakeProps();
     dragPlant(p);

frontend/farm_designer/map/layers/plants/plant_actions.tsx

@@ -10,7 +10,7 @@ import { isNumber, isString } from "lodash";
 import { CropLiveSearchResult, GardenMapState } from "../../../interfaces";
 import { getPathArray } from "../../../../history";
 import { findBySlug } from "../../../search_selectors";
-import { transformXY, round } from "../../util";
+import { transformXY, round, getZoomLevelFromMap } from "../../util";
 import { movePlant } from "../../../actions";
 import { cachedCrop } from "../../../../open_farm/cached_crop";
 import { t } from "../../../../i18next_wrapper";
@@ -125,7 +125,7 @@ export const dragPlant = (props: {
   const { isDragging, gridSize, pageX, pageY, qPageX, qPageY } = props;
   const { quadrant, xySwap } = props.mapTransformProps;
   if (isDragging && plant && map) {
-    const zoomLvl = parseFloat(window.getComputedStyle(map).zoom || "1");
+    const zoomLvl = getZoomLevelFromMap(map);
     const { qx, qy } = transformXY(pageX, pageY, props.mapTransformProps);
     const deltaX = Math.round((qx - (qPageX || qx)) / zoomLvl);
     const deltaY = Math.round((qy - (qPageY || qy)) / zoomLvl);

frontend/farm_designer/map/legend/garden_map_legend.tsx

@@ -94,11 +94,8 @@ const LayerToggles = (props: GardenMapLegendProps) => {
 
 export function GardenMapLegend(props: GardenMapLegendProps) {
   const menuClass = props.legendMenuOpen ? "active" : "";
-  return <div
-    className={`garden-map-legend ${menuClass} ${props.className}`}
-    style={{ zoom: 1 }}>
-    <div
-      className={"menu-pullout " + menuClass}
+  return <div className={`garden-map-legend ${menuClass} ${props.className}`}>
+    <div className={"menu-pullout " + menuClass}
       onClick={props.toggle(BooleanSetting.legend_menu_open)}>
       <span>
         {t("Menu")}

frontend/farm_designer/map/util.ts

@@ -82,7 +82,7 @@ export const mapPanelClassName = () => {
 };
 
 /** Controlled by .farm-designer-map padding x10 */
-const getMapPadding =
+export const getMapPadding =
   (panelStatus: MapPanelStatus): { left: number, top: number } => {
     switch (panelStatus) {
       case MapPanelStatus.short: return { left: 20, top: 350 };
@@ -309,6 +309,9 @@ export const getMode = (): Mode => {
   return Mode.none;
 };
 
+export const getZoomLevelFromMap = (map: Element) =>
+  parseFloat((window.getComputedStyle(map).transform || "(1").split("(")[1]);
+
 /** Get the garden map coordinate of a cursor or screen interaction. */
 export const getGardenCoordinates = (props: {
   mapTransformProps: MapTransformProps,
@@ -320,7 +323,7 @@ export const getGardenCoordinates = (props: {
   const map = document.querySelector(".farm-designer-map");
   const page = document.querySelector(".farm-designer");
   if (el && map && page) {
-    const zoomLvl = parseFloat(window.getComputedStyle(map).zoom || "1");
+    const zoomLvl = getZoomLevelFromMap(map);
     const params: ScreenToGardenParams = {
       page: { x: props.pageX, y: props.pageY },
       scroll: { left: page.scrollLeft, top: map.scrollTop * zoomLvl },