diff --git a/src/main/apollon-editor.ts b/src/main/apollon-editor.ts index ed4d373e3..de182ce80 100644 --- a/src/main/apollon-editor.ts +++ b/src/main/apollon-editor.ts @@ -134,7 +134,7 @@ export class ApollonEditor { view: ApollonView.Modelling, mode: options.mode || ApollonMode.Exporting, colorEnabled: options.colorEnabled || false, - scale: options.scale || 1.0, + zoomFactor: options.scale || 1.0, readonly: options.readonly || false, enablePopups: options.enablePopups === true || options.enablePopups === undefined, enableCopyPasteToClipboard: options.copyPasteToClipboard === true, diff --git a/src/main/components/create-pane/create-pane.tsx b/src/main/components/create-pane/create-pane.tsx index 823a3f435..f4960b0c1 100644 --- a/src/main/components/create-pane/create-pane.tsx +++ b/src/main/components/create-pane/create-pane.tsx @@ -33,7 +33,6 @@ type OwnProps = {}; type StateProps = { type: UMLDiagramType; colorEnabled: boolean; - scale: number; }; type DispatchProps = { @@ -42,43 +41,43 @@ type DispatchProps = { type Props = OwnProps & StateProps & DispatchProps & I18nContext & CanvasContext; -const getInitialState = ({ type, canvas, translate, colorEnabled, scale }: Props) => { +const getInitialState = ({ type, canvas, translate, colorEnabled }: Props) => { const previews: PreviewElement[] = []; const utils: PreviewElement[] = []; switch (type) { case UMLDiagramType.ClassDiagram: - previews.push(...composeClassPreview(canvas, translate, scale)); + previews.push(...composeClassPreview(canvas, translate)); break; case UMLDiagramType.ObjectDiagram: - previews.push(...composeObjectPreview(canvas, translate, scale)); + previews.push(...composeObjectPreview(canvas, translate)); break; case UMLDiagramType.ActivityDiagram: - previews.push(...composeActivityPreview(canvas, translate, scale)); + previews.push(...composeActivityPreview(canvas, translate)); break; case UMLDiagramType.UseCaseDiagram: - previews.push(...composeUseCasePreview(canvas, translate, scale)); + previews.push(...composeUseCasePreview(canvas, translate)); break; case UMLDiagramType.CommunicationDiagram: - previews.push(...composeCommunicationPreview(canvas, translate, scale)); + previews.push(...composeCommunicationPreview(canvas, translate)); break; case UMLDiagramType.ComponentDiagram: - previews.push(...composeComponentPreview(canvas, translate, scale)); + previews.push(...composeComponentPreview(canvas, translate)); break; case UMLDiagramType.DeploymentDiagram: - previews.push(...composeDeploymentPreview(canvas, translate, scale)); + previews.push(...composeDeploymentPreview(canvas, translate)); break; case UMLDiagramType.PetriNet: - previews.push(...composePetriNetPreview(canvas, translate, scale)); + previews.push(...composePetriNetPreview(canvas, translate)); break; case UMLDiagramType.ReachabilityGraph: - previews.push(...composeReachabilityGraphPreview(canvas, translate, scale)); + previews.push(...composeReachabilityGraphPreview(canvas, translate)); break; case UMLDiagramType.SyntaxTree: - previews.push(...composeSyntaxTreePreview(canvas, translate, scale)); + previews.push(...composeSyntaxTreePreview(canvas, translate)); break; case UMLDiagramType.Flowchart: - previews.push(...composeFlowchartPreview(canvas, translate, scale)); + previews.push(...composeFlowchartPreview(canvas, translate)); } if (colorEnabled) { utils.push( @@ -100,7 +99,6 @@ const enhance = compose>( (state) => ({ type: state.diagram.type, colorEnabled: state.editor.colorEnabled, - scale: state.editor.scale, }), { create: UMLElementRepository.create, @@ -146,7 +144,7 @@ class CreatePaneComponent extends Component { ); return ( - + {this.getElementArray(previews)} {utils && utils.length > 0 ? ( <> diff --git a/src/main/components/sidebar/sidebar-component.tsx b/src/main/components/sidebar/sidebar-component.tsx index 2528bca31..79ac6eb24 100644 --- a/src/main/components/sidebar/sidebar-component.tsx +++ b/src/main/components/sidebar/sidebar-component.tsx @@ -17,7 +17,6 @@ type StateProps = { mode: ApollonMode; view: ApollonView; selected: SelectableState; - scale: number; }; type DispatchProps = { @@ -34,7 +33,6 @@ const enhance = compose>( mode: state.editor.mode, view: state.editor.view, selected: state.selected, - scale: state.editor.scale, }), { changeView: EditorRepository.changeView, @@ -47,7 +45,7 @@ class SidebarComponent extends Component { if (this.props.readonly || this.props.mode === ApollonMode.Assessment) return null; return ( - + {this.props.mode === ApollonMode.Exporting && ( {this.props.translate('views.modelling')} diff --git a/src/main/components/sidebar/sidebar-styles.ts b/src/main/components/sidebar/sidebar-styles.ts index fe9050bdf..10e1b0437 100644 --- a/src/main/components/sidebar/sidebar-styles.ts +++ b/src/main/components/sidebar/sidebar-styles.ts @@ -1,12 +1,10 @@ import styled from 'styled-components'; -export type ContainerProps = { - scale?: number; -}; +export type ContainerProps = {}; export const Container = styled.aside.attrs({})` - flex: ${({ scale }: ContainerProps) => (scale ? `0 0 ${230 * scale}px` : '0 0 230px')}; - padding: ${({ scale }: ContainerProps) => (scale ? `0 ${10 * scale}px` : '0 10px')}; + flex: 0 0 230px; + padding: 0 10px; height: 100%; min-height: inherit; max-height: inherit; diff --git a/src/main/components/theme/styles.ts b/src/main/components/theme/styles.ts index ab10f4141..fceb44cbb 100644 --- a/src/main/components/theme/styles.ts +++ b/src/main/components/theme/styles.ts @@ -34,9 +34,6 @@ const apollonTheme = { }, }; -export const defaults = (scale: number = 1.0) => { - return { - ...apollonTheme, - font: { ...apollonTheme.font, size: apollonTheme.font.size * scale }, - }; +export const defaults = () => { + return apollonTheme; }; diff --git a/src/main/components/theme/theme.tsx b/src/main/components/theme/theme.tsx index 9260a42fd..d84bd0f3e 100644 --- a/src/main/components/theme/theme.tsx +++ b/src/main/components/theme/theme.tsx @@ -6,7 +6,6 @@ import { defaults, Styles } from './styles'; const defaultProps = { styles: {} as DeepPartial, - scale: 1.0, }; type Props = { children?: React.ReactChild } & typeof defaultProps; @@ -14,7 +13,7 @@ type Props = { children?: React.ReactChild } & typeof defaultProps; export class Theme extends Component { static defaultProps = defaultProps; - theme: Styles = update(defaults(this.props.scale), this.props.styles); + theme: Styles = update(defaults(), this.props.styles); render() { return {this.props.children}; diff --git a/src/main/components/uml-element/canvas-element.tsx b/src/main/components/uml-element/canvas-element.tsx index c7afdff97..b1f66f2a4 100644 --- a/src/main/components/uml-element/canvas-element.tsx +++ b/src/main/components/uml-element/canvas-element.tsx @@ -23,7 +23,6 @@ type StateProps = { interactive: boolean; interactable: boolean; element: IUMLElement; - scale: number; }; type DispatchProps = {}; @@ -40,7 +39,6 @@ const enhance = compose>( interactive: state.interactive.includes(props.id), interactable: state.editor.view === ApollonView.Exporting || state.editor.view === ApollonView.Highlight, element: state.elements[props.id], - scale: state.editor.scale || 1.0, }), {}, ), @@ -87,7 +85,7 @@ class CanvasElementComponent extends Component { fillOpacity={moving ? 0.7 : undefined} fill={highlight} > - + {elements} {children} diff --git a/src/main/components/uml-element/canvas-relationship.tsx b/src/main/components/uml-element/canvas-relationship.tsx index bc9c316e6..0cde1c676 100644 --- a/src/main/components/uml-element/canvas-relationship.tsx +++ b/src/main/components/uml-element/canvas-relationship.tsx @@ -26,7 +26,6 @@ type StateProps = { disabled: boolean; relationship: IUMLRelationship; mode: ApollonMode; - scale: number; readonly: boolean; }; @@ -62,7 +61,6 @@ const enhance = compose>( disabled: !!Object.keys(state.reconnecting).length || !!Object.keys(state.connecting).length, relationship: state.elements[props.id] as IUMLRelationship, mode: state.editor.mode as ApollonMode, - scale: state.editor.scale || 1.0, readonly: state.editor.readonly || false, }), { @@ -87,7 +85,6 @@ export class CanvasRelationshipComponent extends Component { children, theme, mode, - scale, readonly, startwaypointslayout, endwaypointslayout, @@ -130,7 +127,7 @@ export class CanvasRelationshipComponent extends Component { pointerEvents={disabled ? 'none' : 'stroke'} > - + {children} {midPoints.map((point, index) => { return ( diff --git a/src/main/components/uml-element/connectable/connectable.tsx b/src/main/components/uml-element/connectable/connectable.tsx index bf4434aa6..6776029fa 100644 --- a/src/main/components/uml-element/connectable/connectable.tsx +++ b/src/main/components/uml-element/connectable/connectable.tsx @@ -25,7 +25,6 @@ type StateProps = { reconnecting: boolean; element: IUMLElement; type: UMLElementType | UMLRelationshipType; - scale: number; }; type DispatchProps = { @@ -45,7 +44,6 @@ const enhance = connect { - const { alternativePortVisualization, scale, ...otherProps } = props; + const { alternativePortVisualization, ...otherProps } = props; // alternative port visualization size - const alternativePortHeight = 10 * scale; - const alternativePortWidth = 5 * scale; - const alternativePortCircleSize = 30 * scale; + const alternativePortHeight = 10; + const alternativePortWidth = 5; + const alternativePortCircleSize = 30; // default port visualization size - const defaultPortSize = 20 * scale; + const defaultPortSize = 20; if (alternativePortVisualization) { return ( @@ -145,7 +143,6 @@ export const connectable = ( reconnect, type, element, - scale, ...props } = this.props; @@ -166,7 +163,6 @@ export const connectable = ( onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} alternativePortVisualization={features.alternativePortVisualization} - scale={scale} /> )} {this.props.type !== 'ActivityForkNodeHorizontal' && ( @@ -176,7 +172,6 @@ export const connectable = ( onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} alternativePortVisualization={features.alternativePortVisualization} - scale={scale} /> )} {this.props.type !== 'ActivityForkNode' && ( @@ -186,7 +181,6 @@ export const connectable = ( onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} alternativePortVisualization={features.alternativePortVisualization} - scale={scale} /> )} @@ -197,7 +191,6 @@ export const connectable = ( onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} alternativePortVisualization={features.alternativePortVisualization} - scale={scale} /> )} @@ -209,7 +202,6 @@ export const connectable = ( onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} alternativePortVisualization={features.alternativePortVisualization} - scale={scale} /> )} @@ -246,7 +235,6 @@ export const connectable = ( onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} alternativePortVisualization={features.alternativePortVisualization} - scale={scale} /> )} diff --git a/src/main/packages/common/uml-association/uml-association-component.tsx b/src/main/packages/common/uml-association/uml-association-component.tsx index 2aa7ecc75..4550d0662 100644 --- a/src/main/packages/common/uml-association/uml-association-component.tsx +++ b/src/main/packages/common/uml-association/uml-association-component.tsx @@ -7,28 +7,23 @@ import { UMLRelationshipType } from '../../uml-relationship-type'; import { ThemedPath, ThemedPathContrast, ThemedPolyline } from '../../../components/theme/themedComponents'; const Marker = { - Arrow: (id: string, color?: string, scale: number = 1.0) => ( + Arrow: (id: string, color?: string) => ( - + ), - Rhombus: (id: string, color?: string, scale: number = 1.0) => ( + Rhombus: (id: string, color?: string) => ( ), - RhombusFilled: (id: string, color?: string, scale: number = 1.0) => ( + RhombusFilled: (id: string, color?: string) => ( ), - Triangle: (id: string, color?: string, scale: number = 1.0) => ( + Triangle: (id: string, color?: string) => ( = ({ element, scale }) => { +export const UMLAssociationComponent: FunctionComponent = ({ element }) => { const marker = getMarkerForTypeForUMLAssociation(element.type); const stroke = ((type) => { @@ -149,7 +142,7 @@ export const UMLAssociationComponent: FunctionComponent = ({ element, sca const textFill = element.textColor ? { fill: element.textColor } : {}; return ( - {marker && marker(id, element.strokeColor, scale)} + {marker && marker(id, element.strokeColor)} `${point.x} ${point.y}`).join(',')} strokeColor={element.strokeColor} @@ -200,5 +193,4 @@ export const UMLAssociationComponent: FunctionComponent = ({ element, sca interface Props { element: UMLAssociation; - scale: number; } diff --git a/src/main/packages/common/uml-classifier/uml-classifier-component.tsx b/src/main/packages/common/uml-classifier/uml-classifier-component.tsx index f93859e36..5bd01ed51 100644 --- a/src/main/packages/common/uml-classifier/uml-classifier-component.tsx +++ b/src/main/packages/common/uml-classifier/uml-classifier-component.tsx @@ -3,30 +3,30 @@ import { Text } from '../../../components/controls/text/text'; import { UMLClassifier } from './uml-classifier'; import { ThemedPath, ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLClassifierComponent: FunctionComponent = ({ element, scale, children, fillColor }) => { +export const UMLClassifierComponent: FunctionComponent = ({ element, children, fillColor }) => { return ( {element.stereotype ? ( - + - + {`«${element.stereotype}»`} = ({ element, scal ) : ( - + = ({ element, scal interface Props { element: UMLClassifier; - scale: number; fillColor?: string; children?: React.ReactNode; } diff --git a/src/main/packages/common/uml-classifier/uml-classifier-member-component.tsx b/src/main/packages/common/uml-classifier/uml-classifier-member-component.tsx index f8108cce6..bcbfbc9ec 100644 --- a/src/main/packages/common/uml-classifier/uml-classifier-member-component.tsx +++ b/src/main/packages/common/uml-classifier/uml-classifier-member-component.tsx @@ -5,11 +5,11 @@ import { ModelState } from '../../../components/store/model-state'; import { UMLClassifierMember } from './uml-classifier-member'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLClassifierMemberComponent: FunctionComponent = ({ element, scale, fillColor }) => { +export const UMLClassifierMemberComponent: FunctionComponent = ({ element, fillColor }) => { return ( - + {element.name} @@ -18,6 +18,5 @@ export const UMLClassifierMemberComponent: FunctionComponent = ({ element interface Props { element: UMLClassifierMember; - scale: number; fillColor?: string; } diff --git a/src/main/packages/common/uml-component/uml-component-component.tsx b/src/main/packages/common/uml-component/uml-component-component.tsx index 75492d78e..b8dff7065 100644 --- a/src/main/packages/common/uml-component/uml-component-component.tsx +++ b/src/main/packages/common/uml-component/uml-component-component.tsx @@ -3,7 +3,7 @@ import { Text } from '../../../components/controls/text/text'; import { UMLComponent } from './uml-component'; import { ThemedPath, ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLComponentComponent: FunctionComponent = ({ element, children, scale, fillColor }) => ( +export const UMLComponentComponent: FunctionComponent = ({ element, children, fillColor }) => ( = ({ element, child strokeColor={element.strokeColor} fillColor={fillColor || element.fillColor} /> - + {element.name} - + = ({ element, child strokeMiterlimit="10" /> = ({ element, child interface Props { element: UMLComponent; - scale: number; fillColor?: string; children?: React.ReactNode; } diff --git a/src/main/packages/common/uml-interface-required/uml-interface-required-component.tsx b/src/main/packages/common/uml-interface-required/uml-interface-required-component.tsx index d31cef01d..de878fedd 100644 --- a/src/main/packages/common/uml-interface-required/uml-interface-required-component.tsx +++ b/src/main/packages/common/uml-interface-required/uml-interface-required-component.tsx @@ -9,7 +9,6 @@ import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComp type OwnProps = { element: UMLInterfaceRequired; - scale: number; }; type StateProps = { hasOppositeRequiredInterface: boolean; @@ -47,7 +46,7 @@ const enhance = connect((state, }, {}); const UMLInterfaceRequiredC: FunctionComponent = (props: Props) => { - const { element, hasOppositeRequiredInterface, currentRequiredInterfaces, currentAllInterfaces, scale } = props; + const { element, hasOppositeRequiredInterface, currentRequiredInterfaces, currentAllInterfaces } = props; // offset for last point in paragraph, so that line ends at marker let offset: Point; @@ -103,7 +102,7 @@ const UMLInterfaceRequiredC: FunctionComponent = (props: Props) => { markerUnits="strokeWidth" > {/*M -> Move to, A -> Arc radiusX, radiusY, x-axis-rotation, bow-flag, endpointX,endpointY */} - + = (props: Props) => { .join(',')} strokeColor={element.strokeColor} fillColor="none" - strokeWidth={scale} + strokeWidth={1.0} markerEnd={`url(#marker-${element.id})`} /> diff --git a/src/main/packages/common/uml-interface/uml-interface-component.tsx b/src/main/packages/common/uml-interface/uml-interface-component.tsx index a625acf13..04598cda7 100644 --- a/src/main/packages/common/uml-interface/uml-interface-component.tsx +++ b/src/main/packages/common/uml-interface/uml-interface-component.tsx @@ -3,17 +3,17 @@ import { Text } from '../../../components/controls/text/text'; import { UMLInterface } from './uml-interface'; import { ThemedCircle } from '../../../components/theme/themedComponents'; -export const UMLInterfaceComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const UMLInterfaceComponent: FunctionComponent = ({ element, fillColor }) => ( - + {element.name} @@ -21,6 +21,5 @@ export const UMLInterfaceComponent: FunctionComponent = ({ element, scale interface Props { element: UMLInterface; - scale: number; fillColor?: string; } diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts index 1b375d2a3..2d6baa130 100644 --- a/src/main/packages/components.ts +++ b/src/main/packages/components.ts @@ -50,8 +50,8 @@ import { ColorLegendComponent } from './common/color-legend/color-legend-compone export const Components: { [key in UMLElementType | UMLRelationshipType]: - | FunctionComponent> - | ConnectedComponent, { element: any; scale: number }>; + | FunctionComponent> + | ConnectedComponent, { element: any }>; } = { [UMLElementType.Package]: UMLClassPackageComponent, [UMLElementType.Class]: UMLClassifierComponent, diff --git a/src/main/packages/compose-preview.ts b/src/main/packages/compose-preview.ts index 517bc81ff..b158b02e9 100644 --- a/src/main/packages/compose-preview.ts +++ b/src/main/packages/compose-preview.ts @@ -4,4 +4,4 @@ import { CSSProperties } from 'react'; export type PreviewElement = UMLElement & { styles?: CSSProperties }; -export type ComposePreview = (layer: ILayer, translate: (id: string) => string, scale: number) => PreviewElement[]; +export type ComposePreview = (layer: ILayer, translate: (id: string) => string) => PreviewElement[]; diff --git a/src/main/packages/flowchart/flowchart-decision/flowchart-decision-component.tsx b/src/main/packages/flowchart/flowchart-decision/flowchart-decision-component.tsx index ba337643f..770eb64eb 100644 --- a/src/main/packages/flowchart/flowchart-decision/flowchart-decision-component.tsx +++ b/src/main/packages/flowchart/flowchart-decision/flowchart-decision-component.tsx @@ -3,8 +3,8 @@ import { FlowchartComponent } from '../flowchart-element/flowchart-component'; import { FlowchartDecision } from './flowchart-decision'; import { ThemedPolyline } from '../../../components/theme/themedComponents'; -export const FlowchartDecisionComponent: FunctionComponent = ({ element, scale, fillColor }) => ( - +export const FlowchartDecisionComponent: FunctionComponent = ({ element, fillColor }) => ( + = ({ element, export interface Props { element: FlowchartDecision; - scale: number; fillColor?: string; } diff --git a/src/main/packages/flowchart/flowchart-diagram-preview.ts b/src/main/packages/flowchart/flowchart-diagram-preview.ts index 54946fd06..aff64373b 100644 --- a/src/main/packages/flowchart/flowchart-diagram-preview.ts +++ b/src/main/packages/flowchart/flowchart-diagram-preview.ts @@ -10,10 +10,9 @@ import { FlowchartTerminal } from './flowchart-terminal/flowchart-terminal'; export const composeFlowchartPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): PreviewElement[] => { const elements: PreviewElement[] = []; - const defaultBounds: IBoundary = { x: 0, y: 0, width: 150 * scale, height: computeDimension(scale, 70) }; + const defaultBounds: IBoundary = { x: 0, y: 0, width: 150, height: computeDimension(1.0, 70) }; elements.push( new FlowchartTerminal({ diff --git a/src/main/packages/flowchart/flowchart-element/flowchart-component.tsx b/src/main/packages/flowchart/flowchart-element/flowchart-component.tsx index e921d1322..71f2cfd08 100644 --- a/src/main/packages/flowchart/flowchart-element/flowchart-component.tsx +++ b/src/main/packages/flowchart/flowchart-element/flowchart-component.tsx @@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react'; import { Multiline } from '../../../utils/svg/multiline'; import { FlowchartElement } from '../index'; -export const FlowchartComponent: FunctionComponent = ({ element, scale = 1.0, children }) => ( +export const FlowchartComponent: FunctionComponent = ({ element, children }) => ( {children} = ({ element, scale = height={element.bounds.height} fontWeight="bold" fill={element.textColor} - lineHeight={16 * scale} - capHeight={11 * scale} + lineHeight={16} + capHeight={11} > {element.name} @@ -22,6 +22,5 @@ export const FlowchartComponent: FunctionComponent = ({ element, scale = export interface Props { element: FlowchartElement; - scale: number; children?: React.ReactNode; } diff --git a/src/main/packages/flowchart/flowchart-function-call/flowchart-function-call-component.tsx b/src/main/packages/flowchart/flowchart-function-call/flowchart-function-call-component.tsx index 42daf0d8e..7b2816f2b 100644 --- a/src/main/packages/flowchart/flowchart-function-call/flowchart-function-call-component.tsx +++ b/src/main/packages/flowchart/flowchart-function-call/flowchart-function-call-component.tsx @@ -3,27 +3,27 @@ import { FlowchartComponent } from '../flowchart-element/flowchart-component'; import { FlowchartFunctionCall } from './flowchart-function-call'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const FlowchartFunctionCallComponent: FunctionComponent = ({ element, scale, fillColor }) => ( - +export const FlowchartFunctionCallComponent: FunctionComponent = ({ element, fillColor }) => ( + @@ -31,6 +31,5 @@ export const FlowchartFunctionCallComponent: FunctionComponent = ({ eleme export interface Props { element: FlowchartFunctionCall; - scale: number; fillColor?: string; } diff --git a/src/main/packages/flowchart/flowchart-input-output/flowchart-input-output-component.tsx b/src/main/packages/flowchart/flowchart-input-output/flowchart-input-output-component.tsx index a5f5c4d63..3ad91dbaa 100644 --- a/src/main/packages/flowchart/flowchart-input-output/flowchart-input-output-component.tsx +++ b/src/main/packages/flowchart/flowchart-input-output/flowchart-input-output-component.tsx @@ -4,9 +4,9 @@ import { FlowchartInputOutput } from './flowchart-input-output'; import { ThemedPolyline } from '../../../components/theme/themedComponents'; import { computeDimension } from '../../../utils/geometry/boundary'; -export const FlowchartInputOutputComponent: FunctionComponent = ({ element, scale, fillColor }) => { +export const FlowchartInputOutputComponent: FunctionComponent = ({ element, fillColor }) => { return ( - + = ({ elemen export interface Props { element: FlowchartInputOutput; - scale: number; fillColor?: string; } diff --git a/src/main/packages/flowchart/flowchart-process/flowchart-process-component.tsx b/src/main/packages/flowchart/flowchart-process/flowchart-process-component.tsx index 3ad8ff50f..1eacc8f57 100644 --- a/src/main/packages/flowchart/flowchart-process/flowchart-process-component.tsx +++ b/src/main/packages/flowchart/flowchart-process/flowchart-process-component.tsx @@ -3,8 +3,8 @@ import { FlowchartComponent } from '../flowchart-element/flowchart-component'; import { FlowchartProcess } from './flowchart-process'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const FlowchartProcessComponent: FunctionComponent = ({ element, scale, fillColor }) => ( - +export const FlowchartProcessComponent: FunctionComponent = ({ element, fillColor }) => ( + = ({ element, s export interface Props { element: FlowchartProcess; - scale: number; fillColor?: string; } diff --git a/src/main/packages/flowchart/flowchart-terminal/flowchart-terminal-component.tsx b/src/main/packages/flowchart/flowchart-terminal/flowchart-terminal-component.tsx index 54f8cec24..6196aff44 100644 --- a/src/main/packages/flowchart/flowchart-terminal/flowchart-terminal-component.tsx +++ b/src/main/packages/flowchart/flowchart-terminal/flowchart-terminal-component.tsx @@ -3,12 +3,12 @@ import { FlowchartComponent } from '../flowchart-element/flowchart-component'; import { FlowchartTerminal } from './flowchart-terminal'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const FlowchartTerminalComponent: FunctionComponent = ({ element, scale, fillColor }) => ( - +export const FlowchartTerminalComponent: FunctionComponent = ({ element, fillColor }) => ( + = ({ element, export interface Props { element: FlowchartTerminal; - scale: number; fillColor?: string; } diff --git a/src/main/packages/syntax-tree/syntax-tree-nonterminal/syntax-tree-nonterminal-component.tsx b/src/main/packages/syntax-tree/syntax-tree-nonterminal/syntax-tree-nonterminal-component.tsx index 598c696a1..0af3f3b36 100644 --- a/src/main/packages/syntax-tree/syntax-tree-nonterminal/syntax-tree-nonterminal-component.tsx +++ b/src/main/packages/syntax-tree/syntax-tree-nonterminal/syntax-tree-nonterminal-component.tsx @@ -3,11 +3,11 @@ import { Multiline } from '../../../utils/svg/multiline'; import { SyntaxTreeNonterminal } from './syntax-tree-nonterminal'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const SyntaxTreeNonterminalComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const SyntaxTreeNonterminalComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ eleme height={element.bounds.height} fontWeight="bold" fill={element.textColor} - lineHeight={16 * scale} - capHeight={11 * scale} + lineHeight={16} + capHeight={11} > {element.name} @@ -30,6 +30,5 @@ export const SyntaxTreeNonterminalComponent: FunctionComponent = ({ eleme export interface Props { element: SyntaxTreeNonterminal; - scale: number; fillColor?: string; } diff --git a/src/main/packages/syntax-tree/syntax-tree-preview.ts b/src/main/packages/syntax-tree/syntax-tree-preview.ts index 84c1b1fc5..99cd4cad4 100644 --- a/src/main/packages/syntax-tree/syntax-tree-preview.ts +++ b/src/main/packages/syntax-tree/syntax-tree-preview.ts @@ -7,10 +7,9 @@ import { SyntaxTreeNonterminal } from './syntax-tree-nonterminal/syntax-tree-non export const composeSyntaxTreePreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): PreviewElement[] => { const elements: PreviewElement[] = []; - const defaultBounds: IBoundary = { x: 0, y: 0, width: 100 * scale, height: 50 * scale }; + const defaultBounds: IBoundary = { x: 0, y: 0, width: 100, height: 50 }; elements.push(new SyntaxTreeNonterminal({ name: '', bounds: defaultBounds })); diff --git a/src/main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component.tsx b/src/main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component.tsx index 2b95be951..324ecb9cd 100644 --- a/src/main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component.tsx +++ b/src/main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component.tsx @@ -3,7 +3,7 @@ import { Multiline } from '../../../utils/svg/multiline'; import { SyntaxTreeTerminal } from './syntax-tree-terminal'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const SyntaxTreeTerminalComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const SyntaxTreeTerminalComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ element, height={element.bounds.height} fontWeight="bold" fill={element.textColor} - lineHeight={16 * scale} - capHeight={11 * scale} + lineHeight={16} + capHeight={11} > {element.name} @@ -28,6 +28,5 @@ export const SyntaxTreeTerminalComponent: FunctionComponent = ({ element, export interface Props { element: SyntaxTreeTerminal; - scale: number; fillColor?: string; } diff --git a/src/main/packages/uml-activity-diagram/activity-preview.ts b/src/main/packages/uml-activity-diagram/activity-preview.ts index 413ec086b..caf6c8611 100644 --- a/src/main/packages/uml-activity-diagram/activity-preview.ts +++ b/src/main/packages/uml-activity-diagram/activity-preview.ts @@ -13,32 +13,31 @@ import { UMLActivity } from './uml-activity/uml-activity'; export const composeActivityPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; - UMLActivityForkNode.defaultWidth = Math.round((20 * scale) / 10) * 10; - UMLActivityForkNode.defaultHeight = Math.round((60 * scale) / 10) * 10; - UMLActivityForkNodeHorizontal.defaultWidth = Math.round((60 * scale) / 10) * 10; - UMLActivityForkNodeHorizontal.defaultHeight = Math.round((20 * scale) / 10) * 10; + UMLActivityForkNode.defaultWidth = Math.round(20 / 10) * 10; + UMLActivityForkNode.defaultHeight = Math.round(60 / 10) * 10; + UMLActivityForkNodeHorizontal.defaultWidth = Math.round(60 / 10) * 10; + UMLActivityForkNodeHorizontal.defaultHeight = Math.round(20 / 10) * 10; // Activity const activity = new UMLActivity({ name: translate('packages.ActivityDiagram.Activity') }); activity.bounds = { ...activity.bounds, - width: activity.bounds.width * scale, - height: activity.bounds.height * scale, + width: activity.bounds.width, + height: activity.bounds.height, }; elements.push(activity); // Activity Initial Node const activityInitialNode = new UMLActivityInitialNode({ - bounds: { x: 0, y: 0, width: 50 * scale, height: 50 * scale }, + bounds: { x: 0, y: 0, width: 45, height: 45 }, }); elements.push(activityInitialNode); // Activity Final Node const activityFinalNode = new UMLActivityFinalNode({ - bounds: { x: 0, y: 0, width: 50 * scale, height: 50 * scale }, + bounds: { x: 0, y: 0, width: 45, height: 45 }, }); elements.push(activityFinalNode); @@ -48,8 +47,8 @@ export const composeActivityPreview: ComposePreview = ( }); activityActionNode.bounds = { ...activityActionNode.bounds, - width: activityActionNode.bounds.width * scale, - height: activityActionNode.bounds.height * scale, + width: activityActionNode.bounds.width, + height: activityActionNode.bounds.height, }; elements.push(activityActionNode); @@ -59,8 +58,8 @@ export const composeActivityPreview: ComposePreview = ( }); activityObjectNode.bounds = { ...activityObjectNode.bounds, - width: activityObjectNode.bounds.width * scale, - height: activityObjectNode.bounds.height * scale, + width: activityObjectNode.bounds.width, + height: activityObjectNode.bounds.height, }; elements.push(activityObjectNode); @@ -68,8 +67,8 @@ export const composeActivityPreview: ComposePreview = ( const activityMergeNode = new UMLActivityMergeNode({ name: translate('packages.ActivityDiagram.ActivityMergeNode') }); activityMergeNode.bounds = { ...activityMergeNode.bounds, - width: activityMergeNode.bounds.width * scale, - height: activityMergeNode.bounds.height * scale, + width: activityMergeNode.bounds.width, + height: activityMergeNode.bounds.height, }; elements.push(activityMergeNode); diff --git a/src/main/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-action-node-component.tsx b/src/main/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-action-node-component.tsx index 39570c8d4..4a0978fcd 100644 --- a/src/main/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-action-node-component.tsx +++ b/src/main/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-action-node-component.tsx @@ -3,11 +3,11 @@ import { Multiline } from '../../../utils/svg/multiline'; import { UMLActivityActionNode } from './uml-activity-action-node'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLActivityActionNodeComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const UMLActivityActionNodeComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ eleme interface Props { element: UMLActivityActionNode; - scale: number; fillColor?: string; } diff --git a/src/main/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component.tsx b/src/main/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component.tsx index 1c72b7cfe..674f0c812 100644 --- a/src/main/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component.tsx +++ b/src/main/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component.tsx @@ -9,7 +9,6 @@ import { ThemedCircle, ThemedCircleContrast } from '../../../components/theme/th type OwnProps = { element: UMLActivityFinalNode; - scale: number; }; type StateProps = { interactive: boolean; interactable: boolean }; @@ -26,26 +25,20 @@ const enhance = compose, OwnProps>>( })), ); -export const UMLActivityFinalNodeC: FunctionComponent = ({ - element, - interactive, - interactable, - theme, - scale, -}) => { +export const UMLActivityFinalNodeC: FunctionComponent = ({ element, interactive, interactable, theme }) => { return ( = ({ element, children, scale, fillColor }) => ( +export const UMLActivityComponent: FunctionComponent = ({ element, children, fillColor }) => ( - + {element.name} {children} @@ -22,7 +22,6 @@ export const UMLActivityComponent: FunctionComponent = ({ element, childr interface Props { element: UMLActivity; - scale: number; fillColor?: string; children?: React.ReactNode; } diff --git a/src/main/packages/uml-class-diagram/class-preview.ts b/src/main/packages/uml-class-diagram/class-preview.ts index 000293363..b3d7ad26b 100644 --- a/src/main/packages/uml-class-diagram/class-preview.ts +++ b/src/main/packages/uml-class-diagram/class-preview.ts @@ -11,21 +11,17 @@ import { UMLClass } from './uml-class/uml-class'; import { UMLEnumeration } from './uml-enumeration/uml-enumeration'; import { UMLInterface } from './uml-interface/uml-interface'; -export const composeClassPreview: ComposePreview = ( - layer: ILayer, - translate: (id: string) => string, - scale: number, -): UMLElement[] => { +export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (id: string) => string): UMLElement[] => { const elements: UMLElement[] = []; - UMLClassifier.stereotypeHeaderHeight = computeDimension(scale, 50); - UMLClassifier.nonStereotypeHeaderHeight = computeDimension(scale, 40); + UMLClassifier.stereotypeHeaderHeight = computeDimension(1.0, 50); + UMLClassifier.nonStereotypeHeaderHeight = computeDimension(1.0, 40); // UML Package const umlPackage = new UMLClassPackage({ name: translate('packages.ClassDiagram.Package') }); umlPackage.bounds = { ...umlPackage.bounds, - width: umlPackage.bounds.width * scale, - height: umlPackage.bounds.height * scale, + width: umlPackage.bounds.width, + height: umlPackage.bounds.height, }; elements.push(umlPackage); @@ -33,8 +29,8 @@ export const composeClassPreview: ComposePreview = ( const umlClass = new UMLClass({ name: translate('packages.ClassDiagram.Class') }); umlClass.bounds = { ...umlClass.bounds, - width: umlClass.bounds.width * scale, - height: umlClass.bounds.height * scale, + width: umlClass.bounds.width, + height: umlClass.bounds.height, }; const umlClassAttribute = new UMLClassAttribute({ name: translate('sidebar.classAttribute'), @@ -42,8 +38,8 @@ export const composeClassPreview: ComposePreview = ( bounds: { x: 0, y: 0, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); @@ -53,8 +49,8 @@ export const composeClassPreview: ComposePreview = ( bounds: { x: 0, y: 0, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); @@ -65,17 +61,17 @@ export const composeClassPreview: ComposePreview = ( const umlAbstract = new UMLAbstractClass({ name: translate('packages.ClassDiagram.AbstractClass') }); umlAbstract.bounds = { ...umlAbstract.bounds, - width: umlAbstract.bounds.width * scale, - height: umlAbstract.bounds.height * scale, + width: umlAbstract.bounds.width, + height: umlAbstract.bounds.height, }; const umlAbstractAttribute = new UMLClassAttribute({ name: translate('sidebar.classAttribute'), owner: umlAbstract.id, bounds: { x: 0, - y: 40 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 40, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); const umlAbstractMethod = new UMLClassMethod({ @@ -83,9 +79,9 @@ export const composeClassPreview: ComposePreview = ( owner: umlAbstract.id, bounds: { x: 0, - y: 70 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 70, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); umlAbstract.ownedElements = [umlAbstractAttribute.id, umlAbstractMethod.id]; @@ -98,17 +94,17 @@ export const composeClassPreview: ComposePreview = ( }); umlInterface.bounds = { ...umlInterface.bounds, - width: umlInterface.bounds.width * scale, - height: umlInterface.bounds.height * scale, + width: umlInterface.bounds.width, + height: umlInterface.bounds.height, }; const umlInterfaceAttribute = new UMLClassAttribute({ name: translate('sidebar.classAttribute'), owner: umlInterface.id, bounds: { x: 0, - y: 50 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 50, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); const umlInterfaceMethod = new UMLClassMethod({ @@ -116,9 +112,9 @@ export const composeClassPreview: ComposePreview = ( owner: umlInterface.id, bounds: { x: 0, - y: 80 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 80, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); umlInterface.ownedElements = [umlInterfaceAttribute.id, umlInterfaceMethod.id]; @@ -131,17 +127,17 @@ export const composeClassPreview: ComposePreview = ( }); umlEnumeration.bounds = { ...umlEnumeration.bounds, - width: umlEnumeration.bounds.width * scale, - height: umlEnumeration.bounds.height * scale, + width: umlEnumeration.bounds.width, + height: umlEnumeration.bounds.height, }; const umlEnumerationCase1 = new UMLClassAttribute({ name: translate('sidebar.enumAttribute') + ' 1', owner: umlEnumeration.id, bounds: { x: 0, - y: 50 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 50, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); const umlEnumerationCase2 = new UMLClassAttribute({ @@ -149,9 +145,9 @@ export const composeClassPreview: ComposePreview = ( owner: umlEnumeration.id, bounds: { x: 0, - y: 80 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 80, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); const umlEnumerationCase3 = new UMLClassAttribute({ @@ -159,9 +155,9 @@ export const composeClassPreview: ComposePreview = ( owner: umlEnumeration.id, bounds: { x: 0, - y: 110 * scale, - width: computeDimension(scale, 200), - height: computeDimension(scale, 40), + y: 110, + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 40), }, }); umlEnumeration.ownedElements = [umlEnumerationCase1.id, umlEnumerationCase2.id, umlEnumerationCase3.id]; diff --git a/src/main/packages/uml-class-diagram/uml-class-package/uml-class-package-component.tsx b/src/main/packages/uml-class-diagram/uml-class-package/uml-class-package-component.tsx index 2093636e5..a5756de6a 100644 --- a/src/main/packages/uml-class-diagram/uml-class-package/uml-class-package-component.tsx +++ b/src/main/packages/uml-class-diagram/uml-class-package/uml-class-package-component.tsx @@ -2,25 +2,24 @@ import React, { FunctionComponent } from 'react'; import { UMLClassPackage } from './uml-class-package'; import { ThemedRect, ThemedPath } from '../../../components/theme/themedComponents'; -export const UMLClassPackageComponent: FunctionComponent = ({ element, children, scale, fillColor }) => ( +export const UMLClassPackageComponent: FunctionComponent = ({ element, children, fillColor }) => ( = ({ element, ch interface Props { element: UMLClassPackage; - scale: number; fillColor?: string; children?: React.ReactNode; } diff --git a/src/main/packages/uml-communication-diagram/communication-preview.ts b/src/main/packages/uml-communication-diagram/communication-preview.ts index 6826d6377..6d82fbe37 100644 --- a/src/main/packages/uml-communication-diagram/communication-preview.ts +++ b/src/main/packages/uml-communication-diagram/communication-preview.ts @@ -8,7 +8,6 @@ import { UMLObjectName } from '../uml-object-diagram/uml-object-name/uml-object- export const composeCommunicationPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; @@ -16,8 +15,8 @@ export const composeCommunicationPreview: ComposePreview = ( const umlObject = new UMLObjectName({ name: translate('packages.CommunicationDiagram.ObjectName') }); umlObject.bounds = { ...umlObject.bounds, - width: umlObject.bounds.width * scale, - height: umlObject.bounds.height * scale, + width: umlObject.bounds.width, + height: umlObject.bounds.height, }; const umlObjectAttribute = new UMLObjectAttribute({ name: translate('sidebar.classAttribute'), @@ -25,8 +24,8 @@ export const composeCommunicationPreview: ComposePreview = ( bounds: { x: 0, y: 0, - width: computeDimension(scale, 200), - height: computeDimension(scale, 25), + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 25), }, }); umlObject.ownedElements = [umlObjectAttribute.id]; diff --git a/src/main/packages/uml-component-diagram/component-preview.ts b/src/main/packages/uml-component-diagram/component-preview.ts index 6752b0d16..c763322cc 100644 --- a/src/main/packages/uml-component-diagram/component-preview.ts +++ b/src/main/packages/uml-component-diagram/component-preview.ts @@ -7,7 +7,6 @@ import { UMLComponentComponent } from './uml-component/uml-component-component'; export const composeComponentPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; @@ -15,8 +14,8 @@ export const composeComponentPreview: ComposePreview = ( const umlComponent = new UMLComponentComponent({ name: translate('packages.ComponentDiagram.Component') }); umlComponent.bounds = { ...umlComponent.bounds, - width: umlComponent.bounds.width * scale, - height: umlComponent.bounds.height * scale, + width: umlComponent.bounds.width, + height: umlComponent.bounds.height, }; elements.push(umlComponent); @@ -26,8 +25,8 @@ export const composeComponentPreview: ComposePreview = ( }); umlComponentInterface.bounds = { ...umlComponentInterface.bounds, - width: umlComponentInterface.bounds.width * scale, - height: umlComponentInterface.bounds.height * scale, + width: umlComponentInterface.bounds.width, + height: umlComponentInterface.bounds.height, }; const [umlInterface] = umlComponentInterface.render(layer) as [UMLElement]; elements.push(umlInterface); diff --git a/src/main/packages/uml-deployment-diagram/deployment-preview.ts b/src/main/packages/uml-deployment-diagram/deployment-preview.ts index e60e92b58..33974db2e 100644 --- a/src/main/packages/uml-deployment-diagram/deployment-preview.ts +++ b/src/main/packages/uml-deployment-diagram/deployment-preview.ts @@ -9,7 +9,6 @@ import { UMLDeploymentComponent } from './uml-deployment-component/uml-component export const composeDeploymentPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; @@ -17,8 +16,8 @@ export const composeDeploymentPreview: ComposePreview = ( const umlDeploymentNode = new UMLDeploymentNode({ name: translate('packages.DeploymentDiagram.DeploymentNode') }); umlDeploymentNode.bounds = { ...umlDeploymentNode.bounds, - width: umlDeploymentNode.bounds.width * scale, - height: umlDeploymentNode.bounds.height * scale, + width: umlDeploymentNode.bounds.width, + height: umlDeploymentNode.bounds.height, }; elements.push(umlDeploymentNode); @@ -28,8 +27,8 @@ export const composeDeploymentPreview: ComposePreview = ( }); umlComponent.bounds = { ...umlComponent.bounds, - width: umlComponent.bounds.width * scale, - height: umlComponent.bounds.height * scale, + width: umlComponent.bounds.width, + height: umlComponent.bounds.height, }; elements.push(umlComponent); @@ -39,7 +38,7 @@ export const composeDeploymentPreview: ComposePreview = ( }); umlDeploymentArtifact.bounds = { ...umlDeploymentArtifact.bounds, - width: umlDeploymentArtifact.bounds.width * scale, + width: umlDeploymentArtifact.bounds.width, }; elements.push(umlDeploymentArtifact); @@ -49,8 +48,8 @@ export const composeDeploymentPreview: ComposePreview = ( }); umlDeploymentInterface.bounds = { ...umlDeploymentInterface.bounds, - width: umlDeploymentInterface.bounds.width * scale, - height: umlDeploymentInterface.bounds.height * scale, + width: umlDeploymentInterface.bounds.width, + height: umlDeploymentInterface.bounds.height, }; elements.push(umlDeploymentInterface); diff --git a/src/main/packages/uml-deployment-diagram/uml-deployment-artifact/uml-deployment-artifact-component.tsx b/src/main/packages/uml-deployment-diagram/uml-deployment-artifact/uml-deployment-artifact-component.tsx index ac41fba5d..6ddf37772 100644 --- a/src/main/packages/uml-deployment-diagram/uml-deployment-artifact/uml-deployment-artifact-component.tsx +++ b/src/main/packages/uml-deployment-diagram/uml-deployment-artifact/uml-deployment-artifact-component.tsx @@ -3,7 +3,7 @@ import { Text } from '../../../components/controls/text/text'; import { UMLDeploymentArtifact } from './uml-deployment-artifact'; import { ThemedPath, ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLDeploymentArtifactComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const UMLDeploymentArtifactComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ eleme strokeColor={element.strokeColor} fillColor={fillColor || element.fillColor} /> - + {element.name} - + = ({ eleme interface Props { element: UMLDeploymentArtifact; - scale: number; fillColor?: string; } diff --git a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx index a332617cb..7a22395c5 100644 --- a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx +++ b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx @@ -3,37 +3,35 @@ import { Text } from '../../../components/controls/text/text'; import { UMLDeploymentNode } from './uml-deployment-node'; import { ThemedPath, ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLDeploymentNodeComponent: FunctionComponent = ({ element, children, scale, fillColor }) => ( +export const UMLDeploymentNodeComponent: FunctionComponent = ({ element, children, fillColor }) => ( - + {element.stereotype && ( - + {`«${element.stereotype}»`} )} - + {element.name} @@ -43,7 +41,6 @@ export const UMLDeploymentNodeComponent: FunctionComponent = ({ element, interface Props { element: UMLDeploymentNode; - scale: number; fillColor?: string; children?: React.ReactNode; } diff --git a/src/main/packages/uml-object-diagram/object-preview.ts b/src/main/packages/uml-object-diagram/object-preview.ts index 97acfb335..ba009eb3b 100644 --- a/src/main/packages/uml-object-diagram/object-preview.ts +++ b/src/main/packages/uml-object-diagram/object-preview.ts @@ -8,7 +8,6 @@ import { UMLObjectName } from './uml-object-name/uml-object-name'; export const composeObjectPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; @@ -16,8 +15,8 @@ export const composeObjectPreview: ComposePreview = ( const umlObject = new UMLObjectName({ name: translate('packages.ObjectDiagram.ObjectName') }); umlObject.bounds = { ...umlObject.bounds, - width: umlObject.bounds.width * scale, - height: umlObject.bounds.height * scale, + width: umlObject.bounds.width, + height: umlObject.bounds.height, }; const umlObjectMember = new UMLObjectAttribute({ name: translate('sidebar.objectAttribute'), @@ -25,8 +24,8 @@ export const composeObjectPreview: ComposePreview = ( bounds: { x: 0, y: 0, - width: computeDimension(scale, 200), - height: computeDimension(scale, 25), + width: computeDimension(1.0, 200), + height: computeDimension(1.0, 25), }, }); umlObject.ownedElements = [umlObjectMember.id]; diff --git a/src/main/packages/uml-petri-net/petri-net-preview.ts b/src/main/packages/uml-petri-net/petri-net-preview.ts index 510430060..113898cec 100644 --- a/src/main/packages/uml-petri-net/petri-net-preview.ts +++ b/src/main/packages/uml-petri-net/petri-net-preview.ts @@ -8,11 +8,10 @@ import { computeDimension } from '../../utils/geometry/boundary'; export const composePetriNetPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): PreviewElement[] => { const elements: PreviewElement[] = []; - UMLPetriNetTransition.defaultHeight = computeDimension(scale, 60); - UMLPetriNetTransition.defaultWidth = computeDimension(scale, 25); + UMLPetriNetTransition.defaultHeight = computeDimension(1.0, 60); + UMLPetriNetTransition.defaultWidth = computeDimension(1.0, 25); const petriNetTransition = new UMLPetriNetTransition({ name: translate('packages.PetriNet.PetriNetTransition') }); @@ -31,8 +30,8 @@ export const composePetriNetPreview: ComposePreview = ( bounds: { x: 0, y: 0, - width: computeDimension(scale, 60), - height: computeDimension(scale, 60), + width: computeDimension(1.0, 60), + height: computeDimension(1.0, 60), }, }); diff --git a/src/main/packages/uml-petri-net/uml-petri-net-place/uml-petri-net-place-component.tsx b/src/main/packages/uml-petri-net/uml-petri-net-place/uml-petri-net-place-component.tsx index 7ffb61298..eb50c73fe 100644 --- a/src/main/packages/uml-petri-net/uml-petri-net-place/uml-petri-net-place-component.tsx +++ b/src/main/packages/uml-petri-net/uml-petri-net-place/uml-petri-net-place-component.tsx @@ -17,7 +17,7 @@ const calculateTokenRadius = (amountOfTokens: number, outerRadius: number) => { } }; -const calculatePositions = (amountOfTokens: number, outerRadius: number, scale: number): Point[] => { +const calculatePositions = (amountOfTokens: number, outerRadius: number): Point[] => { const positions: Point[] = []; if (amountOfTokens === 1) { positions.push(new Point(0, 0)); @@ -25,7 +25,7 @@ const calculatePositions = (amountOfTokens: number, outerRadius: number, scale: const degreeFraction = (2 * Math.PI) / amountOfTokens; const tokenRadius = calculateTokenRadius(maxAmountCircles, outerRadius); const tokenCenterCircleRadius = - outerRadius + (tokenToTokenDistance * scale * amountOfTokens) / maxAmountCircles - tokenRadius; + outerRadius + (tokenToTokenDistance * amountOfTokens) / maxAmountCircles - tokenRadius; for (let i = 0; i < amountOfTokens; i++) { const degree = i * degreeFraction + (1 / 2) * Math.PI; positions.push(new Point(Math.cos(degree) * tokenCenterCircleRadius, Math.sin(degree) * tokenCenterCircleRadius)); @@ -34,7 +34,7 @@ const calculatePositions = (amountOfTokens: number, outerRadius: number, scale: return positions; }; -export const UMLPetriNetPlaceComponent: FunctionComponent = ({ element, scale, fillColor }) => { +export const UMLPetriNetPlaceComponent: FunctionComponent = ({ element, fillColor }) => { // radius of the outer circle const radius = Math.min(element.bounds.width, element.bounds.height) / 2; const displayTokenAsNumber = element.amountOfTokens > 0 && element.amountOfTokens > maxAmountCircles; @@ -45,8 +45,8 @@ export const UMLPetriNetPlaceComponent: FunctionComponent = ({ element, s // calculate token props if (element.amountOfTokens > 0) { if (!displayTokenAsNumber) { - const radiusWithPadding = radius - tokenToBoundaryDistance * scale; - tokenPositions = calculatePositions(element.amountOfTokens, radiusWithPadding, scale); + const radiusWithPadding = radius - tokenToBoundaryDistance; + tokenPositions = calculatePositions(element.amountOfTokens, radiusWithPadding); tokenRadius = calculateTokenRadius(maxAmountCircles, radiusWithPadding); } } @@ -75,7 +75,7 @@ export const UMLPetriNetPlaceComponent: FunctionComponent = ({ element, s ))} {displayTokenAsNumber && {element.amountOfTokens}} {displayCapacity && ( - + C={element.capacity} )} @@ -88,6 +88,5 @@ export const UMLPetriNetPlaceComponent: FunctionComponent = ({ element, s interface Props { element: UMLPetriNetPlace; - scale: number; fillColor?: string; } diff --git a/src/main/packages/uml-petri-net/uml-petri-net-transition/uml-petri-net-transition-component.tsx b/src/main/packages/uml-petri-net/uml-petri-net-transition/uml-petri-net-transition-component.tsx index 810f8010f..b2b546eb0 100644 --- a/src/main/packages/uml-petri-net/uml-petri-net-transition/uml-petri-net-transition-component.tsx +++ b/src/main/packages/uml-petri-net/uml-petri-net-transition/uml-petri-net-transition-component.tsx @@ -3,9 +3,9 @@ import { Text } from '../../../components/controls/text/text'; import { UMLPetriNetTransition } from './uml-petri-net-transition'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLPetriNetTransitionComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const UMLPetriNetTransitionComponent: FunctionComponent = ({ element, fillColor }) => ( - + {element.name} = ({ eleme interface Props { element: UMLPetriNetTransition; - scale: number; fillColor?: string; } 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 1a9efa8e3..93dc24827 100644 --- a/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts +++ b/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts @@ -6,13 +6,12 @@ import { UMLReachabilityGraphMarking } from './uml-reachability-graph-marking/um export const composeReachabilityGraphPreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; const umlReachabilityGraphMarking = new UMLReachabilityGraphMarking({ name: translate('packages.ReachabilityGraph.ReachabilityGraphMarking'), - bounds: { x: 0, y: 0, width: 200 * scale, height: 100 * scale }, + bounds: { x: 0, y: 0, width: 200, height: 100 }, }); elements.push(umlReachabilityGraphMarking); diff --git a/src/main/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component.tsx b/src/main/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component.tsx index f001a7fa2..91cd354c8 100644 --- a/src/main/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component.tsx +++ b/src/main/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component.tsx @@ -3,7 +3,7 @@ import { Point } from '../../../utils/geometry/point'; import { UMLReachabilityGraphArc } from './uml-reachability-graph-arc'; import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents'; -export const UMLReachabilityGraphArcComponent: FunctionComponent = ({ element, scale }) => { +export const UMLReachabilityGraphArcComponent: FunctionComponent = ({ element }) => { let position = { x: 0, y: 0 }; let direction: 'v' | 'h' = 'v'; const path = element.path.map((point) => new Point(point.x, point.y)); @@ -28,13 +28,13 @@ export const UMLReachabilityGraphArcComponent: FunctionComponent = ({ ele switch (dir) { case 'v': return { - dx: 5 * scale, + dx: 5, dominantBaseline: 'middle', textAnchor: 'start', }; case 'h': return { - dy: -5 * scale, + dy: -5, dominantBaseline: 'text-after-edge', textAnchor: 'middle', }; @@ -47,25 +47,21 @@ export const UMLReachabilityGraphArcComponent: FunctionComponent = ({ ele - + `${point.x} ${point.y}`).join(',')} strokeColor={element.strokeColor} fillColor="none" - strokeWidth={1 * scale} + strokeWidth={1} markerEnd={`url(#marker-${element.id})`} /> @@ -77,5 +73,4 @@ export const UMLReachabilityGraphArcComponent: FunctionComponent = ({ ele interface Props { element: UMLReachabilityGraphArc; - scale: number; } diff --git a/src/main/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component.tsx b/src/main/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component.tsx index 4db3c317a..77ad19134 100644 --- a/src/main/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component.tsx +++ b/src/main/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component.tsx @@ -3,11 +3,11 @@ import { UMLReachabilityGraphMarking } from './uml-reachability-graph-marking'; import { Multiline } from '../../../utils/svg/multiline'; import { ThemedRect, ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents'; -export const UMLReachabilityGraphMarkingComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const UMLReachabilityGraphMarkingComponent: FunctionComponent = ({ element, fillColor }) => ( = ({ height={element.bounds.height} fontWeight="bold" fill={element.textColor} - lineHeight={16 * scale} - capHeight={11 * scale} + lineHeight={16} + capHeight={11} > {element.name} @@ -29,25 +29,21 @@ export const UMLReachabilityGraphMarkingComponent: FunctionComponent = ({ - + @@ -57,6 +53,5 @@ export const UMLReachabilityGraphMarkingComponent: FunctionComponent = ({ interface Props { element: UMLReachabilityGraphMarking; - scale: number; fillColor?: string; } diff --git a/src/main/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component.tsx b/src/main/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component.tsx index b10ccf3b0..9a59256b0 100644 --- a/src/main/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component.tsx +++ b/src/main/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component.tsx @@ -4,47 +4,47 @@ import { UMLUseCaseActor } from './uml-use-case-actor'; import { ThemedCircle, ThemedLine } from '../../../components/theme/themedComponents'; import { computeDimension } from '../../../utils/geometry/boundary'; -export const UMLUseCaseActorComponent: FunctionComponent = ({ element, scale, fillColor }) => ( +export const UMLUseCaseActorComponent: FunctionComponent = ({ element, fillColor }) => ( - + {element.name} @@ -52,6 +52,5 @@ export const UMLUseCaseActorComponent: FunctionComponent = ({ element, sc interface Props { element: UMLUseCaseActor; - scale: number; fillColor?: string; } diff --git a/src/main/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component.tsx b/src/main/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component.tsx index b2cb81a15..725df65f4 100644 --- a/src/main/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component.tsx +++ b/src/main/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component.tsx @@ -3,7 +3,7 @@ import { Text } from '../../../components/controls/text/text'; import { UMLUseCaseSystem } from './uml-use-case-system'; import { ThemedRect } from '../../../components/theme/themedComponents'; -export const UMLUseCaseSystemComponent: FunctionComponent = ({ element, children, scale, fillColor }) => ( +export const UMLUseCaseSystemComponent: FunctionComponent = ({ element, children, fillColor }) => ( = ({ element, c fillColor={fillColor || element.fillColor} strokeColor={element.strokeColor} /> - + {element.name} {children} @@ -20,7 +20,6 @@ export const UMLUseCaseSystemComponent: FunctionComponent = ({ element, c interface Props { element: UMLUseCaseSystem; - scale: number; fillColor?: string; children?: React.ReactNode; } diff --git a/src/main/packages/uml-use-case-diagram/use-case-preview.ts b/src/main/packages/uml-use-case-diagram/use-case-preview.ts index 810d40461..11a915562 100644 --- a/src/main/packages/uml-use-case-diagram/use-case-preview.ts +++ b/src/main/packages/uml-use-case-diagram/use-case-preview.ts @@ -9,15 +9,14 @@ import { UMLUseCase } from './uml-use-case/uml-use-case'; export const composeUseCasePreview: ComposePreview = ( layer: ILayer, translate: (id: string) => string, - scale: number, ): UMLElement[] => { const elements: UMLElement[] = []; // UML Use Case const umlUseCase = new UMLUseCase({ name: translate('packages.UseCaseDiagram.UseCase') }); umlUseCase.bounds = { ...umlUseCase.bounds, - width: umlUseCase.bounds.width * scale, - height: umlUseCase.bounds.height * scale, + width: umlUseCase.bounds.width, + height: umlUseCase.bounds.height, }; elements.push(umlUseCase); @@ -28,8 +27,8 @@ export const composeUseCasePreview: ComposePreview = ( bounds: { x: 0, y: 0, - width: computeDimension(scale, 80), - height: computeDimension(scale, 140), + width: computeDimension(1.0, 80), + height: computeDimension(1.0, 140), }, }); elements.push(umlActor); @@ -38,8 +37,8 @@ export const composeUseCasePreview: ComposePreview = ( const umlSystem = new UMLUseCaseSystem({ name: translate('packages.UseCaseDiagram.UseCaseSystem') }); umlSystem.bounds = { ...umlSystem.bounds, - width: umlSystem.bounds.width * scale, - height: umlSystem.bounds.height * scale, + width: umlSystem.bounds.width, + height: umlSystem.bounds.height, }; elements.push(umlSystem); diff --git a/src/main/scenes/application.tsx b/src/main/scenes/application.tsx index 7a8b8214f..4d9d86c77 100644 --- a/src/main/scenes/application.tsx +++ b/src/main/scenes/application.tsx @@ -67,7 +67,7 @@ export class Application extends React.Component { }} > - + {rootContext && ( diff --git a/src/main/scenes/svg.tsx b/src/main/scenes/svg.tsx index e36c34510..9ff180594 100644 --- a/src/main/scenes/svg.tsx +++ b/src/main/scenes/svg.tsx @@ -179,7 +179,7 @@ export class Svg extends Component { state = getInitialState(this.props); render() { const { bounds, elements } = this.state; - const theme: Styles = update(defaults(this.props.options?.scale), this.props.styles || {}); + const theme: Styles = update(defaults(), this.props.styles || {}); // connect exported svg to redux state, so that connected components can retrieve properties from state const state = ModelState.fromModel(this.props.model); @@ -232,7 +232,7 @@ export class Svg extends Component { const members = elements.filter((member) => member.owner === element.id); return ( - + {members.map((memberElement, memberIndex) => { // Nest the members within the UMLClassifierComponent so the border rectangle and path get rendered afterward. const MemberElementComponent = Components[memberElement.type as UMLElementType]; @@ -241,11 +241,7 @@ export class Svg extends Component { key={memberElement.id} {...svgElementDetails(memberElement, 0, memberElement.bounds.y - element.bounds.y)} > - + ); })} @@ -266,7 +262,7 @@ export class Svg extends Component { element.bounds.y - translationFactor().minY, )} > - + ); } diff --git a/src/main/services/editor/editor-reducer.ts b/src/main/services/editor/editor-reducer.ts index 81c49d45d..24051b88e 100644 --- a/src/main/services/editor/editor-reducer.ts +++ b/src/main/services/editor/editor-reducer.ts @@ -9,7 +9,6 @@ const initialState: EditorState = { enableCopyPasteToClipboard: false, mode: ApollonMode.Exporting, view: ApollonView.Modelling, - scale: 1.0, zoomFactor: 1.0, features: { hoverable: true, diff --git a/src/main/services/editor/editor-types.ts b/src/main/services/editor/editor-types.ts index 67a826be0..236187556 100644 --- a/src/main/services/editor/editor-types.ts +++ b/src/main/services/editor/editor-types.ts @@ -31,7 +31,6 @@ export type EditorState = { readonly view: ApollonView; readonly features: UMLElementFeatures; readonly colorEnabled: boolean; - readonly scale: number; readonly zoomFactor: number; }; diff --git a/src/main/typings.ts b/src/main/typings.ts index 89bbb57ed..92fe5bd24 100644 --- a/src/main/typings.ts +++ b/src/main/typings.ts @@ -132,7 +132,6 @@ export type ExportOptions = { keepOriginalSize?: boolean; include?: string[]; exclude?: string[]; - scale?: number; }; export type SVG = { diff --git a/src/main/utils/geometry/rect.ts b/src/main/utils/geometry/rect.ts index 25e37c85f..42a945a9f 100644 --- a/src/main/utils/geometry/rect.ts +++ b/src/main/utils/geometry/rect.ts @@ -2,33 +2,29 @@ import { Direction } from '../../services/uml-element/uml-element-port'; import { IBoundary } from './boundary'; import { Point } from './point'; -export function position( - bounds: IBoundary, - direction: Direction, - scale: number = 0.5, -): { point: Point; offset: Point } { +export function position(bounds: IBoundary, direction: Direction): { point: Point; offset: Point } { const { x, y, width, height } = bounds; const offset = 40; switch (direction) { case Direction.Up: return { - point: new Point(x + width * scale, y), - offset: new Point(x + width * scale, y - offset), + point: new Point(x + width, y), + offset: new Point(x + width, y - offset), }; case Direction.Right: return { - point: new Point(x + width, y + height * scale), - offset: new Point(x + width + offset, y + height * scale), + point: new Point(x + width, y + height), + offset: new Point(x + width + offset, y + height), }; case Direction.Down: return { - point: new Point(x + width * scale, y + height), - offset: new Point(x + width * scale, y + height + offset), + point: new Point(x + width, y + height), + offset: new Point(x + width, y + height + offset), }; case Direction.Left: return { - point: new Point(x, y + height * scale), - offset: new Point(x - offset, y + height * scale), + point: new Point(x, y + height), + offset: new Point(x - offset, y + height), }; } } diff --git a/src/tests/unit/packages/flowchart/flowchart-decision/flowchart-decision-component-test.tsx b/src/tests/unit/packages/flowchart/flowchart-decision/flowchart-decision-component-test.tsx index 764344f18..dd3cfa84a 100644 --- a/src/tests/unit/packages/flowchart/flowchart-decision/flowchart-decision-component-test.tsx +++ b/src/tests/unit/packages/flowchart/flowchart-decision/flowchart-decision-component-test.tsx @@ -14,7 +14,7 @@ it('render the flowchart-decision-component', () => { const decision: FlowchartDecision = new FlowchartDecision({ name: 'TestDecisionComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(decision.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/flowchart/flowchart-function-call/flowchart-function-call-component-test.tsx b/src/tests/unit/packages/flowchart/flowchart-function-call/flowchart-function-call-component-test.tsx index 94375e613..36e3b9ac0 100644 --- a/src/tests/unit/packages/flowchart/flowchart-function-call/flowchart-function-call-component-test.tsx +++ b/src/tests/unit/packages/flowchart/flowchart-function-call/flowchart-function-call-component-test.tsx @@ -14,7 +14,7 @@ it('render the flowchart-function-call-component', () => { const functionCall: FlowchartFunctionCall = new FlowchartFunctionCall({ name: 'TestFunctionCallComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(functionCall.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/flowchart/flowchart-input-output/flowchart-input-output-component-test.tsx b/src/tests/unit/packages/flowchart/flowchart-input-output/flowchart-input-output-component-test.tsx index 08eeaa291..9870b79a7 100644 --- a/src/tests/unit/packages/flowchart/flowchart-input-output/flowchart-input-output-component-test.tsx +++ b/src/tests/unit/packages/flowchart/flowchart-input-output/flowchart-input-output-component-test.tsx @@ -14,7 +14,7 @@ it('render the flowchart-input-output-component', () => { const inputOutput: FlowchartInputOutput = new FlowchartInputOutput({ name: 'TestInputOutputComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(inputOutput.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/flowchart/flowchart-process/flowchart-process-component-test.tsx b/src/tests/unit/packages/flowchart/flowchart-process/flowchart-process-component-test.tsx index f65245c35..5da705a06 100644 --- a/src/tests/unit/packages/flowchart/flowchart-process/flowchart-process-component-test.tsx +++ b/src/tests/unit/packages/flowchart/flowchart-process/flowchart-process-component-test.tsx @@ -14,7 +14,7 @@ it('render the flowchart-process-component', () => { const process: FlowchartProcess = new FlowchartProcess({ name: 'TestProcessComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(process.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/flowchart/flowchart-terminal/flowchart-terminal-component-test.tsx b/src/tests/unit/packages/flowchart/flowchart-terminal/flowchart-terminal-component-test.tsx index fe140d1c2..ae4cd4742 100644 --- a/src/tests/unit/packages/flowchart/flowchart-terminal/flowchart-terminal-component-test.tsx +++ b/src/tests/unit/packages/flowchart/flowchart-terminal/flowchart-terminal-component-test.tsx @@ -14,7 +14,7 @@ it('render the flowchart-terminal-component', () => { const terminal: FlowchartTerminal = new FlowchartTerminal({ name: 'TestTerminalComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(terminal.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/nonterminal-component-test.tsx b/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/nonterminal-component-test.tsx index 28230281b..a2690491c 100644 --- a/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/nonterminal-component-test.tsx +++ b/src/tests/unit/packages/syntax-tree/syntax-tree-nonterminal/nonterminal-component-test.tsx @@ -14,7 +14,7 @@ it('render the syntax-tree-nonterminal-component', () => { const syntaxTreeNonterminal: SyntaxTreeNonterminal = new SyntaxTreeNonterminal({ name: 'TestActivityComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(syntaxTreeNonterminal.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/terminal-component-test.tsx b/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/terminal-component-test.tsx index f2af2d28a..44cf0fa71 100644 --- a/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/terminal-component-test.tsx +++ b/src/tests/unit/packages/syntax-tree/syntax-tree-terminal/terminal-component-test.tsx @@ -14,7 +14,7 @@ it('render the syntax-tree-terminal-component', () => { const syntaxTreeTerminal: SyntaxTreeTerminal = new SyntaxTreeTerminal({ name: 'SyntaxTreeTerminal' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(syntaxTreeTerminal.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-node-component-test.tsx b/src/tests/unit/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-node-component-test.tsx index 6fac784a4..9b2aa9d1c 100644 --- a/src/tests/unit/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-node-component-test.tsx +++ b/src/tests/unit/packages/uml-activity-diagram/uml-activity-action-node/uml-activity-node-component-test.tsx @@ -14,7 +14,7 @@ it('render the uml-activity-action-node-component', () => { const actionNode: UMLActivityActionNode = new UMLActivityActionNode({ name: 'TestActivityComponent' }); const { getByText } = wrappedRender( - + , ); expect(getByText(actionNode.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component-test.tsx b/src/tests/unit/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component-test.tsx index ea13c6d86..72e243d24 100644 --- a/src/tests/unit/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component-test.tsx +++ b/src/tests/unit/packages/uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component-test.tsx @@ -9,7 +9,7 @@ it('render the uml-activity-final-node-component', () => { const store = getRealStore(undefined, [finalNode]); const { container, baseElement } = wrappedRender( - + , { store }, ); diff --git a/src/tests/unit/packages/uml-activity-diagram/uml-activity/uml-activity-component-test.tsx b/src/tests/unit/packages/uml-activity-diagram/uml-activity/uml-activity-component-test.tsx index 9b11af608..ba2f0f9dd 100644 --- a/src/tests/unit/packages/uml-activity-diagram/uml-activity/uml-activity-component-test.tsx +++ b/src/tests/unit/packages/uml-activity-diagram/uml-activity/uml-activity-component-test.tsx @@ -7,7 +7,7 @@ it('render the uml-activity-component', () => { const activity: UMLActivity = new UMLActivity({ name: 'TestActivityComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(activity.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-component-diagram/uml-component-interface/uml-component-interface-test.tsx b/src/tests/unit/packages/uml-component-diagram/uml-component-interface/uml-component-interface-test.tsx index aa213d2eb..fe9323a47 100644 --- a/src/tests/unit/packages/uml-component-diagram/uml-component-interface/uml-component-interface-test.tsx +++ b/src/tests/unit/packages/uml-component-diagram/uml-component-interface/uml-component-interface-test.tsx @@ -7,7 +7,7 @@ it('render the uml-component-component', () => { const umlInterface: UMLComponentInterface = new UMLComponentInterface({ name: 'TestComponentComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(umlInterface.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-component-diagram/uml-component-required-interface/uml-component-required-interface-component-test.tsx b/src/tests/unit/packages/uml-component-diagram/uml-component-required-interface/uml-component-required-interface-component-test.tsx index f0ba99b5c..4f4e04910 100644 --- a/src/tests/unit/packages/uml-component-diagram/uml-component-required-interface/uml-component-required-interface-component-test.tsx +++ b/src/tests/unit/packages/uml-component-diagram/uml-component-required-interface/uml-component-required-interface-component-test.tsx @@ -17,7 +17,7 @@ it('render the uml-component-required-interface-component', () => { > - + , 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 e59c4ae68..d8d80fd3f 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 @@ -34,7 +34,6 @@ exports[`render the uml-component-component 1`] = ` stroke="black" stroke-miterlimit="10" stroke-width="1.2" - style="transform: scale(1);" /> diff --git a/src/tests/unit/packages/uml-component-diagram/uml-component/uml-component-component-test.tsx b/src/tests/unit/packages/uml-component-diagram/uml-component/uml-component-component-test.tsx index 57a6cf6aa..ec763c2d1 100644 --- a/src/tests/unit/packages/uml-component-diagram/uml-component/uml-component-component-test.tsx +++ b/src/tests/unit/packages/uml-component-diagram/uml-component/uml-component-component-test.tsx @@ -7,7 +7,7 @@ it('render the uml-component-component', () => { const component: UMLComponent = new UMLComponent({ name: 'TestComponentComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(component.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-artifact/__snapshots__/uml-deployment-artifact-component-test.tsx.snap b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-artifact/__snapshots__/uml-deployment-artifact-component-test.tsx.snap index 2bc113571..2bcb2fbb2 100644 --- a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-artifact/__snapshots__/uml-deployment-artifact-component-test.tsx.snap +++ b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-artifact/__snapshots__/uml-deployment-artifact-component-test.tsx.snap @@ -23,7 +23,7 @@ exports[`render the uml-deplyoment-artifact-component 1`] = ` TestDeploymentComponent { const artifact: UMLDeploymentArtifact = new UMLDeploymentArtifact({ name: 'TestDeploymentComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(artifact.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/uml-deployment-interface-test.tsx b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/uml-deployment-interface-test.tsx index 645dce6e2..f1bd0a0a7 100644 --- a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/uml-deployment-interface-test.tsx +++ b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/uml-deployment-interface-test.tsx @@ -7,7 +7,7 @@ it('render the uml-deployment-interface-component', () => { const component: UMLDeploymentInterface = new UMLDeploymentInterface({ name: 'TestDeploymentComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(component.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component-test.tsx b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component-test.tsx index 0f8e32512..1817ec01f 100644 --- a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component-test.tsx +++ b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component-test.tsx @@ -7,7 +7,7 @@ it('render the uml-deployment-node-component', () => { const deploymentNode: UMLDeploymentNode = new UMLDeploymentNode({ name: 'TestDeploymentComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(deploymentNode.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-required-interface/uml-deployment-required-interface-component-test.tsx b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-required-interface/uml-deployment-required-interface-component-test.tsx index 307fd9b4a..4e4345d25 100644 --- a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-required-interface/uml-deployment-required-interface-component-test.tsx +++ b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-required-interface/uml-deployment-required-interface-component-test.tsx @@ -17,7 +17,7 @@ it('render the uml-deplyoment-required-interface-component', () => { initialState={{ elements: { [umlDeploymentInterfaceRequired.id]: { ...umlDeploymentInterfaceRequired } } }} > - + , diff --git a/src/tests/unit/packages/uml-object-diagram/uml-object-attribute/uml-object-attribute-test.tsx b/src/tests/unit/packages/uml-object-diagram/uml-object-attribute/uml-object-attribute-test.tsx index ed3b13b16..f67e8cc49 100644 --- a/src/tests/unit/packages/uml-object-diagram/uml-object-attribute/uml-object-attribute-test.tsx +++ b/src/tests/unit/packages/uml-object-diagram/uml-object-attribute/uml-object-attribute-test.tsx @@ -7,7 +7,7 @@ it('render the uml-object-attribute-component', () => { const attribute: UMLObjectAttribute = new UMLObjectAttribute({ name: 'TestObjectComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(attribute.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-object-diagram/uml-object-method/uml-object-method-test.tsx b/src/tests/unit/packages/uml-object-diagram/uml-object-method/uml-object-method-test.tsx index 8706e87ad..1847fd5e1 100644 --- a/src/tests/unit/packages/uml-object-diagram/uml-object-method/uml-object-method-test.tsx +++ b/src/tests/unit/packages/uml-object-diagram/uml-object-method/uml-object-method-test.tsx @@ -7,7 +7,7 @@ it('render the uml-object-method-component', () => { const attribute: UMLObjectMethod = new UMLObjectMethod({ name: 'TestObjectComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(attribute.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/uml-petri-net-place-component-test.tsx b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/uml-petri-net-place-component-test.tsx index 5adae2760..24d83e592 100644 --- a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/uml-petri-net-place-component-test.tsx +++ b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/uml-petri-net-place-component-test.tsx @@ -12,7 +12,7 @@ describe('uml-petri-net-arc-component', () => { it('render the uml-petri-net-arc-component', () => { const { baseElement } = wrappedRender( - + , ); expect(baseElement).toMatchSnapshot(); @@ -22,7 +22,7 @@ describe('uml-petri-net-arc-component', () => { element.amountOfTokens = 1; const { container } = wrappedRender( - + , ); // place has circle, and token has a circle @@ -33,7 +33,7 @@ describe('uml-petri-net-arc-component', () => { element.amountOfTokens = 2; const { container } = wrappedRender( - + , ); // place has circle, and 2 tokens as circle @@ -44,7 +44,7 @@ describe('uml-petri-net-arc-component', () => { element.amountOfTokens = 3; const { container } = wrappedRender( - + , ); // place has circle, and 3 tokens as circle @@ -55,7 +55,7 @@ describe('uml-petri-net-arc-component', () => { element.amountOfTokens = 4; const { container } = wrappedRender( - + , ); // place has circle and 4 tokens as circle @@ -66,7 +66,7 @@ describe('uml-petri-net-arc-component', () => { element.amountOfTokens = 5; const { container } = wrappedRender( - + , ); // place has circle and 5 tokens as circle @@ -77,7 +77,7 @@ describe('uml-petri-net-arc-component', () => { element.amountOfTokens = 6; const { container, getByText } = wrappedRender( - + , ); // 6 is displayed as number, not as token anymore diff --git a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-transition/uml-petri-net-transition-component-test.tsx b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-transition/uml-petri-net-transition-component-test.tsx index c9132057f..e55cfcdeb 100644 --- a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-transition/uml-petri-net-transition-component-test.tsx +++ b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-transition/uml-petri-net-transition-component-test.tsx @@ -7,7 +7,7 @@ it('render the uml-petri-net-transition-component', () => { const element: UMLPetriNetTransition = new UMLPetriNetTransition({ name: 'Example Description' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(element.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component-test.tsx b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component-test.tsx index cf8f527c5..55dad37c7 100644 --- a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component-test.tsx +++ b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component-test.tsx @@ -16,7 +16,7 @@ it('render the uml-reachability-graph-arc-component', () => { }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(element.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component-test.tsx b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component-test.tsx index 82c1c4ee9..f17ab53dd 100644 --- a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component-test.tsx +++ b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component-test.tsx @@ -12,7 +12,7 @@ describe('uml-reachability-graph-marking-component', () => { it('render the uml-reachability-graph-marking-component', () => { const { baseElement } = wrappedRender( - + , ); expect(baseElement).toMatchSnapshot(); @@ -22,7 +22,7 @@ describe('uml-reachability-graph-marking-component', () => { element.isInitialMarking = false; const { container } = wrappedRender( - + , ); expect(container.querySelectorAll('polyline')).toHaveLength(0); @@ -32,7 +32,7 @@ describe('uml-reachability-graph-marking-component', () => { element.isInitialMarking = true; const { container } = wrappedRender( - + , ); expect(container.querySelectorAll('polyline')).toHaveLength(1); diff --git a/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component-test.tsx b/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component-test.tsx index 0c0bd8762..7f3639dcc 100644 --- a/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component-test.tsx +++ b/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-actor/uml-use-case-actor-component-test.tsx @@ -7,7 +7,7 @@ it('render the uml-use-case-actor-component', () => { const actor: UMLUseCaseActor = new UMLUseCaseActor({ name: 'TestUseCaseComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(actor.name)).toBeInTheDocument(); diff --git a/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component-test.tsx b/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component-test.tsx index 4386b5d27..acf57749e 100644 --- a/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component-test.tsx +++ b/src/tests/unit/packages/uml-use-case-diagram/uml-use-case-system/uml-use-case-system-component-test.tsx @@ -7,7 +7,7 @@ it('render the uml-use-case-component', () => { const useCaseSystem: UMLUseCaseSystem = new UMLUseCaseSystem({ name: 'TestUseCaseComponent' }); const { getByText, baseElement } = wrappedRender( - + , ); expect(getByText(useCaseSystem.name)).toBeInTheDocument(); diff --git a/src/tests/unit/test-resources/class-diagram-as-svg.json b/src/tests/unit/test-resources/class-diagram-as-svg.json index 884b8093a..4eae6331e 100644 --- a/src/tests/unit/test-resources/class-diagram-as-svg.json +++ b/src/tests/unit/test-resources/class-diagram-as-svg.json @@ -1 +1 @@ -"PackageClass+ attribute: Type+ method()Class+ attribute: Type+ method()" +"PackageClass+ attribute: Type+ method()Class+ attribute: Type+ method()" diff --git a/src/tests/unit/test-utils/test-utils.tsx b/src/tests/unit/test-utils/test-utils.tsx index cf02cf8e0..590d17024 100644 --- a/src/tests/unit/test-utils/test-utils.tsx +++ b/src/tests/unit/test-utils/test-utils.tsx @@ -40,7 +40,6 @@ const createModelStateFromPartialModelState = ( mode: partialModelState?.editor?.mode ? partialModelState.editor.mode : ApollonMode.Modelling, readonly: partialModelState?.editor?.readonly ? partialModelState.editor?.readonly : false, colorEnabled: partialModelState?.editor?.colorEnabled ? partialModelState.editor.colorEnabled : false, - scale: partialModelState?.editor?.scale ? partialModelState.editor.scale : false, enablePopups: partialModelState?.editor?.enablePopups ? partialModelState.editor?.enablePopups : true, enableCopyPasteToClipboard: partialModelState?.editor?.enableCopyPasteToClipboard ? partialModelState.editor?.enableCopyPasteToClipboard