in src/canvastools/ts/CanvasTools/Region/Path/TagsElement.ts [149:287]
protected initStyleMaps(tags: TagsDescriptor) {
if (tags !== null) {
if (tags.primary !== null) {
this.styleMap = [
{
rule: `.${this.styleId} .primaryTagBoundRectStyle`,
style: `fill: ${tags.primary.colorShadow};
stroke: ${tags.primary.colorAccent};`,
},
{
rule: `.regionStyle.selected.${this.styleId} .primaryTagBoundRectStyle`,
style: `fill: ${tags.primary.colorHighlight}; opacity: 1;`,
},
{
rule: `.${this.styleId}:hover .primaryTagBoundRectStyle`,
style: `fill: ${tags.primary.colorHighlight};`,
},
{
rule: `.${this.styleId} .primaryTagPolygonStyle`,
style: `fill: ${tags.primary.colorShadow};
stroke: ${tags.primary.colorPure};`,
},
{
rule: `.${this.styleId}:hover .primaryTagPolygonStyle`,
style: `fill: ${tags.primary.colorHighlight};
stroke: ${tags.primary.colorPure};`,
},
{
rule: `.regionStyle.${this.styleId} .primaryTagTextBGStyle`,
style: `fill:${tags.primary.colorAccent};`,
},
{
rule: `.regionStyle.selected.${this.styleId} .primaryTagPolygonStyle`,
style: `fill: ${tags.primary.colorHighlight};
stroke: ${tags.primary.colorPure};`,
},
{
rule: `.regionStyle.${this.styleId} .anchorStyle`,
style: `stroke:${tags.primary.colorDark};
fill: ${tags.primary.colorPure}`,
},
{
rule: `.regionStyle.${this.styleId}:hover .anchorStyle`,
style: `stroke:#fff;`,
},
{
rule: `.regionStyle.${this.styleId} .anchorStyle.ghost`,
style: `fill: var(--default-color-ghost);`,
},
];
this.styleLightMap = [
{
rule: `.${this.styleId} .primaryTagBoundRectStyle`,
style: `fill: none;
stroke: ${tags.primary.colorAccent};`,
},
{
rule: `.${this.styleId} .primaryTagPolygonStyle`,
style: `fill: ${tags.primary.colorNoColor};
stroke: ${tags.primary.colorPure};
stroke-width: 1px;`,
},
{
rule: `.regionStyle.${this.styleId}:hover .primaryTagPolygonStyle`,
style: `fill: ${tags.primary.colorHighlight};
stroke: ${tags.primary.colorPure};`,
},
{
rule: `.regionStyle.selected.${this.styleId} .primaryTagPolygonStyle`,
style: `fill: ${tags.primary.colorNoColor};
stroke: ${tags.primary.colorPure};`,
},
{
rule: `.regionStyle.${this.styleId} .primaryTagTextBGStyle`,
style: `fill:${tags.primary.colorNoColor};`,
},
{
rule: `.regionStyle.${this.styleId} .anchorStyle`,
style: `stroke:${tags.primary.colorDark};
fill: ${tags.primary.colorPure};
stroke-width: 1px;`,
},
{
rule: `.regionStyle.${this.styleId}:hover .anchorStyle`,
style: `stroke:#fff;`,
},
{
rule: `.regionStyle.${this.styleId} .anchorStyle.ghost`,
style: `fill: var(--default-color-ghost);`,
},
{
rule: `.regionStyle.${this.styleId} .secondaryTagStyle`,
style: `opacity:0.25;`,
},
];
} else {
this.styleMap = [];
this.styleLightMap = [
{
rule: `.${this.styleId} .primaryTagPolygonStyle`,
style: `fill: var(--default-color-transparent);`,
},
{
rule: `.regionStyle.selected.${this.styleId} .primaryTagPolygonStyle`,
style: `fill: var(--default-color-transparent);`,
},
{
rule: `.${this.styleId} .primaryTagBoundRectStyle`,
style: `fill: none;`,
},
{
rule: `.${this.styleId} .primaryTagPolylineStyle`,
style: `stroke-width: 1px;`,
},
{
rule: `.regionStyle.${this.styleId} .anchorStyle`,
style: `stroke-width: 1px;`,
},
{
rule: `.regionStyle.${this.styleId} .anchorStyle.ghost`,
style: `fill: var(--default-color-ghost);`,
},
];
}
if (tags.secondary !== null && tags.secondary !== undefined) {
tags.secondary.forEach((tag) => {
const rule = {
rule: `.secondaryTagStyle.secondaryTag-${tag.name}`,
style: `fill: ${tag.colorAccent};`,
};
this.styleMap.push(rule);
this.styleLightMap.push(rule);
});
}
}
}