Merge next in main (#534)

* fix(app): canvas export image content is not rendered if it's higher than viewport * fix(app): fix custom editor initial value * fix(dom-export): reduce dom-export timeout * Create early-snails-leave.md * fix: editor code update does not trigger event * feat: aspect ratio (#535) * feat: custom aspect ratio * feat: aspect ratio popover * fix: fix custom editor set value * fix: fix frame preview aspect ratio * fix: aspect ratio popover title * feat: aspect ratio by custom resizable hook * refactor bind-event-listener bindings with @solid-primitives/event-listener * Create dull-roses-add.md * feat: add aspect ratio config, improve calc * feat: add aspect ratio popover experimental feature * fix: scrollbar overflow x/y corner style * fix: frame canvas width/height set for export * docs(changeset): add Aspect Ratio config * fix: zIndex and minor style fixes
riccardoperra · Jun 4, 2023 · 09d36e2 · 09d36e2
1 parent 15312cd
commit 09d36e2
Show file tree

Hide file tree

Showing 27 changed files with 768 additions and 149 deletions.
diff --git a/.changeset/dull-roses-add.md b/.changeset/dull-roses-add.md
@@ -0,0 +1,5 @@
+---
+"@codeimage/app": minor
+---
+
+feat: aspect ratio
diff --git a/.changeset/fresh-nails-retire.md b/.changeset/fresh-nails-retire.md
@@ -0,0 +1,5 @@
+---
+'@codeimage/config': minor
+---
+
+add Aspect Ratio config
diff --git a/apps/codeimage/package.json b/apps/codeimage/package.json
@@ -79,6 +79,7 @@
     "@solid-aria/overlays": "^0.1.3",
     "@solid-primitives/context": "^0.1.4",
     "@solid-primitives/event-bus": "1.0.5",
+    "@solid-primitives/event-listener": "2.2.13",
     "@solid-primitives/i18n": "^1.2.1",
     "@solid-primitives/immutable": "^0.1.8",
     "@solid-primitives/platform": "^0.0.101",
@@ -91,7 +92,6 @@
     "@vanilla-extract/dynamic": "^2.0.3",
     "@vanilla-extract/recipes": "^0.3.0",
     "@vanilla-extract/sprinkles": "^1.5.1",
-    "bind-event-listener": "^2.1.1",
     "clsx": "^1.2.1",
     "downloadjs": "^1.4.7",
     "idb-keyval": "^6.2.0",

diff --git a/apps/codeimage/src/components/CustomEditor/CanvasEditor.tsx b/apps/codeimage/src/components/CustomEditor/CanvasEditor.tsx
@@ -67,6 +67,7 @@ export default function CanvasEditor(props: CanvasEditorProps) {
   return (
     <CustomEditor
       onEditorViewChange={setEditorView}
+      onValueChange={activeEditorStore.setCode}
       readOnly={props.readOnly}
     />
   );

diff --git a/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx b/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx
@@ -61,6 +61,7 @@ const EDITOR_BASE_SETUP: Extension = [
 interface CustomEditorProps {
   readOnly: boolean;
   onEditorViewChange?: (view: EditorView | undefined) => void;
+  onValueChange?: (value: string) => void;
 }
 
 export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
@@ -80,6 +81,7 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
   } = createCodeMirror({
     value: editor()?.code,
     onTransactionDispatched: tr => canvasEditorEvents.emit(tr),
+    onValueChange: props.onValueChange,
   });
 
   createEffect(() => props.onEditorViewChange?.(editorView()));

diff --git a/apps/codeimage/src/components/Footer/Footer.css.ts b/apps/codeimage/src/components/Footer/Footer.css.ts
@@ -5,5 +5,6 @@ export const wrapper = style({
   position: 'absolute',
   bottom: 0,
   width: '100%',
+  zIndex: 0,
   color: themeVars.dynamicColors.descriptionTextColor,
 });
diff --git a/apps/codeimage/src/components/Frame/Frame.css.ts b/apps/codeimage/src/components/Frame/Frame.css.ts
@@ -8,14 +8,16 @@ export const [frame, frameVars] = createTheme({
   opacity: '100%',
   visibility: 'visible',
   width: 'auto',
+  height: 'auto',
   minWidth: 'max-content',
-  minHeight: '150px',
-  maxWidth: '1400px',
+  minHeight: '100%',
+  maxWidth: '1920px',
   controlHandleSize: '24px',
   controlHandleColor: '',
   resizeLineBadgeBackgroundColor: '',
   resizeLineBackgroundColor: '',
   controlOffset: '0px',
+  aspectRatio: 'auto',
 });
 
 export const wrapper = style([
@@ -67,6 +69,7 @@ export const previewPortal = style({
 export const container = style([
   {
     width: frameVars.width,
+    height: frameVars.height,
     maxWidth: frameVars.maxWidth,
     minWidth: frameVars.minWidth,
     minHeight: frameVars.minHeight,
@@ -77,6 +80,9 @@ export const container = style([
     boxSizing: 'border-box',
     userSelect: 'none',
     transition: 'background-color .2s, padding .2s, border-radius .2s',
+    display: 'grid',
+    flexDirection: 'column',
+    alignItems: 'center',
   },
 ]);
 

diff --git a/apps/codeimage/src/components/Frame/Frame.tsx b/apps/codeimage/src/components/Frame/Frame.tsx
@@ -10,8 +10,9 @@ import {Box, FadeInOutTransition} from '@codeimage/ui';
 import {exportExclude as _exportExclude} from '@core/directives/exportExclude';
 import {useModality} from '@core/hooks/isMobile';
 import {createHorizontalResize} from '@core/hooks/resizable';
+import {createResizeObserver} from '@solid-primitives/resize-observer';
 import {assignInlineVars} from '@vanilla-extract/dynamic';
-import {createEffect, on, onMount, ParentComponent, Show} from 'solid-js';
+import {onMount, ParentComponent, Show} from 'solid-js';
 import * as styles from './Frame.css';
 
 export const exportExclude = _exportExclude;
@@ -23,14 +24,22 @@ interface FrameProps {
   opacity: number;
   visible: boolean;
   readOnly: boolean;
+  aspectRatio: string | null | undefined;
   onWidthChange: (width: number) => void;
+  onHeightChange: (height: number) => void;
 }
 
 export const Frame: ParentComponent<FrameProps> = props => {
-  const {width, onResizeStart, setRef, resizing, ref} = createHorizontalResize({
-    minWidth: 200,
-    maxWidth: 1400,
-  });
+  const {width, height, onResizeStart, setRef, resizing, ref} =
+    createHorizontalResize({
+      minWidth: 200,
+      maxWidth: 1920,
+      aspectRatio: () => {
+        if (!props.aspectRatio) return null;
+        const [w, h] = props.aspectRatio.split('/').map(Number);
+        return w / h;
+      },
+    });
 
   const assetsStore = getAssetsStore();
 
@@ -39,28 +48,39 @@ export const Frame: ParentComponent<FrameProps> = props => {
     return size ? `${size}px` : 'auto';
   };
 
+  const computedHeight = () => {
+    const size = height();
+    return size ? `${size}px` : '100%';
+  };
+
   const roundedWidth = () => `${Math.floor(width())}px`;
   const modality = useModality();
 
-  createEffect(
-    on(
-      width,
-      width => {
-        props.onWidthChange?.(width);
-      },
-      {defer: true},
-    ),
-  );
+  createResizeObserver(ref, () => {
+    setTimeout(() => {
+      const refValue = ref();
+      if (!refValue) return;
+      const {clientWidth, clientHeight} = refValue;
+      props.onWidthChange(clientWidth);
+      props.onHeightChange(clientHeight);
+    });
+  });
 
   onMount(() => props.onWidthChange?.(ref()?.clientWidth ?? 0));
 
   return (
-    <Box position={'relative'} class={styles.wrapper}>
+    <div
+      style={assignInlineVars({
+        [styles.frameVars.aspectRatio]: 'unset',
+      })}
+      class={styles.wrapper}
+    >
       <div
         ref={setRef}
         class={styles.container}
         style={assignInlineVars({
           [styles.frameVars.width]: computedWidth(),
+          [styles.frameVars.height]: computedHeight(),
           [styles.frameVars.padding]: `${props.padding}px`,
         })}
       >
@@ -119,6 +139,6 @@ export const Frame: ParentComponent<FrameProps> = props => {
           <hr class={styles.resizeLineDivider} />
         </Box>
       </FadeInOutTransition>
-    </Box>
+    </div>
   );
 };
diff --git a/apps/codeimage/src/components/Frame/FrameHandler.css.ts b/apps/codeimage/src/components/Frame/FrameHandler.css.ts
@@ -13,17 +13,10 @@ export const wrapper = style([
     width: '100%',
     height: '100%',
     display: 'grid',
-    overflowY: 'auto',
-    overflowX: 'hidden',
+    overflow: 'auto',
     flex: '1',
-    alignItems: 'center',
-    justifyContent: 'center',
-    '@supports': {
-      '(scrollbar-gutter: stable)': {
-        paddingRight: 0,
-        scrollbarGutter: 'stable',
-      },
-    },
+    placeItems: 'center',
+    zIndex: 1,
     selectors: {
       ...withThemeMode({
         dark: {

diff --git a/apps/codeimage/src/components/Frame/ManagedFrame.tsx b/apps/codeimage/src/components/Frame/ManagedFrame.tsx
@@ -23,7 +23,9 @@ export function ManagedFrame() {
       background={frame.background}
       opacity={frame.opacity}
       visible={frame.visible}
+      aspectRatio={frame.aspectRatio}
       onWidthChange={getFrameState().setWidth}
+      onHeightChange={getFrameState().setHeight}
     >
       <DynamicTerminal
         type={terminal.type}

diff --git a/apps/codeimage/src/components/Frame/PreviewFrame.tsx b/apps/codeimage/src/components/Frame/PreviewFrame.tsx
@@ -72,6 +72,7 @@ export function PreviewFrame(props: VoidProps<PreviewFrameProps>) {
           class={styles.container}
           style={assignInlineVars({
             [styles.frameVars.width]: `${frame.width}px`,
+            [styles.frameVars.height]: `${frame.height}px`,
             [styles.frameVars.padding]: `${frame.padding}px`,
           })}
         >

diff --git a/apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx
@@ -1,10 +1,12 @@
 import {useI18n} from '@codeimage/locale';
 import {getFrameState} from '@codeimage/store/editor/frame';
 import {RangeField, SegmentedField} from '@codeimage/ui';
+import {getUmami} from '@core/constants/umami';
 import {SkeletonLine, SkeletonVCenter} from '@ui/Skeleton/Skeleton';
 import {ParentComponent, Show} from 'solid-js';
 import {appEnvironment} from '../../core/configuration';
 import {AppLocaleEntries} from '../../i18n';
+import {AspectRatioPicker} from './controls/AspectRatioPicker/AspectRatioPicker';
 import {CustomColorPicker} from './controls/CustomColorPicker';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
@@ -94,6 +96,22 @@ export const FrameStyleForm: ParentComponent = () => {
           </TwoColumnPanelRow>
         </PanelRow>
       </Show>
+
+      <PanelRow for={'aspectRatio'} label={t('frame.aspectRatio')}>
+        <TwoColumnPanelRow>
+          <SuspenseEditorItem
+            fallback={<SkeletonLine width={'100%'} height={'26px'} />}
+          >
+            <AspectRatioPicker
+              value={frame.store.aspectRatio}
+              onChange={ratio => {
+                frame.setAspectRatio(ratio);
+                getUmami().trackEvent(ratio ?? 'auto', 'aspect-ratio');
+              }}
+            />
+          </SuspenseEditorItem>
+        </TwoColumnPanelRow>
+      </PanelRow>
     </>
   );
 };
diff --git a/apps/codeimage/src/components/PropertyEditor/PanelRow.tsx b/apps/codeimage/src/components/PropertyEditor/PanelRow.tsx
@@ -1,10 +1,10 @@
 import {Box, Text} from '@codeimage/ui';
-import {FlowComponent, Show} from 'solid-js';
+import {FlowComponent, JSXElement, Show} from 'solid-js';
 import * as styles from './EditorSidebar.css';
 import {panelRowContent} from './EditorSidebar.css';
 
 interface PanelRowProps {
-  label?: string;
+  label?: JSXElement;
   for: string;
 }