Merge branch 'develop' into feature/zoom-aware-dialog-positions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ls1intum/apollon",
-  "version": "3.3.9",
+  "version": "3.3.12",
   "description": "A UML diagram editor.",
   "keywords": [],
   "homepage": "https://github.com/ls1intum/apollon#readme",
@@ -33,11 +33,7 @@
     "prettier:write": "prettier --write 'src/{main,tests}/**/*.{json,ts,tsx,js,jsx,css,scss,html}'",
     "test": "jest -w=4",
     "test:coverage": "jest --collectCoverage -w=4",
-    "test-cypress": "cypress open",
-    "test-cypress:headless": "cypress run",
     "test:watch": "jest --watch -w=4",
-    "test:e2e": "start-server-and-test start http://localhost:8888 test-cypress",
-    "test:e2e:headless": "start-server-and-test start http://localhost:8888 test-cypress:headless",
     "update": "ncu -i --format group",
     "publish:patch": "npm run prepare && npm run test && npm run docs:copy-api && npm version patch && npm publish",
     "publish:minor": "npm run prepare && npm run test && npm run docs:copy-api && npm version minor && npm publish",
@@ -66,7 +62,7 @@
     "react-redux": "8.1.3",
     "react-tooltip": "4.5.1",
     "redux": "4.2.1",
-    "redux-saga": "1.2.3",
+    "redux-saga": "1.3.0",
     "redux-thunk": "2.4.2",
     "rxjs": "7.8.1",
     "styled-components": "5.3.11",
@@ -77,61 +73,59 @@
     "semver": "7.5.4",
     "word-wrap": "1.2.5",
     "tough-cookie": "4.1.3",
-    "postcss": "8.4.32"
+    "postcss": "8.4.38"
   },
   "devDependencies": {
     "@stylelint/postcss-css-in-js": "0.38.0",
-    "@testing-library/jest-dom": "6.1.5",
-    "@testing-library/react": "14.1.2",
-    "@types/jest": "29.5.11",
-    "@types/react": "18.2.45",
-    "@types/react-color": "3.0.10",
-    "@types/react-dom": "18.2.18",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.3.1",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.2.79",
+    "@types/react-color": "3.0.12",
+    "@types/react-dom": "18.2.25",
     "@types/react-redux": "7.1.33",
     "@types/redux-mock-store": "1.0.6",
     "@types/styled-components": "5.1.34",
-    "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.15.0",
-    "@typescript-eslint/parser": "6.15.0",
+    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
     "chokidar-cli": "3.0.0",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.8.1",
-    "cypress": "13.6.1",
-    "cypress-real-events": "1.11.0",
-    "eslint": "8.56.0",
+    "css-loader": "6.11.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsdoc": "46.9.1",
+    "eslint-plugin-jsdoc": "46.10.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-prettier": "5.1.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.34.1",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "html-webpack-plugin": "5.6.0",
     "husky": "8.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-html-reporter": "3.10.2",
     "jest-styled-components": "7.2.0",
-    "lint-staged": "15.2.0",
+    "lint-staged": "15.2.2",
     "pinst": "3.0.0",
-    "postcss": "8.4.32",
+    "postcss": "8.4.38",
     "postcss-syntax": "0.36.2",
-    "prettier": "3.1.1",
+    "prettier": "3.2.5",
     "redux-mock-store": "1.5.4",
     "serve": "14.2.1",
     "sleep-promise": "9.1.0",
     "start-server-and-test": "2.0.3",
-    "style-loader": "3.3.3",
-    "stylelint": "16.0.2",
+    "style-loader": "3.3.4",
+    "stylelint": "16.3.1",
     "stylelint-config-recommended": "14.0.0",
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.10.0",
-    "ts-jest": "29.1.1",
+    "ts-jest": "29.1.2",
     "ts-loader": "9.5.1",
-    "typescript": "5.3.3",
-    "webpack": "5.89.0",
+    "typescript": "5.4.5",
+    "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "4.15.2",
     "webpack-merge": "5.10.0"
   }
 }

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<Props, State> {
       .map((preview, index) => {
         const { styles: previewStyles } = preview;
         return (
-          <div style={previewStyles} key={index}>
+          <div
+            style={{ ...previewStyles, height: preview.bounds.height * (this.props?.previewScaleFactor ?? 0.8) + 8 }}
+            key={index}
+          >
             <PreviewElementComponent element={preview} create={this.create} />
           </div>
         );

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<Props> {

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<ContainerProps>({})<ContainerProps>`
-  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;

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<IUMLElement>) {
-    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[] {

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,
+      },
     }),
   );
 

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);

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;

src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap

@@ -6,7 +6,7 @@ exports[`test assessable HOC display negative score 1`] = `
     <svg>
       <g
         pointer-events="none"
-        transform="translate(200 0)"
+        transform="translate(160 0)"
       >
         <circle
           class="sc-kpDqfm"
@@ -42,7 +42,7 @@ exports[`test assessable HOC display neutral score 1`] = `
     <svg>
       <g
         pointer-events="none"
-        transform="translate(200 0)"
+        transform="translate(160 0)"
       >
         <circle
           class="sc-kpDqfm"
@@ -78,7 +78,7 @@ exports[`test assessable HOC display positive score 1`] = `
     <svg>
       <g
         pointer-events="none"
-        transform="translate(200 0)"
+        transform="translate(160 0)"
       >
         <circle
           class="sc-kpDqfm"

src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`render the bpmn-annotation-component 1`] = `
           rx="10"
           ry="10"
           stroke="transparent"
-          width="200"
+          width="160"
         />
         <path
           class="sc-gEvEer JpXgg"
@@ -25,13 +25,13 @@ exports[`render the bpmn-annotation-component 1`] = `
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Annotation
           </tspan>

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"
         />
         <text
           font-weight="bold"
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Call Activity
           </tspan>

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`] = `
         <polyline
           class="sc-aXZVg bUvEJV"
           fill="white"
-          points="0 0, 0 100, 200 100, 200 15, 185 0, 185 15, 200 15, 185 0, 0 0"
+          points="0 0, 0 100, 160 100, 160 15, 145 0, 145 15, 160 15, 145 0, 0 0"
           stroke="black"
         />
         <text
           pointer-events="none"
           text-anchor="middle"
-          width="400"
-          x="100"
+          width="320"
+          x="80"
           y="120"
         >
           <tspan
             dy="11"
-            x="100"
+            x="80"
           >
             Data Object
           </tspan>