From 7698c072d3075ae876c0bd875fe373dd0a7e2cfe Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Tue, 23 Aug 2022 22:26:10 +0000 Subject: [PATCH] chore: remove AnyDuringMigration from dropdown and widget divs (#6377) * chore: remove AnyDuringMigration from dropdown div * chore: remove AnyDuringMigration from widget div * chore: format --- core/dropdowndiv.ts | 152 +++++++++++++++++++------------------------- core/widgetdiv.ts | 45 +++++-------- 2 files changed, 84 insertions(+), 113 deletions(-) diff --git a/core/dropdowndiv.ts b/core/dropdowndiv.ts index b158d3977..c1db53246 100644 --- a/core/dropdowndiv.ts +++ b/core/dropdowndiv.ts @@ -79,7 +79,7 @@ let arrow: HTMLDivElement; let boundsElement: Element|null = null; /** The object currently using the drop-down. */ -let owner: AnyDuringMigration|null = null; +let owner: Field|null = null; /** Whether the dropdown was positioned to a field or the source block. */ let positionToField: boolean|null = null; @@ -131,9 +131,7 @@ export function createDom() { arrow.className = 'blocklyDropDownArrow'; div.appendChild(arrow); - // AnyDuringMigration because: Type 'number' is not assignable to type - // 'string'. - div.style.opacity = 0 as AnyDuringMigration; + div.style.opacity = '0'; // Transition animation for transform: translate() and opacity. div.style.transition = 'transform ' + ANIMATION_TIME + 's, ' + 'opacity ' + ANIMATION_TIME + 's'; @@ -303,9 +301,8 @@ function showPositionedByRect( * @internal */ export function show( - newOwner: AnyDuringMigration|null, rtl: boolean, primaryX: number, - primaryY: number, secondaryX: number, secondaryY: number, - opt_onHide?: Function): boolean { + newOwner: Field, rtl: boolean, primaryX: number, primaryY: number, + secondaryX: number, secondaryY: number, opt_onHide?: Function): boolean { owner = newOwner; onHide = opt_onHide || null; // Set direction. @@ -328,70 +325,66 @@ export function show( return positionInternal(primaryX, primaryY, secondaryX, secondaryY); } -const internal = {}; +const internal = { + /** + * Get sizing info about the bounding element. + * @return An object containing size information about the bounding element + * (bounding box and width/height). + */ + getBoundsInfo: function(): BoundsInfo { + const boundPosition = style.getPageOffset(boundsElement as Element); + const boundSize = style.getSize(boundsElement as Element); -/** - * Get sizing info about the bounding element. - * - * @returns An object containing size information about the bounding element - * (bounding box and width/height). - */ -// AnyDuringMigration because: Property 'getBoundsInfo' does not exist on type -// '{}'. -(internal as AnyDuringMigration).getBoundsInfo = function(): BoundsInfo { - const boundPosition = style.getPageOffset(boundsElement as Element); - const boundSize = style.getSize(boundsElement as Element); + return { + left: boundPosition.x, + right: boundPosition.x + boundSize.width, + top: boundPosition.y, + bottom: boundPosition.y + boundSize.height, + width: boundSize.width, + height: boundSize.height, + }; + }, - return { - left: boundPosition.x, - right: boundPosition.x + boundSize.width, - top: boundPosition.y, - bottom: boundPosition.y + boundSize.height, - width: boundSize.width, - height: boundSize.height, - }; -}; + /** + * Helper to position the drop-down and the arrow, maintaining bounds. + * See explanation of origin points in show. + * @param primaryX Desired origin point x, in absolute px. + * @param primaryY Desired origin point y, in absolute px. + * @param secondaryX Secondary/alternative origin point x, in absolute px. + * @param secondaryY Secondary/alternative origin point y, in absolute px. + * @return Various final metrics, including rendered positions for drop-down + * and arrow. + */ + getPositionMetrics: function( + primaryX: number, primaryY: number, secondaryX: number, + secondaryY: number): PositionMetrics { + const boundsInfo = internal.getBoundsInfo(); + const divSize = style.getSize(div as Element); -/** - * Helper to position the drop-down and the arrow, maintaining bounds. - * See explanation of origin points in show. - * - * @param primaryX Desired origin point x, in absolute px. - * @param primaryY Desired origin point y, in absolute px. - * @param secondaryX Secondary/alternative origin point x, in absolute px. - * @param secondaryY Secondary/alternative origin point y, in absolute px. - * @returns Various final metrics, including rendered positions for drop-down - * and arrow. - */ -// AnyDuringMigration because: Property 'getPositionMetrics' does not exist on -// type '{}'. -(internal as AnyDuringMigration).getPositionMetrics = function( - primaryX: number, primaryY: number, secondaryX: number, - secondaryY: number): PositionMetrics { - // AnyDuringMigration because: Property 'getBoundsInfo' does not exist on - // type '{}'. - const boundsInfo = (internal as AnyDuringMigration).getBoundsInfo(); - const divSize = style.getSize(div as Element); + // Can we fit in-bounds below the target? + if (primaryY + divSize.height < boundsInfo.bottom) { + return getPositionBelowMetrics(primaryX, primaryY, boundsInfo, divSize); + } + // Can we fit in-bounds above the target? + if (secondaryY - divSize.height > boundsInfo.top) { + return getPositionAboveMetrics( + secondaryX, secondaryY, boundsInfo, divSize); + } + // Can we fit outside the workspace bounds (but inside the window) + // below? + if (primaryY + divSize.height < document.documentElement.clientHeight) { + return getPositionBelowMetrics(primaryX, primaryY, boundsInfo, divSize); + } + // Can we fit outside the workspace bounds (but inside the window) + // above? + if (secondaryY - divSize.height > document.documentElement.clientTop) { + return getPositionAboveMetrics( + secondaryX, secondaryY, boundsInfo, divSize); + } - // Can we fit in-bounds below the target? - if (primaryY + divSize.height < boundsInfo.bottom) { - return getPositionBelowMetrics(primaryX, primaryY, boundsInfo, divSize); - } - // Can we fit in-bounds above the target? - if (secondaryY - divSize.height > boundsInfo.top) { - return getPositionAboveMetrics(secondaryX, secondaryY, boundsInfo, divSize); - } - // Can we fit outside the workspace bounds (but inside the window) below? - if (primaryY + divSize.height < document.documentElement.clientHeight) { - return getPositionBelowMetrics(primaryX, primaryY, boundsInfo, divSize); - } - // Can we fit outside the workspace bounds (but inside the window) above? - if (secondaryY - divSize.height > document.documentElement.clientTop) { - return getPositionAboveMetrics(secondaryX, secondaryY, boundsInfo, divSize); - } - - // Last resort, render at top of page. - return getPositionTopOfPageMetrics(primaryX, boundsInfo, divSize); + // Last resort, render at top of page. + return getPositionTopOfPageMetrics(primaryX, boundsInfo, divSize); + }, }; /** @@ -542,8 +535,7 @@ export function isVisible(): boolean { * @returns True if hidden. */ export function hideIfOwner( - divOwner: AnyDuringMigration|null, - opt_withoutAnimation?: boolean): boolean { + divOwner: Field, opt_withoutAnimation?: boolean): boolean { if (owner === divOwner) { if (opt_withoutAnimation) { hideWithoutAnimation(); @@ -560,9 +552,7 @@ export function hide() { // Start the animation by setting the translation and fading out. // Reset to (initialX, initialY) - i.e., no translation. div.style.transform = 'translate(0, 0)'; - // AnyDuringMigration because: Type 'number' is not assignable to type - // 'string'. - div.style.opacity = 0 as AnyDuringMigration; + div.style.opacity = '0'; // Finish animation - reset all values to default. animateOutTimer = setTimeout(function() { hideWithoutAnimation(); @@ -587,9 +577,7 @@ export function hideWithoutAnimation() { div.style.transform = ''; div.style.left = ''; div.style.top = ''; - // AnyDuringMigration because: Type 'number' is not assignable to type - // 'string'. - div.style.opacity = 0 as AnyDuringMigration; + div.style.opacity = '0'; div.style.display = 'none'; div.style.backgroundColor = ''; div.style.borderColor = ''; @@ -624,11 +612,8 @@ export function hideWithoutAnimation() { function positionInternal( primaryX: number, primaryY: number, secondaryX: number, secondaryY: number): boolean { - // AnyDuringMigration because: Property 'getPositionMetrics' does not exist - // on type '{}'. const metrics = - (internal as AnyDuringMigration) - .getPositionMetrics(primaryX, primaryY, secondaryX, secondaryY); + internal.getPositionMetrics(primaryX, primaryY, secondaryX, secondaryY); // Update arrow CSS. if (metrics.arrowVisible) { @@ -654,9 +639,7 @@ function positionInternal( // Show the div. div.style.display = 'block'; - // AnyDuringMigration because: Type 'number' is not assignable to type - // 'string'. - div.style.opacity = 1 as AnyDuringMigration; + div.style.opacity = '1'; // Add final translate, animated through `transition`. // Coordinates are relative to (initialX, initialY), // where the drop-down is absolutely positioned. @@ -680,9 +663,8 @@ export function repositionForWindowResize() { // event and we want the dropdown div to stick around so users can type into // it. if (owner) { - const field = owner as Field; - const block = field.getSourceBlock() as BlockSvg; - const bBox = positionToField ? getScaledBboxOfField(field) : + const block = owner.getSourceBlock() as BlockSvg; + const bBox = positionToField ? getScaledBboxOfField(owner) : getScaledBboxOfBlock(block); // If we can fit it, render below the block. const primaryX = bBox.left + (bBox.right - bBox.left) / 2; diff --git a/core/widgetdiv.ts b/core/widgetdiv.ts index 2642c4c44..f66c3d638 100644 --- a/core/widgetdiv.ts +++ b/core/widgetdiv.ts @@ -22,12 +22,10 @@ import type {WorkspaceSvg} from './workspace_svg.js'; /** The object currently using this container. */ -let owner: AnyDuringMigration = null; +let owner: unknown = null; /** Optional cleanup function set by whichever object uses the widget. */ -// AnyDuringMigration because: Type 'null' is not assignable to type -// 'Function'. -let dispose: Function = null as AnyDuringMigration; +let dispose: (() => void)|null = null; /** A class name representing the current owner's workspace renderer. */ let rendererClassName = ''; @@ -84,23 +82,19 @@ export function createDom() { * closed. * @alias Blockly.WidgetDiv.show */ -export function show( - newOwner: AnyDuringMigration, rtl: boolean, newDispose: Function) { +export function show(newOwner: unknown, rtl: boolean, newDispose: () => void) { hide(); owner = newOwner; dispose = newDispose; const div = containerDiv; - div!.style.direction = rtl ? 'rtl' : 'ltr'; - div!.style.display = 'block'; + if (!div) return; + div.style.direction = rtl ? 'rtl' : 'ltr'; + div.style.display = 'block'; const mainWorkspace = common.getMainWorkspace() as WorkspaceSvg; rendererClassName = mainWorkspace.getRenderer().getClassName(); themeClassName = mainWorkspace.getTheme().getClassName(); - // AnyDuringMigration because: Argument of type 'HTMLDivElement | null' is - // not assignable to parameter of type 'Element'. - dom.addClass(div as AnyDuringMigration, rendererClassName); - // AnyDuringMigration because: Argument of type 'HTMLDivElement | null' is - // not assignable to parameter of type 'Element'. - dom.addClass(div as AnyDuringMigration, themeClassName); + dom.addClass(div, rendererClassName); + dom.addClass(div, themeClassName); } /** @@ -115,25 +109,20 @@ export function hide() { owner = null; const div = containerDiv; - div!.style.display = 'none'; - div!.style.left = ''; - div!.style.top = ''; + if (!div) return; + div.style.display = 'none'; + div.style.left = ''; + div.style.top = ''; dispose && dispose(); - // AnyDuringMigration because: Type 'null' is not assignable to type - // 'Function'. - dispose = null as AnyDuringMigration; - div!.textContent = ''; + dispose = null; + div.textContent = ''; if (rendererClassName) { - // AnyDuringMigration because: Argument of type 'HTMLDivElement | null' is - // not assignable to parameter of type 'Element'. - dom.removeClass(div as AnyDuringMigration, rendererClassName); + dom.removeClass(div, rendererClassName); rendererClassName = ''; } if (themeClassName) { - // AnyDuringMigration because: Argument of type 'HTMLDivElement | null' is - // not assignable to parameter of type 'Element'. - dom.removeClass(div as AnyDuringMigration, themeClassName); + dom.removeClass(div, themeClassName); themeClassName = ''; } (common.getMainWorkspace() as WorkspaceSvg).markFocused(); @@ -156,7 +145,7 @@ export function isVisible(): boolean { * @param oldOwner The object that was using this container. * @alias Blockly.WidgetDiv.hideIfOwner */ -export function hideIfOwner(oldOwner: AnyDuringMigration) { +export function hideIfOwner(oldOwner: unknown) { if (owner === oldOwner) { hide(); }