From c01def1d05047f96af68692034e2294a7643bc23 Mon Sep 17 00:00:00 2001 From: ritch Date: Tue, 24 May 2022 17:59:19 -0700 Subject: [PATCH] wip --- app/packages/app/src/components/Looker.tsx | 9 ++++ app/packages/app/src/recoil/atoms.ts | 5 ++ .../looker/src/elements/common/actions.ts | 20 ++++++++ .../src/elements/common/controls.module.css | 2 +- .../looker/src/elements/common/controls.ts | 46 ++++++++++++++++++- app/packages/looker/src/elements/index.ts | 3 ++ app/packages/looker/src/elements/util.ts | 4 ++ app/packages/looker/src/processOverlays.ts | 4 ++ app/packages/looker/src/state.ts | 1 + 9 files changed, 92 insertions(+), 2 deletions(-) diff --git a/app/packages/app/src/components/Looker.tsx b/app/packages/app/src/components/Looker.tsx index 325400925a..8e6216adfb 100644 --- a/app/packages/app/src/components/Looker.tsx +++ b/app/packages/app/src/components/Looker.tsx @@ -404,6 +404,7 @@ const lookerOptions = selector({ ...get(atoms.savedLookerOptions), selectedLabels: [...get(selectors.selectedLabelIds)], fullscreen: get(atoms.fullscreen), + showOverlays: get(atoms.showOverlays), timeZone: get(selectors.timeZone), coloring: get(colorAtoms.coloring(true)), alpha: get(atoms.alpha(true)), @@ -436,6 +437,12 @@ const useFullscreen = () => { }); }; +const useShowOverlays = () => { + return useRecoilCallback(({ set }) => async (event: CustomEvent) => { + set(atoms.showOverlays, event.detail); + }); +}; + const useClearSelectedLabels = () => { return useRecoilCallback( ({ set }) => async () => set(atoms.selectedLabels, {}), @@ -535,6 +542,8 @@ const Looker = ({ const headerRef = useRef(); useEventHandler(looker, "options", useLookerOptionsUpdate()); useEventHandler(looker, "fullscreen", useFullscreen()); + useEventHandler(looker, "showOverlays", useShowOverlays()); + onNext && useEventHandler(looker, "next", onNext); onPrevious && useEventHandler(looker, "previous", onPrevious); onClose && useEventHandler(looker, "close", onClose); diff --git a/app/packages/app/src/recoil/atoms.ts b/app/packages/app/src/recoil/atoms.ts index ce5d4295d6..567064bcb9 100644 --- a/app/packages/app/src/recoil/atoms.ts +++ b/app/packages/app/src/recoil/atoms.ts @@ -68,6 +68,11 @@ export const fullscreen = atom({ default: false, }); +export const showOverlays = atom({ + key: "showOverlays", + default: true, +}); + export const teams = atom({ key: "teams", default: { diff --git a/app/packages/looker/src/elements/common/actions.ts b/app/packages/looker/src/elements/common/actions.ts index 2c1ae49adb..ecf6c48179 100644 --- a/app/packages/looker/src/elements/common/actions.ts +++ b/app/packages/looker/src/elements/common/actions.ts @@ -142,6 +142,25 @@ export const previous: Control = { }, }; + +export const toggleOverlays: Control = { + title: "Show/hide overlays", + shortcut: "h", + eventKeys: "h", + detail: "Toggles visibility of all overlays", + action: (update, dispatchEvent) => { + update( + ({ config: { thumbnail }, options: { showOverlays } }) => + thumbnail ? {} : { options: { showOverlays: !showOverlays } }, + ({ config: { thumbnail }, options: { showOverlays } }) => { + if (!thumbnail) { + dispatchEvent("showOverlays", showOverlays); + } + } + ); + }, +}; + export const rotatePrevious: Control = { title: "Rotate label forward", shortcut: "↓", @@ -398,6 +417,7 @@ export const COMMON = { fullscreen, json, wheel, + toggleOverlays }; export const COMMON_SHORTCUTS = readActions(COMMON); diff --git a/app/packages/looker/src/elements/common/controls.module.css b/app/packages/looker/src/elements/common/controls.module.css index 77f16d74f8..2006d1fdbd 100644 --- a/app/packages/looker/src/elements/common/controls.module.css +++ b/app/packages/looker/src/elements/common/controls.module.css @@ -10,7 +10,7 @@ z-index: 20; padding-bottom: 0.25rem; display: grid; - grid-template-columns: 0.5rem max-content max-content max-content max-content 1fr max-content max-content max-content max-content max-content max-content max-content max-content max-content 0.5rem; + grid-template-columns: 0.5rem max-content max-content max-content max-content 1fr max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content 0.5rem; grid-gap: 0.25rem; justify-items: center; align-items: center; diff --git a/app/packages/looker/src/elements/common/controls.ts b/app/packages/looker/src/elements/common/controls.ts index 3890577aff..5f08f54003 100644 --- a/app/packages/looker/src/elements/common/controls.ts +++ b/app/packages/looker/src/elements/common/controls.ts @@ -15,6 +15,7 @@ import { zoomOut, cropToContent, json, + toggleOverlays } from "./actions"; import cropIcon from "../../icons/crop.svg"; import jsonIcon from "../../icons/json.svg"; @@ -223,6 +224,49 @@ export class FullscreenButtonElement< } } + +export class ToggleOverlaysButtonElement< + State extends BaseState +> extends BaseElement { + private overlaysVisible: boolean; + + getEvents(): Events { + return { + click: ({ event, update, dispatchEvent }) => { + event.stopPropagation(); + event.preventDefault(); + toggleOverlays.action(update, dispatchEvent); + }, + }; + } + + createHTMLElement() { + const element = document.createElement("img"); + element.classList.add(lookerClickable); + element.style.padding = "2px"; + element.style.gridArea = "2 / 14 / 2 / 14"; + return element; + } + + renderSelf({ options: { showOverlays } }: Readonly) { + if (this.overlaysVisible !== showOverlays) { + this.overlaysVisible = showOverlays; + + if (showOverlays) { + this.element.title = `Hide all overlays (h)`; + this.element.classList.remove(lookerControlActive); + this.element.src = ICONS.overlaysHidden; + } else { + this.element.title = `Show all overlays (h)`; + this.element.classList.add(lookerControlActive); + this.element.src = ICONS.overlaysVisible; + } + } + + return this.element; + } +} + export class PlusElement extends BaseElement< State, HTMLImageElement @@ -302,7 +346,7 @@ export class HelpButtonElement extends BaseElement< element.style.padding = "2px"; element.src = ICONS.help; element.title = "Help (?)"; - element.style.gridArea = "2 / 14 / 2 / 14"; + element.style.gridArea = "2 / 16 / 2 / 16"; return element; } diff --git a/app/packages/looker/src/elements/index.ts b/app/packages/looker/src/elements/index.ts index 9605cd94d5..2d1822b635 100644 --- a/app/packages/looker/src/elements/index.ts +++ b/app/packages/looker/src/elements/index.ts @@ -56,6 +56,7 @@ export const getFrameElements: GetElements = ( { node: common.MinusElement }, { node: common.CropToContentButtonElement }, { node: common.FullscreenButtonElement }, + { node: common.ToggleOverlaysButtonElement }, { node: common.JSONButtonElement }, { node: common.OptionsButtonElement }, { node: common.HelpButtonElement }, @@ -123,6 +124,7 @@ export const getImageElements: GetElements = ( { node: common.MinusElement }, { node: common.CropToContentButtonElement }, { node: common.FullscreenButtonElement }, + { node: common.ToggleOverlaysButtonElement }, { node: common.JSONButtonElement }, { node: common.OptionsButtonElement }, { node: common.HelpButtonElement }, @@ -199,6 +201,7 @@ export const getVideoElements: GetElements = ( { node: common.MinusElement }, { node: common.CropToContentButtonElement }, { node: common.FullscreenButtonElement }, + { node: common.ToggleOverlaysButtonElement }, { node: common.JSONButtonElement }, { node: common.OptionsButtonElement }, { node: common.HelpButtonElement }, diff --git a/app/packages/looker/src/elements/util.ts b/app/packages/looker/src/elements/util.ts index e3547da9b4..61e78f27a7 100644 --- a/app/packages/looker/src/elements/util.ts +++ b/app/packages/looker/src/elements/util.ts @@ -24,6 +24,10 @@ export const ICONS = Object.freeze({ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z' /%3E%3C/svg%3E", options: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z' /%3E%3C/svg%3E", + overlaysVisible: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M16,17H5V7H16L19.55,12M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z' /%3E%3C/svg%3E", + overlaysHidden: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M2,4.27L3.28,3L20,19.72L18.73,21L16.63,18.9C16.43,18.96 16.22,19 16,19H5A2,2 0 0,1 3,17V7C3,6.5 3.17,6.07 3.46,5.73L2,4.27M5,17H14.73L5,7.27V17M19.55,12L16,7H9.82L7.83,5H16C16.67,5 17.27,5.33 17.63,5.84L22,12L19,16.2L17.59,14.76L19.55,12Z' /%3E%3C/svg%3E" }); export type DispatchEvent = (eventType: string, details?: any) => void; diff --git a/app/packages/looker/src/processOverlays.ts b/app/packages/looker/src/processOverlays.ts index 8a13c0fb9b..d0ffc5d32f 100644 --- a/app/packages/looker/src/processOverlays.ts +++ b/app/packages/looker/src/processOverlays.ts @@ -18,6 +18,10 @@ const processOverlays = ( let classifications = null; + if (!state.config.thumbnail && !state.options.showOverlays) { + return [[], 0]; + } + for (const overlay of overlays) { if (overlay instanceof ClassificationsOverlay) { classifications = overlay; diff --git a/app/packages/looker/src/state.ts b/app/packages/looker/src/state.ts index 729008cee0..e595f2c7aa 100644 --- a/app/packages/looker/src/state.ts +++ b/app/packages/looker/src/state.ts @@ -86,6 +86,7 @@ interface BaseOptions { showIndex: boolean; showJSON: boolean; showLabel: boolean; + showOverlays: boolean; showTooltip: boolean; onlyShowHoveredLabel: boolean; smoothMasks: boolean;