上下左右和中间的适配

.eslintcache

@@ -1 +1 @@
-[{"/Users/gaoshaoyun/workspace/react/builder/src/index.js":"1","/Users/gaoshaoyun/workspace/react/builder/src/App.js":"2","/Users/gaoshaoyun/workspace/react/builder/src/layouts/hooks/index.js":"3","/Users/gaoshaoyun/workspace/react/builder/src/utils/index.js":"4","/Users/gaoshaoyun/workspace/react/builder/src/layouts/Draggable/index.js":"5","/Users/gaoshaoyun/workspace/react/builder/src/components/ButtonComponent/index.js":"6","/Users/gaoshaoyun/workspace/react/builder/src/components/TextComponent/index.js":"7","/Users/gaoshaoyun/workspace/react/builder/src/components/ImgComponent/index.js":"8"},{"size":141,"mtime":1613445595339,"results":"9","hashOfConfig":"10"},{"size":2273,"mtime":1613459215705,"results":"11","hashOfConfig":"10"},{"size":218,"mtime":1612509225281,"results":"12","hashOfConfig":"10"},{"size":1440,"mtime":1613294098895,"results":"13","hashOfConfig":"10"},{"size":1237,"mtime":1613459062587,"results":"14","hashOfConfig":"10"},{"size":272,"mtime":1612928167792,"results":"15","hashOfConfig":"10"},{"size":264,"mtime":1612238092345,"results":"16","hashOfConfig":"10"},{"size":280,"mtime":1613273269183,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"13updcj",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"26"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"/Users/gaoshaoyun/workspace/react/builder/src/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/App.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/layouts/hooks/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/utils/index.js",[],["36","37"],"/Users/gaoshaoyun/workspace/react/builder/src/layouts/Draggable/index.js",["38","39","40","41","42"],"import {Component} from \"react\";\n\n// 画布组件\nimport TextComponent from \"../../components/TextComponent\";\nimport ButtonComponent from \"../../components/ButtonComponent\";\nimport ImgComponent from \"../../components/ImgComponent\";\nimport classnames from \"classnames\";\nimport styles from \"./index.less\";\n\nexport const isTextComponent = 0;\nexport const isButtonComponent = 1;\nexport const isImgComponent = 2;\n\nexport default class Draggable extends Component {\n  constructor(props, context) {\n    super(props);\n  }\n\n  render() {\n    const {cmp, index} = this.props;\n\n    const {style} = cmp.data;\n\n    const top = style.top;\n    const left = style.left;\n    const width = style.width,\n      height = style.height;\n\n    return (\n      <div className={styles.main} style={{...style, zIndex: index}}>\n        {getComponent(cmp)}\n      </div>\n    );\n  }\n}\n\nfunction getComponent(cmp) {\n  const {data} = cmp;\n  let res = null;\n  switch (data.type) {\n    case isTextComponent:\n      res = <TextComponent {...data} />;\n      break;\n    case isButtonComponent:\n      res = <ButtonComponent {...data} />;\n      break;\n    case isImgComponent:\n      res = <ImgComponent {...data} />;\n      break;\n    default:\n      res = null;\n  }\n  return res;\n}\n","/Users/gaoshaoyun/workspace/react/builder/src/components/ButtonComponent/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/components/TextComponent/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/components/ImgComponent/index.js",[],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":7,"column":8,"nodeType":"49","messageId":"50","endLine":7,"endColumn":18},{"ruleId":"47","severity":1,"message":"51","line":24,"column":11,"nodeType":"49","messageId":"50","endLine":24,"endColumn":14},{"ruleId":"47","severity":1,"message":"52","line":25,"column":11,"nodeType":"49","messageId":"50","endLine":25,"endColumn":15},{"ruleId":"47","severity":1,"message":"53","line":26,"column":11,"nodeType":"49","messageId":"50","endLine":26,"endColumn":16},{"ruleId":"47","severity":1,"message":"54","line":27,"column":7,"nodeType":"49","messageId":"50","endLine":27,"endColumn":13},"no-native-reassign",["55"],"no-negated-in-lhs",["56"],"no-unused-vars","'classnames' is defined but never used.","Identifier","unusedVar","'top' is assigned a value but never used.","'left' is assigned a value but never used.","'width' is assigned a value but never used.","'height' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
+[{"/Users/gaoshaoyun/workspace/react/builder/src/index.js":"1","/Users/gaoshaoyun/workspace/react/builder/src/App.js":"2","/Users/gaoshaoyun/workspace/react/builder/src/layouts/hooks/index.js":"3","/Users/gaoshaoyun/workspace/react/builder/src/utils/index.js":"4","/Users/gaoshaoyun/workspace/react/builder/src/layouts/Draggable/index.js":"5","/Users/gaoshaoyun/workspace/react/builder/src/components/ButtonComponent/index.js":"6","/Users/gaoshaoyun/workspace/react/builder/src/components/TextComponent/index.js":"7","/Users/gaoshaoyun/workspace/react/builder/src/components/ImgComponent/index.js":"8"},{"size":141,"mtime":1613445595339,"results":"9","hashOfConfig":"10"},{"size":6095,"mtime":1613555510770,"results":"11","hashOfConfig":"10"},{"size":218,"mtime":1612509225281,"results":"12","hashOfConfig":"10"},{"size":1585,"mtime":1613556470586,"results":"13","hashOfConfig":"10"},{"size":2060,"mtime":1613556782070,"results":"14","hashOfConfig":"10"},{"size":272,"mtime":1612928167792,"results":"15","hashOfConfig":"10"},{"size":264,"mtime":1612238092345,"results":"16","hashOfConfig":"10"},{"size":280,"mtime":1613273269183,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"13updcj",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},"/Users/gaoshaoyun/workspace/react/builder/src/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/App.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/layouts/hooks/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/utils/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/layouts/Draggable/index.js",["35"],"/Users/gaoshaoyun/workspace/react/builder/src/components/ButtonComponent/index.js",[],["36","37"],"/Users/gaoshaoyun/workspace/react/builder/src/components/TextComponent/index.js",[],"/Users/gaoshaoyun/workspace/react/builder/src/components/ImgComponent/index.js",[],{"ruleId":"38","severity":1,"message":"39","line":7,"column":8,"nodeType":"40","messageId":"41","endLine":7,"endColumn":18},{"ruleId":"42","replacedBy":"43"},{"ruleId":"44","replacedBy":"45"},"no-unused-vars","'classnames' is defined but never used.","Identifier","unusedVar","no-native-reassign",["46"],"no-negated-in-lhs",["47"],"no-global-assign","no-unsafe-negation"]

public/flexible.js

@@ -0,0 +1,45 @@
+//from https://github.com/kaola-fed/blog/issues/133
+
+(function flexible(window, document) {
+  var docEl = document.documentElement;
+  var dpr = window.devicePixelRatio || 1;
+
+  // adjust body font size
+  function setBodyFontSize() {
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + "px";
+    } else {
+      document.addEventListener("DOMContentLoaded", setBodyFontSize);
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 10;
+    docEl.style.fontSize = rem + "px";
+  }
+
+  setRemUnit();
+
+  // reset rem unit on page resize
+  window.addEventListener("resize", setRemUnit);
+  window.addEventListener("pageshow", function(e) {
+    if (e.persisted) {
+      setRemUnit();
+    }
+  });
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement("body");
+    var testElement = document.createElement("div");
+    testElement.style.border = ".5px solid transparent";
+    fakeBody.appendChild(testElement);
+    docEl.appendChild(fakeBody);
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add("hairlines");
+    }
+    docEl.removeChild(fakeBody);
+  }
+})(window, document);

