feat: add abstract icon class (#7060)

* chore: rename icon to old icon

* feat: add abstract icon class

* chore: format

* chore: move icon class to icons directory

* chore: switch imports to import type

core/block_dragger.ts

@@ -21,7 +21,7 @@ import * as bumpObjects from './bump_objects.js';
 import * as common from './common.js';
 import type {BlockMove} from './events/events_block_move.js';
 import * as eventUtils from './events/utils.js';
-import type {Icon} from './icon.js';
+import type {Icon} from './icon_old.js';
 import {InsertionMarkerManager} from './insertion_marker_manager.js';
 import type {IBlockDragger} from './interfaces/i_block_dragger.js';
 import type {IDragTarget} from './interfaces/i_drag_target.js';

core/block_svg.ts

@@ -30,7 +30,7 @@ import type {BlockMove} from './events/events_block_move.js';
 import * as eventUtils from './events/utils.js';
 import type {Field} from './field.js';
 import {FieldLabel} from './field_label.js';
-import type {Icon} from './icon.js';
+import type {Icon} from './icon_old.js';
 import type {Input} from './inputs/input.js';
 import type {IASTNodeLocationSvg} from './interfaces/i_ast_node_location_svg.js';
 import type {IBoundedElement} from './interfaces/i_bounded_element.js';

core/blockly.ts

@@ -69,7 +69,7 @@ import {VerticalFlyout} from './flyout_vertical.js';
 import {CodeGenerator} from './generator.js';
 import {Gesture} from './gesture.js';
 import {Grid} from './grid.js';
-import {Icon} from './icon.js';
+import {Icon} from './icon_old.js';
 import {inject} from './inject.js';
 import {Align, Input} from './inputs/input.js';
 import {inputTypes} from './inputs/input_types.js';

core/comment.ts

@@ -23,7 +23,7 @@ import * as browserEvents from './browser_events.js';
 import {Bubble} from './bubble.js';
 import * as Css from './css.js';
 import * as eventUtils from './events/utils.js';
-import {Icon} from './icon.js';
+import {Icon} from './icon_old.js';
 import type {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
 import type {Size} from './utils/size.js';

core/icons/icon.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type {Block} from '../block.js';
+import type {BlockSvg} from '../block_svg.js';
+import * as browserEvents from '../browser_events.js';
+import type {IIcon} from '../interfaces/i_icon.js';
+import {Coordinate} from '../utils/coordinate.js';
+import * as dom from '../utils/dom.js';
+import {Size} from '../utils/size.js';
+import {Svg} from '../utils/svg.js';
+
+export abstract class Icon implements IIcon {
+  /**
+   * The position of this icon relative to its blocks top-start,
+   * in workspace units.
+   */
+  protected offsetInBlock: Coordinate = new Coordinate(0, 0);
+
+  /** The position of this icon in workspace coordinates. */
+  protected workspaceLocation: Coordinate = new Coordinate(0, 0);
+
+  /** The root svg element visually representing this icon. */
+  protected svgRoot: SVGGElement|null = null;
+
+  constructor(protected sourceBlock: Block) {}
+
+  getType(): string {
+    return 'abstract type';
+  }
+
+  initView(pointerdownListener: (e: PointerEvent) => void): void {
+    if (this.svgRoot) return;  // The icon has already been initialized.
+
+    const svgBlock = this.sourceBlock as BlockSvg;
+    this.svgRoot = dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'});
+    svgBlock.getSvgRoot().appendChild(this.svgRoot);
+    browserEvents.conditionalBind(
+        this.svgRoot, 'pointerdown', this, pointerdownListener);
+  }
+
+  dispose(): void {}
+
+  getWeight(): number {
+    return -1;
+  }
+
+  getSize(): Size {
+    return new Size(0, 0);
+  }
+
+  applyColour(): void {}
+
+  updateEditable(): void {}
+
+  updateCollapsed(): void {
+    if (!this.svgRoot) {
+      throw new Error(
+          'Attempt to update the collapsed-ness of an icon before its ' +
+          'view has been initialized.');
+    }
+    if (this.sourceBlock.isCollapsed()) {
+      this.svgRoot.style.display = 'none';
+    } else {
+      this.svgRoot.style.display = 'block';
+    }
+  }
+
+  isShownWhenCollapsed(): boolean {
+    return false;
+  }
+
+  setOffsetInBlock(offset: Coordinate): void {
+    this.offsetInBlock = offset;
+  }
+
+  onLocationChange(blockOrigin: Coordinate): void {
+    this.workspaceLocation = Coordinate.sum(blockOrigin, this.offsetInBlock);
+  }
+
+  onClick(): void {}
+}

core/mutator.ts

@@ -25,7 +25,7 @@ import type {Connection} from './connection.js';
 import type {Abstract} from './events/events_abstract.js';
 import {BlockChange} from './events/events_block_change.js';
 import * as eventUtils from './events/utils.js';
-import {Icon} from './icon.js';
+import {Icon} from './icon_old.js';
 import {Options} from './options.js';
 import type {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';

core/renderers/measurables/icon.ts

@@ -8,7 +8,7 @@ import * as goog from '../../../closure/goog/goog.js';
 goog.declareModuleId('Blockly.blockRendering.Icon');
 
 /* eslint-disable-next-line no-unused-vars */
-import type {Icon as BlocklyIcon} from '../../icon.js';
+import type {Icon as BlocklyIcon} from '../../icon_old.js';
 import type {ConstantProvider} from '../common/constants.js';
 
 import {Measurable} from './base.js';

core/warning.ts

@@ -18,7 +18,7 @@ import './events/events_bubble_open.js';
 import type {BlockSvg} from './block_svg.js';
 import {Bubble} from './bubble.js';
 import * as eventUtils from './events/utils.js';
-import {Icon} from './icon.js';
+import {Icon} from './icon_old.js';
 import type {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
 import {Svg} from './utils/svg.js';