From a43dc4e6f8ca19f664d09410086884458012d4a1 Mon Sep 17 00:00:00 2001 From: Matthias Lehner <143808484+matthiaslehnertum@users.noreply.github.com> Date: Thu, 11 Apr 2024 10:18:40 +0200 Subject: [PATCH] General: Reduce Sidebar Width (#350) --- src/main/components/create-pane/create-pane.tsx | 6 +++++- .../create-pane/preview-element-component.tsx | 9 ++++++--- src/main/components/sidebar/sidebar-styles.ts | 6 ++++-- .../packages/common/color-legend/color-legend.ts | 2 +- .../flowchart/flowchart-diagram-preview.ts | 7 +++++-- .../reachability-graph-preview.ts | 2 +- src/main/services/uml-element/uml-element.ts | 2 +- .../__snapshots__/assessable-test.tsx.snap | 6 +++--- .../bpmn-annotation-component-test.tsx.snap | 8 ++++---- .../bpmn-call-activity-component-test.tsx.snap | 8 ++++---- .../__snapshots__/bpmn-data-object-test.tsx.snap | 8 ++++---- .../__snapshots__/bpmn-data-object-test.tsx.snap | 14 +++++++------- .../bpmn-group-component-test.tsx.snap | 6 +++--- .../bpmn-transaction-component-test.tsx.snap | 2 +- .../bpmn-subprocess-component-test.tsx.snap | 12 ++++++------ .../bpmn-swimlane-component-test.tsx.snap | 2 +- .../bpmn-task-component-test.tsx.snap | 6 +++--- .../bpmn-transaction-component-test.tsx.snap | 10 +++++----- .../flowchart-decision-component-test.tsx.snap | 8 ++++---- ...flowchart-function-call-component-test.tsx.snap | 10 +++++----- .../flowchart-input-output-component-test.tsx.snap | 8 ++++---- .../flowchart-process-component-test.tsx.snap | 6 +++--- .../flowchart-terminal-component-test.tsx.snap | 6 +++--- .../nonterminal-component-test.tsx.snap | 6 +++--- .../__snapshots__/terminal-component-test.tsx.snap | 6 +++--- ...uml-activity-merge-node-component-test.tsx.snap | 8 ++++---- ...ml-activity-object-node-component-test.tsx.snap | 6 +++--- .../uml-component-component-test.tsx.snap | 2 +- ...uml-deployment-artifact-component-test.tsx.snap | 2 +- .../uml-deployment-node-component-test.tsx.snap | 6 +++--- ...chability-graph-marking-component-test.tsx.snap | 4 ++-- 31 files changed, 103 insertions(+), 91 deletions(-) diff --git a/src/main/components/create-pane/create-pane.tsx b/src/main/components/create-pane/create-pane.tsx index f1c221df2..2b8350734 100644 --- a/src/main/components/create-pane/create-pane.tsx +++ b/src/main/components/create-pane/create-pane.tsx @@ -35,6 +35,7 @@ type OwnProps = {}; type StateProps = { type: UMLDiagramType; colorEnabled: boolean; + previewScaleFactor?: number; }; type DispatchProps = { @@ -121,7 +122,10 @@ class CreatePaneComponent extends Component { .map((preview, index) => { const { styles: previewStyles } = preview; return ( -
+
); diff --git a/src/main/components/create-pane/preview-element-component.tsx b/src/main/components/create-pane/preview-element-component.tsx index 33ac71f7e..c88cf6bfa 100644 --- a/src/main/components/create-pane/preview-element-component.tsx +++ b/src/main/components/create-pane/preview-element-component.tsx @@ -9,14 +9,17 @@ import { hoverable } from '../uml-element/hoverable/hoverable'; type Props = { element: UMLElement; create: (element: UMLElement, owner?: string) => void; + scale?: number; }; -export const Preview = styled(hoverable(CanvasElement)).attrs({ +export const Preview = styled(hoverable(CanvasElement)).attrs((props: { scale?: number }) => ({ child: CanvasElement, -})` - margin: 8px; + scale: props.scale, +}))` overflow: visible; fill: white; + scale: ${(props) => props.scale ?? 0.8}; + transform-origin: center center; `; export class PreviewElementComponent extends Component { diff --git a/src/main/components/sidebar/sidebar-styles.ts b/src/main/components/sidebar/sidebar-styles.ts index 10e1b0437..f0fb0ca0d 100644 --- a/src/main/components/sidebar/sidebar-styles.ts +++ b/src/main/components/sidebar/sidebar-styles.ts @@ -3,14 +3,16 @@ import styled from 'styled-components'; export type ContainerProps = {}; export const Container = styled.aside.attrs({})` - flex: 0 0 230px; + flex: 0 0 148px; padding: 0 10px; height: 100%; min-height: inherit; max-height: inherit; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; display: flex; flex-direction: column; + align-items: center; svg { display: block; diff --git a/src/main/packages/common/color-legend/color-legend.ts b/src/main/packages/common/color-legend/color-legend.ts index 0fc361da5..dffec3370 100644 --- a/src/main/packages/common/color-legend/color-legend.ts +++ b/src/main/packages/common/color-legend/color-legend.ts @@ -9,7 +9,7 @@ export class ColorLegend extends UMLElement { type: UMLElementType = ColorLegendElementType.ColorLegend; constructor(values?: DeepPartial) { - super(values && !values.bounds ? { ...values, bounds: { x: 0, y: 0, width: 200, height: 50 } } : values); + super(values && !values.bounds ? { ...values, bounds: { x: 0, y: 0, width: 160, height: 50 } } : values); } render(canvas: ILayer): ILayoutable[] { diff --git a/src/main/packages/flowchart/flowchart-diagram-preview.ts b/src/main/packages/flowchart/flowchart-diagram-preview.ts index aff64373b..89c454399 100644 --- a/src/main/packages/flowchart/flowchart-diagram-preview.ts +++ b/src/main/packages/flowchart/flowchart-diagram-preview.ts @@ -12,7 +12,7 @@ export const composeFlowchartPreview: ComposePreview = ( translate: (id: string) => string, ): PreviewElement[] => { const elements: PreviewElement[] = []; - const defaultBounds: IBoundary = { x: 0, y: 0, width: 150, height: computeDimension(1.0, 70) }; + const defaultBounds: IBoundary = { x: 0, y: 0, width: 160, height: computeDimension(1.0, 70) }; elements.push( new FlowchartTerminal({ @@ -38,7 +38,10 @@ export const composeFlowchartPreview: ComposePreview = ( elements.push( new FlowchartInputOutput({ name: translate('packages.Flowchart.FlowchartInputOutput'), - bounds: defaultBounds, + bounds: { + ...defaultBounds, + width: 140, + }, }), ); diff --git a/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts b/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts index 93dc24827..49ec636e6 100644 --- a/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts +++ b/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts @@ -11,7 +11,7 @@ export const composeReachabilityGraphPreview: ComposePreview = ( const umlReachabilityGraphMarking = new UMLReachabilityGraphMarking({ name: translate('packages.ReachabilityGraph.ReachabilityGraphMarking'), - bounds: { x: 0, y: 0, width: 200, height: 100 }, + bounds: { x: 0, y: 0, width: 160, height: 100 }, }); elements.push(umlReachabilityGraphMarking); diff --git a/src/main/services/uml-element/uml-element.ts b/src/main/services/uml-element/uml-element.ts index 43f59a0ae..520e7fc59 100644 --- a/src/main/services/uml-element/uml-element.ts +++ b/src/main/services/uml-element/uml-element.ts @@ -82,7 +82,7 @@ export abstract class UMLElement implements IUMLElement, ILayoutable { id = uuid(); name = ''; abstract type: UMLElementType | UMLRelationshipType | UMLDiagramType; - bounds = { x: 0, y: 0, width: 200, height: 100 }; + bounds = { x: 0, y: 0, width: 160, height: 100 }; owner = null as string | null; highlight?: string; fillColor?: string; diff --git a/src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap b/src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap index d0bb9a53a..82a50def3 100644 --- a/src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap +++ b/src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap @@ -6,7 +6,7 @@ exports[`test assessable HOC display negative score 1`] = ` Annotation diff --git a/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap index f4aba5d8a..e35b32613 100644 --- a/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap @@ -13,20 +13,20 @@ exports[`render the bpmn-call-activity-component 1`] = ` ry="10" stroke="black" stroke-width="3" - width="200" + width="160" /> Call Activity diff --git a/src/tests/unit/packages/bpmn/bpmn-data-object/__snapshots__/bpmn-data-object-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-data-object/__snapshots__/bpmn-data-object-test.tsx.snap index 45f443411..ce708eb82 100644 --- a/src/tests/unit/packages/bpmn/bpmn-data-object/__snapshots__/bpmn-data-object-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-data-object/__snapshots__/bpmn-data-object-test.tsx.snap @@ -8,19 +8,19 @@ exports[`render the bpmn-data-object-component 1`] = ` Data Object diff --git a/src/tests/unit/packages/bpmn/bpmn-data-store/__snapshots__/bpmn-data-object-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-data-store/__snapshots__/bpmn-data-object-test.tsx.snap index 883fd2951..005a4a149 100644 --- a/src/tests/unit/packages/bpmn/bpmn-data-store/__snapshots__/bpmn-data-object-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-data-store/__snapshots__/bpmn-data-object-test.tsx.snap @@ -7,38 +7,38 @@ exports[`render the bpmn-data-store-component 1`] = ` Data Store diff --git a/src/tests/unit/packages/bpmn/bpmn-group/__snapshots__/bpmn-group-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-group/__snapshots__/bpmn-group-component-test.tsx.snap index 710cfef54..dd542e740 100644 --- a/src/tests/unit/packages/bpmn/bpmn-group/__snapshots__/bpmn-group-component-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-group/__snapshots__/bpmn-group-component-test.tsx.snap @@ -20,13 +20,13 @@ exports[`render the bpmn-group-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > Group diff --git a/src/tests/unit/packages/bpmn/bpmn-pool/__snapshots__/bpmn-transaction-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-pool/__snapshots__/bpmn-transaction-component-test.tsx.snap index bbb27cddb..203fafda9 100644 --- a/src/tests/unit/packages/bpmn/bpmn-pool/__snapshots__/bpmn-transaction-component-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-pool/__snapshots__/bpmn-transaction-component-test.tsx.snap @@ -18,7 +18,7 @@ exports[`render the bpmn-pool-component 1`] = ` fill="white" height="100" stroke="black" - width="160" + width="120" x="40" y="0" /> diff --git a/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap index 547b623bb..a596cb9ea 100644 --- a/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap @@ -20,13 +20,13 @@ exports[`render the bpmn-subprocess-component 1`] = ` height="14" stroke="black" width="14" - x="93" + x="73" y="86" /> SyntaxTreeTerminal diff --git a/src/tests/unit/packages/bpmn/bpmn-swimlane/__snapshots__/bpmn-swimlane-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-swimlane/__snapshots__/bpmn-swimlane-component-test.tsx.snap index b9b26a2f3..04c80cdf4 100644 --- a/src/tests/unit/packages/bpmn/bpmn-swimlane/__snapshots__/bpmn-swimlane-component-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-swimlane/__snapshots__/bpmn-swimlane-component-test.tsx.snap @@ -10,7 +10,7 @@ exports[`render the bpmn-swimlane-component 1`] = ` fill="white" height="100" stroke="black" - width="200" + width="160" /> Task diff --git a/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap index 22a415a56..5aab53b1d 100644 --- a/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap +++ b/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap @@ -12,7 +12,7 @@ exports[`render the bpmn-transaction-component 1`] = ` rx="10" ry="10" stroke="black" - width="200" + width="160" /> @@ -30,13 +30,13 @@ exports[`render the bpmn-transaction-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > Transaction diff --git a/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-component-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-component-test.tsx.snap index 008c01e70..2227bd6e6 100644 --- a/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-component-test.tsx.snap +++ b/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-component-test.tsx.snap @@ -8,7 +8,7 @@ exports[`render the flowchart-decision-component 1`] = ` TestDecisionComponent diff --git a/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-component-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-component-test.tsx.snap index dc528dfd4..b631a397d 100644 --- a/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-component-test.tsx.snap +++ b/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-component-test.tsx.snap @@ -18,7 +18,7 @@ exports[`render the flowchart-function-call-component 1`] = ` fill="white" height="100%" stroke="black" - width="180" + width="140" x="10" /> TestFunctionCallComponent diff --git a/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-component-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-component-test.tsx.snap index 3f1992cde..121dd650b 100644 --- a/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-component-test.tsx.snap +++ b/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-component-test.tsx.snap @@ -8,7 +8,7 @@ exports[`render the flowchart-input-output-component 1`] = ` TestInputOutputComponent diff --git a/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-component-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-component-test.tsx.snap index f56f59187..e355ebff3 100644 --- a/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-component-test.tsx.snap +++ b/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-component-test.tsx.snap @@ -17,13 +17,13 @@ exports[`render the flowchart-process-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > TestProcessComponent diff --git a/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-component-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-component-test.tsx.snap index cccd3f61d..ef5d199b4 100644 --- a/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-component-test.tsx.snap +++ b/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-component-test.tsx.snap @@ -19,13 +19,13 @@ exports[`render the flowchart-terminal-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > TestTerminalComponent diff --git a/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/__snapshots__/nonterminal-component-test.tsx.snap b/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/__snapshots__/nonterminal-component-test.tsx.snap index 32948e274..c839c8b0c 100644 --- a/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/__snapshots__/nonterminal-component-test.tsx.snap +++ b/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/__snapshots__/nonterminal-component-test.tsx.snap @@ -19,13 +19,13 @@ exports[`render the syntax-tree-nonterminal-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > TestActivityComponent diff --git a/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/__snapshots__/terminal-component-test.tsx.snap b/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/__snapshots__/terminal-component-test.tsx.snap index e5d701d0e..738185670 100644 --- a/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/__snapshots__/terminal-component-test.tsx.snap +++ b/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/__snapshots__/terminal-component-test.tsx.snap @@ -17,13 +17,13 @@ exports[`render the syntax-tree-terminal-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > SyntaxTreeTerminal diff --git a/src/tests/unit/packages/uml-activity-diagram/uml-activity-merge-node/__snapshots__/uml-activity-merge-node-component-test.tsx.snap b/src/tests/unit/packages/uml-activity-diagram/uml-activity-merge-node/__snapshots__/uml-activity-merge-node-component-test.tsx.snap index fac926f69..069c32e87 100644 --- a/src/tests/unit/packages/uml-activity-diagram/uml-activity-merge-node/__snapshots__/uml-activity-merge-node-component-test.tsx.snap +++ b/src/tests/unit/packages/uml-activity-diagram/uml-activity-merge-node/__snapshots__/uml-activity-merge-node-component-test.tsx.snap @@ -8,7 +8,7 @@ exports[`render the uml-activity-merge-node-component 1`] = ` TestActivityComponent diff --git a/src/tests/unit/packages/uml-activity-diagram/uml-activity-object-node/__snapshots__/uml-activity-object-node-component-test.tsx.snap b/src/tests/unit/packages/uml-activity-diagram/uml-activity-object-node/__snapshots__/uml-activity-object-node-component-test.tsx.snap index c6719fa3b..8002828c8 100644 --- a/src/tests/unit/packages/uml-activity-diagram/uml-activity-object-node/__snapshots__/uml-activity-object-node-component-test.tsx.snap +++ b/src/tests/unit/packages/uml-activity-diagram/uml-activity-object-node/__snapshots__/uml-activity-object-node-component-test.tsx.snap @@ -17,13 +17,13 @@ exports[`test render the uml-activity-object-node-component 1`] = ` height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" > TestActivityComponent diff --git a/src/tests/unit/packages/uml-component-diagram/uml-component/__snapshots__/uml-component-component-test.tsx.snap b/src/tests/unit/packages/uml-component-diagram/uml-component/__snapshots__/uml-component-component-test.tsx.snap index 41fecd199..a7bda401b 100644 --- a/src/tests/unit/packages/uml-component-diagram/uml-component/__snapshots__/uml-component-component-test.tsx.snap +++ b/src/tests/unit/packages/uml-component-diagram/uml-component/__snapshots__/uml-component-component-test.tsx.snap @@ -15,7 +15,7 @@ exports[`render the uml-component-component 1`] = ` width="100%" /> @@ -23,7 +23,7 @@ exports[`render the uml-deployment-node-component 1`] = ` fill="white" height="91" stroke="black" - width="192" + width="152" x="0" y="8" /> diff --git a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-component-test.tsx.snap b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-component-test.tsx.snap index 25a97116d..735f72215 100644 --- a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-component-test.tsx.snap +++ b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-component-test.tsx.snap @@ -19,8 +19,8 @@ exports[`uml-reachability-graph-marking-component render the uml-reachability-gr height="100" pointer-events="none" text-anchor="middle" - width="200" - x="100" + width="160" + x="80" y="50" />