diff --git a/.editorconfig b/.editorconfig index 16a03a9..f8f8ef2 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,17 +4,29 @@ root = true charset = utf-8 end_of_line = lf indent_size = 4 -indent_style = tab +indent_style = space insert_final_newline = true -max_line_length = 100 +max_line_length = 120 +tab_width = 4 trim_trailing_whitespace = true -# trailing spaces in markdown indicate word wrap -[*.md] -trim_trailing_whitespace = false +[*.css] +indent_size = 2 +tab_width = 2 + +[*.scss] +indent_size = 2 +[{*.ats,*.ts,*.tsx}] +indent_style = tab -# Set spaces indent -[*.{json,yml,pug,html}] +[{*.js,*.cjs,*.mjs,*.jsx}] +indent_style = tab + +[{.analysis_options,*.yml,*.yaml}] indent_size = 2 -indent_style = space +tab_width = 2 + +[{.nycrc,.babelrc,.prettierrc,.stylelintrc,.eslintrc,jest.config,.sytlelintrc,*.json,*.jsb3,*.jsb2,*.bowerrc,*.graphqlconfig}] +indent_size = 2 +tab_width = 2 diff --git a/README.md b/README.md index 5f3dd52..1a32902 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,6 @@ # M.O.P.S **M**odify **O**rientation **P**osition **S**ize -> German >> English: **Mops** >> **Pug** -> it moves, it stretches, it rolls around - -

M.O.P.S. logo

