mirror of
https://github.com/google/blockly.git
synced 2026-01-10 02:17:09 +01:00
ce22f42868
* chore(deps): Add pretter-plugin-organize-imports * chore: Remove insignificant blank lines in import sections Since prettier-plugin-organize-imports sorts imports within sections separated by blank lines, but preserves the section divisions, remove any blank lines that are not dividing imports into meaningful sections. Do not remove blank lines separating side-effect-only imports from main imports. * chore: Remove unneded eslint-disable directives * chore: Organise imports
105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2020 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* A separator used for separating toolbox categories.
|
|
*
|
|
* @class
|
|
*/
|
|
// Former goog.module ID: Blockly.ToolboxSeparator
|
|
|
|
import * as Css from '../css.js';
|
|
import type {IToolbox} from '../interfaces/i_toolbox.js';
|
|
import * as registry from '../registry.js';
|
|
import * as dom from '../utils/dom.js';
|
|
import type * as toolbox from '../utils/toolbox.js';
|
|
import {ToolboxItem} from './toolbox_item.js';
|
|
|
|
/**
|
|
* Class for a toolbox separator. This is the thin visual line that appears on
|
|
* the toolbox. This item is not interactable.
|
|
*/
|
|
export class ToolboxSeparator extends ToolboxItem {
|
|
/** Name used for registering a toolbox separator. */
|
|
static registrationName = 'sep';
|
|
|
|
/** All the CSS class names that are used to create a separator. */
|
|
protected cssConfig_: CssConfig = {'container': 'blocklyTreeSeparator'};
|
|
|
|
private htmlDiv_: HTMLDivElement | null = null;
|
|
|
|
/**
|
|
* @param separatorDef The information needed to create a separator.
|
|
* @param toolbox The parent toolbox for the separator.
|
|
*/
|
|
constructor(separatorDef: toolbox.SeparatorInfo, toolbox: IToolbox) {
|
|
super(separatorDef, toolbox);
|
|
|
|
const cssConfig =
|
|
separatorDef['cssconfig'] || (separatorDef as any)['cssConfig'];
|
|
Object.assign(this.cssConfig_, cssConfig);
|
|
}
|
|
|
|
override init() {
|
|
this.createDom_();
|
|
}
|
|
|
|
/**
|
|
* Creates the DOM for a separator.
|
|
*
|
|
* @returns The parent element for the separator.
|
|
*/
|
|
protected createDom_(): HTMLDivElement {
|
|
const container = document.createElement('div');
|
|
const className = this.cssConfig_['container'];
|
|
if (className) {
|
|
dom.addClass(container, className);
|
|
}
|
|
this.htmlDiv_ = container;
|
|
return container;
|
|
}
|
|
|
|
override getDiv() {
|
|
return this.htmlDiv_ as HTMLDivElement;
|
|
}
|
|
|
|
override dispose() {
|
|
dom.removeNode(this.htmlDiv_ as HTMLDivElement);
|
|
}
|
|
}
|
|
|
|
export namespace ToolboxSeparator {
|
|
export interface CssConfig {
|
|
container: string | undefined;
|
|
}
|
|
}
|
|
|
|
export type CssConfig = ToolboxSeparator.CssConfig;
|
|
|
|
/** CSS for Toolbox. See css.js for use. */
|
|
Css.register(`
|
|
.blocklyTreeSeparator {
|
|
border-bottom: solid #e5e5e5 1px;
|
|
height: 0;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
|
|
border-right: solid #e5e5e5 1px;
|
|
border-bottom: none;
|
|
height: auto;
|
|
margin: 0 5px 0 5px;
|
|
padding: 5px 0;
|
|
width: 0;
|
|
}
|
|
`);
|
|
|
|
registry.register(
|
|
registry.Type.TOOLBOX_ITEM,
|
|
ToolboxSeparator.registrationName,
|
|
ToolboxSeparator,
|
|
);
|