rotation removed

Author: MenamAfzal

client/packages/lowcoder/src/comps/comps/carouselComp.tsx

@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { PositionControl } from "comps/controls/dropdownControl";
 import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
-import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
+import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
@@ -25,12 +25,11 @@ const CarouselItem = styled.div<{ $src: string }>`
   background-size: contain;
 `;
 
-const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
+const Container = styled.div<{$bg: string; $animationStyle:AnimationStyleType}>`
   &,
   .ant-carousel {
     height: 100%;
     background-color: ${(props) => props.$bg};
-    rotate: ${(props) => props.$rotation};
     ${props=>props.$animationStyle}
   }
 `;
@@ -47,7 +46,6 @@ let CarouselBasicComp = (function () {
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -62,7 +60,6 @@ let CarouselBasicComp = (function () {
       <Container
         ref={containerRef}
         $bg={props.style.background}
-        $rotation={props.style.rotation}
         $animationStyle={props.animationStyle}
       >
         <ReactResizeDetector onResize={onResize}>

client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx

@@ -6,7 +6,7 @@ import { DocumentViewer } from "react-documents";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { StringControl } from "../controls/codeControl";
-import { UICompBuilder, withDefault } from "../generators";
+import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -20,7 +20,6 @@ const getStyle = (style: FileViewerStyleType) => {
     height: ${heightCalculator(style.margin)};	
     margin: ${style.margin};	
     padding: ${style.padding};
-    rotate: ${style.rotation};
 
     overflow: hidden;
     background-color: ${style.background};
@@ -70,7 +69,6 @@ let FileViewerBasicComp = (function () {
     src: StringControl,
     style: styleControl(FileViewerStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {

client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx

@@ -6,11 +6,15 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
 import { RecordConstructorToView } from "lowcoder-core";
 import { useRef, useState } from "react";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
+import {
+  AnimationStyle,
+  AnimationStyleType,
+  VideoStyle,
+} from 'comps/controls/styleControlConstants';
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { playIcon } from "lowcoder-design";
-import { RangeControl, StringControl } from "../../controls/codeControl";
+import { RangeControl } from "../../controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "lowcoder-design";
@@ -108,19 +112,18 @@ const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 const childrenMap = {
-  src: withDefault(StringStateControl, trans("video.defaultSrcUrl")),
-  poster: withDefault(StringStateControl, trans("video.defaultPosterUrl")),
+  src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
+  poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(AudioStyle),
+  style: styleControl(VideoStyle),
   animationStyle: styleControl(AnimationStyle),
   autoPlay: BoolControl,
   loop: BoolControl,
   controls: BoolControl,
   volume: RangeControl.closed(0, 1, 1),
   playbackRate: RangeControl.closed(1, 2, 1),
-  currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
-  duration: numberExposingStateControl("duration"),
-  restrictPaddingOnRotation:withDefault(StringControl, 'video'),
+  currentTimeStamp: numberExposingStateControl('currentTimeStamp', 0),
+  duration: numberExposingStateControl('duration'),
   ...mediaCommonChildren,
 };
 

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1556,7 +1556,6 @@ export const FileViewerStyle = [
   MARGIN,
   PADDING,
   BORDER_WIDTH,
-  ROTATION
 ] as const;
 
 export const IframeStyle = [
@@ -1691,6 +1690,8 @@ export const AudioStyle = [
   ROTATION,
 ] as const;
 
+export const VideoStyle = [MARGIN, PADDING] as const;
+
 export const IconStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder("#00000000"),
@@ -1930,7 +1931,7 @@ export const NavLayoutItemActiveStyle = [
   },
 ] as const;
 
-export const CarouselStyle = [getBackground("canvas"),ROTATION] as const;
+export const CarouselStyle = [getBackground("canvas")] as const;
 
 export const RichTextEditorStyle = [
   getStaticBorder(),
@@ -2012,6 +2013,7 @@ export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
 export type AudioStyleType = StyleConfigType<typeof AudioStyle>;
+export type VideoStyleType = StyleConfigType<typeof VideoStyle>;
 export type IconStyleType = StyleConfigType<typeof IconStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
 export type JsonSchemaFormStyleType = StyleConfigType<

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -267,14 +267,8 @@ function UIView(props: {
               ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
               : restrictPaddingOnRotationVal === 'image'
                 ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
-                : restrictPaddingOnRotationVal === 'imageCarousel'
-                  ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
-                  : restrictPaddingOnRotationVal === 'fileViewer'
-                    ? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
                     : restrictPaddingOnRotationVal === 'controlButton'
                       ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
-                      : restrictPaddingOnRotationVal === 'video'
-                        ? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
                         : '0px' // Both rotation and box-shadow are empty or restricted
             : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
               ? boxShadowVal === null ||