@ustutt/grapheditor-webcomponent - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

CHANGELOG.md

@@ -11,2 +11,15 @@ # Changelog
 
+## [0.6.2] - 2021-09-05
+
+### Added
+
+- Option to scale text by specifying a scale in the `data-line-wraps` attribute
+- `GroupingManager.getAllRegisteredGroups` helper function
+
+### Incompatible changes
+
+- All wrapped text elements will now have a transform origin set that allows scaling them to be more inuitive. This may break some css layouts. See "Api > Text Wrapping > `resetTextTransform`" for more information on how this is calculated.
+- Secified text height is now always interpreted as maximum allowed text height in all wrapping modes
+
+
 ## [0.6.1] - 2020-11-08
@@ -330,3 +343,4 @@
 
-[Unreleased]: https://github.com/UST-MICO/grapheditor/compare/v0.6.1...HEAD
+[Unreleased]: https://github.com/UST-MICO/grapheditor/compare/v0.6.2...HEAD
+[0.6.2]: https://github.com/UST-MICO/grapheditor/compare/v0.6.1...v0.6.2
 [0.6.1]: https://github.com/UST-MICO/grapheditor/compare/v0.6.0...v0.6.1
@@ -333,0 +347,0 @@ [0.6.0]: https://github.com/UST-MICO/grapheditor/compare/v0.5.4...v0.6.0

docs/changelog.md

@@ -11,2 +11,14 @@ # Changelog
 
+## [0.6.2] - 2021-09-05
+
+### Added
+
+- Option to scale text by specifying a scale in the `data-line-wraps` attribute
+
+### Incompatible changes
+
+- All wrapped text elements will now have a transform origin set that allows scaling them to be more inuitive. This may break some css layouts. See "Api > Text Wrapping > `resetTextTransform`" for more information on how this is calculated.
+- Secified text height is now always interpreted as maximum allowed text height in all wrapping modes
+
+
 ## [0.6.1] - 2020-11-08
@@ -330,3 +342,4 @@
 
-[Unreleased]: https://github.com/UST-MICO/grapheditor/compare/v0.6.1...HEAD
+[Unreleased]: https://github.com/UST-MICO/grapheditor/compare/v0.6.2...HEAD
+[0.6.2]: https://github.com/UST-MICO/grapheditor/compare/v0.6.1...v0.6.2
 [0.6.1]: https://github.com/UST-MICO/grapheditor/compare/v0.6.0...v0.6.1
@@ -333,0 +346,0 @@ [0.6.0]: https://github.com/UST-MICO/grapheditor/compare/v0.5.4...v0.6.0

docs/requirements.txt

