Remove scale property from Apollon

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,

src/main/components/canvas/editor.tsx

@@ -93,11 +93,14 @@ class EditorComponent extends Component<Props, State> {
   zoomContainer = createRef<HTMLDivElement>();
 
   componentDidMount() {
+    // const { zoomFactor = 1 } = this.props;
+
     window.addEventListener(
       'wheel',
       (event) => {
         if (event.ctrlKey) {
           event.preventDefault();
+          // this.props.changeZoomFactor(clamp(zoomFactor - event.deltaY * 0.1, minScale, maxScale));
         }
       },
       { passive: false },

src/main/components/connectable/connection-preview.tsx

@@ -96,10 +96,9 @@ class Preview extends Component<Props, State> {
     if (event instanceof PointerEvent) {
       position = new Point(event.clientX - offset.x, event.clientY - offset.y).scale(1 / zoomFactor);
     } else {
-      position = new Point(
-        event.targetTouches[0].clientX - offset.x,
-        event.targetTouches[0].clientY  - offset.y,
-      ).scale(1 / zoomFactor);
+      position = new Point(event.targetTouches[0].clientX - offset.x, event.targetTouches[0].clientY - offset.y).scale(
+        1 / zoomFactor,
+      );
     }
 
     this.setState({ position });

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<ComponentClass<OwnProps>>(
     (state) => ({
       type: state.diagram.type,
       colorEnabled: state.editor.colorEnabled,
-      scale: state.editor.scale,
     }),
     {
       create: UMLElementRepository.create,
@@ -146,7 +144,7 @@ class CreatePaneComponent extends Component<Props, State> {
     );
 
     return (
-      <StoreProvider initialState={{ elements, editor: { features, scale: this.props.scale } }}>
+      <StoreProvider initialState={{ elements, editor: { features } }}>
         {this.getElementArray(previews)}
         {utils && utils.length > 0 ? (
           <>

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<ComponentClass<OwnProps>>(
       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<Props> {
     if (this.props.readonly || this.props.mode === ApollonMode.Assessment) return null;
 
     return (
-      <Container scale={this.props.scale} id="modeling-editor-sidebar" data-cy="modeling-editor-sidebar">
+      <Container id="modeling-editor-sidebar" data-cy="modeling-editor-sidebar">
         {this.props.mode === ApollonMode.Exporting && (
           <Switch value={this.props.view} onChange={this.props.changeView} color="primary">
             <Switch.Item value={ApollonView.Modelling}>{this.props.translate('views.modelling')}</Switch.Item>

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

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

src/main/components/theme/theme.tsx

@@ -6,15 +6,14 @@ import { defaults, Styles } from './styles';
 
 const defaultProps = {
   styles: {} as DeepPartial<Styles>,
-  scale: 1.0,
 };
 
 type Props = { children?: React.ReactChild } & typeof defaultProps;
 
 export class Theme extends Component<Props> {
   static defaultProps = defaultProps;
 
-  theme: Styles = update(defaults(this.props.scale), this.props.styles);
+  theme: Styles = update(defaults(), this.props.styles);
 
   render() {
     return <ThemeProvider theme={this.theme}>{this.props.children}</ThemeProvider>;

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<ComponentClass<OwnProps>>(
       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<Props> {
         fillOpacity={moving ? 0.7 : undefined}
         fill={highlight}
       >
-        <ElementComponent fillColor={highlight} scale={props.scale} element={UMLElementRepository.get(element)}>
+        <ElementComponent fillColor={highlight} element={UMLElementRepository.get(element)}>
           {elements}
         </ElementComponent>
         {children}

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<ComponentClass<OwnProps>>(
       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<Props, State> {
       children,
       theme,
       mode,
-      scale,
       readonly,
       startwaypointslayout,
       endwaypointslayout,
@@ -130,7 +127,7 @@ export class CanvasRelationshipComponent extends Component<Props, State> {
         pointerEvents={disabled ? 'none' : 'stroke'}
       >
         <polyline points={points} stroke={highlight} fill="none" strokeWidth={STROKE} />
-        <ChildComponent scale={scale} element={UMLRelationshipRepository.get(relationship)} />
+        <ChildComponent element={UMLRelationshipRepository.get(relationship)} />
         {children}
         {midPoints.map((point, index) => {
           return (

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<StateProps, DispatchProps, UMLElementComponentProps, Mod
       reconnecting: !!Object.keys(state.reconnecting).length,
       element: state.elements[props.id],
       type: state.elements[props.id].type as UMLElementType | UMLRelationshipType,
-      scale: state.editor.scale,
     };
   },
   {
@@ -56,14 +54,14 @@ const enhance = connect<StateProps, DispatchProps, UMLElementComponentProps, Mod
 );
 
 const Handle = styled((props) => {
-  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 (
       <svg {...otherProps}>
@@ -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,31 +202,27 @@ export const connectable = (
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                   <Handle
                     ports={ports}
                     direction={Direction.Upleft}
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                   <Handle
                     ports={ports}
                     direction={Direction.Downright}
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                   <Handle
                     ports={ports}
                     direction={Direction.Downleft}
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                 </>
               )}
@@ -246,31 +235,27 @@ export const connectable = (
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                   <Handle
                     ports={ports}
                     direction={Direction.Topleft}
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                   <Handle
                     ports={ports}
                     direction={Direction.Bottomright}
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                   <Handle
                     ports={ports}
                     direction={Direction.Bottomleft}
                     onPointerDown={this.onPointerDown}
                     onPointerUp={this.onPointerUp}
                     alternativePortVisualization={features.alternativePortVisualization}
-                    scale={scale}
                   />
                 </>
               )}

src/main/components/uml-element/movable/movable.tsx

@@ -51,8 +51,7 @@ export const movable = (
     moveWindow: { x: number; y: number } = { x: 0, y: 0 };
 
     move = (x: number, y: number) => {
-
-      const {zoomFactor = 1} = this.props;
+      const { zoomFactor = 1 } = this.props;
 
       x = Math.round(x / 10) * 10;
       y = Math.round(y / 10) * 10;