diff --git a/packages/api/src/controllers/files.js b/packages/api/src/controllers/files.js index baebe8066..78a297784 100644 --- a/packages/api/src/controllers/files.js +++ b/packages/api/src/controllers/files.js @@ -155,8 +155,8 @@ module.exports = { }, exportDiagram_meta: true, - async exportDiagram({ filePath, html, css }) { - await fs.writeFile(filePath, getDiagramExport(html, css)); + async exportDiagram({ filePath, html, css, themeType, themeClassName }) { + await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeClassName)); return true; }, }; diff --git a/packages/api/src/utility/getDiagramExport.js b/packages/api/src/utility/getDiagramExport.js index 0fc55becc..3e45fa459 100644 --- a/packages/api/src/utility/getDiagramExport.js +++ b/packages/api/src/utility/getDiagramExport.js @@ -1,21 +1,25 @@ -const getDiagramExport = (html,css) => { - return ` +const getDiagramExport = (html, css, themeType, themeClassName) => { + return ` - + ${html} `; - }; - - module.exports = getDiagramExport; - \ No newline at end of file +}; + +module.exports = getDiagramExport; diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 7e826740c..1fbf52fac 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -43,6 +43,9 @@ import { apiCall } from '../utility/api'; import moveDrag from '../utility/moveDrag'; import { rectanglesHaveIntersection } from './designerMath'; + import { showModal } from '../modals/modalTools'; + import ChooseColorModal from '../modals/ChooseColorModal.svelte'; + import { currentThemeDefinition } from '../stores'; export let value; export let onChange; @@ -371,6 +374,26 @@ arrange(true, false, rect ? { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 } : null); }; + const handleChangeTableColor = table => { + showModal(ChooseColorModal, { + onChange: color => { + callChange(current => { + return { + ...current, + tables: (current?.tables || []).map(table => + table.isSelectedTable + ? { + ...table, + tableColor: color, + } + : table + ), + }; + }); + }, + }); + }; + const performAutoActions = async db => { if (!db) return; @@ -663,6 +686,8 @@ filePath, html: domCanvas.outerHTML, css, + themeType: $currentThemeDefinition?.themeType, + themeClassName: $currentThemeDefinition?.className, }); }); } @@ -723,6 +748,7 @@ onChangeColumn={handleChangeColumn} onAddReferenceByColumn={handleAddReferenceByColumn} onAddAllReferences={handleAddTableReferences} + onChangeTableColor={handleChangeTableColor} onMoveReferences={recomputeReferencePositions} {table} onChangeTable={changeTable} diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 7fc5a1f6a..38e8264ed 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -1,13 +1,15 @@ @@ -169,6 +181,7 @@ import { rectanglesHaveIntersection } from './designerMath'; class:isView={objectTypeField == 'views'} use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null} use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'} + style={getTableColorStyle($currentThemeDefinition, table)} >
{alias || pureName}
{#if settings?.showTableCloseButton} diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index 2754ad61b..965974824 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -18,6 +18,7 @@ canExport: true, canSelectColumns: false, canSelectTables: true, + allowChangeColor: true, }} referenceComponent={DiagramDesignerReference} /> diff --git a/packages/web/src/designer/DiagramDesignerReference.svelte b/packages/web/src/designer/DiagramDesignerReference.svelte index 982ccfc57..e7f599b2a 100644 --- a/packages/web/src/designer/DiagramDesignerReference.svelte +++ b/packages/web/src/designer/DiagramDesignerReference.svelte @@ -91,4 +91,8 @@ stroke: var(--theme-bg-4); stroke-width: 2; } + + polygon { + fill: var(--theme-bg-4); + } diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 9c7898e9a..970f9134c 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -18,6 +18,7 @@ canExport: false, canSelectColumns: true, canSelectTables: false, + allowChangeColor: false, }} referenceComponent={QueryDesignerReference} /> diff --git a/packages/web/src/modals/ChooseColorModal.svelte b/packages/web/src/modals/ChooseColorModal.svelte new file mode 100644 index 000000000..72249acd0 --- /dev/null +++ b/packages/web/src/modals/ChooseColorModal.svelte @@ -0,0 +1,27 @@ + + + + {header} + +
+ {text} +
+ + { + value = e.detail; + onChange(value); + }} + /> +