@@ -1,5 +0,124 @@
-Sphinx==3.3.0
-recommonmark==0.6.0
-sphinx_rtd_theme==0.5.0
-sphinx-js==3.1.0
-tomlkit==0.7.0
+alabaster==0.7.12 \
+    --hash=sha256:446438bdcca0e05bd45ea2de1668c1d9b032e1a9154c2c259092d77031ddd359 \
+    --hash=sha256:a661d72d58e6ea8a57f7a86e37d86716863ee5e92788398526d58b26a4e4dc02
+babel==2.9.1 \
+    --hash=sha256:ab49e12b91d937cd11f0b67cb259a57ab4ad2b59ac7a3b41d6c06c0ac5b0def9 \
+    --hash=sha256:bc0c176f9f6a994582230df350aa6e05ba2ebe4b3ac317eab29d9be5d2768da0
+certifi==2020.12.5 \
+    --hash=sha256:719a74fb9e33b9bd44cc7f3a8d94bc35e4049deebe19ba7d8e108280cfd59830 \
+    --hash=sha256:1a4995114262bffbc2413b159f2a1a480c969de6e6eb13ee966d470af86af59c
+chardet==4.0.0 \
+    --hash=sha256:f864054d66fd9118f2e67044ac8981a54775ec5b67aed0441892edb553d21da5 \
+    --hash=sha256:0d6f53a15db4120f2b08c94f11e7d93d2c911ee118b6b30a04ec3ee8310179fa
+colorama==0.4.4; sys_platform == "win32" \
+    --hash=sha256:9f47eda37229f68eee03b24b9748937c7dc3868f906e8ba69fbcbdd3bc5dc3e2 \
+    --hash=sha256:5941b2b48a20143d2267e95b1c2a7603ce057ee39fd88e7329b0c292aa16869b
+commonmark==0.9.1 \
+    --hash=sha256:da2f38c92590f83de410ba1a3cbceafbc74fee9def35f9251ba9a971d6d66fd9 \
+    --hash=sha256:452f9dc859be7f06631ddcb328b6919c67984aca654e5fefb3914d54691aed60
+docutils==0.16 \
+    --hash=sha256:0c5b78adfbf7762415433f5515cd5c9e762339e23369dbe8000d84a4bf4ab3af \
+    --hash=sha256:c2de3a60e9e7d07be26b7f2b00ca0309c207e06c100f9cc2a94931fc75a478fc
+idna==2.10 \
+    --hash=sha256:b97d804b1e9b523befed77c48dacec60e6dcb0b5391d57af6a65a312a90648c0 \
+    --hash=sha256:b307872f855b18632ce0c21c5e45be78c0ea7ae4c15c828c20788b26921eb3f6
+imagesize==1.2.0 \
+    --hash=sha256:6965f19a6a2039c7d48bca7dba2473069ff854c36ae6f19d2cde309d998228a1 \
+    --hash=sha256:b1f6b5a4eab1f73479a50fb79fcf729514a900c341d8503d62a62dbc4127a2b1
+jinja2==2.11.3 \
+    --hash=sha256:03e47ad063331dd6a3f04a43eddca8a966a26ba0c5b7207a9a9e4e08f1b29419 \
+    --hash=sha256:a6d58433de0ae800347cab1fa3043cebbabe8baa9d29e668f1c768cb87a333c6
+markupsafe==2.0.0 \
+    --hash=sha256:2efaeb1baff547063bad2b2893a8f5e9c459c4624e1a96644bbba08910ae34e0 \
+    --hash=sha256:441ce2a8c17683d97e06447fcbccbdb057cbf587c78eb75ae43ea7858042fe2c \
+    --hash=sha256:45535241baa0fc0ba2a43961a1ac7562ca3257f46c4c3e9c0de38b722be41bd1 \
+    --hash=sha256:90053234a6479738fd40d155268af631c7fca33365f964f2208867da1349294b \
+    --hash=sha256:3b54a9c68995ef4164567e2cd1a5e16db5dac30b2a50c39c82db8d4afaf14f63 \
+    --hash=sha256:f58b5ba13a5689ca8317b98439fccfbcc673acaaf8241c1869ceea40f5d585bf \
+    --hash=sha256:a00dce2d96587651ef4fa192c17e039e8cfab63087c67e7d263a5533c7dad715 \
+    --hash=sha256:007dc055dbce5b1104876acee177dbfd18757e19d562cd440182e1f492e96b95 \
+    --hash=sha256:a08cd07d3c3c17cd33d9e66ea9dee8f8fc1c48e2d11bd88fd2dc515a602c709b \
+    --hash=sha256:3c352ff634e289061711608f5e474ec38dbaa21e3e168820d53d5f4015e5b91b \
+    --hash=sha256:32200f562daaab472921a11cbb63780f1654552ae49518196fc361ed8e12e901 \
+    --hash=sha256:fef86115fdad7ae774720d7103aa776144cf9b66673b4afa9bcaa7af990ed07b \
+    --hash=sha256:e79212d09fc0e224d20b43ad44bb0a0a3416d1e04cf6b45fed265114a5d43d20 \
+    --hash=sha256:79b2ae94fa991be023832e6bcc00f41dbc8e5fe9d997a02db965831402551730 \
+    --hash=sha256:3261fae28155e5c8634dd7710635fe540a05b58f160cef7713c7700cb9980e66 \
+    --hash=sha256:e4570d16f88c7f3032ed909dc9e905a17da14a1c4cfd92608e3fda4cb1208bbd \
+    --hash=sha256:8f806bfd0f218477d7c46a11d3e52dc7f5fdfaa981b18202b7dc84bbc287463b \
+    --hash=sha256:e77e4b983e2441aff0c0d07ee711110c106b625f440292dfe02a2f60c8218bd6 \
+    --hash=sha256:031bf79a27d1c42f69c276d6221172417b47cb4b31cdc73d362a9bf5a1889b9f \
+    --hash=sha256:83cf0228b2f694dcdba1374d5312f2277269d798e65f40344964f642935feac1 \
+    --hash=sha256:4cc563836f13c57f1473bc02d1e01fc37bab70ad4ee6be297d58c1d66bc819bf \
+    --hash=sha256:d00a669e4a5bec3ee6dbeeeedd82a405ced19f8aeefb109a012ea88a45afff96 \
+    --hash=sha256:161d575fa49395860b75da5135162481768b11208490d5a2143ae6785123e77d \
+    --hash=sha256:58bc9fce3e1557d463ef5cee05391a05745fd95ed660f23c1742c711712c0abb \
+    --hash=sha256:3fb47f97f1d338b943126e90b79cad50d4fcfa0b80637b5a9f468941dbbd9ce5 \
+    --hash=sha256:dab0c685f21f4a6c95bfc2afd1e7eae0033b403dd3d8c1b6d13a652ada75b348 \
+    --hash=sha256:664832fb88b8162268928df233f4b12a144a0c78b01d38b81bdcf0fc96668ecb \
+    --hash=sha256:df561f65049ed3556e5b52541669310e88713fdae2934845ec3606f283337958 \
+    --hash=sha256:24bbc3507fb6dfff663af7900a631f2aca90d5a445f272db5fc84999fa5718bc \
+    --hash=sha256:87de598edfa2230ff274c4de7fcf24c73ffd96208c8e1912d5d0fee459767d75 \
+    --hash=sha256:a19d39b02a24d3082856a5b06490b714a9d4179321225bbf22809ff1e1887cc8 \
+    --hash=sha256:4aca81a687975b35e3e80bcf9aa93fe10cd57fac37bf18b2314c186095f57e05 \
+    --hash=sha256:70820a1c96311e02449591cbdf5cd1c6a34d5194d5b55094ab725364375c9eb2 \
+    --hash=sha256:4fae0677f712ee090721d8b17f412f1cbceefbf0dc180fe91bab3232f38b4527
+packaging==20.9 \
+    --hash=sha256:67714da7f7bc052e064859c05c595155bd1ee9f69f76557e21f051443c20947a \
+    --hash=sha256:5b327ac1320dc863dca72f4514ecc086f31186744b84a230374cc1fd776feae5
+parsimonious==0.7.0 \
+    --hash=sha256:396d424f64f834f9463e81ba79a331661507a21f1ed7b644f7f6a744006fd938
+pygments==2.9.0 \
+    --hash=sha256:d66e804411278594d764fc69ec36ec13d9ae9147193a1740cd34d272ca383b8e \
+    --hash=sha256:a18f47b506a429f6f4b9df81bb02beab9ca21d0a5fee38ed15aef65f0545519f
+pyparsing==2.4.7 \
+    --hash=sha256:ef9d7589ef3c200abe66653d3f1ab1033c3c419ae9b9bdb1240a85b024efc88b \
+    --hash=sha256:c203ec8783bf771a155b207279b9bccb8dea02d8f0c9e5f8ead507bc3246ecc1
+pytz==2021.1 \
+    --hash=sha256:eb10ce3e7736052ed3623d49975ce333bcd712c7bb19a58b9e2089d4057d0798 \
+    --hash=sha256:83a4a90894bf38e243cf052c8b58f381bfe9a7a483f6a9cab140bc7f702ac4da
+recommonmark==0.6.0 \
+    --hash=sha256:2ec4207a574289355d5b6ae4ae4abb29043346ca12cdd5f07d374dc5987d2852 \
+    --hash=sha256:29cd4faeb6c5268c633634f2d69aef9431e0f4d347f90659fd0aab20e541efeb
+requests==2.25.1 \
+    --hash=sha256:c210084e36a42ae6b9219e00e48287def368a26d03a048ddad7bfee44f75871e \
+    --hash=sha256:27973dd4a904a4f13b263a19c866c13b92a39ed1c964655f025f3f8d3d75b804
+six==1.16.0 \
+    --hash=sha256:8abb2f1d86890a2dfb989f9a77cfcfd3e47c2a354b01111771326f8aa26e0254 \
+    --hash=sha256:1e61c37477a1626458e36f7b1d82aa5c9b094fa4802892072e49de9c60c4c926
+snowballstemmer==2.1.0 \
+    --hash=sha256:b51b447bea85f9968c13b650126a888aabd4cb4463fca868ec596826325dedc2 \
+    --hash=sha256:e997baa4f2e9139951b6f4c631bad912dfd3c792467e2f03d7239464af90e914
+sphinx==3.5.4 \
+    --hash=sha256:2320d4e994a191f4b4be27da514e46b3d6b420f2ff895d064f52415d342461e8 \
+    --hash=sha256:19010b7b9fa0dc7756a6e105b2aacd3a80f798af3c25c273be64d7beeb482cb1
+sphinx-js==3.1.2 \
+    --hash=sha256:04fe0d2fec6d39b505d70500d0132cfa0efc834760c9598048c1a9dbbc175732 \
+    --hash=sha256:4503accb74ba3a15e0e59e20ec18b15be1932b2c8e8b82e03ace39a415899785
+sphinx-rtd-theme==0.5.2 \
+    --hash=sha256:4a05bdbe8b1446d77a01e20a23ebc6777c74f43237035e76be89699308987d6f \
+    --hash=sha256:32bd3b5d13dc8186d7a42fc816a23d32e83a4827d7d9882948e7b837c232da5a
+sphinxcontrib-applehelp==1.0.2 \
+    --hash=sha256:a072735ec80e7675e3f432fcae8610ecf509c5f1869d17e2eecff44389cdbc58 \
+    --hash=sha256:806111e5e962be97c29ec4c1e7fe277bfd19e9652fb1a4392105b43e01af885a
+sphinxcontrib-devhelp==1.0.2 \
+    --hash=sha256:ff7f1afa7b9642e7060379360a67e9c41e8f3121f2ce9164266f61b9f4b338e4 \
+    --hash=sha256:8165223f9a335cc1af7ffe1ed31d2871f325254c0423bc0c4c7cd1c1e4734a2e
+sphinxcontrib-htmlhelp==1.0.3 \
+    --hash=sha256:e8f5bb7e31b2dbb25b9cc435c8ab7a79787ebf7f906155729338f3156d93659b \
+    --hash=sha256:3c0bc24a2c41e340ac37c85ced6dafc879ab485c095b1d65d2461ac2f7cca86f
+sphinxcontrib-jsmath==1.0.1 \
+    --hash=sha256:a9925e4a4587247ed2191a22df5f6970656cb8ca2bd6284309578f2153e0c4b8 \
+    --hash=sha256:2ec2eaebfb78f3f2078e73666b1415417a116cc848b72e5172e596c871103178
+sphinxcontrib-qthelp==1.0.3 \
+    --hash=sha256:4c33767ee058b70dba89a6fc5c1892c0d57a54be67ddd3e7875a18d14cba5a72 \
+    --hash=sha256:bd9fc24bcb748a8d51fd4ecaade681350aa63009a347a8c14e637895444dfab6
+sphinxcontrib-serializinghtml==1.1.4 \
+    --hash=sha256:eaa0eccc86e982a9b939b2b82d12cc5d013385ba5eadcc7e4fed23f4405f77bc \
+    --hash=sha256:f242a81d423f59617a8e5cf16f5d4d74e28ee9a66f9e5b637a18082991db5a9a
+tomlkit==0.7.0 \
+    --hash=sha256:6babbd33b17d5c9691896b0e68159215a9387ebfa938aa3ac42f4a4beeb2b831 \
+    --hash=sha256:ac57f29693fab3e309ea789252fcce3061e19110085aa31af5446ca749325618
+urllib3==1.26.4 \
+    --hash=sha256:2f4da4594db7e1e110a944bb1b551fdf4e6c136ad42e4234131391e21eb5b0df \
+    --hash=sha256:e7b021f7241115872f92f43c6508082facffbd1c048e3c6e2bb9c2a157e28937

