Flow diagrams:
Determine width
#CTCTOWALTZ-2246
<script>
import {select} from "d3-selection";
- import {processor} from "./diagram-model-store";
import {mkDragHandler} from "./drag-handler";
import {createEventDispatcher} from "svelte";
import _ from "lodash";
cy: 10,
title: {
dx: 8,
- dy: 13
+ dy: 14
}
};
}
cy: 10,
title: {
dx: 4,
- dy: 13
+ dy: 14
}
};
return shape
let gElem;
$: console.log({node, nameElem, width})
- $: width = nameElem && nameElem.getComputedTextLength() + 30;
+ $: width = nameElem && determineWidth(nameElem, associatedGroups);
$: shape = node && shapes[node.data.kind](width);
$: transform = node && `translate(${positions[node.id].x} ${positions[node.id].y})`;
$: dragHandler = mkDragHandler(node)
$: fill = determineFill($overlay.appliedOverlay, associatedGroups);
+
+ function determineWidth(elem, icons){
+ const textWidth = elem.getComputedTextLength() + 24
+ const iconsWidth = _.size(icons) * 12 + 6
+ return textWidth > iconsWidth ? textWidth : iconsWidth
+ }
+
</script>
fill={fill}
class:wfd-node-overlay={_.includes(associatedGroups, $overlay.appliedOverlay)}
class:wfd-node-fade={$overlay.appliedOverlay && !_.includes(associatedGroups, $overlay.appliedOverlay)}
- stroke="#ccc">
+ stroke="#ccc"
+ style="padding-top: 20px">
</path>
<text style="font-size: small;"
class:wfd-node-fade={$overlay.appliedOverlay && !_.includes(associatedGroups, $overlay.appliedOverlay)}
