@logic-pad/core
Version:
95 lines (94 loc) • 3.45 kB
JavaScript
import { ConfigType } from '../config.js';
import GridData from '../grid.js';
import CustomSymbol from './customSymbol.js';
export default class CustomIconSymbol extends CustomSymbol {
icon;
rotation;
title = 'Custom Icon Symbol';
get configExplanation() {
return 'A customizable symbol. Your provided solution may override auto-validation.';
}
static EXAMPLE_GRID = Object.freeze(GridData.create(5, 4));
static CONFIGS = Object.freeze([
{
type: ConfigType.Number,
default: 0,
field: 'x',
description: 'X',
configurable: false,
},
{
type: ConfigType.Number,
default: 0,
field: 'y',
description: 'Y',
configurable: false,
},
{
type: ConfigType.String,
default: 'A *custom* text symbol',
placeholder: 'Enter description. Emphasize with *asterisks*.',
field: 'description',
description: 'Description',
explanation: 'A short descriptive text. Use *asterisks* to highlight keywords. Leave empty to hide the description.',
configurable: true,
},
{
type: ConfigType.Grid,
default: CustomIconSymbol.EXAMPLE_GRID,
field: 'grid',
description: 'Thumbnail Grid',
explanation: 'An example grid showing the symbol.',
configurable: true,
},
{
type: ConfigType.Icon,
default: 'MdQuestionMark',
field: 'icon',
description: 'Icon',
explanation: 'The icon displayed on the grid. All available icons at https://react-icons.github.io/react-icons/icons/md/',
configurable: true,
},
{
type: ConfigType.Number,
default: 0,
field: 'rotation',
description: 'Rotation',
explanation: 'Rotate the symbol by the given degrees.',
configurable: true,
},
]);
/**
* **A custom icon symbol**
*
* @param description - The description of the symbol. Leave this empty to hide the description.
* @param grid - The thumbnail grid of the rule, preferably 5x4 in size.
* @param x - The x-coordinate of the symbol.
* @param y - The y-coordinate of the symbol.
* @param icon - The icon to display. All available icons can be found at https://react-icons.github.io/react-icons/icons/md/
* @param rotation - The rotation of the icon in degrees.
*/
constructor(description, grid, x, y, icon, rotation = 0) {
super(description, grid, x, y);
this.icon = icon;
this.rotation = rotation;
this.icon = icon;
this.rotation = rotation;
}
get id() {
return `custom_icon`;
}
get configs() {
return CustomIconSymbol.CONFIGS;
}
copyWith({ description, grid, x, y, icon, rotation, }) {
return new CustomIconSymbol(description ?? this.description, grid ?? this.grid, x ?? this.x, y ?? this.y, icon ?? this.icon, rotation ?? this.rotation);
}
withIcon(icon) {
return this.copyWith({ icon });
}
withRotation(rotation) {
return this.copyWith({ rotation });
}
}
export const instance = new CustomIconSymbol('A *custom* icon symbol', GridData.create(5, 4), 0, 0, 'MdQuestionMark');