# g-engine > ## 抛弃px,采用em >抛弃px描述,用em代替来拥有响应式渲染的能力，[em在支持ie8](https://caniuse.com/#search=rem). 1. 给引擎一个大小`[1920,800]`来描述画布,标识画布是1920*800的颗粒度组成,具体呈现大小取决于容器宽度[在容器宽度为1920px的情况下,1颗粒度为1px]。 Latest version **0.1.1** (published 2019-08-27) · 0 weekly downloads ## Install ```sh npm install g-engine pnpm add g-engine yarn add g-engine bun add g-engine ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.1 | | Published | 2019-08-27 | | First published | 2019-08-27 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 72 | | Unpacked size | 1.8 MB | | Known vulnerabilities | 0 (+12 in 7 direct dependencies) | | Install scripts | no | | Maintainers | masktaq | ## Links - npm: https://www.npmjs.com/package/g-engine - npm.io page: https://npm.io/package/g-engine ## Dependencies (72) - [jest](https://npm.io/package/jest.md) 24.7.1 - [react](https://npm.io/package/react.md) ^16.8.6 - [dotenv](https://npm.io/package/dotenv.md) 6.2.0 - [eslint](https://npm.io/package/eslint.md) ^5.16.0 - [is-wsl](https://npm.io/package/is-wsl.md) ^1.1.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [semver](https://npm.io/package/semver.md) 6.0.0 - [ts-pnp](https://npm.io/package/ts-pnp.md) 1.1.2 - [resolve](https://npm.io/package/resolve.md) 1.10.0 - [webpack](https://npm.io/package/webpack.md) 4.29.6 - [fs-extra](https://npm.io/package/fs-extra.md) 7.0.1 - [camelcase](https://npm.io/package/camelcase.md) ^5.2.0 - [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12 - [node-sass](https://npm.io/package/node-sass.md) ^4.12.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.8.6 - [babel-jest](https://npm.io/package/babel-jest.md) ^24.8.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [css-loader](https://npm.io/package/css-loader.md) 2.1.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [url-loader](https://npm.io/package/url-loader.md) 1.1.2 - [@babel/core](https://npm.io/package/@babel/core.md) 7.4.3 - [file-loader](https://npm.io/package/file-loader.md) 3.0.1 - [html2canvas](https://npm.io/package/html2canvas.md) ^1.0.0-rc.3 - [sass-loader](https://npm.io/package/sass-loader.md) 7.1.0 - [babel-eslint](https://npm.io/package/babel-eslint.md) 10.0.1 - [babel-loader](https://npm.io/package/babel-loader.md) 8.0.5 - [jest-resolve](https://npm.io/package/jest-resolve.md) 24.7.1 - [style-loader](https://npm.io/package/style-loader.md) 0.23.1 - [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 4.1.0 - [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0 - [eslint-loader](https://npm.io/package/eslint-loader.md) 2.1.2 - [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0 - [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^9.0.1 - [postcss-normalize](https://npm.io/package/postcss-normalize.md) 7.0.1 - [styled-components](https://npm.io/package/styled-components.md) ^4.3.2 - [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0 - [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.2.1 - [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.6.0 - [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^1.0.1 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.2.1 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.12.4 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.0.0-beta.5 - [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 4.0.1 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.16.0 - [jest-watch-typeahead](https://npm.io/package/jest-watch-typeahead.md) 0.3.0 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.2.3 - [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^9.0.0 - [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.50.1 - [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.2.1 - [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.1.0 - [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 4.2.0 - [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^4.0.1 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.5.0 - [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.0.4 - [@ckeditor/ckeditor5-font](https://npm.io/package/@ckeditor/ckeditor5-font.md) ^11.2.1 - [@ckeditor/ckeditor5-image](https://npm.io/package/@ckeditor/ckeditor5-image.md) ^13.1.2 - [@ckeditor/ckeditor5-react](https://npm.io/package/@ckeditor/ckeditor5-react.md) ^1.1.3 - [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) 1.6.0 - [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^1.5.0 - [@ckeditor/ckeditor5-dev-utils](https://npm.io/package/@ckeditor/ckeditor5-dev-utils.md) ^12.0.2 - [@ckeditor/ckeditor5-paragraph](https://npm.io/package/@ckeditor/ckeditor5-paragraph.md) ^11.0.4 - [@ckeditor/ckeditor5-essentials](https://npm.io/package/@ckeditor/ckeditor5-essentials.md) ^11.0.4 - [@ckeditor/ckeditor5-theme-lark](https://npm.io/package/@ckeditor/ckeditor5-theme-lark.md) ^14.1.1 - [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.2 - [jest-environment-jsdom-fourteen](https://npm.io/package/jest-environment-jsdom-fourteen.md) 0.1.0 - [@ckeditor/ckeditor5-basic-styles](https://npm.io/package/@ckeditor/ckeditor5-basic-styles.md) ^11.1.3 - [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) 1.6.0 - [@ckeditor/ckeditor5-build-balloon](https://npm.io/package/@ckeditor/ckeditor5-build-balloon.md) ^12.3.1 - [@ckeditor/ckeditor5-build-classic](https://npm.io/package/@ckeditor/ckeditor5-build-classic.md) ^12.3.1 - [@ckeditor/ckeditor5-editor-classic](https://npm.io/package/@ckeditor/ckeditor5-editor-classic.md) ^12.1.3 - [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1 - [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.2.0 ## Recent versions - 0.1.1 (latest) — 2019-08-27 - 0.1.0 — 2019-08-27 ## README ## 响应式渲染引擎 ## 抛弃px,采用em >抛弃px描述,用em代替来拥有响应式渲染的能力，[em在支持ie8](https://caniuse.com/#search=rem). 1. 给引擎一个大小`[1920,800]`来描述画布,标识画布是1920*800的颗粒度组成,具体呈现大小取决于容器宽度[在容器宽度为1920px的情况下,1颗粒度为1px]。 interaction = null; interactionController() { const flag = { canMove: false }; //点击组件的位置 const offsetPx = { x: 0, y: 0 }; let moveLocationPx = { left: 0, top: 0, }; let selectedComponentId = ''; let hasMove = false; //上次鼠标释放事件 let prevSingleClickTimeStamp = 0; //移动失败的次数 let numberOfMoveFail = 0; //点击时的事件对象 let clickE; return { tryStartMove: (e) => { const { target } = e; if (target.className === 'component') { clickE = e; const { componentsData, moveComponentLayer } = this.state; const { clientX, clientY, offsetX, offsetY, target: { id } } = e; selectedComponentId = id; const selectedComponentIndex = this.getComponentIndexById(id); if (selectedComponentIndex > - 1) { const { x, y } = getViewOffet(); const { rotate, size } = getKeysWithMap(componentsData.get(selectedComponentIndex), ['rotate', 'size']); flag.canMove = true; offsetPx.x = rotate ? offsetX / Math.cos(rotate) : offsetX; offsetPx.y = rotate ? offsetY / Math.cos(rotate) : offsetY; moveLocationPx.left = clientX - offsetPx.x - x; moveLocationPx.top = clientY - offsetPx.y - y; this.setState({ moveComponentLayer: setKeysWithMap(moveComponentLayer, { visible: true, size, rotate }), }); } } }, tryMove: (e) => { if (flag.canMove) { const { clientX, clientY } = e; const { x, y } = getViewOffet(); const next = { left: clientX - offsetPx.x - x, top: clientY - offsetPx.y - y }; //移动的幅度大于2才算移动 if (!isDiffInTheRange(moveLocationPx.left - next.left, 2) || !isDiffInTheRange(moveLocationPx.top - next.top, 2)) { hasMove = true; moveLocationPx = next; this.setState({ moveFlag: Date.now(), }); } } }, tryStopMove: (e) => { if (flag.canMove) { const now = Date.now(); const { moveComponentLayer } = this.state; const { actions } = this.props; if (hasMove) { numberOfMoveFail = 0; actions.move([ { id: selectedComponentId, type: 'move', keyPath: ['location'], data: pxConverPointWithObjecy(moveLocationPx) } ]); } else { numberOfMoveFail += 1; } this.setState({ moveComponentLayer: moveComponentLayer.set('visible', false) }) hasMove = false; flag.canMove = false; if (numberOfMoveFail >= 2 && now - prevSingleClickTimeStamp <= 200) { this.interaction.tryDoubleClick(clickE); } prevSingleClickTimeStamp = now; //连续俩次 hasMove 为false 且 间隔小于 100ms 触发双击 } }, tryDoubleClick: (e) => { const { target, target: { id } } = e; if (target.className === 'component') { const type = this.getComponentDataById(id).get('type'); if (type === 'view.text') { this.setState({ doubleClickLayer: setKeysWithMap(this.state.doubleClickLayer, { visible: true, componentData: this.getComponentDataById(id) }), }); } } }, getMoveLocation() { return moveLocationPx; } } } --- _Source: https://npm.io/package/g-engine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._