Support to rotate groups

elchininet · Mar 19, 2021 · f76f4d8 · f76f4d8
1 parent f7bf3a2
commit f76f4d8
Show file tree

Hide file tree

Showing 17 changed files with 487 additions and 178 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.1.0] - 2021-03-19
+
+- Implemented the rotation of groups containing planes
+
 ## [2.0.0] - 2021-02-10
 
 - Breaking change: The library has been rewritten completely

diff --git a/dist/index.js b/dist/index.js
diff --git a/docs-src/.eslintcache b/docs-src/.eslintcache
diff --git a/docs-src/package-lock.json b/docs-src/package-lock.json
diff --git a/docs-src/package.json b/docs-src/package.json
@@ -28,7 +28,7 @@
     ]
   },
   "dependencies": {
-    "isometric-css": "^2.0.0",
+    "isometric-css": "file:.yalc/isometric-css",
     "outdent": "^0.8.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

diff --git a/docs-src/src/components/CodeDemo.js b/docs-src/src/components/CodeDemo.js
@@ -3,7 +3,30 @@ import floorImage from '../images/textures/gray_wool.png';
 import blockSide from '../images/textures/grass_block_side.png';
 import blockTop from '../images/textures/green_wool.png';
 
-export const CodeDemo = () => {
+export const CodeDemo = (props) => {
+
+    const { moved, rotated, doubleRotated } = props;
+    const attrs = {
+        className: 'isometric'
+    };
+    if (moved) {
+        attrs['data-right'] = '75';
+        attrs['data-left'] = '75';
+    }
+    if (rotated) {
+        attrs['data-rotation-axis'] = 'top';
+        attrs['data-rotation-value'] = '30';
+    }
+
+    const Wrapper = doubleRotated ? 'div' : React.Fragment;
+
+    const attrsWrapper = doubleRotated
+        ? {
+            'className': 'isometric',
+            'data-rotation-axis': 'right',
+            'data-rotation-value': '30'
+        }
+        : {};
 
     return (
         <div className="container">
@@ -16,32 +39,30 @@ export const CodeDemo = () => {
                         data-texture-size="50px 50px"
                         data-texture-pixelated="true"
                     />
-                    <div
-                        className="isometric"
-                        data-right="75"
-                        data-left="75"
-                    >
-                        <div
-                            className="isometric plane"
-                            data-view="top"
-                            data-top="50"
-                            data-texture={blockTop}
-                            data-texture-pixelated="true"
-                        />
-                        <div
-                            className="isometric plane"
-                            data-view="front"
-                            data-right="50"
-                            data-texture={blockSide}
-                            data-texture-pixelated="true"
-                        />
-                        <div
-                            className="isometric plane"
-                            data-view="side"
-                            data-left="50"
-                            data-texture={blockSide}
-                            data-texture-pixelated="true"
-                        />
+                    <div {...attrs}>
+                        <Wrapper {...attrsWrapper}>
+                            <div
+                                className="isometric plane"
+                                data-view="top"
+                                data-top="50"
+                                data-texture={blockTop}
+                                data-texture-pixelated="true"
+                            />
+                            <div
+                                className="isometric plane"
+                                data-view="front"
+                                data-right="50"
+                                data-texture={blockSide}
+                                data-texture-pixelated="true"
+                            />
+                            <div
+                                className="isometric plane"
+                                data-view="side"
+                                data-left="50"
+                                data-texture={blockSide}
+                                data-texture-pixelated="true"
+                            />
+                        </Wrapper>
                     </div>
                 </div>
             </div>

diff --git a/docs-src/src/components/Demo.js b/docs-src/src/components/Demo.js
@@ -48,7 +48,7 @@ export const Demo = () => {
         <div className="container">
             <div className="demo-wrapper" ref={container} data-ready={ready}>
                 <div className="world" style={transform}>
-                    <div className="coords">
+                    <div className="coords isometric">
                         <div
                             className="isometric grass"
                             data-view="top"
@@ -59,8 +59,7 @@ export const Demo = () => {
                         <FenceFront right={10} left={220}/>
                         <Houses right={45} left={40} />
                         <FenceFront right={435} left={220}/>
-                        <FenceSide right={10} left={220} /> 
-
+                        <FenceSide right={10} left={220} />                            
                     </div>
                 </div>
             </div>

diff --git a/docs-src/src/components/demo/Houses.js b/docs-src/src/components/demo/Houses.js
@@ -15,6 +15,12 @@ export const Houses = (props) => {
             data-left={left}
             data-top={top}
         >
+            <div
+                className="isometric houses-top"
+                data-view="top"
+                data-texture={topTexture}
+                data-top={139}
+            />
             <div
                 className="isometric houses-side"
                 data-view="side"
@@ -29,12 +35,7 @@ export const Houses = (props) => {
                 data-texture-pixelated="true"
                 data-right="361"
             />
-            <div
-                className="isometric houses-top"
-                data-view="top"
-                data-texture={topTexture}
-                data-top={139}
-            />
+
             <div
                 className="isometric houses-roof dark"
                 data-view="top"