Merge pull request #702 from xllowl/master

An Excalidraw Automate Script for creating mindmap like lines

ea-scripts/Mindmap connector.md

@@ -0,0 +1,113 @@
+/*
+
+![](https://github.com/xllowl/obsidian-excalidraw-plugin/blob/master/images/mindmap%20connector.png)
+
+![](https://github.com/xllowl/obsidian-excalidraw-plugin/blob/master/images/Mindmap%20connector1.png)
+This script creates mindmap like lines(only right and down side are available). The line will starts according to the creation time of the elements. So you may need to create the header element first.
+
+```javascript
+*/
+const elements = ea.getViewSelectedElements();
+ea.copyViewElementsToEAforEditing(elements);
+groups = ea.getMaximumGroups(elements);
+
+els=[];
+elsx=[];
+elsy=[];
+for (i = 0, len =groups.length; i < len; i++) {
+  els.push(ea.getLargestElement(groups[i]));
+  elsx.push(ea.getLargestElement(groups[i]).x);
+  elsy.push(ea.getLargestElement(groups[i]).y);
+}
+//line style setting
+ea.style.strokeColor = els[0].strokeColor;
+ea.style.strokeWidth = els[0].strokeWidth;
+ea.style.strokeStyle = els[0].strokeStyle;
+ea.style.strokeSharpness = els[0].strokeSharpness;
+//all min max x y
+let maxy = Math.max.apply(null, elsy);
+let indexmaxy=elsy.indexOf(maxy);
+let miny = Math.min.apply(null, elsy);
+let indexminy = elsy.indexOf(miny);
+let maxx = Math.max.apply(null, elsx);
+let indexmaxx = elsx.indexOf(maxx);
+let minx = Math.min.apply(null, elsx);
+let indexminx = elsx.indexOf(minx);
+//child max min x y
+let gmaxy = Math.max.apply(null, elsy.slice(1));
+let gindexmaxy=elsy.indexOf(gmaxy);
+let gminy = Math.min.apply(null, elsy.slice(1));
+let gindexminy = elsy.indexOf(gminy);
+let gmaxx = Math.max.apply(null, elsx.slice(1));
+let gindexmaxx = elsx.indexOf(gmaxx);
+let gminx = Math.min.apply(null, elsx.slice(1));
+let gindexminx = elsx.indexOf(gminx);
+let s=0;//Set line direction down as default 
+if (indexminx==0 &&  els[0].x + els[0].width<=gminx) {
+  s=1; 
+}
+else if (indexminy == 0) {
+  s=0;
+}
+var length_left;
+if(els[0].x + els[0].width * 2<=gminx){length_left=els[0].x + els[0].width * 1.5;}
+else {length_left=(els[0].x + els[0].width+gminx)/2;}
+
+var length_down;
+if(els[0].y + els[0].height* 2.5<=gminy){length_down=els[0].y + els[0].height * 2;}
+else {length_down=(els[0].y + els[0].height+gminy)/2;}
+if(s) {
+  ea.addLine(
+    [[length_left,
+    maxy + els[indexmaxy].height / 2],
+    [length_left,
+    miny + els[indexminy].height / 2]]
+  );
+  for (i = 1, len = groups.length; i < len; i++) {
+    ea.addLine(
+      [[els[i].x,
+      els[i].y + els[i].height/2],
+      [length_left,
+      els[i].y + els[i].height/2]]
+    );
+  }
+  ea.addArrow(
+    [[els[0].x+els[0].width,
+    els[0].y + els[0].height / 2],
+    [length_left,
+    els[0].y + els[0].height / 2]],
+    {
+      startArrowHead: "none",
+      endArrowHead: "dot"
+    }
+  )
+}
+
+else {
+  ea.addLine(
+    [[maxx + els[indexmaxx].width / 2,
+    length_down],
+    [minx + els[indexminx].width / 2,
+    length_down]]
+  );
+  for (i = 1, len = groups.length; i < len; i++) {
+    ea.addLine(
+      [[els[i].x + els[i].width / 2,
+      els[i].y],
+      [els[i].x + els[i].width / 2,
+      length_down]]
+    );
+  }
+  ea.addArrow(
+    [[els[0].x + els[0].width / 2,
+    els[0].y + els[0].height],
+    [els[0].x + els[0].width / 2,
+    length_down]],
+    {
+      startArrowHead: "none",
+      endArrowHead: "dot"
+    }
+  );
+}
+
+await ea.addElementsToView(false,false,true);

ea-scripts/Mindmap connector.svg

@@ -0,0 +1,12 @@
+<svg width="607" height="541" viewBox="0 0 607 541" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M280 43.355V253.355H140V206.687L0 206.691V346.691H140V300.023H280V510.023C280 522.925 290.453 533.355 303.332 533.355H490.002C502.904 533.355 513.334 522.925 513.334 510.023C513.334 497.144 502.904 486.691 490.002 486.691H326.672V300.021H490.002C502.904 300.021 513.334 289.568 513.334 276.689C513.334 263.81 502.904 253.357 490.002 253.357H326.672V66.6869H490.002C502.904 66.6869 513.334 56.2569 513.334 43.3549C513.334 30.4529 502.904 20.0229 490.002 20.0229H303.332C290.453 20.019 280 30.4489 280 43.3509V43.355ZM46.67 300.025V253.357H93.338V300.025H46.67Z" fill="black"/>
+<rect x="540" y="23" width="39" height="39" fill="#D9D9D9"/>
+<rect x="503" width="104" height="95" fill="#D9D9D9"/>
+<rect x="503.5" y="0.5" width="103" height="94" fill="black" stroke="black"/>
+<rect x="503" y="223" width="104" height="95" fill="black"/>
+<rect x="503.5" y="446.5" width="103" height="94" fill="black" stroke="black"/>
+<path d="M532 243H580V291H532V243Z" fill="white"/>
+<path d="M532 475H580V523H532V475Z" fill="white"/>
+<path d="M532 243H580V291H532V243Z" fill="white"/>
+<path d="M532 23H580V71H532V23Z" fill="white"/>
+</svg>

ea-scripts/index.md

@@ -50,6 +50,7 @@ I would love to include your contribution in the script library. If you have a s
 - [[#Fixed vertical distance between centers]]
 - [[#Fixed vertical distance]]
 - [[#Lighten background color]]
+- [[Mindmap connector]]
 - [[#Modify background color opacity]]
 - [[#Normalize Selected Arrows]]
 - [[#OCR - Optical Character Recognition]]
@@ -220,6 +221,12 @@ https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea
 ```
 <table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Lighten%20background%20color.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script lightens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png'></td></tr></table>
 
+## Mindmap connector
+```excalidraw-script-install
+https://github.com/xllowl/obsidian-excalidraw-plugin/blob/master/ea-scripts/Mindmap%20connector.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/xllowl'>@xllowl</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/xllowl/obsidian-excalidraw-plugin/blob/master/ea-scripts/Mindmap%20connector.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script creates mindmap like lines(only right side available). The line will starts according to the creation time of the elements. So you may need to create the header element first.<br><img src='https://github.com/xllowl/obsidian-excalidraw-plugin/blob/master/images/mindmap%20connector.png'></td></tr></table>
+
 ## Modify background color opacity
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Modify%20background%20color%20opacity.md