vault backup: 2023-04-14 10:25:25
This commit is contained in:
208
!Załączniki/Excalidraw/Scripts/Downloaded/Alternative Pens.md
Normal file
208
!Załączniki/Excalidraw/Scripts/Downloaded/Alternative Pens.md
Normal file
@@ -0,0 +1,208 @@
|
||||
/*
|
||||
IF YOU ACCIDENTLY MODIFY THIS FILE AND IT STOPS WORKING, SIMPLY DOWNLOAD IT AGAIN FROM THE SCRIPT LIBRARY.
|
||||
|
||||

|
||||
|
||||
# How to create a new pen template
|
||||
It takes a bit of experimentation and skill to create a new pen, so be patient.
|
||||
|
||||
1. Create a folder in your Vault for your pen options. The default is `Excalidraw/Pens`.
|
||||
2. Create a new markdown file in your in the `pen folder` (e.g. `My pen`).
|
||||
3. Copy the following template to the markdown file.
|
||||
```json
|
||||
{
|
||||
"highlighter": true,
|
||||
"constantPressure": false,
|
||||
"hasOutline": true,
|
||||
"outlineWidth": 4,
|
||||
"options": PASTE_PREFECT_FREEHAND_OPTIONS_HERE
|
||||
}
|
||||
```
|
||||
4. If you don't want your pen to have an outline around your line, change `hasOutline` to `false`. You can also modify `outlineWidth` if you want a thinner or thicker outline around your line.
|
||||
5. If you want your pen to be pressure sensitive (when drawing with a mouse the pressure is simulated based on the speed of your hand) leave `constantPressure` as `false`. If you want a constant line width regardless of speed and pen pressure, change it to `true`.
|
||||
6. `highlighter` true will place the new line behind the existing strokes (i.e. like a highlighter pen). If `highlighter` is missing or it is set to `false` the new line will appear at the top of the existing strokes (the default behavior of Excalidraw pens).
|
||||
7. Go to https://perfect-freehand-example.vercel.app/ and configure your pen.
|
||||
8. Click `Copy Options`.
|
||||
9. Go back to the pen file you created in step No.2 and replace the placeholder text with the options you just copied from perfect-freehand.
|
||||
10. Look for `easing` in the file and replace the function e.g. `(t) => t*t,` with the name of the function in brackets (in this example it would be `easeInQuad`). You will find the function name on the perfect-freehand website, only change the first letter to be lower case.
|
||||
11. Test your pen in Excalidraw by clicking the `Alternative Pens` script and selecting your new pen.
|
||||
|
||||
# Example pens
|
||||
My pens: https://github.com/zsviczian/obsidian-excalidraw-plugin/tree/master/ea-scripts/pens
|
||||
|
||||
**Fine tipped pen:**
|
||||
```json
|
||||
{
|
||||
constantPressure: true,
|
||||
options: {
|
||||
smoothing: 0.4,
|
||||
thinning: -0.5,
|
||||
streamline: 0.4,
|
||||
easing: "linear",
|
||||
start: {
|
||||
taper: 5,
|
||||
cap: false,
|
||||
},
|
||||
end: {
|
||||
taper: 5,
|
||||
cap: false,
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Thick marker:**
|
||||
```json
|
||||
{
|
||||
constantPressure: true,
|
||||
hasOutline: true,
|
||||
outlineWidth: 4,
|
||||
options: {
|
||||
thinning: 1,
|
||||
smoothing: 0.5,
|
||||
streamline: 0.5,
|
||||
easing: "linear",
|
||||
start: {
|
||||
taper: 0,
|
||||
cap: true
|
||||
},
|
||||
end: {
|
||||
taper: 0,
|
||||
cap: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Fountain pen:**
|
||||
```json
|
||||
{
|
||||
options: {
|
||||
smoothing: 0.22,
|
||||
thinning: 0.8,
|
||||
streamline: 0.22,
|
||||
easing: "easeInQuad",
|
||||
start: {
|
||||
taper: true,
|
||||
cap: true,
|
||||
},
|
||||
end: {
|
||||
taper: 1,
|
||||
cap: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
# Notes about the pen options
|
||||
|
||||
Note, that custom pens are currently not supported by Excalidraw.com. I've submitted a [PR](https://github.com/excalidraw/excalidraw/pull/6069) but there is no guarantee that it will get pushed to production. Your Excalidraw drawing can still be loaded to Excalidraw, but the special pen effects will not be visible there.
|
||||
|
||||
If you set a pen in your Excalidraw template file, that pen will be loaded automatically when you create a file using that template. Similarly, when you save a document, it will save your current pen settings as well. The next time you open the document, you can continue to use the same pen.
|
||||
|
||||
Pen options are saved with the stroke. This means, that even if you change the ped definition later on, your existing drawings will not be effected.
|
||||
|
||||
`outlineWidth` is relative to `strokeWidth`. i.e. if you make the stroke thinner in Excalidraw, the outline will become proportionally thinner as well. `outlineWidth` is only used if `hasOutline` is set to true.
|
||||
|
||||
If you don't want your pen to be pressure/speed sensitive, set `constantPressure` to `true`. Setting `constantPressure` to `true` automatically sets `simulatePressure` to `false`.
|
||||
|
||||
If you want your pen to be speed sensitive (i.e. the faster you draw the line the thinner it gets), set `options.simulatePressure` to `true`. If you omit `simulatePressure` from `options` then excalidraw will detect if you are drawing with a mouse or a pen and use pen pressures if available.
|
||||
|
||||
You can read more about configuring perfect freehand here: https://github.com/steveruizok/perfect-freehand#documentation
|
||||
|
||||
Excalidraw supports all of the easing functions listed here: https://easings.net/#, plus "linear". You can also find details about these easing functions here:
|
||||
https://github.com/ai/easings.net/blob/master/src/easings/easingsFunctions.ts
|
||||
|
||||
From a performance perspective I recommend linear easing.
|
||||
|
||||
# The script
|
||||
|
||||
```javascript */
|
||||
|
||||
//--------------------------
|
||||
// Load settings
|
||||
//--------------------------
|
||||
if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("1.8.8")) {
|
||||
new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
|
||||
return;
|
||||
}
|
||||
|
||||
const api = ea.getExcalidrawAPI();
|
||||
let settings = ea.getScriptSettings();
|
||||
//set default values on first run
|
||||
if(!settings["Pen folder"]) {
|
||||
settings = {
|
||||
"Pen folder" : {
|
||||
value: "Excalidraw/Pens",
|
||||
description: "The path to the folder where you store the perfect freehand options"
|
||||
}
|
||||
};
|
||||
ea.setScriptSettings(settings);
|
||||
}
|
||||
|
||||
let penFolder = settings["Pen folder"].value.toLowerCase();
|
||||
if(penFolder === "" || penFolder === "/") {
|
||||
new Notice("The pen folder cannot be the root folder of your vault");
|
||||
return;
|
||||
}
|
||||
|
||||
if(!penFolder.endsWith("/")) penFolder += "/";
|
||||
|
||||
|
||||
//--------------------------
|
||||
// Select pen
|
||||
//--------------------------
|
||||
const pens = app.vault.getFiles()
|
||||
.filter(f=>f.extension === "md" && f.path.toLowerCase() === penFolder + f.name.toLowerCase())
|
||||
.sort((a,b)=>a.basename.toLowerCase()<b.basename.toLowerCase()?-1:1);
|
||||
if(pens.length === 0) {
|
||||
const notice = new Notice(`You don't seem to have any pen definition files. Click this message to open the how-to guide.`,4000);
|
||||
notice.noticeEl.onclick = async () => app.workspace.openLinkText(utils.scriptFile.path,"","tab");
|
||||
return;
|
||||
}
|
||||
const file = await utils.suggester(["Excalidraw Default"].concat(pens.map(f=>(f.name.slice(0,f.name.length-3)))),["Default"].concat(pens), "Choose a pen preset, press ESC to abort");
|
||||
if(!file) return;
|
||||
|
||||
if(file === "Default") {
|
||||
api.updateScene({
|
||||
appState: {
|
||||
currentStrokeOptions: undefined
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
//--------------------------
|
||||
// Load pen
|
||||
//--------------------------
|
||||
const pen = await app.vault.read(file);
|
||||
|
||||
const parseJSON = (data) => {
|
||||
try {
|
||||
return JSON.parse(data);
|
||||
} catch(e) {
|
||||
try {
|
||||
return JSON.parse(data.replaceAll(/\s(\w*)\:\s/g,' "$1": ').replaceAll(/,([^\w]*?})/gm,"$1"));
|
||||
} catch(ee) {
|
||||
const notice = new Notice(`Error loading the pen file. Maybe you accidently copy/pasted the easing function from perfect freehand website? Check the error message in Developer Console.\n(click=dismiss, right-click=Info) `,5000);
|
||||
notice.noticeEl.oncontextmenu = async () => app.workspace.openLinkText(utils.scriptFile.path,"","tab");
|
||||
console.error(ee);
|
||||
console.error(data.replaceAll(/\s(\w*)\:\s/g,' "$1": ').replaceAll(/,([^\w]*?})/gm,"$1"));
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
penJSON = parseJSON(pen);
|
||||
|
||||
|
||||
if(!penJSON || typeof penJSON !== 'object') return;
|
||||
|
||||
//--------------------------
|
||||
// Apply pen
|
||||
//--------------------------
|
||||
await api.updateScene({
|
||||
appState: {
|
||||
currentStrokeOptions: penJSON
|
||||
}
|
||||
});
|
||||
api.setActiveTool({type:"freedraw"});
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M373.5 27.1C388.5 9.9 410.2 0 433 0c43.6 0 79 35.4 79 79c0 22.8-9.9 44.6-27.1 59.6L277.7 319l-10.3-10.3-64-64L193 234.3 373.5 27.1zM170.3 256.9l10.4 10.4 64 64 10.4 10.4-19.2 83.4c-3.9 17.1-16.9 30.7-33.8 35.4L24.4 510.3l95.4-95.4c2.6 .7 5.4 1.1 8.3 1.1c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32c0 2.9 .4 5.6 1.1 8.3L1.7 487.6 51.5 310c4.7-16.9 18.3-29.9 35.4-33.8l83.4-19.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 632 B |
@@ -0,0 +1,127 @@
|
||||
/*
|
||||

|
||||
|
||||
Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
|
||||
|
||||

|
||||
|
||||
This script arranges selected elements and groups with a fixed inner distance.
|
||||
|
||||
Tips: You can use the `Box Selected Elements` and `Dimensions` scripts to create rectangles of the desired size, then use the `Change shape of selected elements` script to convert the rectangles to ellipses, and then use the `Fixed inner distance` script regains a desired inner distance.
|
||||
|
||||
Inspiration: #394
|
||||
|
||||
See documentation for more details:
|
||||
https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
|
||||
|
||||
```javascript
|
||||
*/
|
||||
if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("1.5.21")) {
|
||||
new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
|
||||
return;
|
||||
}
|
||||
settings = ea.getScriptSettings();
|
||||
//set default values on first run
|
||||
if(!settings["Default distance"]) {
|
||||
settings = {
|
||||
"Prompt for distance?": true,
|
||||
"Default distance" : {
|
||||
value: 10,
|
||||
description: "Fixed horizontal distance between centers"
|
||||
},
|
||||
"Remember last distance?": false
|
||||
};
|
||||
ea.setScriptSettings(settings);
|
||||
}
|
||||
|
||||
let distanceStr = settings["Default distance"].value.toString();
|
||||
const rememberLastDistance = settings["Remember last distance?"];
|
||||
|
||||
if(settings["Prompt for distance?"]) {
|
||||
distanceStr = await utils.inputPrompt("distance?","number",distanceStr);
|
||||
}
|
||||
|
||||
const borders = ["top", "bottom", "left", "right"];
|
||||
const fromBorder = await utils.suggester(borders, borders, "from border?");
|
||||
|
||||
if(!fromBorder) {
|
||||
return;
|
||||
}
|
||||
|
||||
const distance = parseInt(distanceStr);
|
||||
if(isNaN(distance)) {
|
||||
return;
|
||||
}
|
||||
if(rememberLastDistance) {
|
||||
settings["Default distance"].value = distance;
|
||||
ea.setScriptSettings(settings);
|
||||
}
|
||||
const elements=ea.getViewSelectedElements();
|
||||
const topGroups = ea.getMaximumGroups(elements)
|
||||
.filter(els => !(els.length === 1 && els[0].type ==="arrow")) // ignore individual arrows
|
||||
.filter(els => !(els.length === 1 && (els[0].containerId))); // ignore text in stickynote
|
||||
|
||||
if(topGroups.length <= 1) {
|
||||
new Notice("At least 2 or more elements or groups should be selected.");
|
||||
return;
|
||||
}
|
||||
|
||||
if(fromBorder === 'top') {
|
||||
const groups = topGroups.sort((lha,rha) => Math.min(...lha.map(t => t.y)) - Math.min(...rha.map(t => t.y)));
|
||||
const firstGroupTop = Math.min(...groups[0].map(el => el.y));
|
||||
|
||||
for(var i=0; i<groups.length; i++) {
|
||||
if(i > 0) {
|
||||
const curGroup = groups[i];
|
||||
const moveDistance = distance * i;
|
||||
for(const curEl of curGroup) {
|
||||
curEl.y = firstGroupTop + moveDistance;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(fromBorder === 'bottom') {
|
||||
const groups = topGroups.sort((lha,rha) => Math.min(...lha.map(t => t.y + t.height)) - Math.min(...rha.map(t => t.y + t.height))).reverse();
|
||||
const firstGroupBottom = Math.max(...groups[0].map(el => el.y + el.height));
|
||||
|
||||
for(var i=0; i<groups.length; i++) {
|
||||
if(i > 0) {
|
||||
const curGroup = groups[i];
|
||||
const moveDistance = distance * i;
|
||||
for(const curEl of curGroup) {
|
||||
curEl.y = firstGroupBottom - moveDistance - curEl.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(fromBorder === 'left') {
|
||||
const groups = topGroups.sort((lha,rha) => Math.min(...lha.map(t => t.x)) - Math.min(...rha.map(t => t.x)));
|
||||
const firstGroupLeft = Math.min(...groups[0].map(el => el.x));
|
||||
|
||||
for(var i=0; i<groups.length; i++) {
|
||||
if(i > 0) {
|
||||
const curGroup = groups[i];
|
||||
const moveDistance = distance * i;
|
||||
for(const curEl of curGroup) {
|
||||
curEl.x = firstGroupLeft + moveDistance;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(fromBorder === 'right') {
|
||||
const groups = topGroups.sort((lha,rha) => Math.min(...lha.map(t => t.x + t.width)) - Math.min(...rha.map(t => t.x + t.width))).reverse();
|
||||
const firstGroupRight = Math.max(...groups[0].map(el => el.x + el.width));
|
||||
|
||||
for(var i=0; i<groups.length; i++) {
|
||||
if(i > 0) {
|
||||
const curGroup = groups[i];
|
||||
const moveDistance = distance * i;
|
||||
for(const curEl of curGroup) {
|
||||
curEl.x = firstGroupRight - moveDistance - curEl.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ea.copyViewElementsToEAforEditing(elements);
|
||||
await ea.addElementsToView(false, false);
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130" stroke="#000"><path fill="none" stroke-linecap="round" stroke-width="4" d="M120 65a55.086 55.086 0 0 1-1.87 14.24c-.62 2.31-1.4 4.6-2.32 6.81-.91 2.21-1.98 4.38-3.18 6.45-1.2 2.07-2.54 4.08-4 5.98-1.45 1.9-3.05 3.72-4.74 5.41a54.136 54.136 0 0 1-5.41 4.74c-1.9 1.46-3.91 2.8-5.98 4-2.07 1.2-4.24 2.27-6.45 3.18-2.21.92-4.5 1.7-6.81 2.32A55.086 55.086 0 0 1 65 120a55.086 55.086 0 0 1-14.24-1.87c-2.31-.62-4.6-1.4-6.81-2.32-2.21-.91-4.38-1.98-6.45-3.18-2.07-1.2-4.08-2.54-5.98-4-1.9-1.45-3.72-3.05-5.41-4.74a54.136 54.136 0 0 1-4.74-5.41c-1.46-1.9-2.8-3.91-4-5.98-1.2-2.07-2.27-4.24-3.18-6.45-.92-2.21-1.7-4.5-2.32-6.81A55.086 55.086 0 0 1 10 65a55.086 55.086 0 0 1 1.87-14.24c.62-2.31 1.4-4.6 2.32-6.81.91-2.21 1.98-4.38 3.18-6.45 1.2-2.07 2.54-4.08 4-5.98 1.45-1.9 3.05-3.72 4.74-5.41 1.69-1.69 3.51-3.29 5.41-4.74 1.9-1.46 3.91-2.8 5.98-4 2.07-1.2 4.24-2.27 6.45-3.18 2.21-.92 4.5-1.7 6.81-2.32A55.086 55.086 0 0 1 65 10a55.086 55.086 0 0 1 14.24 1.87c2.31.62 4.6 1.4 6.81 2.32 2.21.91 4.38 1.98 6.45 3.18 2.07 1.2 4.08 2.54 5.98 4 1.9 1.45 3.72 3.05 5.41 4.74 1.69 1.69 3.29 3.51 4.74 5.41 1.46 1.9 2.8 3.91 4 5.98 1.2 2.07 2.27 4.24 3.18 6.45.92 2.21 1.7 4.5 2.32 6.81.62 2.32 1.09 4.69 1.4 7.06.31 2.37.39 5.98.47 7.18.08 1.2.08-1.2 0 0"/><path fill="none" stroke-linecap="round" stroke-width="4" d="M110 70c0 1.9-.14 3.81-.41 5.69-.27 1.88-.68 3.76-1.21 5.58-.53 1.82-1.21 3.62-1.99 5.35-.79 1.72-1.71 3.41-2.74 5.01a41.072 41.072 0 0 1-3.42 4.56c-1.24 1.44-2.6 2.8-4.04 4.04a41.072 41.072 0 0 1-4.56 3.42c-1.6 1.03-3.29 1.95-5.01 2.74-1.73.78-3.53 1.46-5.35 1.99-1.82.53-3.7.94-5.58 1.21S71.9 110 70 110c-1.9 0-3.81-.14-5.69-.41-1.88-.27-3.76-.68-5.58-1.21-1.82-.53-3.62-1.21-5.35-1.99-1.72-.79-3.41-1.71-5.01-2.74a41.072 41.072 0 0 1-4.56-3.42c-1.44-1.24-2.8-2.6-4.04-4.04a41.072 41.072 0 0 1-3.42-4.56c-1.03-1.6-1.95-3.29-2.74-5.01-.78-1.73-1.46-3.53-1.99-5.35-.53-1.82-.94-3.7-1.21-5.58A40.12 40.12 0 0 1 30 70c0-1.9.14-3.81.41-5.69.27-1.88.68-3.76 1.21-5.58.53-1.82 1.21-3.62 1.99-5.35.79-1.72 1.71-3.41 2.74-5.01 1.03-1.59 2.18-3.13 3.42-4.56 1.24-1.44 2.6-2.8 4.04-4.04 1.43-1.24 2.97-2.39 4.56-3.42 1.6-1.03 3.29-1.95 5.01-2.74 1.73-.78 3.53-1.46 5.35-1.99 1.82-.53 3.7-.94 5.58-1.21S68.1 30 70 30c1.9 0 3.81.14 5.69.41 1.88.27 3.76.68 5.58 1.21 1.82.53 3.62 1.21 5.35 1.99 1.72.79 3.41 1.71 5.01 2.74 1.59 1.03 3.13 2.18 4.56 3.42 1.44 1.24 2.8 2.6 4.04 4.04 1.24 1.43 2.39 2.97 3.42 4.56 1.03 1.6 1.95 3.29 2.74 5.01.78 1.73 1.46 3.53 1.99 5.35.53 1.82.94 3.7 1.21 5.58s.34 4.74.41 5.69c.07.95.07-.95 0 0"/><path fill="none" stroke-linecap="round" stroke-width="4" d="M100 75c0 1.45-.13 2.92-.38 4.34-.25 1.43-.63 2.85-1.13 4.21a24.875 24.875 0 0 1-4.34 7.52c-.93 1.11-1.97 2.15-3.08 3.08a24.875 24.875 0 0 1-7.52 4.34c-1.36.5-2.78.88-4.21 1.13-1.42.25-2.89.38-4.34.38-1.45 0-2.92-.13-4.34-.38-1.43-.25-2.85-.63-4.21-1.13a24.875 24.875 0 0 1-7.52-4.34c-1.11-.93-2.15-1.97-3.08-3.08a24.875 24.875 0 0 1-4.34-7.52c-.5-1.36-.88-2.78-1.13-4.21-.25-1.42-.38-2.89-.38-4.34 0-1.45.13-2.92.38-4.34.25-1.43.63-2.85 1.13-4.21a24.875 24.875 0 0 1 4.34-7.52c.93-1.11 1.97-2.15 3.08-3.08a24.875 24.875 0 0 1 7.52-4.34c1.36-.5 2.78-.88 4.21-1.13 1.42-.25 2.89-.38 4.34-.38 1.45 0 2.92.13 4.34.38 1.43.25 2.85.63 4.21 1.13a24.875 24.875 0 0 1 7.52 4.34c1.11.93 2.15 1.97 3.08 3.08a24.875 24.875 0 0 1 4.34 7.52c.5 1.36.88 2.78 1.13 4.21.25 1.42.32 3.62.38 4.34.06.72.06-.72 0 0"/></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,91 @@
|
||||
/*
|
||||

|
||||
|
||||
This script will reset the start and end positions of the selected arrows. The arrow will point to the center of the connected box and will have a gap of 8px from the box.
|
||||
|
||||
Tips: If you are drawing a flowchart, you can use `Normalize Selected Arrows` script to correct the position of the start and end points of the arrows, then use `Elbow connectors` script, and you will get the perfect connecting line!
|
||||
|
||||
```javascript
|
||||
*/
|
||||
if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("1.5.21")) {
|
||||
new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
|
||||
return;
|
||||
}
|
||||
settings = ea.getScriptSettings();
|
||||
//set default values on first run
|
||||
if(!settings["Gap"]) {
|
||||
settings = {
|
||||
"Gap" : {
|
||||
value: 8,
|
||||
description: "The value of the gap between the connection line and the element, which must be greater than 0. If you want the connector to be next to the element, set it to 1."
|
||||
}
|
||||
};
|
||||
ea.setScriptSettings(settings);
|
||||
}
|
||||
|
||||
let gapValue = settings["Gap"].value;
|
||||
|
||||
const selectedIndividualArrows = ea.getMaximumGroups(ea.getViewSelectedElements())
|
||||
.reduce((result, g) => [...result, ...g.filter(el => el.type === 'arrow')], []);
|
||||
|
||||
const allElements = ea.getViewElements();
|
||||
for(const arrow of selectedIndividualArrows) {
|
||||
const startBindingEl = allElements.filter(el => el.id === (arrow.startBinding||{}).elementId)[0];
|
||||
const endBindingEl = allElements.filter(el => el.id === (arrow.endBinding||{}).elementId)[0];
|
||||
|
||||
if(startBindingEl) {
|
||||
recalculateStartPointOfLine(arrow, startBindingEl, endBindingEl, gapValue);
|
||||
}
|
||||
if(endBindingEl) {
|
||||
recalculateEndPointOfLine(arrow, endBindingEl, startBindingEl, gapValue);
|
||||
}
|
||||
}
|
||||
|
||||
ea.copyViewElementsToEAforEditing(selectedIndividualArrows);
|
||||
await ea.addElementsToView(false,false);
|
||||
|
||||
function recalculateStartPointOfLine(line, el, elB, gapValue) {
|
||||
const aX = el.x + el.width/2;
|
||||
const bX = (line.points.length <=2 && elB) ? elB.x + elB.width/2 : line.x + line.points[1][0];
|
||||
const aY = el.y + el.height/2;
|
||||
const bY = (line.points.length <=2 && elB) ? elB.y + elB.height/2 : line.y + line.points[1][1];
|
||||
|
||||
line.startBinding.gap = gapValue;
|
||||
line.startBinding.focus = 0;
|
||||
const intersectA = ea.intersectElementWithLine(
|
||||
el,
|
||||
[bX, bY],
|
||||
[aX, aY],
|
||||
line.startBinding.gap
|
||||
);
|
||||
|
||||
if(intersectA.length > 0) {
|
||||
line.points[0] = [0, 0];
|
||||
for(var i = 1; i<line.points.length; i++) {
|
||||
line.points[i][0] -= intersectA[0][0] - line.x;
|
||||
line.points[i][1] -= intersectA[0][1] - line.y;
|
||||
}
|
||||
line.x = intersectA[0][0];
|
||||
line.y = intersectA[0][1];
|
||||
}
|
||||
}
|
||||
|
||||
function recalculateEndPointOfLine(line, el, elB, gapValue) {
|
||||
const aX = el.x + el.width/2;
|
||||
const bX = (line.points.length <=2 && elB) ? elB.x + elB.width/2 : line.x + line.points[line.points.length-2][0];
|
||||
const aY = el.y + el.height/2;
|
||||
const bY = (line.points.length <=2 && elB) ? elB.y + elB.height/2 : line.y + line.points[line.points.length-2][1];
|
||||
|
||||
line.endBinding.gap = gapValue;
|
||||
line.endBinding.focus = 0;
|
||||
const intersectA = ea.intersectElementWithLine(
|
||||
el,
|
||||
[bX, bY],
|
||||
[aX, aY],
|
||||
line.endBinding.gap
|
||||
);
|
||||
|
||||
if(intersectA.length > 0) {
|
||||
line.points[line.points.length - 1] = [intersectA[0][0] - line.x, intersectA[0][1] - line.y];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke="#000"><path fill="none" stroke-linecap="round" stroke-width="4" d="M10 10h80m-80 0h80m0 0v40m0-40v40m0 0H10m80 0H10m0 0V10m0 40V10"/><g stroke-linecap="round"><path fill="none" stroke-width="4" d="M10 90c4.5-6.67 22.5-33.33 27-40M10 90c4.5-6.67 22.5-33.33 27-40"/><path fill-rule="evenodd" stroke-width="0" d="m37 50-2.35 14.81-10.51-7.09L37 50"/><path fill="none" stroke-width="4" d="M37 50c-.55 3.44-1.09 6.89-2.35 14.81M37 50c-.9 5.69-1.81 11.39-2.35 14.81m0 0c-4.05-2.73-8.1-5.46-10.51-7.09m10.51 7.09c-2.73-1.83-5.45-3.67-10.51-7.09m0 0C26.78 56.13 29.43 54.55 37 50m-12.86 7.72C29.26 54.65 34.39 51.57 37 50m0 0s0 0 0 0m0 0s0 0 0 0"/></g><g stroke-linecap="round"><path fill="none" stroke-width="4" d="M90 90 63 51.67M90 90 63 51.67"/><path fill-rule="evenodd" stroke-width="0" d="m63 51.67 13.01 7.46-10.36 7.3L63 51.67"/><path fill="none" stroke-width="4" d="M63 51.67c3.02 1.73 6.03 3.46 13.01 7.46M63 51.67c3.43 1.97 6.87 3.94 13.01 7.46m0 0c-3.33 2.34-6.65 4.69-10.36 7.3m10.36-7.3c-3.43 2.42-6.86 4.84-10.36 7.3m0 0c-.96-5.35-1.92-10.7-2.65-14.76m2.65 14.76c-.9-4.99-1.79-9.98-2.65-14.76m0 0s0 0 0 0m0 0s0 0 0 0"/></g><g stroke-linecap="round"><path fill="none" stroke-width="4" d="M50 90V50m0 40V50"/><path fill-rule="evenodd" stroke-width="0" d="m50 50 6.34 13.59H43.66L50 50"/><path fill="none" stroke-width="4" d="M50 50c2.27 4.86 4.53 9.72 6.34 13.59M50 50c1.62 3.47 3.24 6.95 6.34 13.59m0 0H43.66m12.68 0H43.66m0 0C46.18 58.2 48.69 52.81 50 50m-6.34 13.59C45.75 59.12 47.84 54.64 50 50m0 0s0 0 0 0m0 0s0 0 0 0"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Reference in New Issue
Block a user