- [![MIT license][license-badge]][license] [![Code of Conduct][coc-badge]][coc] diff --git a/docs/index.html b/docs/index.html index 20543d6..256b2fe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,10 +5,5 @@ React M.O.P.S -rotatable demo -resizable demo -draggable demo -draggable demo -combined demo diff --git a/docs/logo.jpg b/docs/logo.jpg deleted file mode 100644 index 6ccb767..0000000 Binary files a/docs/logo.jpg and /dev/null differ diff --git a/lerna.json b/lerna.json index e82ba3c..cc735e7 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "1.0.0" + "version": "2.0.0-beta.0" } diff --git a/package.json b/package.json index b659b3c..f71eaec 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "ncu": "ncu - u; lerna exec 'ncu -u'", "prerelease": "lerna run build --scope react-mops", "release": "lerna publish --conventional-commits", - "release:next": "yarn prerelease && lerna publish --canary --preid next --pre-dist-tag next", + "release:beta": "yarn prerelease && lerna publish --dist-tag prerelease --preid beta", + "release:rc": "yarn prerelease && lerna publish --dist-tag prerelease --preid rc", "test": "echo 'No tests specified' exit 0" }, "workspaces": [ diff --git a/packages/demo/package.json b/packages/demo/package.json index 5872a43..439f3b7 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "demo", - "version": "1.0.0", + "version": "2.0.0-beta.0", "description": "Created with create-ngineer-app", "repository": "git@github.com:pixelass/demo.git", "license": "MIT", @@ -27,19 +27,19 @@ "dependencies": { "@ngineer/head": "1.3.1", "@ngineer/server": "1.3.1", - "@types/react": "16.9.4", - "@types/react-dom": "16.9.1", + "@types/react": "16.9.9", + "@types/react-dom": "16.9.2", "@types/react-hot-loader": "4.1.0", - "@types/react-router": "5.1.1", + "@types/react-router": "5.1.2", "@types/react-router-dom": "5.1.0", "@types/styled-components": "4.1.19", "@types/uuid": "^3.4.5", "html-react-parser": "0.9.1", "immutability-helper": "^3.0.1", - "react": "16.10.1", - "react-dom": "16.10.1", - "react-hot-loader": "4.12.14", - "react-mops": "^1.0.0", + "react": "16.10.2", + "react-dom": "16.10.2", + "react-hot-loader": "4.12.15", + "react-mops": "^2.0.0-beta.0", "react-router": "5.1.2", "react-router-dom": "5.1.2", "styled-components": "4.4.0", @@ -48,8 +48,9 @@ "devDependencies": { "@ngineer/cli": "1.3.1", "@ngineer/configs": "1.3.1", + "babel-loader": "8.0.6", "babel-plugin-transform-assets-import-to-string": "1.2.0", - "concurrently": "4.1.2", + "concurrently": "5.0.0", "file-loader": "4.2.0", "html-webpack-plugin": "4.0.0-beta.8", "serve": "11.2.0", diff --git a/packages/demo/src/constants.tsx b/packages/demo/src/constants.tsx index bdf9c5e..1871278 100644 --- a/packages/demo/src/constants.tsx +++ b/packages/demo/src/constants.tsx @@ -2,7 +2,7 @@ import {v4 as uuidV4} from "uuid"; export const containerSize = { height: 900, - width: 1200 + width: 1600 }; export const gridSize = {x: 25, y: 25}; export const fixedGuides = [ diff --git a/packages/demo/src/elements.tsx b/packages/demo/src/elements.tsx index 8a435b8..98d237f 100644 --- a/packages/demo/src/elements.tsx +++ b/packages/demo/src/elements.tsx @@ -8,7 +8,6 @@ export const Wrapper = styled.div` padding: 10px; border-radius: 2px; box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.5); - width: ${containerSize.width + 40}px; `; export const Examples = styled.div` position: relative; @@ -17,7 +16,7 @@ export const Examples = styled.div` `; export const Example = styled.div` position: relative; - margin: auto; + margin: auto auto 10rem; `; export const Headline = styled.h2` margin: 0; @@ -68,11 +67,7 @@ export const Container = styled.div<{withGrid?: {x: number; y: number}; hasBound var(--line-color) var(--line-width), transparent var(--line-width) ), - linear-gradient( - 90deg, - var(--line-color) var(--line-width), - transparent var(--line-width) - ); + linear-gradient(90deg, var(--line-color) var(--line-width), transparent var(--line-width)); background-repeat: repeat; background-position: calc(var(--line-width) / -2) calc(var(--line-width) / 2); background-size: ${withGrid.x}px ${withGrid.y}px; @@ -80,8 +75,8 @@ export const Container = styled.div<{withGrid?: {x: number; y: number}; hasBound `} `; export const Inner = styled.div` - background-color: hsl(250, 100%, 50%); - background-image: linear-gradient(180deg, hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.5)); + background-color: hsl(300, 100%, 50%); + background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 0%, 0.1)); color: hsla(0, 0%, 100%, 0.4); display: flex; align-items: center; @@ -89,17 +84,16 @@ export const Inner = styled.div` justify-content: center; height: 100%; width: 100%; - border-radius: 2px; + border-radius: 10px; `; export const StyledMarker = styled.span` position: absolute; - top: 50%; - left: 50%; - height: 80%; - width: 80%; - transform: translate(-50%, -50%); - border: 3px solid white; - background: hsl(180, 100%, 20%); + top: 7px; + right: 7px; + bottom: 7px; + left: 7px; + border: 1px solid black; + background: white; pointer-events: none; `; export const InvisibleMarker = styled.span` @@ -154,6 +148,9 @@ export const ButtonWrapper = styled.div` &:last-child { border-radius: 0 3px 3px 0; } + &:only-child { + border-radius: 3px; + } } `; diff --git a/packages/demo/src/pages/home.tsx b/packages/demo/src/pages/home.tsx index b5b260c..c92adcd 100644 --- a/packages/demo/src/pages/home.tsx +++ b/packages/demo/src/pages/home.tsx @@ -8,11 +8,12 @@ import { toBounds, toGrid, toGuides, - toSiblings + toSiblings, + useViewport } from "react-mops"; import {ThemeProvider} from "styled-components"; import {v4 as uuidV4} from "uuid"; -import {containerSize, fixedGuides, gridSize} from "../constants"; +import {containerSize as initialContainerSize, fixedGuides as initialFixedGuides, gridSize} from "../constants"; import { Button, ButtonWrapper, @@ -21,25 +22,52 @@ import { Examples, Headline, Inner, - InvisibleMarker, StyledBox, + StyledMarker, SubHeadline, Title, Wrapper } from "../elements"; export function Home() { - const [items, setItems] = React.useState([]); + const [items, setItems] = React.useState>([]); const [isDraggable, setDraggable] = React.useState(true); const [isResizable, setResizable] = React.useState(true); const [isRotatable, setRotatable] = React.useState(true); - const [showMarkers, setMarkers] = React.useState(true); + const [showMarkers, setMarkers] = React.useState(false); const [showBox, setBox] = React.useState(false); const [showBoundingBox, setBoundingBox] = React.useState(false); + const [fullHandles, setFullHandles] = React.useState(true); const [hasGrid, setGrid] = React.useState(false); - const [hasBounds, setBounds] = React.useState(true); + const [hasBounds, setBounds] = React.useState(false); const [hasGuides, setGuides] = React.useState(false); - const [hasSiblings, setSiblings] = React.useState(true); + const [hasSiblings, setSiblings] = React.useState(false); + const [containerSize, setContainerSize] = React.useState(initialContainerSize); + const [fixedGuides, setFixedGuides] = React.useState(initialFixedGuides); + const [guideColor, setGuideColor] = React.useState("#ff00ff"); + + const viewportSize = useViewport({ + fallbackSize: initialContainerSize + }); + + React.useEffect(() => { + const newSize = { + height: Math.min(initialContainerSize.height, viewportSize.height), + width: Math.min(initialContainerSize.width, viewportSize.width) + }; + const newContainerSize = { + height: newSize.height - 100, + width: newSize.width - 40 + }; + const newGuides = [ + {x: newContainerSize.width / 4}, + {x: (newContainerSize.width / 4) * 3}, + {x: newContainerSize.width / 2}, + {y: newContainerSize.height / 2} + ]; + setContainerSize(newContainerSize); + setFixedGuides(state => state.map(({uuid}, i) => ({uuid, ...newGuides[i]}))); + }, [setContainerSize, setFixedGuides, viewportSize]); const updateItem = (item: Mops.Sibling) => setItems(state => { @@ -49,16 +77,19 @@ export function Home() { $merge: item } }; - return update(state, $spec); + return index > -1 ? update(state, $spec) : state; }); const addItem = () => { + const height = Math.round(Math.random() * 5) * gridSize.y + gridSize.y * 2; + const width = Math.round(Math.random() * 5) * gridSize.x + gridSize.x * 2; setItems(state => [ ...state, { + backgroundColor: `hsla(${Math.round(Math.random() * 360)}, 100%, 50%, 0.2)`, position: { - x: 50, - y: 50 + x: width / 2, + y: height / 2 }, rotation: { x: 0, @@ -66,8 +97,8 @@ export function Home() { z: 0 }, size: { - height: 100, - width: 100 + height, + width }, uuid: uuidV4() } @@ -76,25 +107,16 @@ export function Home() { const shouldSnap: Mops.SnapHandler[] = React.useMemo( () => [ - hasGrid ? toGrid(gridSize) : undefined, - hasGuides - ? toGuides({ - threshold: { - x: gridSize.x / 2, - y: gridSize.y / 2 - } - }) - : undefined, - hasBounds - ? toBounds({ - bottom: containerSize.height, - left: 0, - right: containerSize.width, - top: 0 - }) - : undefined + hasGrid && toGrid(gridSize), + hasGuides && + toGuides({ + threshold: { + x: gridSize.x / 2, + y: gridSize.y / 2 + } + }) ], - [hasBounds, hasGrid, hasGuides, isDraggable, isResizable, isRotatable] + [hasGrid, hasGuides] ); React.useEffect(() => { addItem(); @@ -108,12 +130,11 @@ export function Home() { Orientation
  • - Press Cmd / Ctrl) to enable rotation. (OS X / Windows, - Linux) + Press (Cmd ⌘ / Ctrl) to enable rotation. (OS X / Windows, Linux)
  • Hold and drag a handle.
  • - Press Shift to rotate in steps of 15°. + Press Shift ⇧ to rotate in steps of 15°.
Position @@ -124,14 +145,14 @@ export function Home() {
  • Hold and drag a handle.
  • - Press Alt to resize opposite sides. + Press Option / Alt ⌥ to resize proportionally from the center.
  • - Press Shift to retain the aspect-ratio. + Press Shift ⇧ to retain the aspect-ratio.
- Snapping (onDrag) + Snapping + Options + + + + Debug