From ab7a58cb205095f66940d646f4e2940b89bf3c66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Koc?= Date: Sat, 18 Feb 2023 09:52:13 +0100 Subject: [PATCH 1/4] Fixed render label for svg. Labels were rendered as invisible. --- src/GraphicsSvg.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/GraphicsSvg.ts b/src/GraphicsSvg.ts index 7c6c3ac..657b783 100644 --- a/src/GraphicsSvg.ts +++ b/src/GraphicsSvg.ts @@ -232,6 +232,7 @@ export function GraphicsSvg(document?: HTMLDocument): ISvgGraphics { { x, y, + fill: current.attr.fill, stroke: 'none', font: undefined as undefined | string, style: undefined as undefined | string, From 84c1da7b157b03ab62a58aa6ce3659d405c71500 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Koc?= Date: Sat, 18 Feb 2023 09:54:38 +0100 Subject: [PATCH 2/4] Add the ability to register new types. --- README.md | 14 ++++++++++++++ src/index.ts | 23 ++++++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 196e28a..8243335 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,20 @@ This is how the Decorator pattern can look in nomnoml syntax: [ name] [ name| a | 5 || b | 7] +### Add new types +```javascript +const component = { + name: 'newTypeComponentName', + layout: function (config, clas) { + }, + visualizer: function (node, x, y, config, g) { + } +} +nomnoml.registerComponent(component); +``` +#### Example how to use new type + [Actor] --> [Component] + ### Directives #import: my-common-styles.nomnoml diff --git a/src/index.ts b/src/index.ts index 38ab04a..289fbcb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,5 @@ +import { styles, visualizers, layouters, buildStyle } from './visuals' +import { NodeLayouter, Visual, Visualizer } from "./domain"; export { draw, renderSvg, @@ -11,4 +13,23 @@ export var version = '1.5.3' export * as skanaar from './util' export { parse } from './parser' export { layout } from './layouter' -export { styles, visualizers } from './visuals' +export { styles, visualizers } +export type Component = { + name: Visual, + layout: NodeLayouter, + visualizer: Visualizer +} +export function registerComponent(component: Component) { + const name = String(component.name); + Object.assign(layouters, { [name]: component.layout } ); + Object.assign(visualizers, { [name]: component.visualizer } ); + Object.assign( + styles, + { + [name]: buildStyle({ visual: component.name }, + { center:true }, + { center: true } + ) + } + ); +} From 5ce50bce4422ddddb39d2b669cde04cfd1570f73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Koc?= Date: Sat, 18 Feb 2023 14:30:07 +0100 Subject: [PATCH 3/4] Fix bug related to short color notation. Added fill-opacity attr. --- src/GraphicsSvg.ts | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/GraphicsSvg.ts b/src/GraphicsSvg.ts index 657b783..72d7be1 100644 --- a/src/GraphicsSvg.ts +++ b/src/GraphicsSvg.ts @@ -10,6 +10,7 @@ interface SvgAttr { 'stroke-linejoin'?: string 'stroke-linecap'?: string fill?: string + 'fill-opacity'?: string 'text-align'?: string font?: string 'font-size'?: string @@ -164,6 +165,27 @@ export function GraphicsSvg(document?: HTMLDocument): ISvgGraphics { return element } + function prepareColor(colorSrc: string): { color: string, opacity: string } { + let color = colorSrc; + let opacity = "1"; + if (!colorSrc.match(/^#/)) { + return { + color, + opacity + }; + } + const charsQty = colorSrc.slice(1).length; + if (charsQty === 4 || charsQty === 8) { + color = charsQty === 4 ? colorSrc.slice(0,4) : colorSrc.slice(0,7); + opacity = charsQty === 4 ? colorSrc.slice(4, 5).repeat(2) : colorSrc.slice(7, 9); + opacity = String((parseInt(opacity, 16))/255); + } + return { + color, + opacity + } + } + return { width: function () { return 0 @@ -215,7 +237,9 @@ export function GraphicsSvg(document?: HTMLDocument): ISvgGraphics { current.attr.stroke = stroke }, fillStyle: function (fill) { - current.attr.fill = fill + const color = prepareColor(fill); + current.attr.fill = color.color + current.attr["fill-opacity"] = color.opacity }, arcTo: function (x1, y1, x2, y2) { if (inPathBuilderMode) @@ -227,12 +251,14 @@ export function GraphicsSvg(document?: HTMLDocument): ISvgGraphics { return el('path', { d: '' }) }, fillText: function (text, x, y) { + const color = prepareColor(current.attr.fill!); return el( 'text', { x, y, - fill: current.attr.fill, + fill: color.color, + 'fill-opacity': color.opacity, stroke: 'none', font: undefined as undefined | string, style: undefined as undefined | string, @@ -342,4 +368,4 @@ export function GraphicsSvg(document?: HTMLDocument): ISvgGraphics { return root.serialize() }, } -} +} \ No newline at end of file From 06da9fd5f64601e08c45687aea93dd99e3953113 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Koc?= Date: Tue, 21 Feb 2023 09:29:26 +0100 Subject: [PATCH 4/4] Remove the ability to register new types. --- src/index.ts | 35 +++++++---------------------------- 1 file changed, 7 insertions(+), 28 deletions(-) diff --git a/src/index.ts b/src/index.ts index 289fbcb..cd47619 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,35 +1,14 @@ -import { styles, visualizers, layouters, buildStyle } from './visuals' -import { NodeLayouter, Visual, Visualizer } from "./domain"; export { - draw, - renderSvg, - compileFile, - processImports, - processAsyncImports, - ImportDepthError, + draw, + renderSvg, + compileFile, + processImports, + processAsyncImports, + ImportDepthError, } from './nomnoml' export var version = '1.5.3' export * as skanaar from './util' export { parse } from './parser' export { layout } from './layouter' -export { styles, visualizers } -export type Component = { - name: Visual, - layout: NodeLayouter, - visualizer: Visualizer -} -export function registerComponent(component: Component) { - const name = String(component.name); - Object.assign(layouters, { [name]: component.layout } ); - Object.assign(visualizers, { [name]: component.visualizer } ); - Object.assign( - styles, - { - [name]: buildStyle({ visual: component.name }, - { center:true }, - { center: true } - ) - } - ); -} +export { styles, visualizers } from './visuals'