lib-esm/grouping.d.ts

@@ -305,2 +305,11 @@ import { Node } from './node';
     /**
+     * Get all known group ids.
+     *
+     * Use `getGroupForNode` or `getGroupBehaviourOf` to get
+     * more information about the groups.
+     *
+     * @returns a new set of all group ids
+     */
+    getAllRegisteredGroups(): Set<string>;
+    /**
      * Clears all group information stored in this GroupingManager instance.
@@ -307,0 +316,0 @@ *

lib-esm/grouping.js

@@ -209,2 +209,13 @@ /*
     /**
+     * Get all known group ids.
+     *
+     * Use `getGroupForNode` or `getGroupBehaviourOf` to get
+     * more information about the groups.
+     *
+     * @returns a new set of all group ids
+     */
+    getAllRegisteredGroups() {
+        return new Set(this.groupsById.keys());
+    }
+    /**
      * Clears all group information stored in this GroupingManager instance.
@@ -211,0 +222,0 @@ *

lib-esm/textwrap.d.ts

@@ -38,2 +38,10 @@ import { Selection } from 'd3-selection';
 /**
+ * Line Wrapping definitions contain a list of widths (each width is one line
+ * wrapped with that width) and a scale to scale text by.
+ */
+interface LineWrappingDefinition {
+    lineWidths: number[];
+    scale: number;
+}
+/**
  * Wrap the text based on a supplied lines definition.
@@ -46,2 +54,8 @@ *
  *
+ * A line definition can optionally start with a scale (marked with an `x`
+ * directly after the number). The scale is returned as part of the line
+ * definition. It can be applied by {@link scaleText}. To get a more intuitive
+ * scaling behaviour first reset the transform property and the transform
+ * origin with {@link resetTextTransform}.
+ *
  * @param text the selection of the text element to wrap the text into
@@ -53,5 +67,36 @@ * @param newText the new text to wrap
  * @param force if wrapping should be forced
+ * @param maxHeight the max allowed height of the text element
+ *
+ * @returns the used lines wrapping definition
  */
