diff --git a/docs/API/attributes_functions_overview.md b/docs/API/attributes_functions_overview.md index 092257d..36f1fed 100644 --- a/docs/API/attributes_functions_overview.md +++ b/docs/API/attributes_functions_overview.md @@ -134,8 +134,13 @@ export interface ExcalidrawAutomate { }, ): boolean; addElementsToView( //Adds elements from elementsDict to the current view - repositionToCursor: boolean, - save: boolean, + repositionToCursor?: boolean, //default is false + save?: boolean, //default is true + //newElementsOnTop controls whether elements created with ExcalidrawAutomate + //are added at the bottom of the stack or the top of the stack of elements already in the view + //Note that elements copied to the view with copyViewElementsToEAforEditing retain their + //position in the stack of elements in the view even if modified using EA + newElementsOnTop?: boolean, //default is false, i.e. the new elements get to the bottom of the stack ): Promise; onDropHook(data: { //if set Excalidraw will call this function onDrop events @@ -176,7 +181,7 @@ export interface ExcalidrawAutomate { b: readonly [number, number], gap?: number, //if given, element is inflated by this value ): Point[]; - + //See OCR plugin for example on how to use scriptSettings activeScript: string; //Set automatically by the ScriptEngine getScriptSettings(): {}; //Returns script settings. Saves settings in plugin settings, under the activeScript key diff --git a/ea-scripts/Darken background color.md b/ea-scripts/Darken background color.md index ce70c19..90615eb 100644 --- a/ea-scripts/Darken background color.md +++ b/ea-scripts/Darken background color.md @@ -1,289 +1,289 @@ -/* -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png) - -This script darkens 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. - -The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert). - -```javascript -*/ - -const elements = ea - .getViewSelectedElements() - .filter((el) => - ["rectangle", "ellipse", "diamond", "image"].includes(el.type) - ); -ea.copyViewElementsToEAforEditing(elements); -for (const el of ea.getElements()) { - 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); - const originalRgb = [r, g, b]; - const hsl = rgbToHsl(originalRgb); - const step = 2; - const newLightness = hsl[2] - step; - if (newLightness > 0) { - hsl[2] = newLightness; - } - const newRgb = hslToRgb(hsl); - el.backgroundColor = "#" + rgbToHexString(newRgb); - } -} -ea.addElementsToView(false, false); - -function rgbToHexString(args) { - const integer = - ((Math.round(args[0]) & 0xff) << 16) + - ((Math.round(args[1]) & 0xff) << 8) + - (Math.round(args[2]) & 0xff); - - const string = integer.toString(16).toUpperCase(); - return "000000".substring(string.length) + string; -} - -function hslToRgb(hsl) { - const h = hsl[0] / 360; - const s = hsl[1] / 100; - const l = hsl[2] / 100; - let t2; - let t3; - let val; - - if (s === 0) { - val = l * 255; - return [val, val, val]; - } - - if (l < 0.5) { - t2 = l * (1 + s); - } else { - t2 = l + s - l * s; - } - - const t1 = 2 * l - t2; - - const rgb = [0, 0, 0]; - for (let i = 0; i < 3; i++) { - t3 = h + (1 / 3) * -(i - 1); - if (t3 < 0) { - t3++; - } - - if (t3 > 1) { - t3--; - } - - if (6 * t3 < 1) { - val = t1 + (t2 - t1) * 6 * t3; - } else if (2 * t3 < 1) { - val = t2; - } else if (3 * t3 < 2) { - val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; - } else { - val = t1; - } - - rgb[i] = val * 255; - } - - return rgb; -} - -function rgbToHsl(rgb) { - const r = rgb[0] / 255; - const g = rgb[1] / 255; - const b = rgb[2] / 255; - const min = Math.min(r, g, b); - const max = Math.max(r, g, b); - const delta = max - min; - let h; - let s; - - if (max === min) { - h = 0; - } else if (r === max) { - h = (g - b) / delta; - } else if (g === max) { - h = 2 + (b - r) / delta; - } else if (b === max) { - h = 4 + (r - g) / delta; - } - - h = Math.min(h * 60, 360); - - if (h < 0) { - h += 360; - } - - const l = (min + max) / 2; - - if (max === min) { - s = 0; - } else if (l <= 0.5) { - s = delta / (max + min); - } else { - s = delta / (2 - max - min); - } - - return [h, s * 100, l * 100]; -} - -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; -} +/* +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png) + +This script darkens 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. + +The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert). + +```javascript +*/ + +const elements = ea + .getViewSelectedElements() + .filter((el) => + ["rectangle", "ellipse", "diamond", "image"].includes(el.type) + ); +ea.copyViewElementsToEAforEditing(elements); +for (const el of ea.getElements()) { + 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); + const originalRgb = [r, g, b]; + const hsl = rgbToHsl(originalRgb); + const step = 2; + const newLightness = hsl[2] - step; + if (newLightness > 0) { + hsl[2] = newLightness; + } + const newRgb = hslToRgb(hsl); + el.backgroundColor = "#" + rgbToHexString(newRgb); + } +} +ea.addElementsToView(false, false); + +function rgbToHexString(args) { + const integer = + ((Math.round(args[0]) & 0xff) << 16) + + ((Math.round(args[1]) & 0xff) << 8) + + (Math.round(args[2]) & 0xff); + + const string = integer.toString(16).toUpperCase(); + return "000000".substring(string.length) + string; +} + +function hslToRgb(hsl) { + const h = hsl[0] / 360; + const s = hsl[1] / 100; + const l = hsl[2] / 100; + let t2; + let t3; + let val; + + if (s === 0) { + val = l * 255; + return [val, val, val]; + } + + if (l < 0.5) { + t2 = l * (1 + s); + } else { + t2 = l + s - l * s; + } + + const t1 = 2 * l - t2; + + const rgb = [0, 0, 0]; + for (let i = 0; i < 3; i++) { + t3 = h + (1 / 3) * -(i - 1); + if (t3 < 0) { + t3++; + } + + if (t3 > 1) { + t3--; + } + + if (6 * t3 < 1) { + val = t1 + (t2 - t1) * 6 * t3; + } else if (2 * t3 < 1) { + val = t2; + } else if (3 * t3 < 2) { + val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; + } else { + val = t1; + } + + rgb[i] = val * 255; + } + + return rgb; +} + +function rgbToHsl(rgb) { + const r = rgb[0] / 255; + const g = rgb[1] / 255; + const b = rgb[2] / 255; + const min = Math.min(r, g, b); + const max = Math.max(r, g, b); + const delta = max - min; + let h; + let s; + + if (max === min) { + h = 0; + } else if (r === max) { + h = (g - b) / delta; + } else if (g === max) { + h = 2 + (b - r) / delta; + } else if (b === max) { + h = 4 + (r - g) / delta; + } + + h = Math.min(h * 60, 360); + + if (h < 0) { + h += 360; + } + + const l = (min + max) / 2; + + if (max === min) { + s = 0; + } else if (l <= 0.5) { + s = delta / (max + min); + } else { + s = delta / (2 - max - min); + } + + return [h, s * 100, l * 100]; +} + +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; +} diff --git a/ea-scripts/Expand rectangles horizontally keep text centered.md b/ea-scripts/Expand rectangles horizontally keep text centered.md index 8b2743f..d0d502e 100644 --- a/ea-scripts/Expand rectangles horizontally keep text centered.md +++ b/ea-scripts/Expand rectangles horizontally keep text centered.md @@ -1,75 +1,75 @@ -/* - -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) - -This script expands the width of the selected rectangles until they are all the same width and keep the text centered. - -See documentation for more details: -https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html - -```javascript -*/ - -const elements = ea.getViewSelectedElements(); -const topGroups = ea.getMaximumGroups(elements); - -const groupWidths = topGroups - .map((g) => - g.reduce( - (pre, cur, i) => { - if (i === 0) { - return { - minLeft: cur.x, - maxRight: cur.x + cur.width, - index: i, - }; - } else { - return { - minLeft: cur.x < pre.minLeft ? cur.x : pre.minLeft, - maxRight: - cur.x + cur.width > pre.maxRight - ? cur.x + cur.width - : pre.maxRight, - index: i, - }; - } - }, - { minLeft: 0, maxRight: 0 } - ) - ) - .map((r) => { - r.width = r.maxRight - r.minLeft; - return r; - }); - -const maxGroupWidth = Math.max(...groupWidths.map((g) => g.width)); - -for (var i = 0; i < topGroups.length; i++) { - const rects = topGroups[i] - .filter((el) => el.type === "rectangle") - .sort((lha, rha) => lha.x - rha.x); - const texts = topGroups[i] - .filter((el) => el.type === "text") - .sort((lha, rha) => lha.x - rha.x); - const groupWith = groupWidths[i].width; - if (groupWith < maxGroupWidth) { - const distance = maxGroupWidth - groupWith; - const perRectDistance = distance / rects.length; - for (var j = 0; j < rects.length; j++) { - const rect = rects[j]; - rect.x = rect.x + perRectDistance * j - perRectDistance / 2; - rect.width += perRectDistance; - } - for (var j = 0; j < texts.length; j++) { - const text = texts[j]; - text.x = text.x + perRectDistance * j; - } - } -} - -ea.copyViewElementsToEAforEditing(elements); -ea.addElementsToView(false, false); +/* + +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) + +This script expands the width of the selected rectangles until they are all the same width and keep the text centered. + +See documentation for more details: +https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html + +```javascript +*/ + +const elements = ea.getViewSelectedElements(); +const topGroups = ea.getMaximumGroups(elements); + +const groupWidths = topGroups + .map((g) => + g.reduce( + (pre, cur, i) => { + if (i === 0) { + return { + minLeft: cur.x, + maxRight: cur.x + cur.width, + index: i, + }; + } else { + return { + minLeft: cur.x < pre.minLeft ? cur.x : pre.minLeft, + maxRight: + cur.x + cur.width > pre.maxRight + ? cur.x + cur.width + : pre.maxRight, + index: i, + }; + } + }, + { minLeft: 0, maxRight: 0 } + ) + ) + .map((r) => { + r.width = r.maxRight - r.minLeft; + return r; + }); + +const maxGroupWidth = Math.max(...groupWidths.map((g) => g.width)); + +for (var i = 0; i < topGroups.length; i++) { + const rects = topGroups[i] + .filter((el) => el.type === "rectangle") + .sort((lha, rha) => lha.x - rha.x); + const texts = topGroups[i] + .filter((el) => el.type === "text") + .sort((lha, rha) => lha.x - rha.x); + const groupWith = groupWidths[i].width; + if (groupWith < maxGroupWidth) { + const distance = maxGroupWidth - groupWith; + const perRectDistance = distance / rects.length; + for (var j = 0; j < rects.length; j++) { + const rect = rects[j]; + rect.x = rect.x + perRectDistance * j - perRectDistance / 2; + rect.width += perRectDistance; + } + for (var j = 0; j < texts.length; j++) { + const text = texts[j]; + text.x = text.x + perRectDistance * j; + } + } +} + +ea.copyViewElementsToEAforEditing(elements); +ea.addElementsToView(false, false); diff --git a/ea-scripts/Expand rectangles horizontally.md b/ea-scripts/Expand rectangles horizontally.md index 44b741d..710070e 100644 --- a/ea-scripts/Expand rectangles horizontally.md +++ b/ea-scripts/Expand rectangles horizontally.md @@ -1,76 +1,76 @@ -/* - -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) - -This script expands the width of the selected rectangles until they are all the same width. - -See documentation for more details: -https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html - -```javascript -*/ - -const elements = ea.getViewSelectedElements(); -const topGroups = ea.getMaximumGroups(elements); - -const groupWidths = topGroups - .map((g) => - g.reduce( - (pre, cur, i) => { - if (i === 0) { - return { - minLeft: cur.x, - maxRight: cur.x + cur.width, - index: i, - }; - } else { - return { - minLeft: cur.x < pre.minLeft ? cur.x : pre.minLeft, - maxRight: - cur.x + cur.width > pre.maxRight - ? cur.x + cur.width - : pre.maxRight, - index: i, - }; - } - }, - { minLeft: 0, maxRight: 0 } - ) - ) - .map((r) => { - r.width = r.maxRight - r.minLeft; - return r; - }); - -const maxGroupWidth = Math.max(...groupWidths.map((g) => g.width)); - -for (var i = 0; i < topGroups.length; i++) { - const rects = topGroups[i] - .filter((el) => el.type === "rectangle") - .sort((lha, rha) => lha.x - rha.x); - const texts = topGroups[i] - .filter((el) => el.type === "text") - .sort((lha, rha) => lha.x - rha.x); - const groupWith = groupWidths[i].width; - if (groupWith < maxGroupWidth) { - const distance = maxGroupWidth - groupWith; - const perRectDistance = distance / rects.length; - for (var j = 0; j < rects.length; j++) { - const rect = rects[j]; - rect.x = rect.x + perRectDistance * j; - rect.width += perRectDistance; - } - for (var j = 0; j < texts.length; j++) { - const text = texts[j]; - text.x = text.x + perRectDistance * j; - } - } -} - -ea.copyViewElementsToEAforEditing(elements); -ea.addElementsToView(false, false); - +/* + +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) + +This script expands the width of the selected rectangles until they are all the same width. + +See documentation for more details: +https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html + +```javascript +*/ + +const elements = ea.getViewSelectedElements(); +const topGroups = ea.getMaximumGroups(elements); + +const groupWidths = topGroups + .map((g) => + g.reduce( + (pre, cur, i) => { + if (i === 0) { + return { + minLeft: cur.x, + maxRight: cur.x + cur.width, + index: i, + }; + } else { + return { + minLeft: cur.x < pre.minLeft ? cur.x : pre.minLeft, + maxRight: + cur.x + cur.width > pre.maxRight + ? cur.x + cur.width + : pre.maxRight, + index: i, + }; + } + }, + { minLeft: 0, maxRight: 0 } + ) + ) + .map((r) => { + r.width = r.maxRight - r.minLeft; + return r; + }); + +const maxGroupWidth = Math.max(...groupWidths.map((g) => g.width)); + +for (var i = 0; i < topGroups.length; i++) { + const rects = topGroups[i] + .filter((el) => el.type === "rectangle") + .sort((lha, rha) => lha.x - rha.x); + const texts = topGroups[i] + .filter((el) => el.type === "text") + .sort((lha, rha) => lha.x - rha.x); + const groupWith = groupWidths[i].width; + if (groupWith < maxGroupWidth) { + const distance = maxGroupWidth - groupWith; + const perRectDistance = distance / rects.length; + for (var j = 0; j < rects.length; j++) { + const rect = rects[j]; + rect.x = rect.x + perRectDistance * j; + rect.width += perRectDistance; + } + for (var j = 0; j < texts.length; j++) { + const text = texts[j]; + text.x = text.x + perRectDistance * j; + } + } +} + +ea.copyViewElementsToEAforEditing(elements); +ea.addElementsToView(false, false); + diff --git a/ea-scripts/Expand rectangles vertically keep text centered.md b/ea-scripts/Expand rectangles vertically keep text centered.md index b6561b7..5304ee6 100644 --- a/ea-scripts/Expand rectangles vertically keep text centered.md +++ b/ea-scripts/Expand rectangles vertically keep text centered.md @@ -1,75 +1,75 @@ -/* - -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) - -This script expands the height of the selected rectangles until they are all the same height and keep the text centered. - -See documentation for more details: -https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html - -```javascript -*/ - -const elements = ea.getViewSelectedElements(); -const topGroups = ea.getMaximumGroups(elements); - -const groupHeights = topGroups - .map((g) => - g.reduce( - (pre, cur, i) => { - if (i === 0) { - return { - minTop: cur.y, - maxBottom: cur.y + cur.height, - index: i, - }; - } else { - return { - minTop: cur.y < pre.minTop ? cur.y : pre.minTop, - maxBottom: - cur.y + cur.height > pre.maxBottom - ? cur.y + cur.height - : pre.maxBottom, - index: i, - }; - } - }, - { minTop: 0, maxBottom: 0 } - ) - ) - .map((r) => { - r.height = r.maxBottom - r.minTop; - return r; - }); - -const maxGroupHeight = Math.max(...groupHeights.map((g) => g.height)); - -for (var i = 0; i < topGroups.length; i++) { - const rects = topGroups[i] - .filter((el) => el.type === "rectangle") - .sort((lha, rha) => lha.y - rha.y); - const texts = topGroups[i] - .filter((el) => el.type === "text") - .sort((lha, rha) => lha.y - rha.y); - const groupWith = groupHeights[i].height; - if (groupWith < maxGroupHeight) { - const distance = maxGroupHeight - groupWith; - const perRectDistance = distance / rects.length; - for (var j = 0; j < rects.length; j++) { - const rect = rects[j]; - rect.y = rect.y + perRectDistance * j - perRectDistance / 2; - rect.height += perRectDistance; - } - for (var j = 0; j < texts.length; j++) { - const text = texts[j]; - text.y = text.y + perRectDistance * j; - } - } -} - -ea.copyViewElementsToEAforEditing(elements); -ea.addElementsToView(false, false); +/* + +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) + +This script expands the height of the selected rectangles until they are all the same height and keep the text centered. + +See documentation for more details: +https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html + +```javascript +*/ + +const elements = ea.getViewSelectedElements(); +const topGroups = ea.getMaximumGroups(elements); + +const groupHeights = topGroups + .map((g) => + g.reduce( + (pre, cur, i) => { + if (i === 0) { + return { + minTop: cur.y, + maxBottom: cur.y + cur.height, + index: i, + }; + } else { + return { + minTop: cur.y < pre.minTop ? cur.y : pre.minTop, + maxBottom: + cur.y + cur.height > pre.maxBottom + ? cur.y + cur.height + : pre.maxBottom, + index: i, + }; + } + }, + { minTop: 0, maxBottom: 0 } + ) + ) + .map((r) => { + r.height = r.maxBottom - r.minTop; + return r; + }); + +const maxGroupHeight = Math.max(...groupHeights.map((g) => g.height)); + +for (var i = 0; i < topGroups.length; i++) { + const rects = topGroups[i] + .filter((el) => el.type === "rectangle") + .sort((lha, rha) => lha.y - rha.y); + const texts = topGroups[i] + .filter((el) => el.type === "text") + .sort((lha, rha) => lha.y - rha.y); + const groupWith = groupHeights[i].height; + if (groupWith < maxGroupHeight) { + const distance = maxGroupHeight - groupWith; + const perRectDistance = distance / rects.length; + for (var j = 0; j < rects.length; j++) { + const rect = rects[j]; + rect.y = rect.y + perRectDistance * j - perRectDistance / 2; + rect.height += perRectDistance; + } + for (var j = 0; j < texts.length; j++) { + const text = texts[j]; + text.y = text.y + perRectDistance * j; + } + } +} + +ea.copyViewElementsToEAforEditing(elements); +ea.addElementsToView(false, false); diff --git a/ea-scripts/Expand rectangles vertically.md b/ea-scripts/Expand rectangles vertically.md index 343e532..6a45d34 100644 --- a/ea-scripts/Expand rectangles vertically.md +++ b/ea-scripts/Expand rectangles vertically.md @@ -1,73 +1,73 @@ -/* - -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) - -This script expands the height of the selected rectangles until they are all the same height. - -```javascript -*/ - -const elements = ea.getViewSelectedElements(); -const topGroups = ea.getMaximumGroups(elements); - -const groupHeights = topGroups - .map((g) => - g.reduce( - (pre, cur, i) => { - if (i === 0) { - return { - minTop: cur.y, - maxBottom: cur.y + cur.height, - index: i, - }; - } else { - return { - minTop: cur.y < pre.minTop ? cur.y : pre.minTop, - maxBottom: - cur.y + cur.height > pre.maxBottom - ? cur.y + cur.height - : pre.maxBottom, - index: i, - }; - } - }, - { minTop: 0, maxBottom: 0 } - ) - ) - .map((r) => { - r.height = r.maxBottom - r.minTop; - return r; - }); - -const maxGroupHeight = Math.max(...groupHeights.map((g) => g.height)); - -for (var i = 0; i < topGroups.length; i++) { - const rects = topGroups[i] - .filter((el) => el.type === "rectangle") - .sort((lha, rha) => lha.y - rha.y); - const texts = topGroups[i] - .filter((el) => el.type === "text") - .sort((lha, rha) => lha.y - rha.y); - const groupWith = groupHeights[i].height; - if (groupWith < maxGroupHeight) { - const distance = maxGroupHeight - groupWith; - const perRectDistance = distance / rects.length; - for (var j = 0; j < rects.length; j++) { - const rect = rects[j]; - rect.y = rect.y + perRectDistance * j; - rect.height += perRectDistance; - } - for (var j = 0; j < texts.length; j++) { - const text = texts[j]; - text.y = text.y + perRectDistance * j; - } - } -} - -ea.copyViewElementsToEAforEditing(elements); -ea.addElementsToView(false, false); - +/* + +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif) + +This script expands the height of the selected rectangles until they are all the same height. + +```javascript +*/ + +const elements = ea.getViewSelectedElements(); +const topGroups = ea.getMaximumGroups(elements); + +const groupHeights = topGroups + .map((g) => + g.reduce( + (pre, cur, i) => { + if (i === 0) { + return { + minTop: cur.y, + maxBottom: cur.y + cur.height, + index: i, + }; + } else { + return { + minTop: cur.y < pre.minTop ? cur.y : pre.minTop, + maxBottom: + cur.y + cur.height > pre.maxBottom + ? cur.y + cur.height + : pre.maxBottom, + index: i, + }; + } + }, + { minTop: 0, maxBottom: 0 } + ) + ) + .map((r) => { + r.height = r.maxBottom - r.minTop; + return r; + }); + +const maxGroupHeight = Math.max(...groupHeights.map((g) => g.height)); + +for (var i = 0; i < topGroups.length; i++) { + const rects = topGroups[i] + .filter((el) => el.type === "rectangle") + .sort((lha, rha) => lha.y - rha.y); + const texts = topGroups[i] + .filter((el) => el.type === "text") + .sort((lha, rha) => lha.y - rha.y); + const groupWith = groupHeights[i].height; + if (groupWith < maxGroupHeight) { + const distance = maxGroupHeight - groupWith; + const perRectDistance = distance / rects.length; + for (var j = 0; j < rects.length; j++) { + const rect = rects[j]; + rect.y = rect.y + perRectDistance * j; + rect.height += perRectDistance; + } + for (var j = 0; j < texts.length; j++) { + const text = texts[j]; + text.y = text.y + perRectDistance * j; + } + } +} + +ea.copyViewElementsToEAforEditing(elements); +ea.addElementsToView(false, false); + diff --git a/ea-scripts/Fixed spacing.md b/ea-scripts/Fixed spacing.md index a1b9df8..db3cf08 100644 --- a/ea-scripts/Fixed spacing.md +++ b/ea-scripts/Fixed spacing.md @@ -1,37 +1,37 @@ -/* -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fix-space-demo.png) - -The script arranges the selected elements horizontally with a fixed spacing. - -When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time. - -```javascript -*/ -const spacing = parseInt (await utils.inputPrompt("spacing?","number","8")); -if(isNaN(spacing)) { - return; -} -const elements=ea.getViewSelectedElements(); -const topGroups = ea.getMaximumGroups(elements); -const groups = topGroups.sort((lha,rha) => lha[0].x - rha[0].x); - -for(var i=0; i 0) { - const preGroup = groups[i-1]; - const curGroup = groups[i]; - - const preRight = Math.max(...preGroup.map(el => el.x + el.width)); - const curLeft = Math.min(...curGroup.map(el => el.x)); - const distance = curLeft - preRight - spacing; - - for(const curEl of curGroup) { - curEl.x = curEl.x - distance; - } - } -} -ea.copyViewElementsToEAforEditing(elements); -ea.addElementsToView(false, false); +/* +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fix-space-demo.png) + +The script arranges the selected elements horizontally with a fixed spacing. + +When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time. + +```javascript +*/ +const spacing = parseInt (await utils.inputPrompt("spacing?","number","8")); +if(isNaN(spacing)) { + return; +} +const elements=ea.getViewSelectedElements(); +const topGroups = ea.getMaximumGroups(elements); +const groups = topGroups.sort((lha,rha) => lha[0].x - rha[0].x); + +for(var i=0; i 0) { + const preGroup = groups[i-1]; + const curGroup = groups[i]; + + const preRight = Math.max(...preGroup.map(el => el.x + el.width)); + const curLeft = Math.min(...curGroup.map(el => el.x)); + const distance = curLeft - preRight - spacing; + + for(const curEl of curGroup) { + curEl.x = curEl.x - distance; + } + } +} +ea.copyViewElementsToEAforEditing(elements); +ea.addElementsToView(false, false); diff --git a/ea-scripts/Fixed vertical distance.md b/ea-scripts/Fixed vertical distance.md index c57be4b..ec1be2e 100644 --- a/ea-scripts/Fixed vertical distance.md +++ b/ea-scripts/Fixed vertical distance.md @@ -1,37 +1,37 @@ -/* -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fixed-vertical-distance.png) - -The script arranges the selected elements vertically with a fixed spacing. - -When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time. - -```javascript -*/ -const spacing = parseInt (await utils.inputPrompt("spacing?","number","8")); -if(isNaN(spacing)) { - return; -} -const elements=ea.getViewSelectedElements(); -const topGroups = ea.getMaximumGroups(elements); -const groups = topGroups.sort((lha,rha) => lha[0].y - rha[0].y); - -for(var i=0; i 0) { - const preGroup = groups[i-1]; - const curGroup = groups[i]; - - const preBottom = Math.max(...preGroup.map(el => el.y + el.height)); - const curTop = Math.min(...curGroup.map(el => el.y)); - const distance = curTop - preBottom - spacing; - - for(const curEl of curGroup) { - curEl.y = curEl.y - distance; - } - } -} -ea.copyViewElementsToEAforEditing(elements); -ea.addElementsToView(false, false); +/* +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fixed-vertical-distance.png) + +The script arranges the selected elements vertically with a fixed spacing. + +When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time. + +```javascript +*/ +const spacing = parseInt (await utils.inputPrompt("spacing?","number","8")); +if(isNaN(spacing)) { + return; +} +const elements=ea.getViewSelectedElements(); +const topGroups = ea.getMaximumGroups(elements); +const groups = topGroups.sort((lha,rha) => lha[0].y - rha[0].y); + +for(var i=0; i 0) { + const preGroup = groups[i-1]; + const curGroup = groups[i]; + + const preBottom = Math.max(...preGroup.map(el => el.y + el.height)); + const curTop = Math.min(...curGroup.map(el => el.y)); + const distance = curTop - preBottom - spacing; + + for(const curEl of curGroup) { + curEl.y = curEl.y - distance; + } + } +} +ea.copyViewElementsToEAforEditing(elements); +ea.addElementsToView(false, false); diff --git a/ea-scripts/Lighten background color.md b/ea-scripts/Lighten background color.md index 628cbea..5d37c15 100644 --- a/ea-scripts/Lighten background color.md +++ b/ea-scripts/Lighten background color.md @@ -1,289 +1,289 @@ -/* -![](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. - -![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png) - -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. - -The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert). - -```javascript -*/ - -const elements = ea - .getViewSelectedElements() - .filter((el) => - ["rectangle", "ellipse", "diamond", "image"].includes(el.type) - ); -ea.copyViewElementsToEAforEditing(elements); -for (const el of ea.getElements()) { - 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); - const originalRgb = [r, g, b]; - const hsl = rgbToHsl(originalRgb); - const step = 2; - const newLightness = hsl[2] + step; - if (newLightness < 100) { - hsl[2] = newLightness; - } - const newRgb = hslToRgb(hsl); - el.backgroundColor = "#" + rgbToHexString(newRgb); - } -} -ea.addElementsToView(false, false); - -function rgbToHexString(args) { - const integer = - ((Math.round(args[0]) & 0xff) << 16) + - ((Math.round(args[1]) & 0xff) << 8) + - (Math.round(args[2]) & 0xff); - - const string = integer.toString(16).toUpperCase(); - return "000000".substring(string.length) + string; -} - -function hslToRgb(hsl) { - const h = hsl[0] / 360; - const s = hsl[1] / 100; - const l = hsl[2] / 100; - let t2; - let t3; - let val; - - if (s === 0) { - val = l * 255; - return [val, val, val]; - } - - if (l < 0.5) { - t2 = l * (1 + s); - } else { - t2 = l + s - l * s; - } - - const t1 = 2 * l - t2; - - const rgb = [0, 0, 0]; - for (let i = 0; i < 3; i++) { - t3 = h + (1 / 3) * -(i - 1); - if (t3 < 0) { - t3++; - } - - if (t3 > 1) { - t3--; - } - - if (6 * t3 < 1) { - val = t1 + (t2 - t1) * 6 * t3; - } else if (2 * t3 < 1) { - val = t2; - } else if (3 * t3 < 2) { - val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; - } else { - val = t1; - } - - rgb[i] = val * 255; - } - - return rgb; -} - -function rgbToHsl(rgb) { - const r = rgb[0] / 255; - const g = rgb[1] / 255; - const b = rgb[2] / 255; - const min = Math.min(r, g, b); - const max = Math.max(r, g, b); - const delta = max - min; - let h; - let s; - - if (max === min) { - h = 0; - } else if (r === max) { - h = (g - b) / delta; - } else if (g === max) { - h = 2 + (b - r) / delta; - } else if (b === max) { - h = 4 + (r - g) / delta; - } - - h = Math.min(h * 60, 360); - - if (h < 0) { - h += 360; - } - - const l = (min + max) / 2; - - if (max === min) { - s = 0; - } else if (l <= 0.5) { - s = delta / (max + min); - } else { - s = delta / (2 - max - min); - } - - return [h, s * 100, l * 100]; -} - -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; -} +/* +![](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. + +![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png) + +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. + +The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert). + +```javascript +*/ + +const elements = ea + .getViewSelectedElements() + .filter((el) => + ["rectangle", "ellipse", "diamond", "image"].includes(el.type) + ); +ea.copyViewElementsToEAforEditing(elements); +for (const el of ea.getElements()) { + 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); + const originalRgb = [r, g, b]; + const hsl = rgbToHsl(originalRgb); + const step = 2; + const newLightness = hsl[2] + step; + if (newLightness < 100) { + hsl[2] = newLightness; + } + const newRgb = hslToRgb(hsl); + el.backgroundColor = "#" + rgbToHexString(newRgb); + } +} +ea.addElementsToView(false, false); + +function rgbToHexString(args) { + const integer = + ((Math.round(args[0]) & 0xff) << 16) + + ((Math.round(args[1]) & 0xff) << 8) + + (Math.round(args[2]) & 0xff); + + const string = integer.toString(16).toUpperCase(); + return "000000".substring(string.length) + string; +} + +function hslToRgb(hsl) { + const h = hsl[0] / 360; + const s = hsl[1] / 100; + const l = hsl[2] / 100; + let t2; + let t3; + let val; + + if (s === 0) { + val = l * 255; + return [val, val, val]; + } + + if (l < 0.5) { + t2 = l * (1 + s); + } else { + t2 = l + s - l * s; + } + + const t1 = 2 * l - t2; + + const rgb = [0, 0, 0]; + for (let i = 0; i < 3; i++) { + t3 = h + (1 / 3) * -(i - 1); + if (t3 < 0) { + t3++; + } + + if (t3 > 1) { + t3--; + } + + if (6 * t3 < 1) { + val = t1 + (t2 - t1) * 6 * t3; + } else if (2 * t3 < 1) { + val = t2; + } else if (3 * t3 < 2) { + val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; + } else { + val = t1; + } + + rgb[i] = val * 255; + } + + return rgb; +} + +function rgbToHsl(rgb) { + const r = rgb[0] / 255; + const g = rgb[1] / 255; + const b = rgb[2] / 255; + const min = Math.min(r, g, b); + const max = Math.max(r, g, b); + const delta = max - min; + let h; + let s; + + if (max === min) { + h = 0; + } else if (r === max) { + h = (g - b) / delta; + } else if (g === max) { + h = 2 + (b - r) / delta; + } else if (b === max) { + h = 4 + (r - g) / delta; + } + + h = Math.min(h * 60, 360); + + if (h < 0) { + h += 360; + } + + const l = (min + max) / 2; + + if (max === min) { + s = 0; + } else if (l <= 0.5) { + s = delta / (max + min); + } else { + s = delta / (2 - max - min); + } + + return [h, s * 100, l * 100]; +} + +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; +} diff --git a/manifest.json b/manifest.json index 8d36d52..aea696e 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "1.5.15", + "version": "1.5.16", "minAppVersion": "0.12.16", "description": "An Obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", diff --git a/src/ExcalidrawAutomate.ts b/src/ExcalidrawAutomate.ts index a823f56..2caf980 100644 --- a/src/ExcalidrawAutomate.ts +++ b/src/ExcalidrawAutomate.ts @@ -169,8 +169,13 @@ export interface ExcalidrawAutomate { }, ): boolean; addElementsToView( //Adds elements from elementsDict to the current view - repositionToCursor: boolean, - save: boolean, + repositionToCursor?: boolean, //default is false + save?: boolean, //default is true + //newElementsOnTop controls whether elements created with ExcalidrawAutomate + //are added at the bottom of the stack or the top of the stack of elements already in the view + //Note that elements copied to the view with copyViewElementsToEAforEditing retain their + //position in the stack of elements in the view even if modified using EA + newElementsOnTop?: boolean, //default is false, i.e. the new elements get to the bottom of the stack ): Promise; onDropHook(data: { //if set Excalidraw will call this function onDrop events @@ -1176,6 +1181,7 @@ export async function initExcalidrawAutomate( async addElementsToView( repositionToCursor: boolean = false, save: boolean = true, + newElementsOnTop: boolean = false ): Promise { if (!this.targetView || !this.targetView?._loaded) { errorMessage("targetView not set", "addElementsToView()"); @@ -1187,6 +1193,7 @@ export async function initExcalidrawAutomate( repositionToCursor, save, this.imagesDict, + newElementsOnTop ); }, onDropHook: null, diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts index 537d0fd..89459da 100644 --- a/src/ExcalidrawView.ts +++ b/src/ExcalidrawView.ts @@ -1236,6 +1236,7 @@ export default class ExcalidrawView extends TextFileView { repositionToCursor: boolean = false, save: boolean = false, images: any, + newElementsOnTop: boolean = false, ): Promise => { if (!excalidrawRef?.current) { return false; @@ -1282,11 +1283,11 @@ export default class ExcalidrawView extends TextFileView { } const st: AppState = this.excalidrawAPI.getAppState(); - - //debug({where:"ExcalidrawView.addElements",file:this.file.name,dataTheme:this.excalidrawData.scene.appState.theme,before:"updateScene",state:st}) - const elements = el.concat( - newElements.filter((e) => !removeList.includes(e.id)), - ); + + const elements = + newElementsOnTop + ? el.concat(newElements.filter((e) => !removeList.includes(e.id))) + : (newElements.filter((e) => !removeList.includes(e.id))).concat(el); this.excalidrawAPI.updateScene({ elements, appState: st, diff --git a/src/ScriptInstallPrompt.ts b/src/ScriptInstallPrompt.ts index 0111375..9106cb5 100644 --- a/src/ScriptInstallPrompt.ts +++ b/src/ScriptInstallPrompt.ts @@ -2,7 +2,7 @@ import { App, MarkdownRenderer, Modal, Notice, request } from "obsidian"; import { Url } from "url"; import { t } from "./lang/helpers"; import ExcalidrawPlugin from "./main"; -import { errorlog } from "./Utils"; +import { errorlog, log } from "./Utils"; const URL = "https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/index.md"; @@ -18,6 +18,14 @@ export class ScriptInstallPrompt extends Modal { this.containerEl.classList.add("excalidraw-scriptengine-install"); try { const source = await request({ url: URL }); + if(!source) { + new Notice("Error opening the Excalidraw Script Store page. " + + "Please double check that you can access the website. " + + "I've logged the link in developer console (press CTRL+SHIFT+i)",5000); + log(URL); + this.close(); + return; + } await MarkdownRenderer.renderMarkdown( source, this.contentEl, diff --git a/src/Scripts.ts b/src/Scripts.ts index 939586e..56c6ab6 100644 --- a/src/Scripts.ts +++ b/src/Scripts.ts @@ -65,13 +65,17 @@ export class ScriptEngine { if (this.scriptPath === this.plugin.settings.scriptFolderPath) { return; } - this.unloadScripts(); + if(this.scriptPath) this.unloadScripts(); this.loadScripts(); } loadScripts() { const app = this.plugin.app; this.scriptPath = this.plugin.settings.scriptFolderPath; + if(!app.vault.getAbstractFileByPath(this.scriptPath)) { + this.scriptPath = null; + return; + } const scripts = app.vault .getFiles() .filter((f: TFile) => f.path.startsWith(this.scriptPath)); @@ -90,7 +94,7 @@ export class ScriptEngine { } const subpath = path.split( - `${this.plugin.settings.scriptFolderPath}/`, + `${this.scriptPath}/`, )[1]; const lastSlash = subpath.lastIndexOf("/"); if (lastSlash > -1) { diff --git a/src/settings.ts b/src/settings.ts index a76023e..5ffbfba 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -123,7 +123,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { plugin: ExcalidrawPlugin; private requestEmbedUpdate: boolean = false; private requestReloadDrawings: boolean = false; - private applyDebounceTimer: number = 0; + //private applyDebounceTimer: number = 0; constructor(app: App, plugin: ExcalidrawPlugin) { super(app, plugin); @@ -131,17 +131,25 @@ export class ExcalidrawSettingTab extends PluginSettingTab { } applySettingsUpdate(requestReloadDrawings: boolean = false) { - clearTimeout(this.applyDebounceTimer); + /*clearTimeout(this.applyDebounceTimer); const plugin = this.plugin; this.applyDebounceTimer = window.setTimeout(() => { plugin.saveSettings(); - }, 100); + }, 500);*/ if (requestReloadDrawings) { this.requestReloadDrawings = true; } } async hide() { + this.plugin.settings.scriptFolderPath = normalizePath(this.plugin.settings.scriptFolderPath); + if ( + this.plugin.settings.scriptFolderPath === "/" || + this.plugin.settings.scriptFolderPath === "" + ) { + this.plugin.settings.scriptFolderPath = "Excalidraw/Scripts"; + } + this.plugin.saveSettings(); if (this.requestReloadDrawings) { const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW); @@ -157,13 +165,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab { if (this.requestEmbedUpdate) { this.plugin.triggerEmbedUpdates(); } - if ( - this.plugin.settings.scriptFolderPath === "/" || - this.plugin.settings.scriptFolderPath === "" - ) { - this.plugin.settings.scriptFolderPath = "Excalidraw/Scripts"; - this.plugin.saveSettings(); - } this.plugin.scriptEngine.updateScriptPath(); } @@ -220,7 +221,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { .setPlaceholder("Excalidraw/Scripts") .setValue(this.plugin.settings.scriptFolderPath) .onChange(async (value) => { - this.plugin.settings.scriptFolderPath = normalizePath(value); + this.plugin.settings.scriptFolderPath = value; this.applySettingsUpdate(); }), ); diff --git a/versions.json b/versions.json index c965c1a..1aa2c19 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,4 @@ { - "1.5.15": "0.12.16", + "1.5.16": "0.12.16", "1.4.2": "0.11.13" }