@pie-lib/plot 3.2.0-next.9 → 4.0.0

package/src/label.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
 import { Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html-tip-tap';
 import PropTypes from 'prop-types';
@@ -44,8 +45,28 @@ const styles = {
   displayNone: {
     display: 'none',
   },
+  centerPlaceholder: {
+    '& .ProseMirror p.is-editor-empty::before, & .ProseMirror div.is-editor-empty::before': {
+      left: 0,
+      right: 0,
+      width: '100%',
+      textAlign: 'center',
+    },
+  },
 };
 
+
+const LabelWrapper = styled('div')({
+  ...styles.centerPlaceholder,
+});
+
+const LabelContent = styled('div')({
+  ...styles.disabledLabel,
+  '& p': {
+    margin: 0,
+  },
+});
+
 const LabelComponent = (props) => {
   const {
     disabledLabel,
@@ -62,6 +83,7 @@ const LabelComponent = (props) => {
     mathMlOptions = {},
     charactersLimit,
     titleHeight,
+    preventNewLines,
   } = props;
 
   const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
@@ -109,9 +131,18 @@ const LabelComponent = (props) => {
     });
   };
 
+  const onKeyDown = (event) => {
+    if (preventNewLines && event.key === 'Enter') {
+      // prevent adding new lines - cancelling event
+      return true;
+    }
+
+    return false;
+  };
+
   return (
     <Readable false>
-      <div
+      <LabelWrapper
         onClick={rotateLabel}
         style={{
           ...(rotatedToHorizontal ? rotatedStyle : defaultStyle),
@@ -124,7 +155,7 @@ const LabelComponent = (props) => {
         }}
       >
         {disabledLabel ? (
-          <div style={styles.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />
+          <LabelContent dangerouslySetInnerHTML={{ __html: text || '' }} />
         ) : (
           <EditableHtml
             markup={text || ''}
@@ -138,11 +169,12 @@ const LabelComponent = (props) => {
             disableScrollbar
             activePlugins={activePlugins}
             onDone={exitEditMode}
+            onKeyDown={onKeyDown}
             mathMlOptions={mathMlOptions}
             charactersLimit={charactersLimit}
           />
         )}
-      </div>
+      </LabelWrapper>
     </Readable>
   );
 };

package/src/root.jsx

@@ -9,6 +9,15 @@ import { ChildrenType, GraphPropsType } from './types';
 import Label from './label';
 import { extractTextFromHTML, isEmptyObject, isEmptyString } from './utils';
 
+const centerPlaceholder = {
+  '& .ProseMirror p.is-editor-empty::before, & .ProseMirror div.is-editor-empty::before': {
+    left: 0,
+    right: 0,
+    width: '100%',
+    textAlign: 'center',
+  },
+};
+
 const StyledRoot = styled('div')(({ theme }) => ({
   border: `solid 1px ${color.primaryLight()}`,
   color: color.defaults.TEXT,
@@ -26,10 +35,12 @@ const Wrapper = styled('div')({
 const DefineChartSvg = styled('svg')({
   paddingLeft: '50px',
   overflow: 'visible',
+  boxSizing: 'content-box',
 });
 
 const ChartSvg = styled('svg')({
   overflow: 'visible',
+  boxSizing: 'content-box',
 });
 
 const GraphBox = styled('g')({
@@ -48,6 +59,10 @@ const GraphTitle = styled('div')(({ theme }) => ({
   '&.rightMargin': {
     marginRight: '74px',
   },
+  '& p': {
+    margin: 0,
+  },
+  ...centerPlaceholder,
 }));
 
 const ChartTitle = styled('div')(({ theme }) => ({
@@ -61,6 +76,10 @@ const ChartTitle = styled('div')(({ theme }) => ({
   '&.rightMargin': {
     marginRight: '74px',
   },
+  '& p': {
+    margin: 0,
+  },
+  ...centerPlaceholder,
 }));
 
 const TopPixelGuides = styled('div')({
@@ -362,6 +381,7 @@ export class Root extends React.Component {
             graphWidth={finalWidth}
             onChange={(value) => this.onChangeLabel(value, 'top')}
             mathMlOptions={mathMlOptions}
+            preventNewLines={true}
             charactersLimit={labelsCharactersLimit}
           />
         )}
@@ -378,6 +398,7 @@ export class Root extends React.Component {
               isDefineChartLeftLabel={isChart && defineChart}
               onChange={(value) => this.onChangeLabel(value, 'left')}
               mathMlOptions={mathMlOptions}
+              preventNewLines={true}
               charactersLimit={labelsCharactersLimit}
             />
           )}
@@ -420,6 +441,7 @@ export class Root extends React.Component {
               graphWidth={finalWidth}
               onChange={(value) => this.onChangeLabel(value, 'right')}
               mathMlOptions={mathMlOptions}
+              preventNewLines={true}
               charactersLimit={labelsCharactersLimit}
             />
           )}
@@ -451,6 +473,7 @@ export class Root extends React.Component {
             isDefineChartBottomLabel={isChart && defineChart}
             onChange={(value) => this.onChangeLabel(value, 'bottom')}
             mathMlOptions={mathMlOptions}
+            preventNewLines={true}
             charactersLimit={labelsCharactersLimit}
           />
         )}