mirror of
https://github.com/zsviczian/obsidian-excalidraw-plugin.git
synced 2025-08-06 05:46:28 +00:00
concatenate lines script
This commit is contained in:
101
ea-scripts/Concatenate lines.md
Normal file
101
ea-scripts/Concatenate lines.md
Normal file
@@ -0,0 +1,101 @@
|
||||
/*
|
||||
Connects two lines. Lines may be type of arrow or line. The resulting line will carry the style of the line higher in the drawing layers (bring to front the one you want to control the look and feel). Arrows are connected intelligently.
|
||||
```js*/
|
||||
const lines = ea.getViewSelectedElements().filter(el=>el.type==="line" || el.type==="arrow");
|
||||
if(lines.length !== 2) {
|
||||
new Notice ("Select two lines or arrows");
|
||||
return;
|
||||
}
|
||||
|
||||
// https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
|
||||
const rotate = (point, element) => {
|
||||
const [x1, y1] = point;
|
||||
const x2 = element.x + element.width/2;
|
||||
const y2 = element.y - element.height/2;
|
||||
const angle = element.angle;
|
||||
return [
|
||||
(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2,
|
||||
(x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2,
|
||||
];
|
||||
}
|
||||
|
||||
const points = lines.map(
|
||||
el=>el.points.map(p=>rotate([p[0]+el.x, p[1]+el.y],el))
|
||||
);
|
||||
|
||||
const last = (p) => p[p.length-1];
|
||||
const first = (p) => p[0];
|
||||
const distance = (p1,p2) => Math.sqrt((p1[0]-p2[0])**2+(p1[1]-p2[1])**2);
|
||||
|
||||
const distances = [
|
||||
distance(first(points[0]),first(points[1])),
|
||||
distance(first(points[0]),last (points[1])),
|
||||
distance(last (points[0]),first(points[1])),
|
||||
distance(last (points[0]),last (points[1]))
|
||||
];
|
||||
|
||||
const connectDirection = distances.indexOf(Math.min(...distances));
|
||||
|
||||
let newPoints = [];
|
||||
switch(connectDirection) {
|
||||
case 0: //first-first
|
||||
newPoints = [...points[0].reverse(),...points[1].slice(1)];
|
||||
break;
|
||||
case 1: //first-last
|
||||
newPoints = [...points[0].reverse(),...points[1].reverse().slice(1)];
|
||||
break;
|
||||
case 2: //last-first
|
||||
newPoints = [...points[0],...points[1].slice(1)];
|
||||
break;
|
||||
case 3: //last-last
|
||||
newPoints = [...points[0],...points[1].reverse().slice(1)];
|
||||
break;
|
||||
}
|
||||
|
||||
["strokeColor", "backgrounColor", "fillStyle", "roundness", "roughness", "strokeWidth", "strokeStyle", "opacity"].forEach(prop=>{
|
||||
ea.style[prop] = lines[1][prop];
|
||||
})
|
||||
|
||||
ea.style.startArrowHead = null;
|
||||
ea.style.endArrowHead = null;
|
||||
|
||||
ea.copyViewElementsToEAforEditing(lines);
|
||||
ea.getElements().forEach(el=>{el.isDeleted = true});
|
||||
|
||||
const lineTypes = parseInt(lines.map(line => line.type === "line" ? '1' : '0').join(''),2);
|
||||
|
||||
switch (lineTypes) {
|
||||
case 0: //arrow - arrow
|
||||
ea.addArrow(
|
||||
newPoints,
|
||||
connectDirection === 0 //first-first
|
||||
? { startArrowHead: lines[0].endArrowhead, endArrowHead: lines[1].endArrowhead }
|
||||
: connectDirection === 1 //first-last
|
||||
? { startArrowHead: lines[0].endArrowhead, endArrowHead: lines[1].startArrowhead }
|
||||
: connectDirection === 2 //last-first
|
||||
? { startArrowHead: lines[0].startArrowhead, endArrowHead: lines[1].endArrowhead }
|
||||
//3: last-last
|
||||
: { startArrowHead: lines[0].startArrowhead, endArrowHead: lines[1].startArrowhead }
|
||||
);
|
||||
break;
|
||||
case 1: //arrow - line
|
||||
reverse = connectDirection === 0 || connectDirection === 1;
|
||||
ea.addArrow(newPoints,{
|
||||
startArrowHead: reverse ? lines[0].endArrowhead : lines[0].startArrowhead,
|
||||
endArrowHead: reverse ? lines[0].startArrowhead : lines[0].endArrowhead
|
||||
});
|
||||
break;
|
||||
case 2: //line - arrow
|
||||
reverse = connectDirection === 1 || connectDirection === 3;
|
||||
ea.addArrow(newPoints,{
|
||||
startArrowHead: reverse ? lines[1].endArrowhead : lines[1].startArrowhead,
|
||||
endArrowHead: reverse ? lines[1].startArrowhead : lines[1].endArrowhead
|
||||
});
|
||||
break;
|
||||
case 3: //line - line
|
||||
ea.addLine(newPoints);
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
ea.addElementsToView();
|
||||
17
ea-scripts/Concatenate lines.svg
Normal file
17
ea-scripts/Concatenate lines.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.75819749055177 80.03703336574608" width="72.75819749055177" height="80.03703336574608">
|
||||
<!-- svg-source:excalidraw -->
|
||||
|
||||
<defs>
|
||||
<style class="style-fonts">
|
||||
@font-face {
|
||||
font-family: "Virgil";
|
||||
src: url("https://excalidraw.com/Virgil.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cascadia";
|
||||
src: url("https://excalidraw.com/Cascadia.woff2");
|
||||
}
|
||||
</style>
|
||||
|
||||
</defs>
|
||||
<g stroke-linecap="round"><g transform="translate(4 4) rotate(0 12.71901889991409 17.183109917454658)"><path d="M0 0 C0 7.02, 0 14.05, 0 34.37 M0 34.37 C7.62 34.37, 15.24 34.37, 25.44 34.37" stroke="black" stroke-width="4.5" fill="none" stroke-dasharray="1.5 10"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(51.379765518092086 61.93633577499986) rotate(0 5.684341886080802e-14 7.050348795373111)"><path d="M0 0 C0 4.06, 0 8.11, 0 14.1" stroke="black" stroke-width="4.5" fill="none" stroke-dasharray="1.5 10"></path></g></g><mask></mask><g stroke-linecap="round" transform="translate(34.0013341989918 20.987787610339183) rotate(0 17.378431645779926 17.378431645779983)"><path d="M34.76 17.38 C34.76 18.38, 34.67 19.41, 34.49 20.4 C34.32 21.39, 34.05 22.38, 33.71 23.32 C33.36 24.27, 32.93 25.2, 32.43 26.07 C31.93 26.94, 31.34 27.78, 30.69 28.55 C30.04 29.32, 29.32 30.04, 28.55 30.69 C27.78 31.34, 26.94 31.93, 26.07 32.43 C25.2 32.93, 24.27 33.36, 23.32 33.71 C22.38 34.05, 21.39 34.32, 20.4 34.49 C19.41 34.67, 18.38 34.76, 17.38 34.76 C16.37 34.76, 15.35 34.67, 14.36 34.49 C13.37 34.32, 12.38 34.05, 11.43 33.71 C10.49 33.36, 9.56 32.93, 8.69 32.43 C7.82 31.93, 6.98 31.34, 6.21 30.69 C5.44 30.04, 4.71 29.32, 4.07 28.55 C3.42 27.78, 2.83 26.94, 2.33 26.07 C1.83 25.2, 1.39 24.27, 1.05 23.32 C0.7 22.38, 0.44 21.39, 0.26 20.4 C0.09 19.41, 0 18.38, 0 17.38 C0 16.37, 0.09 15.35, 0.26 14.36 C0.44 13.37, 0.7 12.38, 1.05 11.43 C1.39 10.49, 1.83 9.56, 2.33 8.69 C2.83 7.82, 3.42 6.98, 4.07 6.21 C4.71 5.44, 5.44 4.71, 6.21 4.07 C6.98 3.42, 7.82 2.83, 8.69 2.33 C9.56 1.83, 10.49 1.39, 11.43 1.05 C12.38 0.7, 13.37 0.44, 14.36 0.26 C15.35 0.09, 16.37 0, 17.38 0 C18.38 0, 19.41 0.09, 20.4 0.26 C21.39 0.44, 22.38 0.7, 23.32 1.05 C24.27 1.39, 25.2 1.83, 26.07 2.33 C26.94 2.83, 27.78 3.42, 28.55 4.07 C29.32 4.71, 30.04 5.44, 30.69 6.21 C31.34 6.98, 31.93 7.82, 32.43 8.69 C32.93 9.56, 33.36 10.49, 33.71 11.43 C34.05 12.38, 34.32 13.37, 34.49 14.36 C34.67 15.35, 34.71 16.88, 34.76 17.38 C34.8 17.88, 34.8 16.88, 34.76 17.38" stroke="black" stroke-width="4" fill="none"></path></g><g stroke-linecap="round"><g transform="translate(41.72257566145686 38.36621939788711) rotate(0 9.65718949485347 0)"><path d="M0 0 C4.11 0, 8.22 0, 19.31 0 M0 0 C6.95 0, 13.9 0, 19.31 0" stroke="black" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(41.72257587602678 38.36622004108449) rotate(89.99999999999994 9.65718949485347 0)"><path d="M0 0 C5.31 0, 10.62 0, 19.31 0 M0 0 C4.56 0, 9.13 0, 19.31 0" stroke="black" stroke-width="4" fill="none"></path></g></g><mask></mask></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
@@ -54,6 +54,7 @@ I would love to include your contribution in the script library. If you have a s
|
||||
| | |
|
||||
|----|-----|
|
||||
|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Add%20Connector%20Point.svg"></div>|[[#Add Connector Point]]|
|
||||
|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Concatenate%20lines.svg"></div>|[[#Concatenate lines]]|
|
||||
|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Connect%20elements.svg"/></div>|[[#Connect elements]]|
|
||||
|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Elbow%20connectors.svg"/></div>|[[#Elbow connectors]]|
|
||||
|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Mindmap%20connector.svg"/></div>|[[#Mindmap connector]]|
|
||||
@@ -205,6 +206,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/zsviczian'>@zsviczian</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/Change%20shape%20of%20selected%20elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script allows you to change the shape and fill style of selected Rectangles, Diamonds, Ellipses, Lines, Arrows and Freedraw.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-change-shape.jpg'></td></tr></table>
|
||||
|
||||
## Concatenate lines
|
||||
```excalidraw-script-install
|
||||
https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Concatenate%20lines.md
|
||||
```
|
||||
<table><tr valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</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/Concatenate%20lines.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-concatenate-lines.png'></td></tr></table>
|
||||
|
||||
## Connect elements
|
||||
```excalidraw-script-install
|
||||
https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Connect%20elements.md
|
||||
|
||||
BIN
images/scripts-concatenate-lines.png
Normal file
BIN
images/scripts-concatenate-lines.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Reference in New Issue
Block a user