-export declare function wrapTextLines(text: Selection<SVGTextElement, unknown, null, undefined>, newText: string, lines: string, overflowMode: any, wordBreak: any, force: boolean): void;
+export declare function wrapTextLines(text: Selection<SVGTextElement, unknown, null, undefined>, newText: string, lines: string, overflowMode: any, wordBreak: any, force: boolean, maxHeight?: number): LineWrappingDefinition;
 /**
+ * Reset the "transform" attribute and set a more useful transform origin for
+ * scaling text.
+ *
+ * The new transform origin x position is the same as the text node x coordinate.
+ * This ensures that text will always scale towards the text anchor horizontally.
+ *
+ * The new transform origin y position depends on the parameter `isVerticallyCentered`.
+ * If the text is centered vertically it is set to the mindpoint between the bbox
+ * top and bottom. If the text is not centered vertically then the bbox top is used.
+ *
+ * Using this method before the text was wrapped may cause the transform origin
+ * to be in a weird place.
+ *
+ * @param text the text selection to reset the transformation for (must have an x attribute!)
+ * @param isVerticallyCentered if the text is vertically centered it should scale from/towards that center vertically
+ */
+export declare function resetTextTransform(text: Selection<SVGTextElement, unknown, null, undefined>, isVerticallyCentered?: boolean): void;
+/**
+ * Scale a text element with the "transform" attribute.
+ *
+ * This method preserves the content of the "transform" attribute by prepending
+ * the new scale!
+ *
+ * @param text the text to scale
+ * @param scale the scale factor
+ */
+export declare function scaleText(text: Selection<SVGTextElement, unknown, null, undefined>, scale: number): void;
+/**
  * Center a svg text element vertically around the y coordinate specified in the
@@ -62,6 +107,11 @@ * 'data-text-center-y' attribute of the text element.
  *
+ * If multiline is true then the "transform" attribute of the text node is used
+ * to translate the text. This method preserves the content of the "transform"
+ * attribute by prepending translation!
+ *
  * @param text the text selection to center vertically around the attribute 'data-text-center-y'
+ * @param centerY if set, this value is used instead of the attribute 'data-text-center-y'
  * @param multiline true if the text is a multiline text containing tSpans
  */
-export declare function centerTextVertically(text: Selection<SVGTextElement, unknown, null, undefined>, multiline?: boolean): void;
+export declare function centerTextVertically(text: Selection<SVGTextElement, unknown, null, undefined>, centerY?: number, multiline?: boolean): void;
 /**
@@ -90,1 +140,2 @@ * Calculate and create a multiline span group.
 export declare function wrapSingleLine(element: SVGTextElement | SVGTSpanElement, width: number, newText: string, mode?: string, wordBreak?: string, force?: boolean): string;
+export {};

lib-esm/textwrap.js

@@ -45,3 +45,5 @@ /*
     }
+    // explicit line wrapping definition
     const wrapLines = text.attr('data-wrap-lines');
+    // width and height
     let width = parseFloat(text.attr('width'));
@@ -56,5 +58,16 @@ if (isNaN(width)) {
     if (isNaN(width) && wrapLines == null) {
+        // no text wrapping possible (missing information)
         text.text(newText);
         return;
     }
+    // parse vertical text center
+    const verticalCenter = text.attr('data-text-center-y');
+    let centerY;
+    if (verticalCenter != null) {
+        centerY = parseFloat(verticalCenter);
+    }
+    if (centerY != null && isNaN(centerY)) {
+        centerY = null;
+    }
+    const isCenteredVertically = centerY != null;
     // get overflowMode from css style attribute
@@ -72,4 +85,8 @@ let overflowMode = text.style('text-overflow');
         // handle special wrap lines!
-        wrapTextLines(text, newText, wrapLines, overflowMode, wordBreak, force);
-        centerTextVertically(text, true);
+        const def = wrapTextLines(text, newText, wrapLines, overflowMode, wordBreak, force, height);
+        resetTextTransform(text, isCenteredVertically);
+        if (def.scale !== 1) {
+            scaleText(text, def.scale);
+        }
+        centerTextVertically(text, centerY, true);
         return;
@@ -80,4 +97,5 @@ }
         const overflow = lTrim(wrapSingleLine(element, width, newText, overflowMode, wordBreak, force));
+        resetTextTransform(text, isCenteredVertically);
         text.attr('data-wrapped', overflow !== '' ? 'true' : 'false');
-        centerTextVertically(text, false);
+        centerTextVertically(text, centerY, false);
         return;
@@ -93,3 +111,4 @@ }
     }
-    centerTextVertically(text, true);
+    resetTextTransform(text, isCenteredVertically);
+    centerTextVertically(text, centerY, true);
 }
@@ -121,2 +140,42 @@ /**
 /**
+ * Parse a line wrapping definition into a list of {@link LineWrappingDefinition}.
+ *
+ * @param lineDefs the line wrapping definition string to parse
+ */
+function parseLineDefs(lineDefs) {
+    const defs = [];
+    lineDefs.split('|').map(lineDef => trim(lineDef)).forEach(lineDef => {
+        const def = {
+            lineWidths: [],
+            scale: 1,
+        };
+        const widths = lineDef.split(' ');
+        if (widths.length == 0) {
+            console.error(`Could not parse lines def ${lineDef}! No lines specified.`);
+            return;
+        }
+        if (widths[0].endsWith('x')) {
+            const scale = widths[0];
+            def.scale = parseFloat(scale.substring(0, scale.length - 1));
+            if (isNaN(def.scale)) {
+                console.error(`Could not parse lines def ${lineDef}! Scale is NaN.`);
+                return;
+            }
+            widths.splice(0, 1);
+            if (widths.length == 0) {
+                console.error(`Could not parse lines def ${lineDef}! No lines specified.`);
+                return;
+            }
+        }
+        def.lineWidths = widths.map(parseFloat);
+        if (def.lineWidths.some(isNaN)) {
+            // cannot use this line def
+            console.error(`Could not parse lines def ${lineDef}! A line width was NaN.`);
+            return;
+        }
+        defs.push(def);
+    });
+    return defs;
+}
+/**
  * Wrap the text based on a supplied lines definition.
@@ -129,2 +188,8 @@ *
  *
+ * A line definition can optionally start with a scale (marked with an `x`
+ * directly after the number). The scale is returned as part of the line
+ * definition. It can be applied by {@link scaleText}. To get a more intuitive
+ * scaling behaviour first reset the transform property and the transform
+ * origin with {@link resetTextTransform}.
+ *
  * @param text the selection of the text element to wrap the text into
@@ -136,5 +201,11 @@ * @param newText the new text to wrap
  * @param force if wrapping should be forced
+ * @param maxHeight the max allowed height of the text element
+ *
+ * @returns the used lines wrapping definition
  */
