import { CSSProperties } from "styled-components";
import { TextAlign } from "../editor/Text";
import { objectFitOptions } from "../editor/Image";
import { Eases } from "../../../common/constants/AnimationDirection";
import { wrap } from "underscore";
export const TextContainerStyle = (
fontSize: number,
alignment?: TextAlign,
color?: string,
inStyle?: string,
multiLineText?: boolean,
speed?: number,
fontFamily?: string
): CSSProperties => {
const adjustTop = 2 * (fontSize * 1.125 - fontSize);
let style: CSSProperties = {
fontSize: `${fontSize}px`,
whiteSpace: "nowrap",
width: "100%",
textAlign: `${alignment ?? TextAlign.LEFT}`,
overflow: "hidden",
marginTop: `-${adjustTop}px`,
fontFamily: fontFamily,
};
if (multiLineText) {
style = { ...style, whiteSpace: "break-spaces", height: "100%" };
}
if (color) {
style = { ...style, color: `${color}` };
}
if (inStyle) {
style = { ...style, ...JSON.parse(inStyle) };
}
return style;
};
export const StationNameContainerStyle = (): CSSProperties => {
return {
width: "100%",
};
};
export const VideoContainerStyle = (): CSSProperties => {
return {
width: "100%",
height: "100%",
objectFit: "contain",
};
};
export const VerticalLineStyle = (
height: number,
width: number,
color: string
): CSSProperties => {
return {
borderLeft: `${width}px solid ${color}`,
height: `${height}px`,
};
};
export const RectangleStyle = (
width: number,
height: number,
borderColor: string,
borderWidth: number,
fillColor: string,
borderRadius: number
): CSSProperties => {
return {
border: `${borderWidth}px solid ${borderColor}`,
width: `${width}px`,
height: `${height}px`,
backgroundColor: `${fillColor}`,
borderRadius: `${borderRadius}px`,
backgroundClip: "padding-box",
};
};
export const ParamContainerStyle = (): CSSProperties => {
return {
width: "100%",
height: "100%",
};
};
export const MultilineTextContainerStyle = (
fontSize: number,
lines: number,
inStyle?: string,
color?: string,
alignment?: TextAlign
): CSSProperties => {
const adjustTop = 2 * (fontSize * 1.125 - fontSize);
const adjustHeight = fontSize * lines * 1.125 + 5;
const adjustLineHeight = fontSize + adjustTop / 2;
let style: CSSProperties = {
fontSize: `${fontSize}px`,
width: "100%",
textAlign: `${alignment ?? TextAlign.LEFT}`,
wordWrap: "break-word",
lineHeight: `${adjustLineHeight}px`,
height: `${adjustHeight}px`,
overflow: "hidden",
};
if (color) {
style = { ...style, color: `${color}` };
}
if (inStyle) {
style = { ...style, ...JSON.parse(inStyle) };
}
return style;
};
export const checkedMultilineTextContainerStyle = (
fontSize: number,
lines: number,
inStyle?: string,
color?: string,
alignment?: TextAlign
): CSSProperties => {
const adjustTop = 2 * (fontSize * 1.125 - fontSize);
// const adjustHeight = fontSize * lines * 1.125 + 5; //Commentted for now, need to see impact
const adjustLineHeight = fontSize + adjustTop / 2;
let style: CSSProperties = {
fontSize: `${fontSize}px`,
width: "100%",
textAlign: `${alignment ?? TextAlign.LEFT}`,
wordWrap: "break-word",
lineHeight: `${adjustLineHeight}px`,
height: "auto",
overflow: "hidden",
};
if (color) {
style = { ...style, color: `${color}` };
}
if (inStyle) {
style = { ...style, ...JSON.parse(inStyle) };
}
return style;
};
export const EmptyContainerStyle = (isPosition?: boolean): CSSProperties => {
let style: CSSProperties = {
width: "100%",
height: "100%",
backgroundColor: "transparent",
};
if (isPosition) {
style = { ...style, position: "absolute" };
}
return style;
};
export const ImageContainerStyle = (
objectFit?: objectFitOptions
): CSSProperties => {
return {
position: "absolute",
objectFit: `${objectFit ?? objectFitOptions.CONTAIN}`,
width: "100%",
height: "100%",
};
};
export const HourContainerStyle = (
alignment?: TextAlign,
inStyle?: string,
fontSize?: string
): CSSProperties => {
let style: CSSProperties = {
fontSize: `${fontSize}px`,
fontWeight: "bold",
color: "rgb(37, 48, 59)",
textAlign: `${alignment ?? TextAlign.LEFT}`,
};
if (inStyle) {
style = { ...style, ...JSON.parse(inStyle) };
}
return style;
};
export const TrainLineContainerStyle = (color: string): CSSProperties => {
return {
height: "512px",
width: "41px",
backgroundColor: `${color}`,
overflowY: "hidden",
};
};
export const TrainLineThreeContainerStyle = (color: string): CSSProperties => {
return {
height: "455px",
width: "41px",
background: `${color}`,
overflowY: "hidden",
borderBottomRightRadius: "30px",
borderBottomLeftRadius: "30px",
};
};
export const TrainLineLastContainerStyle = (color: string): CSSProperties => {
return {
height: "109px",
width: "41px",
background: `${color}`,
overflowY: "hidden",
borderBottomRightRadius: "30px",
borderBottomLeftRadius: "30px",
};
};
export const TrainLineTwoContainerStyle = (color: string): CSSProperties => {
return {
height: "282px",
width: "41px",
background: `${color}`,
overflowY: "hidden",
borderBottomRightRadius: "30px",
borderBottomLeftRadius: "30px",
};
};
export const CircleContainerStyle = (
width: number,
height: number,
borderColor: string,
borderWidth: number,
fillColor: string,
borderRadius: number
): CSSProperties => {
return {
border: `${borderWidth}px solid ${borderColor}`,
width: `${width}px`,
height: `${height}px`,
backgroundColor: `${fillColor}`,
borderRadius: `${borderRadius}%`,
backgroundClip: "padding-box",
};
};
export const ConnectionContainerStyle = (
width: number,
connImageAlignment: string
): CSSProperties => {
return {
width: `${width}px`,
height: "100%",
position: "absolute",
overflow: "hidden",
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent:
connImageAlignment === "left"
? "flex-start"
: connImageAlignment === "center"
? "center"
: "flex-end",
alignItems: "center",
};
};
export const RemovableContentStyle = (
connectionIconSize: number
): CSSProperties => {
return {
width: `${connectionIconSize}px` || "93px",
height: `${connectionIconSize}px` || "93px",
display: "flex",
justifyContent: "center",
alignItems: "center",
};
};
export const ConnectionImageContainerStyle = (
connectionIconSize: number
): CSSProperties => {
return {
width: `${connectionIconSize}px` || "100%",
height: `${connectionIconSize}px` || "100%",
};
};
export const HorizontalLineContainerStyle = (
width: number,
height: number,
color: string
): CSSProperties => {
return {
borderTop: `${height}px solid ${color}`,
width: `${width}px`,
};
};
export const ConnTrainMainContainerStyle = (): CSSProperties => {
return {
border: "14px solid black",
width: "100%",
height: "100%",
backgroundColor: "white",
};
};
export const ConnTrainLeftContainerStyle = (): CSSProperties => {
return {
position: "relative",
width: "865px",
minWidth: "865px",
maxWidth: "865px",
};
};
export const ConnTrainRightContainerStyle = (): CSSProperties => {
return {
position: "absolute",
width: "997px",
top: "0px",
left: "988px",
};
};
export const ConnTrainAbsoluteTextSpanContainerStyle = (
color: string,
left: number,
top: number
): CSSProperties => {
return {
position: "absolute",
fontSize: "54px",
color: `${color}`,
left: `${left}px`,
top: `${top}px`,
};
};
export const ConnTrainPositionedLeftTextContainerStyle = (
left: number,
top: number
): CSSProperties => {
return {
position: "absolute",
top: `${top}px`,
left: `${left}px`,
whiteSpace: "nowrap",
display: "flex",
flexDirection: "row",
};
};
export const ConnTrainTextSpanContainerStyle = (
color: string
): CSSProperties => {
return {
fontSize: "54px",
color: `${color}`,
};
};
export const StationConnectionContainerStyle = (): CSSProperties => {
return {
position: "absolute",
left: "137px",
top: "43px",
width: "215px",
};
};
export const MultiLangTextContainerStyle = (): CSSProperties => {
return {
height: "100%",
overflow: "hidden",
padding: 0,
margin: 0,
fontFamily: "sans-serif",
};
};
export const MultiLangListContainerStyle = (
fontSize: number,
color?: string,
multiLineText?: boolean,
inStyle?: string
): CSSProperties => {
let style: CSSProperties = {
fontSize: `${fontSize}px`,
height: "100%",
position: "relative",
overflow: "hidden",
margin: 0,
padding: 0,
};
if (multiLineText) {
style = { ...style, whiteSpace: "break-spaces", height: "100%" };
}
if (color) {
style = { ...style, color: `${color}` };
}
if (inStyle) {
style = { ...style, ...JSON.parse(inStyle) };
}
return style;
};
export const TemperatureContainerStyle = (
alignment?: TextAlign,
inStyle?: string
): CSSProperties => {
let style: CSSProperties = {
fontSize: "41px",
fontWeight: "bold",
color: "rgb(37, 48, 59)",
textAlign: `${alignment ?? TextAlign.LEFT}`,
};
if (inStyle) {
style = { ...style, ...JSON.parse(inStyle) };
}
return style;
};
export const MultiLangListTextAnimationStyle = (
delay: number,
itemCount: number,
speed: number,
direction: string
): CSSProperties => {
let style: CSSProperties = {
position: "absolute",
paddingLeft: "1rem",
animation: `ml-list-item-anim-${direction} ${itemCount * speed}s infinite ${Eases.In
}`,
animationDelay: `${delay}s`,
};
switch (direction) {
case "right":
style = { ...style, right: "100%" };
break;
case "left":
style = { ...style, left: "100%" };
break;
case "up":
style = { ...style, top: "-100%" };
break;
case "down":
style = { ...style, top: "100%" };
break;
}
return style;
};
export const AnimatedDrmContainerStyle = (
width: number,
height: number,
color: string
): CSSProperties => {
return {
position: "relative",
width: `${width}px`,
height: `${height}px`,
borderTop: `${height}px solid ${color}`,
};
};
export const AnimatedLineContainerStyle = (
width: number,
height: number,
color: string
): CSSProperties => {
return {
position: "relative",
width: `${width}px`,
height: `${height}px`,
borderTop: `${height}px solid ${color}`,
};
};