diff --git a/docs/tdev/gallery/tools/image-markup/images/demo.svg b/docs/tdev/gallery/tools/image-markup/images/demo.svg index e7de32b80..a9cf846c4 100644 --- a/docs/tdev/gallery/tools/image-markup/images/demo.svg +++ b/docs/tdev/gallery/tools/image-markup/images/demo.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/tdev/gallery/tools/image-markup/images/demo.svg.excalidraw b/docs/tdev/gallery/tools/image-markup/images/demo.svg.excalidraw index fe9f61c88..4f5724ecc 100644 --- a/docs/tdev/gallery/tools/image-markup/images/demo.svg.excalidraw +++ b/docs/tdev/gallery/tools/image-markup/images/demo.svg.excalidraw @@ -2,6 +2,34 @@ "type": "excalidraw", "version": 2, "elements": [ + { + "id": "TDEV-STANDALONE-DRAWING", + "type": "rectangle", + "x": -423.0333231608073, + "y": -271.4722315470378, + "width": 833.3333129882812, + "height": 530.6666870117188, + "strokeColor": "#1e1e1ea1", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 0.05, + "strokeStyle": "dotted", + "roughness": 0, + "opacity": 100, + "locked": true, + "version": 2, + "versionNonce": 943970152, + "index": "Zz", + "isDeleted": false, + "angle": 0, + "seed": 1, + "groupIds": [], + "frameId": null, + "roundness": null, + "boundElements": [], + "updated": 1763308684156, + "link": null + }, { "id": "IuZRsqPjub8yxxLCdL9gL", "type": "diamond", @@ -24,11 +52,11 @@ "type": 2 }, "seed": 306917131, - "version": 56, - "versionNonce": 2025318123, + "version": 59, + "versionNonce": 1746086936, "isDeleted": false, "boundElements": [], - "updated": 1755449004392, + "updated": 1763308785072, "link": null, "locked": false }, @@ -84,11 +112,11 @@ "type": 2 }, "seed": 2085431371, - "version": 404, - "versionNonce": 579981707, + "version": 423, + "versionNonce": 1334799638, "isDeleted": false, "boundElements": [], - "updated": 1755449004392, + "updated": 1763333706415, "link": null, "locked": false } diff --git a/docs/tdev/gallery/tools/image-markup/images/demo.webp.excalidraw b/docs/tdev/gallery/tools/image-markup/images/demo.webp.excalidraw new file mode 100644 index 000000000..6818244ab --- /dev/null +++ b/docs/tdev/gallery/tools/image-markup/images/demo.webp.excalidraw @@ -0,0 +1,159 @@ +{ + "type": "excalidraw", + "version": 2, + "elements": [ + { + "id": "TDEV-STANDALONE-DRAWING", + "type": "rectangle", + "x": 153.2972391220263, + "y": 80.77144694572988, + "width": 68.4215891178082, + "height": 68.73871016204396, + "strokeColor": "#1e1e1ea1", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 0.05, + "strokeStyle": "dotted", + "roughness": 0, + "opacity": 100, + "locked": true, + "version": 2, + "versionNonce": 45026934, + "index": "a0", + "isDeleted": false, + "angle": 0, + "seed": 1, + "groupIds": [], + "frameId": null, + "roundness": null, + "boundElements": [], + "updated": 1763331244365, + "link": null, + "customData": { + "scale": 20, + "exportPadding": 4 + } + }, + { + "id": "f6J6K1wrWJi5eNBt8MvZb", + "type": "diamond", + "x": 163.6588626033281, + "y": 95.29143813325153, + "width": 46.42277811615982, + "height": 34.40661337504243, + "angle": 5.478114399932058, + "strokeColor": "#e03131", + "backgroundColor": "#ffc9c9", + "fillStyle": "hachure", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "groupIds": [], + "frameId": null, + "index": "a1", + "roundness": { + "type": 2 + }, + "seed": 1748157208, + "version": 283, + "versionNonce": 86830616, + "isDeleted": false, + "boundElements": [], + "updated": 1763331246962, + "link": null, + "locked": false + }, + { + "id": "jqOrOKruzPBx9DiZSO44T", + "type": "ellipse", + "x": 181.95561180701282, + "y": 103.38465093816218, + "width": 18.03080681900128, + "height": 18.03080681900128, + "angle": 4.71238898038469, + "strokeColor": "transparent", + "backgroundColor": "#ffffff", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "groupIds": [], + "frameId": null, + "index": "a2", + "roundness": { + "type": 2 + }, + "seed": 1744920, + "version": 541, + "versionNonce": 1922525976, + "isDeleted": false, + "boundElements": [], + "updated": 1763331246962, + "link": null, + "locked": false + }, + { + "id": "ztn5FE34qIkFrwD-1hrdi", + "type": "ellipse", + "x": 181.95561180701282, + "y": 103.38465093969332, + "width": 18.03080681900128, + "height": 18.03080681900128, + "angle": 4.71238898038469, + "strokeColor": "#e03131", + "backgroundColor": "#ffec99", + "fillStyle": "hachure", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "groupIds": [], + "frameId": null, + "index": "a3", + "roundness": { + "type": 2 + }, + "seed": 1761533208, + "version": 535, + "versionNonce": 665471000, + "isDeleted": false, + "boundElements": [], + "updated": 1763331246962, + "link": null, + "locked": false + }, + { + "id": "Q3elwXLTOurV93tGOlXIX", + "type": "rectangle", + "x": 164.29664461609673, + "y": 97.62899679240267, + "width": 46.422778129667336, + "height": 35.023610468698365, + "angle": 5.478114399932058, + "strokeColor": "#e03131", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 11, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "groupIds": [], + "frameId": null, + "index": "a4", + "roundness": { + "type": 3 + }, + "seed": 72579608, + "version": 291, + "versionNonce": 1039922024, + "isDeleted": false, + "boundElements": [], + "updated": 1763331374164, + "link": null, + "locked": false + } + ], + "files": {} +} \ No newline at end of file diff --git a/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg b/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg index 8748eed2e..33bbd5ad8 100644 Binary files a/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg and b/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg differ diff --git a/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg.excalidraw b/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg.excalidraw index 98eb50e95..512393e01 100644 --- a/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg.excalidraw +++ b/docs/tdev/gallery/tools/image-markup/images/image-structure.jpg.excalidraw @@ -19,12 +19,10 @@ ], "locked": true, "customData": { - "exportFormatMimeType": "image/jpeg", - "scale": 1, - "initExtension": ".jpg" + "scale": 2 }, "version": 2, - "versionNonce": 1904448331, + "versionNonce": 1904448334, "index": "a0", "fillStyle": "solid", "strokeWidth": 2, diff --git a/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp b/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp index bd7ad7410..426af8464 100644 Binary files a/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp and b/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp differ diff --git a/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp.excalidraw b/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp.excalidraw index dd75ecf28..c8a6c60a1 100644 --- a/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp.excalidraw +++ b/docs/tdev/gallery/tools/image-markup/images/save-as-webp.webp.excalidraw @@ -20,11 +20,11 @@ "locked": true, "customData": { "exportFormatMimeType": "image/webp", - "scale": 0.4038364462, - "initExtension": ".webp" + "exportPadding": 2, + "scale": 2 }, "version": 2, - "versionNonce": 1141052185, + "versionNonce": 1141052194, "index": "a0", "fillStyle": "solid", "strokeWidth": 2, @@ -412,51 +412,6 @@ "originalText": "1", "autoResize": true, "lineHeight": 1.15 - }, - { - "id": "Lj1WGHyEa6pCEoeS9CEQ0", - "type": "line", - "x": -44.888824076497336, - "y": 36.26413686658643, - "width": 0, - "height": 145.33333333333337, - "angle": 0, - "strokeColor": "transparent", - "backgroundColor": "transparent", - "fillStyle": "solid", - "strokeWidth": 4, - "strokeStyle": "solid", - "roughness": 0, - "opacity": 100, - "groupIds": [], - "frameId": null, - "index": "aH", - "roundness": { - "type": 2 - }, - "seed": 1168197022, - "version": 70, - "versionNonce": 1798543554, - "isDeleted": false, - "boundElements": [], - "updated": 1754817126541, - "link": null, - "locked": false, - "points": [ - [ - 0, - 0 - ], - [ - 0, - 145.33333333333337 - ] - ], - "lastCommittedPoint": null, - "startBinding": null, - "endBinding": null, - "startArrowhead": null, - "endArrowhead": null } ], "files": { diff --git a/docs/tdev/gallery/tools/image-markup/index.mdx b/docs/tdev/gallery/tools/image-markup/index.mdx index dc147cd52..99f44924d 100644 --- a/docs/tdev/gallery/tools/image-markup/index.mdx +++ b/docs/tdev/gallery/tools/image-markup/index.mdx @@ -6,7 +6,7 @@ tags: [excalidraw, bilder] # Bilder Annotieren :::warning[Nur für Chrome-Browser] -Die Excalidraw-Integration für das Editieren von Bildern basiert auf der [Local File System Access API](https://developer.mozilla.org/de/docs/Web/API/Window/showOpenFilePicker), welche aktuell nur unter Chrome-basierten Browsern (z.B. Google Chrome, Microsoft Edge) unterstützt wird. +Die Excalidraw-Integration für das Editieren von Bildern basiert auf der [Local File System Access API](https://developer.mozilla.org/de/docs/Web/API/Window/showOpenFilePicker), welche aktuell nur unter Chromium-basierten Browsern (z.B. Google Chrome, Microsoft Edge) unterstützt wird. ::: Oft müssen Screenshots oder Bilder annotiert werden. Ansich praktisch, bis sich das Bild ändert, die Anmerkungen aber eigentlich gleich bleiben (z.B. wenn das neue Excel eine leicht andere Benutzeroberfläche hat). @@ -103,6 +103,8 @@ Sobald das SVG-Bild bearbeitet wird, wird die entsprechende `demo.svg.excalidraw :::note[Technischer Hintergrund] Ob ein Hintergrundbild vorhanden ist oder nicht, wird vom Vorhandensein einer Element- & File-ID `TDEV-BACKGROUND-IMAGE` bzw. `TDEV-BACKGROUND--FILE` abgeleitet. Ist keine ID vorhanden, wird stets die Bild-Erweiterung (`.png`, `.jpg`, `.svg`, `.webp`) für das Export-Format verwendet. + +Für Zeichnungen ohne Hintergrundbild wird ein Meta-Element `TDEV-STANDALONE-DRAWING` hinzugefügt, welches zusätzliche Export-relevante Informationen enthält. ::: :::info[Empfohlenes Export-Format für reine Excalidraw Bilder] diff --git a/packages/tdev/excalidoc/ImageMarkupEditor/TopRightUi/UpdateCustomProps/index.tsx b/packages/tdev/excalidoc/ImageMarkupEditor/TopRightUi/UpdateCustomProps/index.tsx new file mode 100644 index 000000000..7cb379812 --- /dev/null +++ b/packages/tdev/excalidoc/ImageMarkupEditor/TopRightUi/UpdateCustomProps/index.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import clsx from 'clsx'; +import { PopupActions } from 'reactjs-popup/dist/types'; +import Popup from 'reactjs-popup'; +import { mdiCog, mdiFileReplace } from '@mdi/js'; +import Button from '@tdev-components/shared/Button'; +import JsObjectEditor from '@tdev-components/shared/JsObject/Editor'; +import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types'; +import { getMetaElementFromScene } from '../../helpers/getElementsFromScene'; +import { getCustomProps, CustomProps, updateCustomProps } from '../../helpers/customProps'; +import { JsTypes } from '@tdev-components/shared/JsObject/toJsSchema'; +import Card from '@tdev-components/shared/Card'; +import { SIZE_S } from '@tdev-components/shared/iconSizes'; + +interface Props { + api: ExcalidrawImperativeAPI; + onSave: () => void; + className?: string; +} + +const UpdateCustomProps = (props: Props) => { + const ref = React.useRef(null); + const [isOpen, setIsOpen] = React.useState(false); + const [tdevProps, setTdevProps] = React.useState(getCustomProps()); + + return ( + +