API / geotoolkit / css / CssStyle / CssStyle
Defines a CSS style that contains a set of CSS rules to be applied to a node and all of its children. This CSS style class can also parse CSS provided as a string.
For more details on how to apply CSS styles, refer to the CSS Styles Tutorial.
Example
import {CssStyle} from '@int/geotoolkit/css/CssStyle';
const css = `
.Text {
textstyle-color: darkblue;
textstyle-font: 42px Roboto;
textstyle-alignment: center;
}
`;
// Style will be applied for all text shapes
group.setCss(new CssStyle({'css': css}));Example
CSS as an object
// CSS as an object
const css = {
'selector': '.Group',
'properties': {
'fillstyle': {
'color': 'green'
},
'visible': false
}
};
group.setCss(css);Example
// CSS as a string
import {Rectangle} from '@int/geotoolkit/scene/shapes/Rectangle';
import {KnownColors} from '@int/geotoolkit/util/ColorUtil';
new Rectangle({
'left': 60,
'top': 60,
'width': 150,
'height': 150,
'fillstyle': KnownColors.Blue
})
.setCss(`
.Rectangle:hover {
fillstyle: red;
}`);↳
CssStyle
Constructors
Methods
Constructors
• new CssStyle(options?)
Create CssStyle
| Name | Type | Description |
|---|---|---|
Optional options | string | Options | Css | Css[] | Object containing css and additional properties or the CSS string |
Style.constructor
Methods
▸ apply(node): CssStyle
Apply CSS for the current node
▸ clone(): CssStyle
All inheritors should implement copy constructor or provide custom implementation for this method
this
▸ Protected copyConstructor(src, deepCopy?): CssStyle
copy constructor
| Name | Type | Description |
|---|---|---|
src | Style | Source to copy from |
Optional deepCopy | boolean | deep copy |
this
▸ dispose(): void
Dispose.
void
▸ getClassName(): string
string
▸ getCss(): string
Return the current CSS string
string
▸ getProperties(context?): Record<string, any>
Gets all the properties pertaining to this object
| Name | Type | Description |
|---|---|---|
Optional context | ISerializationContext | serialization context |
Record<string, any>
properties properties
▸ getState(node?, deep?): any
Return a state of node and selected children before applying style
| Name | Type | Description |
|---|---|---|
Optional node | Node | node to apply selectors |
Optional deep | boolean | true if state should include node children's state |
any
object with serialized properties to be changed
▸ getTimeStamp(): number
Gets time stamp
number
timeStamp
▸ getVariable(name): any
Return Variable value
| Name | Type | Description |
|---|---|---|
name | string | variable name |
any
▸ getVariables(): string[]
Return all existing variables
string[]
▸ hasEventListener(type, callback?): boolean
Check if a list of event listeners for this type contains this listener
| Name | Type | Description |
|---|---|---|
type | string | type of event or property |
Optional callback | Function | to be called, if null, check if any callback is registered |
boolean
▸ hasVariable(name): boolean
Check if Variable exists
| Name | Type | Description |
|---|---|---|
name | string | variable name |
boolean
▸ invalidate(): CssStyle
notify the node that the style is invalidated
this
▸ isDisposed(): boolean
Returns whether this object has been disposed
boolean
▸ isEnabled(): boolean
Returns enable state
boolean
state
▸ isSilent(): boolean
Return true if the event dispatcher doesn't notify any events
boolean
▸ notify<E>(type, source, args?): CssStyle
Notify listeners
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | event types |
source | Style | of the event |
Optional args | EventMap[E] | arguments of the event |
this
▸ off<E>(type?, callback?): CssStyle
Detach listener on event. Calling .off() with no arguments removes all attached listeners. Calling .off(type) with no callback removes all attached listeners for specific type.
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
Optional type | E | type of the event |
Optional callback | (eventType: E, sender: CssStyle, args: EventMap[E]) => void | function to be called |
this
▸ on<E>(type, callback): CssStyle
Attach listener on event that will be called whenever the specified event is delivered to the target
If the callback function is already in the list of event listeners for this target, the function is not added a second time.
If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an "on" call, the second function will also be added to the list of event listeners for that target.
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | type of event or property |
callback | (eventType: E, sender: CssStyle, args: EventMap[E]) => void | to be called |
this
▸ setEnabled(enabled): CssStyle
Enable / disable applying style If style is disabled it will not be applied for any node
| Name | Type | Description |
|---|---|---|
enabled | boolean | sets the enabled state |
this
▸ setProperties(properties?, context?): CssStyle
Sets all the properties pertaining to this object
| Name | Type | Description |
|---|---|---|
Optional properties | Record<string, any> | An object containing the properties to set |
Optional context | IDeserializationContext | deserialization context |
this
▸ setSilent(bool, force?): CssStyle
Set silent mode
| Name | Type | Description |
|---|---|---|
bool | boolean | flag to enable silent mode |
Optional force | boolean | true if parent should be invalidated immediately |
this
▸ setVariable(variable, value): CssStyle
Set variable value
| Name | Type | Description |
|---|---|---|
variable | string | variable name |
value | any | variable value |
▸ setVariable(variable): CssStyle
Set variable value
| Name | Type | Description |
|---|---|---|
variable | Record<string, any> | Map<string, any> | variable values |
▸ toString(): string
string
▸ updateTimeStamp(silent?): CssStyle
Update time stamp to indicate that style has been changed.
| Name | Type | Description |
|---|---|---|
Optional silent | boolean | silent mode. If this parameter equals to true then style doesn't send invalidate event |
this
▸ Static fromObject(object?): CssStyle
Create or get css style from object
css style
▸ Static getClassName(): string
string
▸ Static isStyleNotificationEnabled(): boolean
Return status of the global notification for all styles.
boolean