@remotion/studio 4.0.461 → 4.0.462

package/dist/components/Timeline/TimelineFieldRow.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Padder_1 = require("./Padder");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
@@ -27,16 +28,9 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
-    var _a, _b;
-    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const codeValuesForOverride = getCodeValues(nodePath);
-    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
-    if (codeValue === null) {
-        throw new Error('Unexpectedly got null code value for field' + field.key);
-    }
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return nodePath === null
@@ -45,16 +39,12 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
     }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         codeValue,
-        runtimeValue: field.currentRuntimeValue,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const onSave = (0, react_1.useCallback)((value) => {
-        if (!codeValuesForOverride || !validatedLocation || !nodePath) {
-            return Promise.reject(new Error('Cannot save'));
-        }
         if (!codeValue || !codeValue.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
@@ -89,22 +79,29 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
             schema,
         })
             .then((data) => {
-            setCodeValues(nodePath, () => data);
+            setCodeValues(nodePath, (prev) => {
+                if (!data.canUpdate) {
+                    return data;
+                }
+                return {
+                    canUpdate: true,
+                    props: data.props,
+                    effects: prev.canUpdate ? prev.effects : [],
+                };
+            });
         })
-            .catch(() => {
+            .catch((err) => {
             // In case something went wrong, undo optimistic update
-            if (previousUpdate) {
-                setCodeValues(nodePath, (current) => {
-                    if (previousUpdate) {
-                        return previousUpdate;
-                    }
-                    return current;
-                });
-            }
+            setCodeValues(nodePath, (current) => {
+                if (previousUpdate) {
+                    return previousUpdate;
+                }
+                return current;
+            });
+            (0, NotificationCenter_1.showNotification)(`Could not save sequence prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
         });
     }, [
         codeValue,
-        codeValuesForOverride,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -124,6 +121,13 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+    var _a, _b;
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
+    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -131,8 +135,10 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
             paddingLeft,
         };
     }, [field.rowHeight, paddingLeft]);
+    if (codeValue === null) {
+        return null;
+    }
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue })
-        ] }));
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineListItem.js

@@ -20,7 +20,7 @@ const use_resolved_stack_1 = require("./use-resolved-stack");
 exports.INDENT = 10;
 const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     var _a, _b;
-    const nodePath = (_a = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.nodePath) !== null && _a !== void 0 ? _a : null;
+    const nodePath = (_a = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _a !== void 0 ? _a : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
@@ -59,7 +59,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         try {
             const result = await (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
                 fileName: validatedLocation.source,
-                nodePath,
+                nodePath: nodePath.nodePath,
             });
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Duplicated sequence in source file', 2000);
@@ -88,7 +88,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         try {
             const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
                 fileName: validatedLocation.source,
-                nodePath,
+                nodePath: nodePath.nodePath,
             });
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
@@ -194,6 +194,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
-                nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
+                nodePathInfo &&
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineNumberField.js

@@ -31,7 +31,7 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
                 propStatus.canUpdate &&
                 parsed !== propStatus.codeValue) {
                 setDragValue(parsed);
-                onSave(parsed).catch(() => {
+                onSave(parsed).finally(() => {
                     setDragValue(null);
                 });
             }

package/dist/components/Timeline/TimelineRotationField.js

@@ -53,7 +53,7 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
                 const newStr = `${parsed}deg`;
                 if (newStr !== propStatus.codeValue) {
                     setDragValue(parsed);
-                    onSave(newStr).catch(() => {
+                    onSave(newStr).finally(() => {
                         setDragValue(null);
                     });
                 }

package/dist/components/Timeline/TimelineSchemaField.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusTrue } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const UnsupportedStatus: React.FC<{
+    readonly label: string;
+}>;
+export declare const TimelineNonEditableStatus: React.FC<{
+    readonly propStatus: CanUpdateSequencePropStatusFalse;
+}>;
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusTrue;
     readonly effectiveValue: unknown;
 }>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldValue = void 0;
+exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
@@ -20,19 +21,24 @@ const notEditableBackground = {
 const inlineWrapper = {
     fontSize: 12,
 };
+const UnsupportedStatus = ({ label }) => {
+    return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label });
+};
+exports.UnsupportedStatus = UnsupportedStatus;
+const TimelineNonEditableStatus = ({ propStatus }) => {
+    if (propStatus.canUpdate) {
+        return null;
+    }
+    if (propStatus.reason === 'computed') {
+        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
+    }
+    throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+};
+exports.TimelineNonEditableStatus = TimelineNonEditableStatus;
 const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
     const wrapperStyle = !propStatus.canUpdate
         ? notEditableBackground
         : undefined;
-    if (!field.supported) {
-        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
-    }
-    if (!propStatus.canUpdate) {
-        if (propStatus.reason === 'computed') {
-            return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
-        }
-        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
-    }
     if (field.typeName === 'number') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, onSave: onSave, propStatus: propStatus, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
@@ -45,9 +51,12 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
     if (field.typeName === 'boolean') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
+    if (field.typeName === 'color') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineColorField_1.TimelineColorField, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }) }));
+    }
     if (field.typeName === 'enum') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
-    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
+    throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelineFieldValue = TimelineFieldValue;

package/dist/components/Timeline/TimelineTracks.js

@@ -52,18 +52,18 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }) => ({
+const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => ({
     height: (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        getCodeValues,
+        codeValues,
     }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
 const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
@@ -86,7 +86,7 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                                         sequence: track.sequence,
                                         nodePathInfo: track.nodePathInfo,
                                         getIsExpanded,
-                                        getCodeValues,
+                                        codeValues,
                                     }) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };

package/dist/components/Timeline/TimelineTranslateField.js

@@ -65,7 +65,9 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 const newStr = makeString(parsed, currentY);
                 if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
-                    onSave(newStr);
+                    onSave(newStr).finally(() => {
+                        setDragX(null);
+                    });
                 }
             }
         }
@@ -98,7 +100,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 const newStr = makeString(currentX, parsed);
                 if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
-                    onSave(newStr).catch(() => {
+                    onSave(newStr).finally(() => {
                         setDragY(null);
                     });
                 }

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,11 +2,12 @@ import type { SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
+    effects: SequenceSchema[];
     clientId: string;
     applyOnce: ApplyResult;
     applyEach: ApplyResult;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -1,19 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.acquireSequencePropsSubscription = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = (fileName, line, column) => `${fileName}\0${line}\0${column}`;
+const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, clientId, applyOnce, applyEach, }) => {
-    const key = makeKey(fileName, line, column);
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }) => {
+    const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
+    const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
+    const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
     let entry = entries.get(key);
     if (!entry) {
         const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
             fileName,
             line,
             column,
-            schema,
+            keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+            effects: effectKeys,
             clientId,
         });
         const created = {
@@ -72,6 +76,8 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, clie
                     fileName: acquired.fileName,
                     nodePath: result.nodePath,
                     clientId: acquired.clientId,
+                    sequenceKeys,
+                    effectKeys,
                 });
             })
                 .catch(() => {

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,7 +1,8 @@
 import type { SequenceSchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, effects, }: {
     overrideId: string;
     schema: SequenceSchema;
+    effects: SequenceSchema[];
     originalLocation: OriginalPosition | null;
 }) => void;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
     var _a, _b, _c;
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -40,6 +40,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, })
             line: locationLine,
             column: locationColumn,
             schema,
+            effects,
             clientId,
             applyOnce: (result) => {
                 if (!result.success) {
@@ -59,6 +60,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, })
         };
     }, [
         clientId,
+        effects,
         locationColumn,
         locationLine,
         locationSource,

package/dist/components/Timeline/use-timeline-height.js

@@ -11,7 +11,7 @@ const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
@@ -25,7 +25,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     sequence: track.sequence,
                     nodePathInfo: track.nodePathInfo,
                     getIsExpanded,
-                    getCodeValues,
+                    codeValues,
                 }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                 : 0;
             return acc + layerHeight + expandedHeight;
@@ -34,6 +34,6 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
             TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
-    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, getCodeValues]);
+    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, codeValues]);
 };
 exports.useTimelineHeight = useTimelineHeight;