From 9eaf22305aa1af7ff0d9ef02cece4ed0997e5dd2 Mon Sep 17 00:00:00 2001 From: Zsolt Viczian Date: Wed, 29 Dec 2021 10:33:03 +0100 Subject: [PATCH] improved scripts, addText solved for non-container bound --- ea-scripts/Modify background color opacity.md | 214 +++++++++++++++--- ea-scripts/Zoom to Fit Selected Elements.md | 15 ++ src/ExcalidrawAutomate.ts | 17 +- 3 files changed, 206 insertions(+), 40 deletions(-) create mode 100644 ea-scripts/Zoom to Fit Selected Elements.md diff --git a/ea-scripts/Modify background color opacity.md b/ea-scripts/Modify background color opacity.md index c0627d7..5c9bd65 100644 --- a/ea-scripts/Modify background color opacity.md +++ b/ea-scripts/Modify background color opacity.md @@ -1,32 +1,182 @@ -/* -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg) - -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 changes the opacity of the background color of the selected boxes. - -The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. - -Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border. - -```javascript -*/ -const alpha = parseFloat(await utils.inputPrompt("Background color opacity?","number","0.6")); -const elements=ea.getViewSelectedElements(); -ea.copyViewElementsToEAforEditing(elements); -ea.getElements().forEach((el)=>{ - const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(el.backgroundColor); - if(rgbColor) { - const r = parseInt(rgbColor[1], 16); - const g = parseInt(rgbColor[2], 16); - const b = parseInt(rgbColor[3], 16); - el.backgroundColor=`rgba(${r},${g},${b},${alpha})`; - } - else { - const rgbaColor = /^rgba\((\d+,\d+,\d+,)(\d*\.?\d*)\)$/i.exec(el.backgroundColor); - if(rgbaColor) { - el.backgroundColor=`rgba(${rgbaColor[1]}${alpha})`; - } - } -}); -ea.addElementsToView(); \ No newline at end of file +/* +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg) + +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 changes the opacity of the background color of the selected boxes. + +The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. + +Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border. + +```javascript +*/ +const alpha = parseFloat(await utils.inputPrompt("Background color opacity?","number","0.6")); +const elements=ea.getViewSelectedElements().filter((el)=>["rectangle","ellipse","diamond","line","image"].includes(el.type)); +ea.copyViewElementsToEAforEditing(elements); +ea.getElements().forEach((el)=>{ + const color = colorNameToHex(el.backgroundColor); + const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); + if(rgbColor) { + const r = parseInt(rgbColor[1], 16); + const g = parseInt(rgbColor[2], 16); + const b = parseInt(rgbColor[3], 16); + el.backgroundColor=`rgba(${r},${g},${b},${alpha})`; + } + else { + const rgbaColor = /^rgba\((\d+,\d+,\d+,)(\d*\.?\d*)\)$/i.exec(color); + if(rgbaColor) { + el.backgroundColor=`rgba(${rgbaColor[1]}${alpha})`; + } + } +}); +ea.addElementsToView(); + +function colorNameToHex(color) { + const colors = { + "aliceblue":"#f0f8ff", + "antiquewhite":"#faebd7", + "aqua":"#00ffff", + "aquamarine":"#7fffd4", + "azure":"#f0ffff", + "beige":"#f5f5dc", + "bisque":"#ffe4c4", + "black":"#000000", + "blanchedalmond":"#ffebcd", + "blue":"#0000ff", + "blueviolet":"#8a2be2", + "brown":"#a52a2a", + "burlywood":"#deb887", + "cadetblue":"#5f9ea0", + "chartreuse":"#7fff00", + "chocolate":"#d2691e", + "coral":"#ff7f50", + "cornflowerblue":"#6495ed", + "cornsilk":"#fff8dc", + "crimson":"#dc143c", + "cyan":"#00ffff", + "darkblue":"#00008b", + "darkcyan":"#008b8b", + "darkgoldenrod":"#b8860b", + "darkgray":"#a9a9a9", + "darkgreen":"#006400", + "darkkhaki":"#bdb76b", + "darkmagenta":"#8b008b", + "darkolivegreen":"#556b2f", + "darkorange":"#ff8c00", + "darkorchid":"#9932cc", + "darkred":"#8b0000", + "darksalmon":"#e9967a", + "darkseagreen":"#8fbc8f", + "darkslateblue":"#483d8b", + "darkslategray":"#2f4f4f", + "darkturquoise":"#00ced1", + "darkviolet":"#9400d3", + "deeppink":"#ff1493", + "deepskyblue":"#00bfff", + "dimgray":"#696969", + "dodgerblue":"#1e90ff", + "firebrick":"#b22222", + "floralwhite":"#fffaf0", + "forestgreen":"#228b22", + "fuchsia":"#ff00ff", + "gainsboro":"#dcdcdc", + "ghostwhite":"#f8f8ff", + "gold":"#ffd700", + "goldenrod":"#daa520", + "gray":"#808080", + "green":"#008000", + "greenyellow":"#adff2f", + "honeydew":"#f0fff0", + "hotpink":"#ff69b4", + "indianred ":"#cd5c5c", + "indigo":"#4b0082", + "ivory":"#fffff0", + "khaki":"#f0e68c", + "lavender":"#e6e6fa", + "lavenderblush":"#fff0f5", + "lawngreen":"#7cfc00", + "lemonchiffon":"#fffacd", + "lightblue":"#add8e6", + "lightcoral":"#f08080", + "lightcyan":"#e0ffff", + "lightgoldenrodyellow":"#fafad2", + "lightgrey":"#d3d3d3", + "lightgreen":"#90ee90", + "lightpink":"#ffb6c1", + "lightsalmon":"#ffa07a", + "lightseagreen":"#20b2aa", + "lightskyblue":"#87cefa", + "lightslategray":"#778899", + "lightsteelblue":"#b0c4de", + "lightyellow":"#ffffe0", + "lime":"#00ff00", + "limegreen":"#32cd32", + "linen":"#faf0e6", + "magenta":"#ff00ff", + "maroon":"#800000", + "mediumaquamarine":"#66cdaa", + "mediumblue":"#0000cd", + "mediumorchid":"#ba55d3", + "mediumpurple":"#9370d8", + "mediumseagreen":"#3cb371", + "mediumslateblue":"#7b68ee", + "mediumspringgreen":"#00fa9a", + "mediumturquoise":"#48d1cc", + "mediumvioletred":"#c71585", + "midnightblue":"#191970", + "mintcream":"#f5fffa", + "mistyrose":"#ffe4e1", + "moccasin":"#ffe4b5", + "navajowhite":"#ffdead", + "navy":"#000080", + "oldlace":"#fdf5e6", + "olive":"#808000", + "olivedrab":"#6b8e23", + "orange":"#ffa500", + "orangered":"#ff4500", + "orchid":"#da70d6", + "palegoldenrod":"#eee8aa", + "palegreen":"#98fb98", + "paleturquoise":"#afeeee", + "palevioletred":"#d87093", + "papayawhip":"#ffefd5", + "peachpuff":"#ffdab9", + "peru":"#cd853f", + "pink":"#ffc0cb", + "plum":"#dda0dd", + "powderblue":"#b0e0e6", + "purple":"#800080", + "rebeccapurple":"#663399", + "red":"#ff0000", + "rosybrown":"#bc8f8f", + "royalblue":"#4169e1", + "saddlebrown":"#8b4513", + "salmon":"#fa8072", + "sandybrown":"#f4a460", + "seagreen":"#2e8b57", + "seashell":"#fff5ee", + "sienna":"#a0522d", + "silver":"#c0c0c0", + "skyblue":"#87ceeb", + "slateblue":"#6a5acd", + "slategray":"#708090", + "snow":"#fffafa", + "springgreen":"#00ff7f", + "steelblue":"#4682b4", + "tan":"#d2b48c", + "teal":"#008080", + "thistle":"#d8bfd8", + "tomato":"#ff6347", + "turquoise":"#40e0d0", + "violet":"#ee82ee", + "wheat":"#f5deb3", + "white":"#ffffff", + "whitesmoke":"#f5f5f5", + "yellow":"#ffff00", + "yellowgreen":"#9acd32" + }; + if (typeof colors[color.toLowerCase()] != 'undefined') + return colors[color.toLowerCase()]; + return color; +} \ No newline at end of file diff --git a/ea-scripts/Zoom to Fit Selected Elements.md b/ea-scripts/Zoom to Fit Selected Elements.md new file mode 100644 index 0000000..e129d18 --- /dev/null +++ b/ea-scripts/Zoom to Fit Selected Elements.md @@ -0,0 +1,15 @@ +/* +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg) + +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. + +Similar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000% percent. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272) + +See documentation for more details: +https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html + +```javascript +*/ +elements = ea.getViewSelectedElements(); +api = ea.getExcalidrawAPI(); +api.zoomToFit(elements,10); diff --git a/src/ExcalidrawAutomate.ts b/src/ExcalidrawAutomate.ts index 869857b..6e0ff33 100644 --- a/src/ExcalidrawAutomate.ts +++ b/src/ExcalidrawAutomate.ts @@ -683,20 +683,21 @@ export async function initExcalidrawAutomate( ); } } - const ea = window.ExcalidrawAutomate; + //const ea = window.ExcalidrawAutomate; + const isContainerBound = formatting?.box && formatting.box !== "blob"; this.elementsDict[id] = { text, - fontSize: ea.style.fontSize, - fontFamily: ea.style.fontFamily, + fontSize: this.style.fontSize, + fontFamily: this.style.fontFamily, textAlign: formatting?.textAlign ? formatting.textAlign - : ea.style.textAlign, - verticalAlign: ea.style.verticalAlign, + : this.style.textAlign, + verticalAlign: this.style.verticalAlign, baseline, ...boxedElement(id, "text", topX, topY, width, height), - containerId: boxId, - originalText, - rawText: originalText, + containerId: isContainerBound ? boxId : null, + originalText: isContainerBound ? originalText : text, + rawText: isContainerBound ? originalText : text, }; if (boxId && formatting?.box === "blob") { this.addToGroup([id, boxId]);