UNPKG

@woosh/meep-engine

Version:

Pure JavaScript game engine. Fully featured and production ready.

220 lines (204 loc) 6.54 kB
import { assert } from "../../../core/assert.js"; import { noop } from "../../../core/function/noop.js"; export class RadialMenuElementDefinition { constructor() { /** * Outer radius of the section of the donut representing the element * @type {number} */ this.outerRadius = 150; /** * Inner radius of the section of the donut representing the element * @type {number} */ this.innerRadius = 100; /** * Distance between this section and the others around it * @type {number} */ this.padding = 0; /** * Normalized share of the entire circle, 1 is full circle, 0.5 is half and so on * @type {number} */ this.share = 1; /** * What to do when element is activated * @type {Function} */ this.action = noop; /** * CSS color for the fill * @type {string|number} */ this.fill = "none"; /** * Normalized clock-wise offset within the circle * @type {number} */ this.offset = 0; /** * Css class to be attached to the menu element * @type {String} */ this.cssClass = null; /** * View to be used in place of an icon * @type {View|null} */ this.iconView = null; /** * Size of the icon * @type {number} */ this.iconSize = 20; /** * Should the icon be sized automatically? * @type {boolean} */ this.autoSizeIcon = true; /** * Text label content * @type {string} */ this.name = ""; /** * At which radial distance should the text label appear relative to outer radius. Positive value moves text in towards the center * @type {number} */ this.nameRadiusOffset = 10; /** * CSS color for name label * @type {string|number} */ this.nameFill = "white"; /** * * @type {Function|null} */ this.onSelected = null; /** * * @type {Function|null} */ this.onDeSelected = null; } /** * * @return {boolean} */ get isRadialMenuElementDefinition() { return true; } /** * * @param {number} [share=1] Normalized share of the entire circle, 1 is full circle, 0.5 is half and so on * @param {function} [action] * @param {String|number} [fill] CSS color for the fill * @param {number} [offset=0] Normalized offset within the circle * @param {number} [padding] * @param {number} [innerRadius] * @param {number} [outerRadius] * @param {View} [iconView] * @param {number} [iconSize] * @param {boolean} [autoSizeIcon] * @param {String} [name] * @param {number} [nameRadiusOffset] * @param {String|number} [nameFill] CSS color for name label * @param {string|null} [cssClass] */ from({ share = 1, action = noop, fill = "none", offset = 0, padding = 0, innerRadius = 100, outerRadius = 150, iconView, iconSize = 20, autoSizeIcon = true, name = "", nameRadiusOffset = 10, nameFill = "white", cssClass = null }) { assert.notEqual(iconView, undefined, "Icon View must be defined"); assert.notEqual(iconView, null, "Icon View must not be null"); assert.isNumber(share, "share"); assert.isNumber(offset, "offset"); assert.isNumber(padding, "padding"); assert.isNumber(innerRadius, "innerRadius"); assert.isNumber(outerRadius, "outerRadius"); assert.isNumber(iconSize, "iconSize"); assert.isBoolean(autoSizeIcon, "autoSizeIcon"); assert.isFunction(action, "action"); this.share = share; this.action = action; this.fill = fill; this.offset = offset; this.padding = padding; this.innerRadius = innerRadius; this.outerRadius = outerRadius; this.iconView = iconView; this.iconSize = iconSize; this.autoSizeIcon = autoSizeIcon; this.name = name; this.nameRadiusOffset = nameRadiusOffset; this.nameFill = nameFill; this.cssClass = cssClass; } /** * * @param {number} [share=1] Normalized share of the entire circle, 1 is full circle, 0.5 is half and so on * @param {function} [action] * @param {String|number} [fill] CSS color for the fill * @param {number} [offset=0] Normalized offset within the circle * @param {number} [padding] * @param {number} [innerRadius] * @param {number} [outerRadius] * @param {View} [iconView] * @param {number} [iconSize] * @param {boolean} [autoSizeIcon] * @param {String} [name] * @param {number} [nameRadiusOffset] * @param {String|number} [nameFill] CSS color for name label * @param {string} [cssClass] * @returns {RadialMenuElementDefinition} */ static from({ share, action, fill, offset, padding, innerRadius, outerRadius, iconView, iconSize, autoSizeIcon, name, nameRadiusOffset, nameFill, cssClass }) { const r = new RadialMenuElementDefinition(); r.from({ share, action, fill, offset, padding, innerRadius, outerRadius, iconView, iconSize, autoSizeIcon, name, nameRadiusOffset, nameFill, cssClass }); return r; } }