blockly 8.0.4-beta.0 → 8.0.5-beta.0

package/core/renderers/zelos/path_object.ts

@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview An object that owns a block's rendering SVG elements.
+ */
+
+/**
+ * An object that owns a block's rendering SVG elements.
+ * @class
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.PathObject');
+
+/* eslint-disable-next-line no-unused-vars */
+// Unused import preserved for side-effects. Remove if unneeded.
+// import '../../theme.js';
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {Connection} from '../../connection.js';
+import type {BlockStyle} from '../../theme.js';
+import * as dom from '../../utils/dom.js';
+import {Svg} from '../../utils/svg.js';
+import {PathObject as BasePathObject} from '../common/path_object.js';
+
+import type {ConstantProvider} from './constants.js';
+
+
+/**
+ * An object that handles creating and setting each of the SVG elements
+ * used by the renderer.
+ * @alias Blockly.zelos.PathObject
+ */
+export class PathObject extends BasePathObject {
+  /** The selected path of the block. */
+  private svgPathSelected_: SVGElement|null = null;
+
+  /** The outline paths on the block. */
+  private readonly outlines = new Map<string, SVGElement>();
+
+  /**
+   * A set used to determine which outlines were used during a draw pass.  The
+   * set is initialized with a reference to all the outlines in
+   * `this.outlines`. Every time we use an outline during the draw pass, the
+   * reference is removed from this set.
+   */
+  private remainingOutlines = new Set<string>();
+
+  /**
+   * The type of block's output connection shape.  This is set when a block
+   * with an output connection is drawn.
+   */
+  outputShapeType = null;
+
+  /** @internal */
+  public override constants: ConstantProvider;
+
+  /**
+   * @param root The root SVG element.
+   * @param style The style object to use for colouring.
+   * @param constants The renderer's constants.
+   * @internal
+   */
+  constructor(
+      root: SVGElement, style: BlockStyle, constants: ConstantProvider) {
+    super(root, style, constants);
+
+    this.constants = constants;
+  }
+
+  override setPath(pathString: string) {
+    super.setPath(pathString);
+    if (this.svgPathSelected_) {
+      this.svgPathSelected_.setAttribute('d', pathString);
+    }
+  }
+
+  override applyColour(block: BlockSvg) {
+    super.applyColour(block);
+    // Set shadow stroke colour.
+    const parent = block.getParent();
+    if (block.isShadow() && parent) {
+      this.svgPath.setAttribute('stroke', parent.style.colourTertiary);
+    }
+
+    // Apply colour to outlines.
+    for (const outline of this.outlines.values()) {
+      outline.setAttribute('fill', this.style.colourTertiary);
+    }
+  }
+
+  override flipRTL() {
+    super.flipRTL();
+    // Mirror each input outline path.
+    for (const outline of this.outlines.values()) {
+      outline.setAttribute('transform', 'scale(-1 1)');
+    }
+  }
+
+  override updateSelected(enable: boolean) {
+    this.setClass_('blocklySelected', enable);
+    if (enable) {
+      if (!this.svgPathSelected_) {
+        this.svgPathSelected_ = this.svgPath.cloneNode(true) as SVGElement;
+        this.svgPathSelected_.setAttribute('fill', 'none');
+        this.svgPathSelected_.setAttribute(
+            'filter', 'url(#' + this.constants.selectedGlowFilterId + ')');
+        this.svgRoot.appendChild(this.svgPathSelected_);
+      }
+    } else {
+      if (this.svgPathSelected_) {
+        this.svgRoot.removeChild(this.svgPathSelected_);
+        this.svgPathSelected_ = null;
+      }
+    }
+  }
+
+  override updateReplacementFade(enable: boolean) {
+    this.setClass_('blocklyReplaceable', enable);
+    if (enable) {
+      this.svgPath.setAttribute(
+          'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
+    } else {
+      this.svgPath.removeAttribute('filter');
+    }
+  }
+
+  override updateShapeForInputHighlight(conn: Connection, enable: boolean) {
+    const name = conn.getParentInput()!.name;
+    const outlinePath = this.getOutlinePath_(name);
+    if (!outlinePath) {
+      return;
+    }
+    if (enable) {
+      outlinePath.setAttribute(
+          'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
+    } else {
+      outlinePath.removeAttribute('filter');
+    }
+  }
+
+  /**
+   * Method that's called when the drawer is about to draw the block.
+   * @internal
+   */
+  beginDrawing() {
+    this.remainingOutlines.clear()
+    for (const key of this.outlines.keys()) {
+      this.remainingOutlines.add(key);
+    }
+  }
+
+  /**
+   * Method that's called when the drawer is done drawing.
+   * @internal
+   */
+  endDrawing() {
+    // Go through all remaining outlines that were not used this draw pass, and
+    // remove them.
+    if (this.remainingOutlines.size) {
+      for (const key of this.remainingOutlines) {
+        this.removeOutlinePath_(key);
+      }
+    }
+    this.remainingOutlines.clear();
+  }
+
+  /**
+   * Set the path generated by the renderer for an outline path on the
+   * respective outline path SVG element.
+   * @param name The input name.
+   * @param pathString The path.
+   * @internal
+   */
+  setOutlinePath(name: string, pathString: string) {
+    const outline = this.getOutlinePath_(name);
+    outline.setAttribute('d', pathString);
+    outline.setAttribute('fill', this.style.colourTertiary);
+  }
+
+  /**
+   * Create's an outline path for the specified input.
+   * @param name The input name.
+   * @return The SVG outline path.
+   */
+  private getOutlinePath_(name: string): SVGElement {
+    if (!this.outlines.has(name)) {
+      this.outlines.set(
+          name,
+          dom.createSvgElement(
+              Svg.PATH, {
+                'class':
+                    'blocklyOutlinePath',  // IE doesn't like paths without the
+                // data definition, set empty
+                // default
+                'd': '',
+              },
+              this.svgRoot));
+    }
+    this.remainingOutlines.delete(name);
+    return this.outlines.get(name)!;
+  }
+
+  /**
+   * Remove an outline path that is associated with the specified input.
+   * @param name The input name.
+   */
+  private removeOutlinePath_(name: string) {
+    this.outlines.get(name)?.parentNode?.removeChild(this.outlines.get(name)!);
+    this.outlines.delete(name);
+  }
+}

package/core/renderers/zelos/renderer.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { Connection } from '../../connection.js';
+import { InsertionMarkerManager } from '../../insertion_marker_manager.js';
+import type { Marker } from '../../keyboard_nav/marker.js';
+import type { RenderedConnection } from '../../rendered_connection.js';
+import type { BlockStyle } from '../../theme.js';
+import type { WorkspaceSvg } from '../../workspace_svg.js';
+import type { RenderInfo as BaseRenderInfo } from '../common/info.js';
+import { Renderer as BaseRenderer } from '../common/renderer.js';
+import { ConstantProvider } from './constants.js';
+import { Drawer } from './drawer.js';
+import { RenderInfo } from './info.js';
+import { MarkerSvg } from './marker_svg.js';
+import { PathObject } from './path_object.js';
+/**
+ * The zelos renderer.
+ * @alias Blockly.zelos.Renderer
+ */
+export declare class Renderer extends BaseRenderer {
+    protected constants_: ConstantProvider;
+    /**
+     * @param name The renderer name.
+     * @internal
+     */
+    constructor(name: string);
+    /**
+     * Create a new instance of the renderer's constant provider.
+     * @return The constant provider.
+     */
+    protected makeConstants_(): ConstantProvider;
+    /**
+     * Create a new instance of the renderer's render info object.
+     * @param block The block to measure.
+     * @return The render info object.
+     */
+    protected makeRenderInfo_(block: BlockSvg): RenderInfo;
+    /**
+     * Create a new instance of the renderer's drawer.
+     * @param block The block to render.
+     * @param info An object containing all information needed to render this
+     *     block.
+     * @return The drawer.
+     */
+    protected makeDrawer_(block: BlockSvg, info: BaseRenderInfo): Drawer;
+    /**
+     * Create a new instance of the renderer's cursor drawer.
+     * @param workspace The workspace the cursor belongs to.
+     * @param marker The marker.
+     * @return The object in charge of drawing the marker.
+     * @internal
+     */
+    makeMarkerDrawer(workspace: WorkspaceSvg, marker: Marker): MarkerSvg;
+    /**
+     * Create a new instance of a renderer path object.
+     * @param root The root SVG element.
+     * @param style The style object to use for colouring.
+     * @return The renderer path object.
+     * @internal
+     */
+    makePathObject(root: SVGElement, style: BlockStyle): PathObject;
+    /**
+     * Get the current renderer's constant provider.  We assume that when this is
+     * called, the renderer has already been initialized.
+     * @return The constant provider.
+     */
+    getConstants(): ConstantProvider;
+    shouldHighlightConnection(conn: Connection): boolean;
+    getConnectionPreviewMethod(closest: RenderedConnection, local: RenderedConnection, topBlock: BlockSvg): InsertionMarkerManager.PREVIEW_TYPE;
+}

package/core/renderers/zelos/renderer.ts

@@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Zelos renderer.
+ */
+
+/**
+ * Zelos renderer.
+ * @class
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.Renderer');
+
+/* eslint-disable-next-line no-unused-vars */
+// Unused import preserved for side-effects. Remove if unneeded.
+// import '../../theme.js';
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {Connection} from '../../connection.js';
+import {ConnectionType} from '../../connection_type.js';
+import {InsertionMarkerManager} from '../../insertion_marker_manager.js';
+import type {Marker} from '../../keyboard_nav/marker.js';
+import type {RenderedConnection} from '../../rendered_connection.js';
+import type {BlockStyle} from '../../theme.js';
+import type {WorkspaceSvg} from '../../workspace_svg.js';
+import * as blockRendering from '../common/block_rendering.js';
+import type {RenderInfo as BaseRenderInfo} from '../common/info.js';
+import {Renderer as BaseRenderer} from '../common/renderer.js';
+
+import {ConstantProvider} from './constants.js';
+import {Drawer} from './drawer.js';
+import {RenderInfo} from './info.js';
+import {MarkerSvg} from './marker_svg.js';
+import {PathObject} from './path_object.js';
+
+
+/**
+ * The zelos renderer.
+ * @alias Blockly.zelos.Renderer
+ */
+export class Renderer extends BaseRenderer {
+  protected override constants_!: ConstantProvider;
+
+  /**
+   * @param name The renderer name.
+   * @internal
+   */
+  constructor(name: string) {
+    super(name);
+  }
+
+  /**
+   * Create a new instance of the renderer's constant provider.
+   * @return The constant provider.
+   */
+  protected override makeConstants_(): ConstantProvider {
+    return new ConstantProvider();
+  }
+
+  /**
+   * Create a new instance of the renderer's render info object.
+   * @param block The block to measure.
+   * @return The render info object.
+   */
+  protected override makeRenderInfo_(block: BlockSvg): RenderInfo {
+    return new RenderInfo(this, block);
+  }
+
+  /**
+   * Create a new instance of the renderer's drawer.
+   * @param block The block to render.
+   * @param info An object containing all information needed to render this
+   *     block.
+   * @return The drawer.
+   */
+  protected override makeDrawer_(block: BlockSvg, info: BaseRenderInfo):
+      Drawer {
+    return new Drawer(block, (info as RenderInfo));
+  }
+
+  /**
+   * Create a new instance of the renderer's cursor drawer.
+   * @param workspace The workspace the cursor belongs to.
+   * @param marker The marker.
+   * @return The object in charge of drawing the marker.
+   * @internal
+   */
+  override makeMarkerDrawer(workspace: WorkspaceSvg, marker: Marker):
+      MarkerSvg {
+    return new MarkerSvg(workspace, this.getConstants(), marker);
+  }
+
+  /**
+   * Create a new instance of a renderer path object.
+   * @param root The root SVG element.
+   * @param style The style object to use for colouring.
+   * @return The renderer path object.
+   * @internal
+   */
+  override makePathObject(root: SVGElement, style: BlockStyle): PathObject {
+    return new PathObject(
+        root, style, (this.getConstants() as ConstantProvider));
+  }
+
+  /**
+   * Get the current renderer's constant provider.  We assume that when this is
+   * called, the renderer has already been initialized.
+   * @return The constant provider.
+   */
+  override getConstants(): ConstantProvider {
+    return this.constants_;
+  }
+
+  override shouldHighlightConnection(conn: Connection) {
+    return conn.type !== ConnectionType.INPUT_VALUE &&
+        conn.type !== ConnectionType.OUTPUT_VALUE;
+  }
+
+  override getConnectionPreviewMethod(
+      closest: RenderedConnection, local: RenderedConnection,
+      topBlock: BlockSvg) {
+    if (local.type === ConnectionType.OUTPUT_VALUE) {
+      if (!closest.isConnected()) {
+        return InsertionMarkerManager.PREVIEW_TYPE.INPUT_OUTLINE;
+      }
+      // TODO: Returning this is a total hack, because we don't want to show
+      //   a replacement fade, we want to show an outline affect.
+      //   Sadly zelos does not support showing an outline around filled
+      //   inputs, so we have to pretend like the connected block is getting
+      //   replaced.
+      return InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
+    }
+
+    return super.getConnectionPreviewMethod(closest, local, topBlock);
+  }
+}
+
+blockRendering.register('zelos', Renderer);

package/core/renderers/zelos/zelos.d.ts

@@ -0,0 +1,12 @@
+/** @fileoverview Re-exports of Blockly.zelos.* modules. */
+import { ConstantProvider } from './constants.js';
+import { Drawer } from './drawer.js';
+import { RenderInfo } from './info.js';
+import { MarkerSvg } from './marker_svg.js';
+import { BottomRow } from './measurables/bottom_row.js';
+import { StatementInput } from './measurables/inputs.js';
+import { RightConnectionShape } from './measurables/row_elements.js';
+import { TopRow } from './measurables/top_row.js';
+import { PathObject } from './path_object.js';
+import { Renderer } from './renderer.js';
+export { BottomRow, ConstantProvider, Drawer, MarkerSvg, PathObject, Renderer, RenderInfo, RightConnectionShape, StatementInput, TopRow };

package/core/renderers/zelos/zelos.ts

@@ -0,0 +1,39 @@
+/** @fileoverview Re-exports of Blockly.zelos.* modules. */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Re-exports of Blockly.zelos.* modules.
+ * @namespace Blockly.zelos
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos');
+
+import {ConstantProvider} from './constants.js';
+import {Drawer} from './drawer.js';
+import {RenderInfo} from './info.js';
+import {MarkerSvg} from './marker_svg.js';
+import {BottomRow} from './measurables/bottom_row.js';
+import {StatementInput} from './measurables/inputs.js';
+import {RightConnectionShape} from './measurables/row_elements.js';
+import {TopRow} from './measurables/top_row.js';
+import {PathObject} from './path_object.js';
+import {Renderer} from './renderer.js';
+
+
+export {
+  BottomRow,
+  ConstantProvider,
+  Drawer,
+  MarkerSvg,
+  PathObject,
+  Renderer,
+  RenderInfo,
+  RightConnectionShape,
+  StatementInput,
+  TopRow
+};