From 43c0b665661eab70694bee4f4debe6ea601c5a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A5ns=20Beckman?= Date: Wed, 15 Mar 2023 17:31:53 +0100 Subject: [PATCH] Add option to fill the symbol with any color --- docs/README.md | 67 ++++++++++++++--------------- src/ms/symbol.js | 1 + src/symbolfunctions/basegeometry.js | 3 +- 3 files changed, 36 insertions(+), 35 deletions(-) diff --git a/docs/README.md b/docs/README.md index a9fceeb..0b5e28c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -18,7 +18,7 @@ named 'milsymbol' and in vanilla, a 'ms' global is exported: ```html ``` @@ -31,10 +31,8 @@ this: @@ -75,7 +73,7 @@ some options the symbol will automatically be updated. var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }); ``` -Once you have initiated your symbol, you can use different methods to request +Once you have initiated your symbol, you can use different methods to request rendering of the symbol or get information about the symbol. It is also possible to chain methods directly to the initiation: @@ -135,35 +133,36 @@ standard documents. The following options are style options that changes the look of the symbol in different ways. -| Option | Type | Default | Description | -| -------------------- | ------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| alternateMedal | Boolean | false | MIL-STD-2525D lets you choose between MEDAL and alternate MEDAL icons for mine warfare symbols, the default in milsymbol is using MEDAL icons, but you can change this using setting this property to true. | -| civilianColor | Boolean | true | 2525C specifics purple as an optional color for civilian symbols. Of course we like color so we set this as default. | +| Option | Type | Default | Description | +| -------------------- | ------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| alternateMedal | Boolean | false | MIL-STD-2525D lets you choose between MEDAL and alternate MEDAL icons for mine warfare symbols, the default in milsymbol is using MEDAL icons, but you can change this using setting this property to true. | +| civilianColor | Boolean | true | 2525C specifics purple as an optional color for civilian symbols. Of course we like color so we set this as default. | | colorMode | ColorMode or String | 'Light' | This is the option for setting what Color object to use for the fill of the symbols. It can be set to a Color object, or a string representing the name of a registered Color object. You can use ms.ColorMode to create a new color mode, or ms.getColorMode to get an existing color mode. **Note that the string is not a single color, it is a name of a registered color mode**, by default "Light", "Medium", and "Dark" are registered color modes. | -| fill | Boolean | true | Should your symbol be filled with color. | -| fillOpacity | Number | 1 | The opacity of the symbol fill color. | -| fontfamily | String | 'Arial' | Changes the font family for all texts surrounding the icon. | -| frame | Boolean | true | Should your symbol have a frame. All symbols support to be unframed, not just the ones specified in 2525B. | -| frameColor | ColorMode | false | Changes the color of the frame of the symbol | -| hqStaffLength | Number | undefined | Overrides the global Headquarters staff length | -| icon | Boolean | true | Should your symbol have an icon. | -| infoBackground | ColorMode or String | "" | Changes the color of the information background | -| infoBackgroundFrame | ColorMode or String | "" | Changes the color of the frame of the information background | -| iconColor | ColorMode | false | Changes the color of the icon of the symbol | -| infoColor | ColorMode or String | Same color as the frame outline | This will be used for texts in the text fields surrounding the symbol. It is a ColorMode, or a string color that is either a keyword or a numerical RGB specification. | -| infoFields | Boolean | true | If you have set some text fields and direction but don't want them to be displayed you can set infoFields to false. This makes it possible to initiate the object with all information you got but not display it. | -| infoOutlineColor | String or `false` | rgb(239, 239, 239) | The color of the outline that should be drawn around text fields, or `false` to use the value of `outlineColor`. | -| infoOutlineWidth | Number or `false` | false | The width of the outline that should be drawn around text fields, or `false` to use the value of `outlineWidth`. | -| infoSize | Number | 40 | The size of the text fields surrounding the symbol. This is relative to the size of the symbol, so you can consider 40 to be 40% of the default size that is 100. | -| monoColor | String | '' | A color that is either a keyword or a numerical RGB specification. If you set this the symbol will be monochrome and unfilled using the color provided. | -| outlineColor | ColorMode or String | rgb(239, 239, 239) | A color that is either a keyword or a numerical RGB specification. The color of the outline of the symbol, if any. Defaults to an off-white color. | -| outlineWidth | Number | 0 | The width of the outline that should be drawn around all symbol parts, if any. | -| padding | Number | 0 | Milsymbol usually tries to fit the bounds for the symbol as snug as possible, but in some cases you want to add some extra padding around your symbol, then simply set this option to any number. | -| size | Number | 100 | The L value for your symbol, where the L value is the width of the icon octagon. | -| simpleStatusModifier | Boolean | false | Should the symbol use simplified status modifiers, this is the default for unfilled symbols and can be forced for filled symbols using this option. | -| standard | String | '' | This is a way to override the default standard set for milsymbol. You can set this variable to "2525" or "APP6" depending on what standard you prefer. | -| square | Boolean | false | Should the symbol be square with the insertion point in the center. | -| strokeWidth | Number | 3 | The stroke width of the symbol. | +| fill | Boolean | true | Should your symbol be filled with color. | +| fillColor | String | "" | Override the fill color of the symbol with any color string. | +| fillOpacity | Number | 1 | The opacity of the symbol fill color. | +| fontfamily | String | 'Arial' | Changes the font family for all texts surrounding the icon. | +| frame | Boolean | true | Should your symbol have a frame. All symbols support to be unframed, not just the ones specified in 2525B. | +| frameColor | ColorMode | false | Changes the color of the frame of the symbol | +| hqStaffLength | Number | undefined | Overrides the global Headquarters staff length | +| icon | Boolean | true | Should your symbol have an icon. | +| infoBackground | ColorMode or String | "" | Changes the color of the information background | +| infoBackgroundFrame | ColorMode or String | "" | Changes the color of the frame of the information background | +| iconColor | ColorMode | false | Changes the color of the icon of the symbol | +| infoColor | ColorMode or String | Same color as the frame outline | This will be used for texts in the text fields surrounding the symbol. It is a ColorMode, or a string color that is either a keyword or a numerical RGB specification. | +| infoFields | Boolean | true | If you have set some text fields and direction but don't want them to be displayed you can set infoFields to false. This makes it possible to initiate the object with all information you got but not display it. | +| infoOutlineColor | String or `false` | rgb(239, 239, 239) | The color of the outline that should be drawn around text fields, or `false` to use the value of `outlineColor`. | +| infoOutlineWidth | Number or `false` | false | The width of the outline that should be drawn around text fields, or `false` to use the value of `outlineWidth`. | +| infoSize | Number | 40 | The size of the text fields surrounding the symbol. This is relative to the size of the symbol, so you can consider 40 to be 40% of the default size that is 100. | +| monoColor | String | '' | A color that is either a keyword or a numerical RGB specification. If you set this the symbol will be monochrome and unfilled using the color provided. | +| outlineColor | ColorMode or String | rgb(239, 239, 239) | A color that is either a keyword or a numerical RGB specification. The color of the outline of the symbol, if any. Defaults to an off-white color. | +| outlineWidth | Number | 0 | The width of the outline that should be drawn around all symbol parts, if any. | +| padding | Number | 0 | Milsymbol usually tries to fit the bounds for the symbol as snug as possible, but in some cases you want to add some extra padding around your symbol, then simply set this option to any number. | +| size | Number | 100 | The L value for your symbol, where the L value is the width of the icon octagon. | +| simpleStatusModifier | Boolean | false | Should the symbol use simplified status modifiers, this is the default for unfilled symbols and can be forced for filled symbols using this option. | +| standard | String | '' | This is a way to override the default standard set for milsymbol. You can set this variable to "2525" or "APP6" depending on what standard you prefer. | +| square | Boolean | false | Should the symbol be square with the insertion point in the center. | +| strokeWidth | Number | 3 | The stroke width of the symbol. | **Returns** diff --git a/src/ms/symbol.js b/src/ms/symbol.js index 97689ce..1728440 100644 --- a/src/ms/symbol.js +++ b/src/ms/symbol.js @@ -47,6 +47,7 @@ function Symbol() { this.style.civilianColor = true; // Should we use the Civilian Purple defined in 2525? (We set this to default because I like the color. this.style.colorMode = "Light"; // 2525C Allows you to use Dark; Medium or Light colors. The values you can set are "Dark";"Medium" or "Light" this.style.fill = true; // Should the icon be filled with color + this.style.fillColor = ""; // Override the frame fill with any color this.style.fillOpacity = 1; // Possibility to change the fill opacity this.style.fontfamily = "Arial"; // The font family to use this.style.frame = true; // Should the icon be framed diff --git a/src/symbolfunctions/basegeometry.js b/src/symbolfunctions/basegeometry.js index 59ecf26..d92e3c9 100644 --- a/src/symbolfunctions/basegeometry.js +++ b/src/symbolfunctions/basegeometry.js @@ -28,7 +28,8 @@ export default function basegeometry(ms) { geom.cy = this.metadata.baseGeometry.g.cy; geom.r = this.metadata.baseGeometry.g.r; } - geom.fill = this.colors.fillColor[this.metadata.affiliation]; + geom.fill = + this.style.fillColor || this.colors.fillColor[this.metadata.affiliation]; geom.fillopacity = this.style.fillOpacity; geom.stroke = frameColor; geom.strokewidth = this.style.size >= 10 ? this.style.strokeWidth : 10;