@pie-lib/tools 2.0.2 → 2.0.3-next.0

package/src/ruler/index.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Rotatable from '../rotatable';
-import RulerGraphic from './graphic';
-import PropTypes from 'prop-types';
-import Anchor from '../anchor';
-
-const StyledRuler = styled('div')(({ theme }) => ({
-  cursor: 'move',
-  position: 'relative',
-  backgroundColor: theme.palette.secondary.light,
-  opacity: 1.0,
-  border: `solid 0px ${theme.palette.primary.main}`,
-}));
-
-const StyledLeftAnchor = styled(Anchor)(() => ({
-  left: '-10px',
-  top: '40%',
-}));
-
-const StyledRightAnchor = styled(Anchor)(() => ({
-  right: '-10px',
-  top: '40%',
-}));
-
-export class Ruler extends React.Component {
-  static propTypes = {
-    width: PropTypes.number,
-    height: PropTypes.number,
-    units: PropTypes.number.isRequired,
-    measure: PropTypes.oneOf(['imperial', 'metric']).isRequired,
-    startPosition: PropTypes.shape({
-      left: PropTypes.number.isRequired,
-      top: PropTypes.number.isRequired,
-    }),
-    label: PropTypes.string,
-    tickCount: PropTypes.number,
-  };
-
-  static defaultProps = {
-    width: 480,
-    height: 60,
-    measure: 'imperial',
-    units: 12,
-  };
-
-  render() {
-    const { width, height, units, measure, startPosition, label, tickCount } = this.props;
-
-    const unit =
-      measure === 'imperial'
-        ? {
-            type: label,
-            ticks: tickCount && tickCount % 4 === 0 ? tickCount : 16,
-          }
-        : {
-            type: label,
-            ticks: 10,
-          };
-    return (
-      <Rotatable
-        startPosition={startPosition}
-        handle={[
-          { class: 'leftAnchor', origin: 'bottom right' },
-          { class: 'rightAnchor', origin: 'bottom left' },
-        ]}
-      >
-        <StyledRuler style={{ width: `${width}px`, height: `${height}px` }}>
-          <RulerGraphic width={width} height={height} units={units} unit={unit} />
-          <StyledLeftAnchor className="leftAnchor" />
-          <StyledRightAnchor className="rightAnchor" />
-        </StyledRuler>
-      </Rotatable>
-    );
-  }
-}
-
-export default Ruler;

package/src/ruler/unit-type.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { noSelect, strokeColor } from '../style-utils';
-import { styled } from '@mui/material/styles';
-
-const StyledText = styled('text')(({ theme }) => ({
-  ...noSelect(),
-  fill: strokeColor(theme),
-}));
-
-export const UnitType = (props) => {
-  const { label, x, y, textAlign, fill, fontSize, stroke } = props;
-
-  return (
-    <StyledText x={x} y={y} textAnchor={textAlign} stroke={stroke} fill={fill} fontSize={fontSize}>
-      {label}
-    </StyledText>
-  );
-};
-
-UnitType.propTypes = {
-  label: PropTypes.string.isRequired,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  textAlign: PropTypes.string,
-  fill: PropTypes.string,
-  fontSize: PropTypes.number,
-  stroke: PropTypes.string,
-};
-
-UnitType.defaultProps = {
-  textAnchor: 'start',
-  fontSize: 11,
-  stroke: 'none',
-  x: 8,
-  y: 14,
-};
-
-export default UnitType;

package/src/ruler/unit.jsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { noSelect, strokeColor } from '../style-utils';
-import { range } from 'lodash-es';
-
-const StyledTick = styled('line')(({ theme }) => ({
-  stroke: strokeColor(theme),
-}));
-
-const Tick = ({ x, height, bottom, major, minor }) => {
-  const y1 = major ? bottom - height * 2 : minor ? bottom - height * 1.5 : bottom - height;
-
-  return <StyledTick y1={y1} y2={bottom} x1={x} x2={x} />;
-};
-
-const Ticks = ({ count, width, height }) => {
-  return (
-    <React.Fragment>
-      {range(1, count).map((r) => {
-        return (
-          <Tick
-            key={r}
-            value={r}
-            x={r * (width / count)}
-            major={r % (count / 2) === 0}
-            minor={r % (count / 4) === 0}
-            bottom={height}
-            height={10}
-          />
-        );
-      })}
-    </React.Fragment>
-  );
-};
-
-Ticks.propTypes = {
-  count: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-};
-
-const StyledEndTick = styled('line')(({ theme }) => ({
-  stroke: strokeColor(theme),
-  strokeWidth: 1,
-}));
-
-const StyledLabel = styled('text')(({ theme }) => ({
-  textAnchor: 'end',
-  fontSize: '12px',
-  fill: strokeColor(theme),
-  ...noSelect(),
-}));
-
-export class Unit extends React.Component {
-  static propTypes = {
-    index: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    last: PropTypes.bool.isRequired,
-    config: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { index, width, height, last, config } = this.props;
-
-    const style = {
-      transform: `translate(${width * (index - 1)}px, 0px)`,
-    };
-    return (
-      <g style={style}>
-        {!last && <StyledEndTick x1={width} y1={0} x2={width} y2={height} />}
-
-        <Ticks count={config.ticks} width={width} height={height} />
-        <StyledLabel width={width} x={width - 5} y={15}>
-          {index}
-        </StyledLabel>
-      </g>
-    );
-  }
-}
-
-export default Unit;

package/src/style-utils.js

@@ -1,7 +0,0 @@
-import { noSelect } from '@pie-lib/style-utils';
-
-export { noSelect };
-
-export const strokeColor = (theme) => `var(--ruler-stroke, ${theme.palette.primary.main})`;
-
-export const fillColor = (theme) => `var(--ruler-bg, ${theme.palette.primary.contrastText})`;

package/src/transform-origin.jsx

@@ -1,60 +0,0 @@
-const keyWordToPercent = (v) => {
-  if (v === 'left' || v === 'top') {
-    return 0;
-  } else if (v === 'right' || v === 'bottom') {
-    return 100;
-  } else if (v === 'center') {
-    return 50;
-  } else if (v.endsWith('%')) {
-    return parseFloat(v);
-  } else {
-    return v;
-  }
-};
-
-const getValue = (s, length) => {
-  if (s.endsWith('px')) {
-    return parseFloat(s);
-  } else {
-    s = keyWordToPercent(s);
-    const v = length * (s / 100);
-    return v;
-  }
-};
-
-const normalize = (a) => {
-  if (a[0] === 'bottom' || a[0] === 'top' || a[1] === 'left' || a[1] === 'right') {
-    return [a[1], a[0]];
-  } else {
-    return a;
-  }
-};
-
-/**
- * Parse a transform origin string to x/y values.
- * @param {{width: number, height: number}} rect
- * @param {string} value
- * @returns {x:number, y:number}
- */
-export const parse = (rect, value) => {
-  if (!value) {
-    return {
-      x: rect.width / 2,
-      y: rect.height / 2,
-    };
-  }
-  const arr = value.split(' ');
-  if (arr.length === 1) {
-    //1 val
-    const x = getValue(arr[0], rect.width);
-    const y = getValue('50%', rect.height);
-    return { x, y };
-  } else if (arr.length === 2) {
-    const sorted = normalize(arr);
-    const x = getValue(sorted[0], rect.width);
-    const y = getValue(sorted[1], rect.height);
-    return { x, y };
-  } else if (arr.length === 3) {
-    throw new Error('transform-origin values with 3 fields not supported.');
-  }
-};