-export function wrapTextLines(text, newText, lines, overflowMode, wordBreak, force) {
-    const lineDefs = lines.split('|').map(lineDef => trim(lineDef));
+export function wrapTextLines(text, newText, lines, overflowMode, wordBreak, force, maxHeight) {
+    if (isNaN(maxHeight)) {
+        maxHeight = null;
+    }
+    const lineDefs = parseLineDefs(lines);
     let lineheight = parseFloat(text.attr('data-lineheight'));
@@ -153,2 +224,7 @@ if (force || isNaN(lineheight)) {
     lineheight = Math.abs(lineheight); // don't allow negative lineheight
+    // filter out line defs that lead to too long text
+    const allowedLineDefs = lineDefs.filter((def, index) => index == 0 || maxHeight == null || (def.lineWidths.length * lineheight * def.scale) <= maxHeight);
+    if (allowedLineDefs.length == 0) {
+        console.error(`No line wrapping definition found that is smaller than the max height ${maxHeight}.`, lines);
+    }
     const x = text.attr("x");
@@ -165,14 +241,11 @@ const yBaseline = parseFloat(text.attr('y'));
     text.text(null);
+    let usedDef;
     // iterate over line defs
-    for (let lineDefIndex = 0; lineDefIndex < lineDefs.length; lineDefIndex++) {
-        const lineDef = lineDefs[lineDefIndex];
+    for (let lineDefIndex = 0; lineDefIndex < allowedLineDefs.length; lineDefIndex++) {
+        const lineDef = allowedLineDefs[lineDefIndex];
+        usedDef = lineDef;
         let currentNewText = newText;
-        const lineWidths = lineDef.split(' ').map(parseFloat);
-        if (lineWidths.some(isNaN)) {
-            // cannot use this line def (use next)
-            console.error('Could not parse lines def {lineDef}!');
-            continue;
-        }
+        const lineWidths = lineDef.lineWidths;
         const cumulativeWidth = lineWidths.reduce((numA, numB) => { return numA + numB; }, 0);
-        if (cumulativeWidth < minimalCumulativeLineLength && lineDefIndex < (lineDefs.length - 1)) {
+        if (cumulativeWidth < minimalCumulativeLineLength && lineDefIndex < (allowedLineDefs.length - 1)) {
             // if not last linedef and wrap is expected to exceed all lines
@@ -215,4 +288,53 @@ continue;
     }
+    return usedDef;
 }
 /**
+ * Reset the "transform" attribute and set a more useful transform origin for
+ * scaling text.
+ *
+ * The new transform origin x position is the same as the text node x coordinate.
+ * This ensures that text will always scale towards the text anchor horizontally.
+ *
+ * The new transform origin y position depends on the parameter `isVerticallyCentered`.
+ * If the text is centered vertically it is set to the mindpoint between the bbox
+ * top and bottom. If the text is not centered vertically then the bbox top is used.
+ *
+ * Using this method before the text was wrapped may cause the transform origin
+ * to be in a weird place.
+ *
+ * @param text the text selection to reset the transformation for (must have an x attribute!)
+ * @param isVerticallyCentered if the text is vertically centered it should scale from/towards that center vertically
+ */
+export function resetTextTransform(text, isVerticallyCentered = false) {
+    var _a;
+    const textNode = text.node();
+    const bbox = textNode.getBBox();
+    const originX = (_a = text.attr('x')) !== null && _a !== void 0 ? _a : 0;
+    let originY;
+    if (isVerticallyCentered) {
+        // ensure text scales towards the vertical center
+        originY = bbox.y + (bbox.height / 2);
+    }
+    else {
+        // ensure text scales to the top
+        originY = bbox.y;
+    }
+    text.style("transform-origin", `${originX}px ${originY}px`);
+    text.attr("transform", null);
+}
+/**
+ * Scale a text element with the "transform" attribute.
+ *
+ * This method preserves the content of the "transform" attribute by prepending
+ * the new scale!
+ *
+ * @param text the text to scale
+ * @param scale the scale factor
+ */
+export function scaleText(text, scale) {
+    var _a;
+    const oldTransform = (_a = text.attr('transform')) !== null && _a !== void 0 ? _a : "";
+    text.attr('transform', `scale(${scale})${oldTransform}`);
+}
+/**
  * Center a svg text element vertically around the y coordinate specified in the
@@ -223,11 +345,20 @@ * 'data-text-center-y' attribute of the text element.
  *
+ * If multiline is true then the "transform" attribute of the text node is used
+ * to translate the text. This method preserves the content of the "transform"
+ * attribute by prepending translation!
+ *
  * @param text the text selection to center vertically around the attribute 'data-text-center-y'
+ * @param centerY if set, this value is used instead of the attribute 'data-text-center-y'
  * @param multiline true if the text is a multiline text containing tSpans
  */
-export function centerTextVertically(text, multiline = false) {
-    const centerVertical = text.attr('data-text-center-y');
-    if (centerVertical == null) {
-        return;
+export function centerTextVertically(text, centerY, multiline = false) {
+    var _a;
+    if (centerY == null) {
+        // try to parse center from text node
+        const centerVertical = text.attr('data-text-center-y');
+        if (centerVertical == null) {
+            return;
+        }
+        centerY = parseFloat(centerVertical);
     }
-    const centerY = parseFloat(centerVertical);
     if (isNaN(centerY)) {
@@ -238,3 +369,3 @@ return;
     const bbox = textNode.getBBox();
-    const currentCy = ((bbox.y + bbox.height) + bbox.y) / 2;
+    const currentCy = bbox.y + (bbox.height / 2);
     const delta = centerY - currentCy;
@@ -253,3 +384,4 @@ if (Math.abs(delta) > 0.00001) {
             // use a transform for multiline strings to transform all tSpans at once
-            text.attr("transform", `translate(0,${delta})`);
+            const oldTransform = (_a = text.attr('transform')) !== null && _a !== void 0 ? _a : "";
+            text.attr("transform", `translate(0,${delta})${oldTransform}`);
         }
@@ -256,0 +388,0 @@ }

lib/grouping.d.ts

@@ -305,2 +305,11 @@ import { Node } from './node';
     /**
+     * Get all known group ids.
+     *
+     * Use `getGroupForNode` or `getGroupBehaviourOf` to get
+     * more information about the groups.
+     *
+     * @returns a new set of all group ids
+     */
+    getAllRegisteredGroups(): Set<string>;
+    /**
      * Clears all group information stored in this GroupingManager instance.
@@ -307,0 +316,0 @@ *

lib/grouping.js

@@ -217,2 +217,13 @@ "use strict";
     /**
+     * Get all known group ids.
+     *
+     * Use `getGroupForNode` or `getGroupBehaviourOf` to get
+     * more information about the groups.
+     *
+     * @returns a new set of all group ids
+     */
+    getAllRegisteredGroups() {
+        return new Set(this.groupsById.keys());
+    }
+    /**
      * Clears all group information stored in this GroupingManager instance.
@@ -219,0 +230,0 @@ *

lib/textwrap.d.ts

@@ -38,2 +38,10 @@ import { Selection } from 'd3-selection';
 /**
+ * Line Wrapping definitions contain a list of widths (each width is one line
+ * wrapped with that width) and a scale to scale text by.
+ */
+interface LineWrappingDefinition {
+    lineWidths: number[];
+    scale: number;
+}
+/**
  * Wrap the text based on a supplied lines definition.
@@ -46,2 +54,8 @@ *
  *
+ * A line definition can optionally start with a scale (marked with an `x`
+ * directly after the number). The scale is returned as part of the line
+ * definition. It can be applied by {@link scaleText}. To get a more intuitive
+ * scaling behaviour first reset the transform property and the transform
+ * origin with {@link resetTextTransform}.
+ *
  * @param text the selection of the text element to wrap the text into
@@ -53,5 +67,36 @@ * @param newText the new text to wrap
  * @param force if wrapping should be forced
+ * @param maxHeight the max allowed height of the text element
+ *
+ * @returns the used lines wrapping definition
  */
-export declare function wrapTextLines(text: Selection<SVGTextElement, unknown, null, undefined>, newText: string, lines: string, overflowMode: any, wordBreak: any, force: boolean): void;
+export declare function wrapTextLines(text: Selection<SVGTextElement, unknown, null, undefined>, newText: string, lines: string, overflowMode: any, wordBreak: any, force: boolean, maxHeight?: number): LineWrappingDefinition;
 /**
+ * Reset the "transform" attribute and set a more useful transform origin for
+ * scaling text.
+ *
+ * The new transform origin x position is the same as the text node x coordinate.
+ * This ensures that text will always scale towards the text anchor horizontally.
+ *
+ * The new transform origin y position depends on the parameter `isVerticallyCentered`.
+ * If the text is centered vertically it is set to the mindpoint between the bbox
+ * top and bottom. If the text is not centered vertically then the bbox top is used.
+ *
+ * Using this method before the text was wrapped may cause the transform origin
+ * to be in a weird place.
+ *
+ * @param text the text selection to reset the transformation for (must have an x attribute!)
+ * @param isVerticallyCentered if the text is vertically centered it should scale from/towards that center vertically
+ */
+export declare function resetTextTransform(text: Selection<SVGTextElement, unknown, null, undefined>, isVerticallyCentered?: boolean): void;
+/**
+ * Scale a text element with the "transform" attribute.
+ *
+ * This method preserves the content of the "transform" attribute by prepending
+ * the new scale!
+ *
+ * @param text the text to scale
+ * @param scale the scale factor
+ */
+export declare function scaleText(text: Selection<SVGTextElement, unknown, null, undefined>, scale: number): void;
+/**
  * Center a svg text element vertically around the y coordinate specified in the
@@ -62,6 +107,11 @@ * 'data-text-center-y' attribute of the text element.
  *
+ * If multiline is true then the "transform" attribute of the text node is used
+ * to translate the text. This method preserves the content of the "transform"
+ * attribute by prepending translation!
+ *
  * @param text the text selection to center vertically around the attribute 'data-text-center-y'
+ * @param centerY if set, this value is used instead of the attribute 'data-text-center-y'
  * @param multiline true if the text is a multiline text containing tSpans
  */
-export declare function centerTextVertically(text: Selection<SVGTextElement, unknown, null, undefined>, multiline?: boolean): void;
+export declare function centerTextVertically(text: Selection<SVGTextElement, unknown, null, undefined>, centerY?: number, multiline?: boolean): void;
 /**
@@ -90,1 +140,2 @@ * Calculate and create a multiline span group.
 export declare function wrapSingleLine(element: SVGTextElement | SVGTSpanElement, width: number, newText: string, mode?: string, wordBreak?: string, force?: boolean): string;
+export {};

lib/textwrap.js

@@ -19,3 +19,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapSingleLine = exports.calculateMultiline = exports.centerTextVertically = exports.wrapTextLines = exports.lTrim = exports.rTrim = exports.trim = exports.wrapText = void 0;
+exports.wrapSingleLine = exports.calculateMultiline = exports.centerTextVertically = exports.scaleText = exports.resetTextTransform = exports.wrapTextLines = exports.lTrim = exports.rTrim = exports.trim = exports.wrapText = void 0;
 const d3_selection_1 = require("d3-selection");
@@ -49,3 +49,5 @@ /**
     }
+    // explicit line wrapping definition
     const wrapLines = text.attr('data-wrap-lines');
+    // width and height
     let width = parseFloat(text.attr('width'));
@@ -60,5 +62,16 @@ if (isNaN(width)) {
     if (isNaN(width) && wrapLines == null) {
+        // no text wrapping possible (missing information)
         text.text(newText);
         return;
     }
+    // parse vertical text center
+    const verticalCenter = text.attr('data-text-center-y');
+    let centerY;
+    if (verticalCenter != null) {
+        centerY = parseFloat(verticalCenter);
+    }
+    if (centerY != null && isNaN(centerY)) {
+        centerY = null;
+    }
+    const isCenteredVertically = centerY != null;
     // get overflowMode from css style attribute
@@ -76,4 +89,8 @@ let overflowMode = text.style('text-overflow');
         // handle special wrap lines!
-        wrapTextLines(text, newText, wrapLines, overflowMode, wordBreak, force);
-        centerTextVertically(text, true);
+        const def = wrapTextLines(text, newText, wrapLines, overflowMode, wordBreak, force, height);
+        resetTextTransform(text, isCenteredVertically);
+        if (def.scale !== 1) {
+            scaleText(text, def.scale);
+        }
+        centerTextVertically(text, centerY, true);
         return;
@@ -84,4 +101,5 @@ }
         const overflow = lTrim(wrapSingleLine(element, width, newText, overflowMode, wordBreak, force));
+        resetTextTransform(text, isCenteredVertically);
         text.attr('data-wrapped', overflow !== '' ? 'true' : 'false');
-        centerTextVertically(text, false);
+        centerTextVertically(text, centerY, false);
         return;
@@ -97,3 +115,4 @@ }
     }
-    centerTextVertically(text, true);
+    resetTextTransform(text, isCenteredVertically);
+    centerTextVertically(text, centerY, true);
 }
@@ -129,2 +148,42 @@ exports.wrapText = wrapText;
 /**
+ * Parse a line wrapping definition into a list of {@link LineWrappingDefinition}.
+ *
+ * @param lineDefs the line wrapping definition string to parse
+ */
+function parseLineDefs(lineDefs) {
+    const defs = [];
+    lineDefs.split('|').map(lineDef => trim(lineDef)).forEach(lineDef => {
+        const def = {
+            lineWidths: [],
+            scale: 1,
+        };
+        const widths = lineDef.split(' ');
+        if (widths.length == 0) {
+            console.error(`Could not parse lines def ${lineDef}! No lines specified.`);
+            return;
+        }
+        if (widths[0].endsWith('x')) {
+            const scale = widths[0];
+            def.scale = parseFloat(scale.substring(0, scale.length - 1));
+            if (isNaN(def.scale)) {
+                console.error(`Could not parse lines def ${lineDef}! Scale is NaN.`);
+                return;
+            }
+            widths.splice(0, 1);
+            if (widths.length == 0) {
+                console.error(`Could not parse lines def ${lineDef}! No lines specified.`);
+                return;
+            }
+        }
+        def.lineWidths = widths.map(parseFloat);
+        if (def.lineWidths.some(isNaN)) {
+            // cannot use this line def
+            console.error(`Could not parse lines def ${lineDef}! A line width was NaN.`);
+            return;
+        }
+        defs.push(def);
+    });
+    return defs;
+}
+/**
  * Wrap the text based on a supplied lines definition.
@@ -137,2 +196,8 @@ *
  *
+ * A line definition can optionally start with a scale (marked with an `x`
+ * directly after the number). The scale is returned as part of the line
+ * definition. It can be applied by {@link scaleText}. To get a more intuitive
+ * scaling behaviour first reset the transform property and the transform
+ * origin with {@link resetTextTransform}.
+ *
  * @param text the selection of the text element to wrap the text into
@@ -144,5 +209,11 @@ * @param newText the new text to wrap
  * @param force if wrapping should be forced
+ * @param maxHeight the max allowed height of the text element
+ *
+ * @returns the used lines wrapping definition
  */
-function wrapTextLines(text, newText, lines, overflowMode, wordBreak, force) {
-    const lineDefs = lines.split('|').map(lineDef => trim(lineDef));
+function wrapTextLines(text, newText, lines, overflowMode, wordBreak, force, maxHeight) {
+    if (isNaN(maxHeight)) {
+        maxHeight = null;
+    }
+    const lineDefs = parseLineDefs(lines);
     let lineheight = parseFloat(text.attr('data-lineheight'));
@@ -161,2 +232,7 @@ if (force || isNaN(lineheight)) {
     lineheight = Math.abs(lineheight); // don't allow negative lineheight
+    // filter out line defs that lead to too long text
+    const allowedLineDefs = lineDefs.filter((def, index) => index == 0 || maxHeight == null || (def.lineWidths.length * lineheight * def.scale) <= maxHeight);
+    if (allowedLineDefs.length == 0) {
+        console.error(`No line wrapping definition found that is smaller than the max height ${maxHeight}.`, lines);
+    }
     const x = text.attr("x");
@@ -173,14 +249,11 @@ const yBaseline = parseFloat(text.attr('y'));
     text.text(null);
+    let usedDef;
     // iterate over line defs
-    for (let lineDefIndex = 0; lineDefIndex < lineDefs.length; lineDefIndex++) {
-        const lineDef = lineDefs[lineDefIndex];
+    for (let lineDefIndex = 0; lineDefIndex < allowedLineDefs.length; lineDefIndex++) {
+        const lineDef = allowedLineDefs[lineDefIndex];
+        usedDef = lineDef;
         let currentNewText = newText;
-        const lineWidths = lineDef.split(' ').map(parseFloat);
-        if (lineWidths.some(isNaN)) {
-            // cannot use this line def (use next)
-            console.error('Could not parse lines def {lineDef}!');
-            continue;
-        }
+        const lineWidths = lineDef.lineWidths;
         const cumulativeWidth = lineWidths.reduce((numA, numB) => { return numA + numB; }, 0);
-        if (cumulativeWidth < minimalCumulativeLineLength && lineDefIndex < (lineDefs.length - 1)) {
+        if (cumulativeWidth < minimalCumulativeLineLength && lineDefIndex < (allowedLineDefs.length - 1)) {
             // if not last linedef and wrap is expected to exceed all lines
@@ -223,5 +296,56 @@ continue;
     }
+    return usedDef;
 }
 exports.wrapTextLines = wrapTextLines;
 /**
+ * Reset the "transform" attribute and set a more useful transform origin for
+ * scaling text.
+ *
+ * The new transform origin x position is the same as the text node x coordinate.
+ * This ensures that text will always scale towards the text anchor horizontally.
+ *
+ * The new transform origin y position depends on the parameter `isVerticallyCentered`.
+ * If the text is centered vertically it is set to the mindpoint between the bbox
+ * top and bottom. If the text is not centered vertically then the bbox top is used.
+ *
+ * Using this method before the text was wrapped may cause the transform origin
+ * to be in a weird place.
+ *
+ * @param text the text selection to reset the transformation for (must have an x attribute!)
+ * @param isVerticallyCentered if the text is vertically centered it should scale from/towards that center vertically
+ */
+function resetTextTransform(text, isVerticallyCentered = false) {
+    var _a;
+    const textNode = text.node();
+    const bbox = textNode.getBBox();
+    const originX = (_a = text.attr('x')) !== null && _a !== void 0 ? _a : 0;
+    let originY;
+    if (isVerticallyCentered) {
+        // ensure text scales towards the vertical center
+        originY = bbox.y + (bbox.height / 2);
+    }
+    else {
+        // ensure text scales to the top
+        originY = bbox.y;
+    }
+    text.style("transform-origin", `${originX}px ${originY}px`);
+    text.attr("transform", null);
+}
+exports.resetTextTransform = resetTextTransform;
+/**
+ * Scale a text element with the "transform" attribute.
+ *
+ * This method preserves the content of the "transform" attribute by prepending
+ * the new scale!
+ *
+ * @param text the text to scale
+ * @param scale the scale factor
+ */
+function scaleText(text, scale) {
+    var _a;
+    const oldTransform = (_a = text.attr('transform')) !== null && _a !== void 0 ? _a : "";
+    text.attr('transform', `scale(${scale})${oldTransform}`);
+}
+exports.scaleText = scaleText;
+/**
  * Center a svg text element vertically around the y coordinate specified in the
@@ -232,11 +356,20 @@ * 'data-text-center-y' attribute of the text element.
  *
+ * If multiline is true then the "transform" attribute of the text node is used
+ * to translate the text. This method preserves the content of the "transform"
+ * attribute by prepending translation!
+ *
  * @param text the text selection to center vertically around the attribute 'data-text-center-y'
+ * @param centerY if set, this value is used instead of the attribute 'data-text-center-y'
  * @param multiline true if the text is a multiline text containing tSpans
  */
-function centerTextVertically(text, multiline = false) {
-    const centerVertical = text.attr('data-text-center-y');
-    if (centerVertical == null) {
-        return;
+function centerTextVertically(text, centerY, multiline = false) {
+    var _a;
+    if (centerY == null) {
+        // try to parse center from text node
+        const centerVertical = text.attr('data-text-center-y');
+        if (centerVertical == null) {
+            return;
+        }
+        centerY = parseFloat(centerVertical);
     }
-    const centerY = parseFloat(centerVertical);
     if (isNaN(centerY)) {
@@ -247,3 +380,3 @@ return;
     const bbox = textNode.getBBox();
-    const currentCy = ((bbox.y + bbox.height) + bbox.y) / 2;
+    const currentCy = bbox.y + (bbox.height / 2);
     const delta = centerY - currentCy;
@@ -262,3 +395,4 @@ if (Math.abs(delta) > 0.00001) {
             // use a transform for multiline strings to transform all tSpans at once
-            text.attr("transform", `translate(0,${delta})`);
+            const oldTransform = (_a = text.attr('transform')) !== null && _a !== void 0 ? _a : "";
+            text.attr("transform", `translate(0,${delta})${oldTransform}`);
         }
@@ -265,0 +399,0 @@ }

package.json

 {
   "name": "@ustutt/grapheditor-webcomponent",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Webcomponent for displaying and editing graphs.",
-  "author": "Fabian Bühler",
+  "author": "Fabian Bühler <[e-mail]>",
   "main": "./lib/index.js",
@@ -37,6 +37,6 @@ "types": "./lib/index.d.ts",
   "scripts": {
-    "start": "webpack-dev-server --config webpack-dev.config.js",
+    "start": "webpack serve --config webpack-dev.config.js",
     "lint": "eslint --ext=.ts",
     "lint-all": "eslint --ext=.ts .",
-    "doc": "typedoc --exclude **/node_modules/**/*.* --externalPattern **/node_modules/**/* --excludeExternals --ignoreCompilerErrors",
+    "doc": "typedoc --exclude **/node_modules/**/*.* --exclude **/lib/**/* --exclude **/lib-esm/**/* --externalPattern **/node_modules/**/* --excludeExternals",
     "clean": "rm -rf _bundles lib lib-esm",
@@ -56,18 +56,18 @@ "package": "tsc",
     "@types/d3": "^5.16.4",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/eslint-plugin-tslint": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
     "awesome-typescript-loader": "^5.2.1",
-    "eslint": "^7.13.0",
-    "eslint-plugin-import": "^2.22.1",
-    "html-webpack-plugin": "^4.5.0",
-    "source-map-loader": "^1.1.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.24.2",
+    "html-webpack-plugin": "^5.3.2",
+    "source-map-loader": "^3.0.0",
     "tslint": "^6.1.3",
-    "typedoc": "^0.19.2",
-    "typescript": "~3.9.7",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.3.0"
+    "typedoc": "^0.20.37",
+    "typescript": "^3.9.9",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.1.0",
+    "webpack-merge": "^5.8.0"
   }
 }

README.md

@@ -44,7 +44,14 @@ # Grapheditor Webcomponent
 ```bash
+# install is needed to run typedoc later as part of the sphix build
 npm install
 
 cd docs
-pipenv install
-pipenv run doc
+poetry install
+poetry run make html
+
+# debug docs build
+poetry run make html SPHINXOPTS="-v"
+
+# update requirements.txt from poetry dependencies
+poetry export --format requirements.txt --output requirements.txt
 ```
@@ -51,0 +58,0 @@

No alert changes

Improved metrics

Lines of code

22598

increased by2.2%

Number of lines in readme file

68

increased by11.48%

Worsened metrics

Total package byte prevSize

3026741

decreased by-7.02%

No dependency changes