svg-layout-designer-react/src/utils/default.ts

import { XPositionReference } from '../Enums/XPositionReference';
import { IAvailableContainer } from '../Interfaces/IAvailableContainer';
import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
import { IConfiguration } from '../Interfaces/IConfiguration';
import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel';
import { IContainerProperties } from '../Interfaces/IContainerProperties';
import { IEditorState } from '../Interfaces/IEditorState';
import { ISymbolModel } from '../Interfaces/ISymbolModel';

/// CONTAINER DEFAULTS ///

export const SHOW_TEXT = false;
export const SHOW_SELECTOR_TEXT = true;
export const DEFAULTCHILDTYPE_ALLOW_CYCLIC = false;
export const DEFAULTCHILDTYPE_MAX_DEPTH = 10;

/// DIMENSIONS DEFAULTS ///

export const SHOW_SELF_DIMENSIONS = true;
export const SHOW_CHILDREN_DIMENSIONS = false;
export const SHOW_BORROWER_DIMENSIONS = true;
export const SHOW_DIMENSIONS_PER_DEPTH = false;
export const DIMENSION_MARGIN = 50;
export const NOTCHES_LENGTH = 4;

/// SYMBOL DEFAULTS ///

export const DEFAULT_SYMBOL_WIDTH = 32;
export const DEFAULT_SYMBOL_HEIGHT = 32;

/// EDITOR DEFAULTS ///

export const ENABLE_SHORTCUTS = true;
export const MAX_HISTORY = 200;
export const APPLY_BEHAVIORS_ON_CHILDREN = true;
export const MAX_FRAMERATE = 120;

/**
 * Returns the default editor state given the configuration
 */
export function GetDefaultEditorState(configuration: IConfiguration): IEditorState {
  const mainContainer = new ContainerModel(
    null,
    {
      ...DEFAULT_MAINCONTAINER_PROPS,
      width: Number(configuration.MainContainer.Width),
      height: Number(configuration.MainContainer.Height)
    }
  );

  return {
    configuration,
    history: [
      {
        lastAction: '',
        mainContainer,
        selectedContainerId: mainContainer.properties.id,
        typeCounters: {},
        symbols: new Map(),
        selectedSymbolId: ''
      }
    ],
    historyCurrentStep: 0
  };
}

/**
 * Default config when the API is not available
 */
export const DEFAULT_CONFIG: IConfiguration = {
  /* eslint-disable @typescript-eslint/naming-convention */
  AvailableContainers: [
    {
      Type: 'Container',
      MaxWidth: 200,
      Height: 100,
      Style: {
        fillOpacity: 0,
        stroke: 'green'
      }
    }
  ],
  AvailableSymbols: [],
  MainContainer: {
    Type: 'Container',
    Width: 800,
    Height: 100,
    Style: {
      fillOpacity: 0,
      stroke: 'black'
    }
  }
  /* eslint-enable */
};

/**
 * Default Main container properties
 */
export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
  id: 'main',
  type: 'container',
  parentId: '',
  linkedSymbolId: '',
  displayedText: 'main',
  x: 0,
  y: 0,
  margin: {},
  minWidth: 1,
  maxWidth: Number.MAX_SAFE_INTEGER,
  width: Number(DEFAULT_CONFIG.MainContainer.Width),
  height: Number(DEFAULT_CONFIG.MainContainer.Height),
  isAnchor: false,
  isFlex: false,
  xPositionReference: XPositionReference.Left,
  showChildrenDimensions: true, // TODO: put the dimension at the top (see pdf)
  showSelfDimensions: true, // TODO: put the dimension at the bottom (see pdf)
  isDimensionBorrower: true, // second dimensions from the bottom
  markPositionToDimensionBorrower: false,
  style: {
    stroke: 'black',
    fillOpacity: 0
  }
};

/**
 * Returns the default properties of a newly created container
 * @param type Type of the container
 * @param typeCount index of the container
 * @param parent Parent of the container
 * @param x horizontal offset
 * @param y vertical offset
 * @param containerConfig default config of the container sent by the API
 * @returns {IContainerProperties} Default properties of a newly created container
 */
export function GetDefaultContainerProps(type: string,
  typeCount: number,
  parent: IContainerModel,
  x: number,
  y: number,
  width: number,
  height: number,
  containerConfig: IAvailableContainer): IContainerProperties {
  return ({
    id: `${type}-${typeCount}`,
    type,
    parentId: parent.properties.id,
    linkedSymbolId: '',
    displayedText: `${type}-${typeCount}`,
    x,
    y,
    margin: containerConfig.Margin ?? {},
    width,
    height,
    isAnchor: containerConfig.IsAnchor ?? false,
    isFlex: containerConfig.IsFlex ?? containerConfig.Width === undefined,
    xPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left,
    minWidth: containerConfig.MinWidth ?? 1,
    maxWidth: containerConfig.MaxWidth ?? Number.MAX_SAFE_INTEGER,
    showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? false,
    showSelfDimensions: containerConfig.ShowSelfDimensions ?? false,
    markPositionToDimensionBorrower: containerConfig.MarkPositionToDimensionBorrower ?? false,
    isDimensionBorrower: containerConfig.IsDimensionBorrower ?? false,
    customSVG: containerConfig.CustomSVG,
    style: structuredClone(containerConfig.Style),
    userData: structuredClone(containerConfig.UserData)
  });
}

export function GetDefaultSymbolModel(name: string,
  newCounters: Record<string, number>,
  type: string,
  symbolConfig: IAvailableSymbol): ISymbolModel {
  return {
    id: `${name}-${newCounters[type]}`,
    type: name,
    config: structuredClone(symbolConfig),
    x: 0,
    width: symbolConfig.Width ?? DEFAULT_SYMBOL_WIDTH,
    height: symbolConfig.Height ?? DEFAULT_SYMBOL_HEIGHT,
    linkedContainers: new Set()
  };
}