renun/obsidian-excalidraw-plugin
1
0
Fork 0
mirror of https://github.com/zsviczian/obsidian-excalidraw-plugin.git synced 2025-08-06 05:46:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

2.6.3-beta-1

Browse Source
This commit is contained in:
zsviczian
2024-10-30 23:02:05 +01:00
parent 5972f83369
commit 7233d1e037
7 changed files with 116 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
manifest-beta.json
View File

@@ -1,7 +1,7 @@
{
"id": "obsidian-excalidraw-plugin",
"name": "Excalidraw",
"version": "2.6.2",
"version": "2.6.3-beta-1",
"minAppVersion": "1.1.6",
"description": "An Obsidian plugin to edit and view Excalidraw drawings",
"author": "Zsolt Viczian",

2
package.json
View File

@@ -19,7 +19,7 @@
"license": "MIT",
"dependencies": {
"@popperjs/core": "^2.11.8",
"@zsviczian/excalidraw": "0.17.6-8",
"@zsviczian/excalidraw": "0.17.6-9",
"chroma-js": "^2.4.2",
"clsx": "^2.0.0",
"@zsviczian/colormaster": "^1.2.2",

5
src/EmbeddedFileLoader.ts
View File

@@ -1107,7 +1107,8 @@ export class EmbeddedFilesLoader {
const getSVGData = async (app: App, file: TFile, colorMap: ColorMap | null): Promise<DataURL> => {
const svgString = replaceSVGColors(await app.vault.read(file), colorMap) as string;
return svgToBase64(svgString) as DataURL;
/*
try {
const container = document.createElement('div');
container.innerHTML = svgString;
@@ -1147,7 +1148,7 @@ const getSVGData = async (app: App, file: TFile, colorMap: ColorMap | null): Pro
} catch (error) {
errorlog({ where: "EmbeddedFileLoader.getSVGData", error });
return svgToBase64(svgString) as DataURL;
}
}*/
};
/*export const generateIdFromFile = async (file: ArrayBuffer): Promise<FileId> => {

41
src/ExcalidrawAutomate.ts
View File

@@ -2621,26 +2621,31 @@ export class ExcalidrawAutomate {
return null;
}
const size = await this.getOriginalImageSize(imgEl, true);
if (size) {
const originalArea = imgEl.width * imgEl.height;
const originalAspectRatio = size.width / size.height;
let newWidth = Math.sqrt(originalArea * originalAspectRatio);
let newHeight = Math.sqrt(originalArea / originalAspectRatio);
const centerX = imgEl.x + imgEl.width / 2;
const centerY = imgEl.y + imgEl.height / 2;
let originalArea, originalAspectRatio;
if(imgEl.crop) {
originalArea = imgEl.width * imgEl.height;
originalAspectRatio = imgEl.crop.width / imgEl.crop.height;
} else {
const size = await this.getOriginalImageSize(imgEl, true);
if (!size) { return false; }
originalArea = imgEl.width * imgEl.height;
originalAspectRatio = size.width / size.height;
}
let newWidth = Math.sqrt(originalArea * originalAspectRatio);
let newHeight = Math.sqrt(originalArea / originalAspectRatio);
const centerX = imgEl.x + imgEl.width / 2;
const centerY = imgEl.y + imgEl.height / 2;
if (newWidth !== imgEl.width || newHeight !== imgEl.height) {
if(!this.getElement(imgEl.id)) {
this.copyViewElementsToEAforEditing([imgEl]);
}
const eaEl = this.getElement(imgEl.id);
eaEl.width = newWidth;
eaEl.height = newHeight;
eaEl.x = centerX - newWidth / 2;
eaEl.y = centerY - newHeight / 2;
return true;
if (newWidth !== imgEl.width || newHeight !== imgEl.height) {
if(!this.getElement(imgEl.id)) {
this.copyViewElementsToEAforEditing([imgEl]);
}
const eaEl = this.getElement(imgEl.id);
eaEl.width = newWidth;
eaEl.height = newHeight;
eaEl.x = centerX - newWidth / 2;
eaEl.y = centerY - newHeight / 2;
return true;
}
return false;
}

5
src/ExcalidrawView.ts
View File

@@ -3985,6 +3985,11 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
(process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onPaste, "ExcalidrawView.onPaste", data, event);
const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
const ea = this.getHookServer();
if(data?.elements) {
data.elements
.filter(el=>el.type==="text" && !el.hasOwnProperty("rawText"))
.forEach(el=>(el as Mutable<ExcalidrawTextElement>).rawText = (el as ExcalidrawTextElement).originalText);
};
if(data && ea.onPasteHook) {
const res = ea.onPasteHook({
ea,

10
src/main.ts
View File

@@ -1871,9 +1871,13 @@ export default class ExcalidrawPlugin extends Plugin {
const size = await ea.getOriginalImageSize(el);
if(size) {
ea.copyViewElementsToEAforEditing(els);
const eaEl = ea.getElement(el.id);
//@ts-ignore
eaEl.width = size.width; eaEl.height = size.height;
const eaEl = ea.getElement(el.id) as Mutable<ExcalidrawImageElement>;
if(eaEl.crop) {
eaEl.width = eaEl.crop.width;
eaEl.height = eaEl.crop.height;
} else {
eaEl.width = size.width; eaEl.height = size.height;
}
await ea.addElementsToView(false,false,false);
}
ea.destroy();

100
src/utils/Utils.ts
View File

@@ -18,7 +18,7 @@ import {
getContainerElement,
} from "../constants/constants";
import ExcalidrawPlugin from "../main";
import { ExcalidrawElement, ExcalidrawTextElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
import { ExcalidrawElement, ExcalidrawTextElement, ImageCrop } from "@zsviczian/excalidraw/types/excalidraw/element/types";
import { ExportSettings } from "../ExcalidrawView";
import { getDataURLFromURL, getIMGFilename, getMimeType, getURLImageExtension } from "./FileUtils";
import { generateEmbeddableLink } from "./CustomEmbeddableUtils";
@@ -30,6 +30,7 @@ import { CropImage } from "./CropImage";
import opentype from 'opentype.js';
import { runCompressionWorker } from "src/workers/compression-worker";
import Pool from "es6-promise-pool";
import { FileData } from "src/EmbeddedFileLoader";
declare const PLUGIN_VERSION:string;
declare var LZString: any;
@@ -428,14 +429,14 @@ export function addAppendUpdateCustomData (el: Mutable<ExcalidrawElement>, newDa
export function scaleLoadedImage (
scene: any,
files: any
files: FileData[],
): { dirty: boolean; scene: any } {
let dirty = false;
if (!files || !scene) {
return { dirty, scene };
}
for (const f of files.filter((f:any)=>{
for (const img of files.filter((f:any)=>{
if(!Boolean(EXCALIDRAW_PLUGIN)) return true; //this should never happen
const ef = EXCALIDRAW_PLUGIN.filesMaster.get(f.id);
if(!ef) return true; //mermaid SVG or equation
@@ -443,34 +444,85 @@ export function scaleLoadedImage (
if(!file || (file instanceof TFolder)) return false;
return (file as TFile).extension==="md" || EXCALIDRAW_PLUGIN.isExcalidrawFile(file as TFile)
})) {
const [w_image, h_image] = [f.size.width, f.size.height];
const imageAspectRatio = f.size.width / f.size.height;
const [imgWidth, imgHeight] = [img.size.width, img.size.height];
const imgAspectRatio = imgWidth / imgHeight;
scene.elements
.filter((e: any) => e.type === "image" && e.fileId === f.id)
.filter((e: any) => e.type === "image" && e.fileId === img.id)
.forEach((el: any) => {
const [w_old, h_old] = [el.width, el.height];
if(el.customData?.isAnchored && f.shouldScale || !el.customData?.isAnchored && !f.shouldScale) {
addAppendUpdateCustomData(el, f.shouldScale ? {isAnchored: false} : {isAnchored: true});
const [elWidth, elHeight] = [el.width, el.height];
const maintainArea = img.shouldScale; //true if image should maintain its area, false if image should display at 100% its size
const elCrop: ImageCrop = el.crop;
const isCropped = Boolean(elCrop);
if(el.customData?.isAnchored && img.shouldScale || !el.customData?.isAnchored && !img.shouldScale) {
//customData.isAnchored is used by the Excalidraw component to disable resizing of anchored images
//customData.isAnchored has no direct role in the calculation in the scaleLoadedImage function
addAppendUpdateCustomData(el, img.shouldScale ? {isAnchored: false} : {isAnchored: true});
dirty = true;
}
if(f.shouldScale) {
const elementAspectRatio = w_old / h_old;
if (imageAspectRatio !== elementAspectRatio) {
if(isCropped) {
if(elCrop.naturalWidth !== imgWidth || elCrop.naturalHeight !== imgHeight) {
dirty = true;
const h_new = Math.sqrt((w_old * h_old * h_image) / w_image);
const w_new = Math.sqrt((w_old * h_old * w_image) / h_image);
el.height = h_new;
el.width = w_new;
el.y += (h_old - h_new) / 2;
el.x += (w_old - w_new) / 2;
//the current crop area may be maintained, need to calculate the new crop.x, crop.y offsets
el.crop.y += (imgHeight - elCrop.naturalHeight)/2;
if(imgWidth < elCrop.width) {
const scaleX = el.width / elCrop.width;
el.crop.x = 0;
el.crop.width = imgWidth;
el.width = imgWidth * scaleX;
} else {
const ratioX = elCrop.x / (elCrop.naturalWidth - elCrop.x - elCrop.width);
const gapX = imgWidth - elCrop.width;
el.crop.x = ratioX * gapX / (1 + ratioX);
// const ratioA = elCrop.x / (elCrop.naturalWidth - elCrop.x);
// el.crop.x = ratioA * imgWidth / (1 + ratioA);
if(el.crop.x + elCrop.width > imgWidth) {
el.crop.x = (imgWidth - elCrop.width) / 2;
}
}
if(imgHeight < elCrop.height) {
const scaleY = el.height / elCrop.height;
el.crop.y = 0;
el.crop.height = imgHeight;
el.height = imgHeight * scaleY;
} else {
const ratioY = elCrop.y / (elCrop.naturalHeight - elCrop.y - elCrop.height);
const gapY = imgHeight - elCrop.height;
el.crop.y = ratioY * gapY / (1 + ratioY);
// const ratioB = elCrop.y / (elCrop.naturalHeight - elCrop.y);
// el.crop.y = ratioB * imgHeight / (1 + ratioB);
if(el.crop.y + elCrop.height > imgHeight) {
el.crop.y = (imgHeight - elCrop.height)/2;
}
}
el.crop.naturalWidth = imgWidth;
el.crop.naturalHeight = imgHeight;
const noCrop = el.crop.width === imgWidth && el.crop.height === imgHeight;
if(noCrop) {
el.crop = null;
}
}
} else {
if(w_old !== w_image || h_old !== h_image) {
} else if(maintainArea) {
const elAspectRatio = elWidth / elHeight;
if (imgAspectRatio !== elAspectRatio) {
dirty = true;
el.height = h_image;
el.width = w_image;
el.y += (h_old - h_image) / 2;
el.x += (w_old - w_image) / 2;
const elNewHeight = Math.sqrt((elWidth * elHeight * imgHeight) / imgWidth);
const elNewWidth = Math.sqrt((elWidth * elHeight * imgWidth) / imgHeight);
el.height = elNewHeight;
el.width = elNewWidth;
el.y += (elHeight - elNewHeight) / 2;
el.x += (elWidth - elNewWidth) / 2;
}
} else { //100% size
if(elWidth !== imgWidth || elHeight !== imgHeight) {
dirty = true;
el.height = imgHeight;
el.width = imgWidth;
el.y += (elHeight - imgHeight) / 2;
el.x += (elWidth - imgWidth) / 2;
}
}
});