pixelass / react-mops

🐶 Modify Orientation Position Size

M.O.P.S

Modify Orientation Position Size

German >> English: Mops >> Pug
it moves, it stretches, it rolls around

This is the contributor documentation for the react-mops mono-repository. For user docs see packages/react-mops

Contribute to M.O.P.S

Please read our contributing guide

git clone https://github.com/dekk-app/react-mops.git
cd react-mops
yarn
yarn dev

License

Copyright by Gregor Adams. All packages are released under the MIT license.

Pug icons created by freepik - www.freepik.com;

react-mops's Issues

Allow customization

Is your feature request related to a problem? Please describe.
The styling cannot be customized

Describe the solution you'd like
I want to modify the styles of the handles and box or even inject my own handles

Describe alternatives you've considered
Currently styles need to be hacked via loose selectors and defining rules as!important

Resizing smaller than 0

Resizing a box can lead to strange behavior.

• The element is dragged after it hits its size limit (~0)
• The element can't be resized until the difference has been removed.

Possible solutions

• limit the size to ~0
• allow flipping the box (to/bottom left/right swap)

Markers applied incorrectly

Hello,

I found this package after issues with rotation at react-rnd and I was wondering if I could get some assistance with the handles for resizing and rotation.

I checked all the codesandboxes I could find but I didn't find anything relevant with the v2 release.

here is a sandbox that is pretty much a copy of yours https://codesandbox.io/s/react-mops-handle-282le

I'm not sure if I'm doing something wrong as I'm quite new to react coding.

Thank you for your help

initial position ignoring bounding container even if the container has position:absolute

also not able to understand how to bound the dragable inside a div

Support Orientation/Position/Size props change

make react-mops to be a control component

Guidelines Info

I'm planning to use this component in one of my project and I was wondering if it's possible to show guidelines not only when boxes are "middle aligned" (as for the demo) but even when one of their sides is aligned. Is this supported ?

How do I set the transform origin of an element to (0,0)

Move with Handle

Is your feature request related to a problem? Please describe.
Instead of the entire Box being draggable, it would be nice if we could associate a moveHandle or something to a specific component so that the rest of the box does not steal away pointer-events.

Windows + CMD hotkey

The hotkey for rotating (Command aka. Windows key) isn't optimal for Windows because if you release the key the start menu pops up.

Possible Solutions

• Use CTRL instead of CMD

Allow scale and rotate cursors without hotkey

Currently you're just able to use the rotate cursor beside the scale cursor without pressing the rotate hotkey.

It would be nice if both would be possible without pressing a key. With the appropriate distance and direction to a handle you could display the scale or rotate cursor.

Possible Solutions

• Show rotate or scale cursors like in the appended animation

add props: maxWidth, minWidth, maxHeight, minHeight

Will it be possible to add these props: maxWidth, minWidth, maxHeight, minHeight to a component?

Handles become unusable if the element is scaled too small

If you scale the element to small the handles becomes unusable (see Appendix 1).

Possible Solution

• Move the handles to the outside of the object and add some additional spacing between them (see Appendix 2)

Appendix 1

Appendix 2

Is translate3d(-50%, -50%, 0) needed on wrapperStyle?

Problem

I am using React DND to handle dragging. I need it because redux is implemented under the hood which gives me the ability to have one drag layer and multiple layers subscribed to the movements.

I have a HOC that wraps a component and manages the x, y transform. So I am wrapping your lib with the x,y positioning. Your lib is being used for the wonderful handle logic that moves from the different corners.

I'll send the values to a higher level and rerender down to resize all the elements wrapped.

Solution

I'd simply like to see if we could remove the translate3d(-50%, -50%, 0) set on the wrapperStyle or have a way to override it.

Alternatives

I am considering managing my own state. However, I can't really do much because wrapperStyle always overrides style https://github.com/dekk-app/react-mops/blob/master/packages/react-mops/src/box.tsx#L283

Lock current displayed cursor while scaling

If you're scaling a element and hit meanwhile another handle with the mouse the cursor changes to the handles one.

Possible Solutions

• Lock the current displayed cursor while scaling

API documentation?

I found your library from the React-RND issue. I was wondering how the API compares to that package, and if there's documentation available?

Upgrade to v2 causes rendering issue

Describe the bug
Upgraded to v2 beta.0 and now it no longer renders and I get an error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Expected behavior
According to #10 (comment) the API is remaining unchanged, but I guess something changed.

Additional context

import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'react-mops';
import styled from 'styled-components';

import 'react-mops/dist/esm/index.css';

const InvisibleMarker = styled.span`
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
`;

const Interactable = ({ children, size, ...props }) => {
  return (
    <Box size={size}
         marker={InvisibleMarker}
         fullHandles={false}
         hideGuides={() => true}
         drawBox={false}
         {...props}>
      {children}
    </Box>
  );
};

Interactable.propTypes = {
  children: PropTypes.node.isRequired,
  size: PropTypes.shape({
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
  }).isRequired,
};

export default Interactable;