Merge pull request #44 from aquaductape/scaling-feature

amoutonbrady · web-flow · commit f32faa626d7d · 2021-08-01T20:17:06.000+02:00
Scaling feature
diff --git a/playground/app.tsx b/playground/app.tsx
@@ -23,6 +23,7 @@ import { isValidUrl } from './utils/isValidUrl';
 
 import CompilerWorker from '../src/workers/compiler?worker';
 import FormatterWorker from '../src/workers/formatter?worker';
+import useZoom from '../src/hooks/useZoom';
 
 (window as any).MonacoEnvironment = {
   getWorker(_moduleId: unknown, label: string) {
@@ -108,6 +109,26 @@ export const App = (): JSX.Element => {
   const actionBar = !noActionBar;
   const editableTabs = !noEditableTabs;
 
+  const { zoomState, updateZoomScale } = useZoom();
+
+  document.addEventListener('keydown', (e) => {
+    const key = e.key;
+
+    if (!zoomState.overrideNative) return;
+
+    if (!((e.ctrlKey || e.metaKey) && (key === '=' || key === '-'))) {
+      return;
+    }
+
+    e.preventDefault();
+
+    if (key === '=') {
+      updateZoomScale('increase');
+    } else {
+      updateZoomScale('decrease');
+    }
+  });
+
   return (
     <div class="relative flex bg-blueGray-50 h-screen overflow-hidden text-blueGray-900 dark:text-blueGray-50 font-sans flex-col">
       <Show
diff --git a/playground/components/header.tsx b/playground/components/header.tsx
@@ -14,6 +14,7 @@ import logo from '../assets/logo.svg?url';
 import { processImport, Tab } from '../../src';
 import { exportToCsb } from '../utils/exportToCsb';
 import { exportToJSON } from '../utils/exportToJson';
+import { ZoomDropdown } from './zoomDropdown';
 
 export const Header: Component<{
   dark: boolean;
@@ -71,7 +72,7 @@ export const Header: Component<{
 
   return (
     <header
-      class="p-2 flex text-sm justify-between items-center bg-brand-default text-white"
+      class="p-2 flex text-sm justify-between items-center bg-brand-default text-white z-20"
       classList={{ 'md:col-span-3': !props.isHorizontal }}
     >
       <h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest">
@@ -172,6 +173,7 @@ export const Header: Component<{
               <Icon class="h-6" path={copy() ? link : share} />
               <span class="text-xs md:sr-only">{copy() ? 'Copied to clipboard' : 'Share'}</span>
             </button>
+            <ZoomDropdown showMenu={showMenu()} />
           </div>
         </div>
         <button
diff --git a/playground/components/zoomDropdown.tsx b/playground/components/zoomDropdown.tsx
@@ -0,0 +1,162 @@
+import { Icon } from '@amoutonbrady/solid-heroicons';
+import { zoomIn } from '@amoutonbrady/solid-heroicons/outline';
+import { Component, createSignal, Show, createEffect } from 'solid-js';
+import useFocusOut from '../../src/hooks/useFocusOut';
+import useZoom from '../../src/hooks/useZoom';
+
+export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
+  const [[toggle, setToggle], { onFOBlur, onFOClick, onFOFocus }] = useFocusOut();
+  const { zoomState, updateZoomScale, updateZoomSettings } = useZoom();
+  const popupDuration = 1250;
+  let containerEl!: HTMLDivElement;
+  let prevZoom = zoomState.zoom;
+  let timeoutId: number | null = null;
+  let btnEl!: HTMLButtonElement;
+  let prevFocusedEl: HTMLElement | null;
+  let stealFocus = true;
+
+  const onMouseMove = () => {
+    stealFocus = true;
+    window.clearTimeout(timeoutId!);
+  };
+
+  const onKeyDownContainer = (e: KeyboardEvent) => {
+    if (!toggle()) return;
+
+    if (e.key === 'Escape' && !stealFocus) {
+      if (prevFocusedEl) {
+        prevFocusedEl.focus();
+        stealFocus = true;
+      }
+      window.clearTimeout(timeoutId!);
+    }
+
+    if (!['Tab', 'Enter', 'Space'].includes(e.key)) return;
+    stealFocus = false;
+    prevFocusedEl = null;
+    window.clearTimeout(timeoutId!);
+  };
+
+  createEffect(() => {
+    if (prevZoom === zoomState.zoom) return;
+    prevZoom = zoomState.zoom;
+
+    if (stealFocus) {
+      prevFocusedEl = document.activeElement as HTMLElement;
+      btnEl.focus();
+      stealFocus = false;
+    }
+
+    setToggle(true);
+
+    window.clearTimeout(timeoutId!);
+
+    timeoutId = setTimeout(() => {
+      setToggle(false);
+
+      stealFocus = true;
+      if (prevFocusedEl) {
+        prevFocusedEl.focus();
+      }
+    }, popupDuration);
+  });
+
+  createEffect(() => {
+    if (!toggle()) {
+      if (containerEl) {
+        containerEl.removeEventListener('mousemove', onMouseMove);
+      }
+      stealFocus = true;
+    } else {
+      if (containerEl) {
+        containerEl.addEventListener('mousemove', onMouseMove, { once: true });
+      }
+    }
+  });
+
+  return (
+    <div
+      class="relative"
+      onFocusIn={onFOFocus}
+      onFocusOut={onFOBlur}
+      onKeyDown={onKeyDownContainer}
+      onClick={() => {
+        window.clearTimeout(timeoutId!);
+      }}
+      ref={containerEl}
+      tabindex="-1"
+    >
+      <button
+        type="button"
+        class="text-black md:text-white flex flex-row space-x-2 items-center w-full md:px-3 px-2 py-2 focus:ring-1 rounded text-white opacity-80 hover:opacity-100"
+        classList={{
+          'bg-gray-900': toggle() && !props.showMenu,
+          'bg-gray-300': toggle() && props.showMenu,
+          'rounded-none	active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
+            props.showMenu,
+        }}
+        onClick={onFOClick}
+        title="Scale editor to make text larger or smaller"
+        ref={btnEl}
+      >
+        <Icon class="h-6" path={zoomIn} />
+        <span class="text-xs md:sr-only">Scale Editor</span>
+      </button>
+      <Show when={toggle()}>
+        <div
+          class="absolute top-full left-1/2 bg-white text-brand-default border border-gray-900 rounded shadow  p-6 -translate-x-1/2 z-10"
+          classList={{
+            'left-1/4': props.showMenu,
+          }}
+        >
+          <div class="flex">
+            <button
+              class="bg-gray-500 text-white px-3 py-1 rounded-l text-sm uppercase tracking-wide hover:bg-gray-800"
+              aria-label="decrease font size"
+              onClick={() => updateZoomScale('decrease')}
+            >
+              -
+            </button>
+            <div class="text-black bg-gray-100 px-3 py-1 text-sm text-center w-20 uppercase tracking-wide ">
+              {zoomState.zoom}%
+            </div>
+            <button
+              class="bg-gray-500 text-white px-3 py-1 rounded-r text-sm uppercase tracking-wide mr-4 hover:bg-gray-800"
+              aria-label="increase font size"
+              onClick={() => updateZoomScale('increase')}
+            >
+              +
+            </button>
+            <button
+              class="bg-gray-500 text-white px-3 py-1 rounded  text-sm uppercase tracking-wide hover:bg-gray-800"
+              aria-label="reset font size"
+              onClick={() => updateZoomScale('reset')}
+            >
+              Reset
+            </button>
+          </div>
+          <div className="mt-10">
+            <label class="block my-3 cursor-pointer">
+              <input
+                type="checkbox"
+                class="mr-4 cursor-pointer"
+                checked={zoomState.overrideNative}
+                onChange={(e) => updateZoomSettings('overrideNative', e.currentTarget.checked)}
+              />
+              Override browser zoom keyboard shortcut
+            </label>
+            <label class="block my-3 cursor-pointer">
+              <input
+                type="checkbox"
+                class="mr-4 cursor-pointer"
+                checked={zoomState.scaleIframe}
+                onChange={(e) => updateZoomSettings('scaleIframe', e.currentTarget.checked)}
+              />
+              Scale iframe <strong>Result</strong>
+            </label>
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+};
diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx
@@ -17,13 +17,16 @@ import {
   clipboardCheck,
 } from '@amoutonbrady/solid-heroicons/outline';
 import { liftOff } from './setupSolid';
+import useZoom from '../../hooks/useZoom';
 
 const Editor: Component<Props> = (props) => {
   const finalProps = mergeProps({ showActionBar: true }, props);
 
   let parent!: HTMLDivElement;
   let editor: mEditor.IStandaloneCodeEditor;
 
+  const { zoomState } = useZoom();
+
   const model = () => mEditor.getModel(Uri.parse(finalProps.url));
 
   const [format, setFormat] = createSignal(false);
@@ -82,7 +85,7 @@ const Editor: Component<Props> = (props) => {
       model: null,
       automaticLayout: true,
       readOnly: finalProps.disabled,
-      fontSize: 15,
+      fontSize: zoomState.fontSize,
       lineDecorationsWidth: 5,
       lineNumbersMinChars: 3,
       padding: { top: 15 },
@@ -112,6 +115,7 @@ const Editor: Component<Props> = (props) => {
       setupEditor();
     }
   });
+
   onCleanup(() => editor?.dispose());
 
   const updateModel = () => {
@@ -124,6 +128,13 @@ const Editor: Component<Props> = (props) => {
   createEffect(() => {
     mEditor.setTheme(finalProps.isDark ? 'vs-dark-plus' : 'vs-light-plus');
   });
+  createEffect(() => {
+    const fontSize = zoomState.fontSize;
+
+    if (!editor) return;
+
+    editor.updateOptions({ fontSize });
+  });
 
   const showActionBar = () => {
     const hasActions = finalProps.canFormat || props.canCopy;
diff --git a/src/components/preview.tsx b/src/components/preview.tsx
@@ -1,8 +1,10 @@
 import { Component, createEffect, createSignal, splitProps, JSX, For, Show } from 'solid-js';
 import { Icon } from '@amoutonbrady/solid-heroicons';
 import { chevronDown, chevronRight } from '@amoutonbrady/solid-heroicons/solid';
+import useZoom from '../hooks/useZoom';
 
 export const Preview: Component<Props> = (props) => {
+  const { zoomState } = useZoom();
   const [internal, external] = splitProps(props, ['code', 'class', 'reloadSignal']);
 
   let iframe!: HTMLIFrameElement;
@@ -186,11 +188,19 @@ export const Preview: Component<Props> = (props) => {
     </html>
   `;
 
+  const styleScale = () => {
+    if (zoomState.scale === 100 || !zoomState.scaleIframe) return '';
+
+    return `width: ${zoomState.scale}%; height: ${zoomState.scale}%; transform: scale(${
+      zoomState.zoom / 100
+    }); transform-origin: 0 0;`;
+  };
+
   return (
     <div
       class={`grid relative ${internal.class}`}
       {...external}
-      style="grid-template-rows: 1fr auto"
+      style={`grid-template-rows: 1fr auto; ${styleScale()}`}
     >
       <iframe
         title="Solid REPL"
diff --git a/src/hooks/useFocusOut.ts b/src/hooks/useFocusOut.ts
@@ -0,0 +1,70 @@
+import { createEffect, createSignal, onCleanup } from 'solid-js';
+
+type TCb = (t: boolean) => void;
+export type FocusOutToggle = TCb;
+
+const useFocusOut = (
+  props: {
+    onToggle?: FocusOutToggle;
+    debug?: boolean;
+  } = {},
+) => {
+  const onToggle = props.onToggle;
+  const debug = props.debug || false;
+  const [toggle, setToggle] = createSignal(false);
+  let timeoutId: number | null = 0;
+  let init = false;
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') return;
+    setToggle(false);
+  };
+
+  createEffect(() => {
+    const toggleVal = toggle();
+
+    if (!init) {
+      init = true;
+      return;
+    }
+    if (!toggleVal && debug) return;
+
+    if (toggleVal) {
+      document.addEventListener('keydown', onKeyDown);
+    } else {
+      document.removeEventListener('keydown', onKeyDown);
+    }
+    onToggle && onToggle(toggleVal);
+  });
+
+  const onFOClick = () => {
+    clearTimeout(timeoutId!);
+    timeoutId = null;
+
+    const toggleVal = toggle();
+    setToggle(!toggleVal);
+  };
+
+  const onFOBlur = () => {
+    const newTimeout = window.setTimeout(() => {
+      setToggle(false);
+    });
+    timeoutId = newTimeout;
+  };
+
+  const onFOFocus = () => {
+    clearTimeout(timeoutId!);
+    timeoutId = null;
+  };
+
+  onCleanup(() => {
+    document.removeEventListener('keydown', onKeyDown);
+  });
+
+  return [[toggle, setToggle], { onFOBlur, onFOFocus, onFOClick }] as [
+    [() => boolean, (v: boolean) => void],
+    { onFOBlur: () => void; onFOFocus: () => void; onFOClick: () => void },
+  ];
+};
+
+export default useFocusOut;
diff --git a/src/hooks/useZoom.ts b/src/hooks/useZoom.ts