public/index.html

@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
@@ -25,6 +28,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <script src="./flexible.js"></script>
     <title>模板</title>
   </head>
   <body>

src/App.less

@@ -1,3 +1,5 @@
 .main {
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
+  overflow: hidden;
 }

src/index.css

@@ -1,19 +1,19 @@
-html {
-  height: 100%;
-}
+
 body {
   margin: 0;
+  padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  height: 100%;
+
 }
 
-#root {
+html, body,#root {
   height: 100%;
-
+  width: 100%;
+  overflow: hidden;
 }
 
 code {

src/layouts/Draggable/index.js

@@ -17,14 +17,36 @@ export default class Draggable extends Component {
   }
 
   render() {
-    const {cmp, index} = this.props;
+    const {cmp, index, canvasWidth, canvasHeight} = this.props;
 
-    const {style} = cmp.data;
+    let style = cmp.data.style;
 
-    const top = style.top;
-    const left = style.left;
-    const width = style.width,
-      height = style.height;
+    // console.log("style.left", style); //sy-log
+    // 吸右
+    if (style.width > canvasWidth) {
+      style.width = (style.width * 100) / canvasWidth + "%";
+    } else if (Math.abs(style.width - canvasWidth) < 7) {
+      style.width = "100%";
+    } else if (
+      Math.abs(style.left) > 5 &&
+      Math.abs(style.left + style.width - canvasWidth) < 5
+    ) {
+      console.log("哈哈哈", Math.abs(style.left)); //sy-log
+      style.right = 0;
+      delete style.left;
+    } else if (Math.abs(style.left + style.width / 2 - canvasWidth / 2) < 7) {
+      // 左右中间
+      style.left = "50%";
+      style.marginLeft = "-" + style.width / 2 + "px";
+    }
+
+    if (style.height > canvasHeight) {
+      style.height = (style.height * 100) / canvasHeight + "%";
+    } else if (Math.abs(style.top + style.height - canvasHeight) < 5) {
+      // 吸底
+      style.bottom = 0;
+      delete style.top;
+    }
 
     return (
       <div className={styles.main} style={{...style, zIndex: index}}>

src/layouts/Draggable/index.less

@@ -2,4 +2,9 @@
   position: absolute;
   box-sizing: content-box;
   text-align: initial !important; // 这里是为了覆盖Draggable组件的textAlign
+
+  & > * {
+    width: 100%;
+    height: 100%;
+  }
 }

src/utils/index.js

@@ -8,11 +8,16 @@ export function formatStyle(style, noNeedPos) {
 
   newStyle = checkPx(newStyle, ["width", "height", "lineHeight", "fontSize"]);
 
+  delete newStyle.width;
+  delete newStyle.height;
   delete newStyle.top;
   delete newStyle.right;
   delete newStyle.bottom;
   delete newStyle.left;
   delete newStyle.transform;
+  delete newStyle.borderWidth;
+  delete newStyle.animationName;
+  delete newStyle.marginLeft;
 
   return newStyle;
 }