diff --git a/src/backend/default_canvas.json b/src/backend/default_canvas.json index 8abf154..3ecb6dc 100644 --- a/src/backend/default_canvas.json +++ b/src/backend/default_canvas.json @@ -2146,21 +2146,21 @@ "lastCommittedPoint": null }, { - "x": 0, - "y": 0, + "x": 20, + "y": -20, "id": "1igpgsvrsh3", "link": "!dashboard", "seed": 76441, "type": "embeddable", "angle": 0, "index": "b0q", - "width": 340, - "height": 280, + "width": 420, + "height": 320, "locked": false, "frameId": null, "opacity": 100, - "updated": 1744437345493, - "version": 1890, + "updated": 1745779075413, + "version": 2052, "groupIds": [], "fillStyle": "solid", "isDeleted": false, @@ -2172,40 +2172,13 @@ "strokeColor": "#ced4da", "strokeStyle": "solid", "strokeWidth": 2, - "versionNonce": 1530984984, + "versionNonce": 692312488, "boundElements": [], - "backgroundColor": "#e9ecef" - }, - { - "x": 755.6666259765625, - "y": 137.1666259765625, - "id": "g8btk6ouog", - "link": "https://coder.pad.ws/@romaincourtoismails/ubuntu.main/terminal", - "seed": 2344, - "type": "embeddable", - "angle": 0, - "index": "b0r", - "width": 600, - "height": 400, - "locked": false, - "frameId": null, - "opacity": 100, - "updated": 1744437380078, - "version": 3, - "groupIds": [], - "fillStyle": "solid", - "isDeleted": true, - "roughness": 1, - "roundness": { - "type": 3 - }, - "isSelected": true, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "versionNonce": 748163688, - "boundElements": null, - "backgroundColor": "#ffffff" + "backgroundColor": "#e9ecef", + "customData": { + "showHyperlinkIcon": false + } } ] -} \ No newline at end of file +} + diff --git a/src/frontend/index.scss b/src/frontend/index.scss index c302f5a..9807f32 100644 --- a/src/frontend/index.scss +++ b/src/frontend/index.scss @@ -39,11 +39,6 @@ body { display: none !important; } -.excalidraw__embeddable__outer { - padding: 0px !important; - pointer-events: all !important; -} - .excalidraw .layer-ui__wrapper__top-right { gap: 0rem; } @@ -67,4 +62,21 @@ body { .excalidraw .Modal__content { animation: Modal__content_fade-in 0.3s ease-out forwards !important; -} \ No newline at end of file +} + +/* Embeddables */ + +.excalidraw__embeddable-container { /* 1st layer */ + display: block; +} + +.excalidraw__embeddable-container__inner { /* 2nd layer */ + border-color: #525252 !important; + overflow: visible !important; +} + +.excalidraw__embeddable__outer { /* 3rd layer */ + padding: 0px !important; + pointer-events: all !important; + display: flex; +} diff --git a/src/frontend/package.json b/src/frontend/package.json index 48e8371..d68c2be 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "private": true, "dependencies": { - "@atyrode/excalidraw": "^0.18.0-2", + "@atyrode/excalidraw": "^0.18.0-3", "@monaco-editor/react": "^4.7.0", "@tanstack/react-query": "^5.74.3", "@tanstack/react-query-devtools": "^5.74.3", diff --git a/src/frontend/src/CustomEmbeddableRenderer.scss b/src/frontend/src/CustomEmbeddableRenderer.scss index a5d9bc2..7e8bb3d 100644 --- a/src/frontend/src/CustomEmbeddableRenderer.scss +++ b/src/frontend/src/CustomEmbeddableRenderer.scss @@ -1,6 +1,34 @@ -.custom-rendered-embeddable { +.custom-embed { height: 100%; width: 100%; - position: absolute; - z-index: 1; -} + display: flex; + justify-content: center; + border: 0px !important; + + &__title-bar { + position: absolute; + top: -30px; + pointer-events: none; + + &__text { + font-family: 'Roboto', sans-serif; + color: #d3d3d3; + pointer-events: none; + font-size: 18px; + } + } + + &__content { + height: 100%; + width: 100%; + + &--iframe { + height: 100%; + width: 100%; + border: 0px !important; + overflow: hidden; + border-bottom-left-radius: var(--embeddable-radius); + border-bottom-right-radius: var(--embeddable-radius); + } + } +} \ No newline at end of file diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx index 4e6f7a8..ee65e42 100644 --- a/src/frontend/src/CustomEmbeddableRenderer.tsx +++ b/src/frontend/src/CustomEmbeddableRenderer.tsx @@ -19,29 +19,69 @@ export const renderCustomEmbeddable = ( if (element.link && element.link.startsWith('!')) { let path = element.link.split('!')[1]; + let content; + let title; switch (path) { case 'html': - return ; + content = ; + title = "HTML Editor"; case 'editor': - return ; + content = ; + title = "Code Editor"; + break; case 'state': - return ; + content = ; + title = "State Indicator"; + break; case 'control': - return ; + content = ; + title = "Control Button"; + break; case 'button': - return ; + title = "Action Button"; + break; case 'dashboard': - return ; + content = ; + title = "Dashboard"; + break; default: + title = "Untitled"; return null; } + + if (element.customData?.title) { + title = element.customData.title; + } + + return ( +
+
+
{title}
+
+
+ {content} +
+
+ ); } else { - return