diff --git a/CHANGELOG.md b/CHANGELOG.md index bb34e65..7fe1d38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ ## changelog +## 0.9.3 + +增加双击置入画布。 + +变更元素初始focus状态。 + +存在元素宽高，则置入时定位于元素中心。 + ## 0.9.2 增加远程组件调用全流程，component中增加url属性，便于script加载。 diff --git a/packages/dooringx-doc/src/changelog/1.1.md b/packages/dooringx-doc/src/changelog/1.1.md index a80945b..d7247ab 100644 --- a/packages/dooringx-doc/src/changelog/1.1.md +++ b/packages/dooringx-doc/src/changelog/1.1.md @@ -4,6 +4,14 @@ order: 1 --- ## changelog +## 0.9.3 + +增加双击置入画布。 + +变更元素初始focus状态。 + +存在元素宽高，则置入时定位于元素中心。 + ## 0.9.2 增加远程组件调用全流程，component中增加url属性，便于script加载。 diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 1e6baf7..7c9d938 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.2", + "version": "0.9.3", "license": "MIT", "main": "dist/index.js", "module": "dist/dooringx-lib.esm.js", diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx index 3cd4533..450619e 100644 --- a/packages/dooringx-lib/src/components/leftConfig.tsx +++ b/packages/dooringx-lib/src/components/leftConfig.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-04 10:32:45 * @LastEditors: yehuozhili - * @LastEditTime: 2021-09-28 21:28:41 + * @LastEditTime: 2021-10-07 12:35:38 * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx */ import React, { ReactNode, useEffect, useMemo, useState } from 'react'; @@ -109,7 +109,7 @@ function LeftConfig(props: LeftConfigProps) {
{v.imgCustom ? ( @@ -140,7 +140,7 @@ function LeftConfig(props: LeftConfigProps) {
{v.imgCustom ? ( diff --git a/packages/dooringx-lib/src/core/components/createBlock.ts b/packages/dooringx-lib/src/core/components/createBlock.ts index 26889a7..75943c1 100644 --- a/packages/dooringx-lib/src/core/components/createBlock.ts +++ b/packages/dooringx-lib/src/core/components/createBlock.ts @@ -2,15 +2,23 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-06 10:24:32 + * @LastEditTime: 2021-10-07 12:45:49 * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\createBlock.ts */ +import { UserConfig } from '../..'; +import { innerRemoveFocus } from '../focusHandler'; import { IBlockType } from '../store/storetype'; import { createUid } from '../utils'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { ComponentItem } from './componentItem'; -export function createBlock(top: number, left: number, ComponentItem: ComponentItem): IBlockType { +export function createBlock( + top: number, + left: number, + ComponentItem: ComponentItem, + config: UserConfig +): IBlockType { + innerRemoveFocus(config); return { id: createUid(ComponentItem.name), name: ComponentItem.name, @@ -19,7 +27,7 @@ export function createBlock(top: number, left: number, ComponentItem: ComponentI zIndex: ComponentItem.initData.zIndex || 0, props: ComponentItem.initData.props || {}, resize: ComponentItem.initData.resize || ComponentItem.resize, - focus: false, + focus: ComponentItem.initData.focus ?? true, position: ComponentItem.initData.position || 'absolute', display: ComponentItem.initData.display || 'block', width: ComponentItem.initData.width, diff --git a/packages/dooringx-lib/src/core/crossDrag/index.ts b/packages/dooringx-lib/src/core/crossDrag/index.ts index 374f250..ad9fcb6 100644 --- a/packages/dooringx-lib/src/core/crossDrag/index.ts +++ b/packages/dooringx-lib/src/core/crossDrag/index.ts @@ -2,10 +2,10 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-26 20:42:16 + * @LastEditTime: 2021-10-07 12:45:30 * @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts */ -import { DragEvent, ReactNode } from 'react'; +import React, { DragEvent, ReactNode } from 'react'; import { createBlock } from '../components/createBlock'; import { IBlockType } from '../store/storetype'; import { deepCopy } from '../utils'; @@ -28,7 +28,58 @@ export interface LeftRegistComponentMapItem { } let currentDrag: LeftRegistComponentMapItem | null = null; -export const dragEventResolve = function (item: LeftRegistComponentMapItem) { + +function resolveDrop( + config: UserConfig, + item: LeftRegistComponentMapItem, + e: DragEvent | React.MouseEvent, + x: number, + y: number, + dbclick: boolean = false +) { + const componentRegister = config.getComponentRegister(); + const store = config.getStore(); + const origin = componentRegister.getComp(item.component); + if (!origin) { + console.log(item.component, 'wait the chunk pull compeletely and retry'); + return; + } + const target = e.target as HTMLElement; + let newblock: IBlockType; + //如果有宽高，那么让其在中间 + let fixX = x; + let fixY = y; + if (origin.initData.width && typeof origin.initData.width === 'number') { + fixX = x - origin.initData.width / 2; + } + if (origin.initData.height && typeof origin.initData.height === 'number') { + fixY = y - origin.initData.height / 2; + } + + if (!origin.needPosition) { + newblock = createBlock( + origin.initData.top ?? fixY, + origin.initData.left ?? fixX, + origin, + config + ); + } else { + if (dbclick) { + newblock = createBlock(fixY, fixX, origin, config); + } else { + if (target.id !== 'yh-container') { + newblock = createBlock(fixY + target.offsetTop, fixX + target.offsetLeft, origin, config); + } else { + newblock = createBlock(fixY, fixX, origin, config); + } + } + } + const data = deepCopy(store.getData()); + data.block.push(newblock); + store.setData({ ...data }); +} + +export const dragEventResolve = function (item: LeftRegistComponentMapItem, config: UserConfig) { return { draggable: true, onDragStart: () => { @@ -39,12 +90,16 @@ export const dragEventResolve = function (item: LeftRegistComponentMapItem) { }, onDrop: () => {}, onDragEnd: () => {}, + onDoubleClick: (e: React.MouseEvent) => { + const container = config.getStore().getData().container; + const x = container.width / 2; + const y = container.height / 2; + resolveDrop(config, item, e, x, y, true); + }, }; }; export const containerDragResolve = (config: UserConfig) => { - const store = config.getStore(); - const componentRegister = config.getComponentRegister(); return { onDragStart: () => {}, onDragOver: (e: DragEvent) => { @@ -55,30 +110,7 @@ export const containerDragResolve = (config: UserConfig) => { const offestY = Math.round(e.nativeEvent.offsetY); //drop后修改store， if (currentDrag) { - // 还需要拿到注册的组件状态 - const origin = componentRegister.getComp(currentDrag.component); - if (!origin) { - console.log(currentDrag.component, 'wait the chunk pull compeletely and retry'); - return; - } - const target = e.target as HTMLElement; - let newblock: IBlockType; - if (!origin.needPosition) { - newblock = createBlock( - origin.initData.top ?? offestY, - origin.initData.left ?? offsetX, - origin - ); - } else { - if (target.id !== 'yh-container') { - newblock = createBlock(offestY + target.offsetTop, offsetX + target.offsetLeft, origin); - } else { - newblock = createBlock(offestY, offsetX, origin); - } - } - const data = deepCopy(store.getData()); - data.block.push(newblock); - store.setData({ ...data }); + resolveDrop(config, currentDrag, e, offsetX, offestY); } currentDrag = null; }, diff --git a/packages/dooringx-lib/src/core/focusHandler/index.tsx b/packages/dooringx-lib/src/core/focusHandler/index.tsx index 27da6ed..18a56ab 100644 --- a/packages/dooringx-lib/src/core/focusHandler/index.tsx +++ b/packages/dooringx-lib/src/core/focusHandler/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-09-28 17:14:16 + * @LastEditTime: 2021-10-07 12:40:32 * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx */ import { innerDragState } from '../innerDrag/state'; @@ -12,22 +12,29 @@ import { selectRangeMouseDown } from '../selectRange'; import { unmountContextMenu } from '../contextMenu'; import UserConfig from '../../config'; -export function containerFocusRemove(config: UserConfig) { +function resolveRemove(config: UserConfig) { const store = config.getStore(); + const focusState = config.getFocusState(); + const clonedata = deepCopy(store.getData()); + const newBlock = clonedata.block.map((v: IBlockType) => { + v.focus = false; + return v; + }); + focusState.blocks = []; + store.setData({ ...clonedata, block: newBlock }); + unmountContextMenu(); +} +export function innerRemoveFocus(config: UserConfig) { + resolveRemove(config); +} + +export function containerFocusRemove(config: UserConfig) { const onMouseDown = (e: React.MouseEvent) => { - const focusState = config.getFocusState(); - const clonedata = deepCopy(store.getData()); - const newBlock = clonedata.block.map((v: IBlockType) => { - v.focus = false; - return v; - }); - focusState.blocks = []; - store.setData({ ...clonedata, block: newBlock }); + resolveRemove(config); if (!innerDragState.item) { selectRangeMouseDown(e, config); } - unmountContextMenu(); }; return { onMouseDown, diff --git a/packages/dooringx-plugin-template/package.json b/packages/dooringx-plugin-template/package.json new file mode 100644 index 0000000..d2221ab --- /dev/null +++ b/packages/dooringx-plugin-template/package.json @@ -0,0 +1,22 @@ +{ + "name": "dooringx-plugin-template", + "version": "0.9.3", + "description": "> TODO: description", + "author": "yehuozhili <673632758@qq.com>", + "homepage": "https://github.com/H5-Dooring/dooringx#readme", + "license": "MIT", + "main": "index.js", + "files": [ + "template" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/H5-Dooring/dooringx.git" + }, + "scripts": { + "build": "rimraf ./dist && rollup -c" + }, + "bugs": { + "url": "https://github.com/H5-Dooring/dooringx/issues" + } +} \ No newline at end of file diff --git a/packages/dooringx-plugin-template/template/.babelrc.js b/packages/dooringx-plugin-template/template/.babelrc.js new file mode 100644 index 0000000..195e2db --- /dev/null +++ b/packages/dooringx-plugin-template/template/.babelrc.js @@ -0,0 +1,59 @@ +/* + * @Author: yehuozhili + * @Date: 2021-09-30 10:01:24 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-09-30 11:19:59 + * @FilePath: \dooringx\packages\dooringx-plugin-template\.babelrc.js + */ +const envPreset = [ + "@babel/preset-env", + { + modules: false, + // Allow importing core-js in entrypoint and use browserlist to select polyfills + useBuiltIns: "entry", + // Set the corejs version we are using to avoid warnings in console + corejs: 3, + // Exclude transforms that make all code slower + exclude: ["transform-typeof-symbol"], + loose: true, + targets: { + node: "current", + }, + }, +]; + +module.exports = { + presets: [ + [ + "@babel/preset-react", + { + development: false, + }, + ], + [ + "@babel/preset-typescript", + { + isTSX: true, + allExtensions: true, + }, + ], + envPreset, + ], + plugins: [ + ["@babel/plugin-proposal-class-properties", { loose: true }], + ["@babel/plugin-syntax-dynamic-import"], + ["@babel/plugin-transform-runtime"], + ], + env: { + production: { + plugins: [ + [ + "babel-plugin-transform-react-remove-prop-types", + { + removeImport: true, + }, + ], + ], + }, + }, +}; diff --git a/packages/dooringx-plugin-template/template/.prettierrc b/packages/dooringx-plugin-template/template/.prettierrc new file mode 100644 index 0000000..b8f654d --- /dev/null +++ b/packages/dooringx-plugin-template/template/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 4, + "useTabs": true, + "TrailingCooma": "es5" +} diff --git a/packages/dooringx-plugin-template/template/README.md b/packages/dooringx-plugin-template/template/README.md new file mode 100644 index 0000000..69017c3 --- /dev/null +++ b/packages/dooringx-plugin-template/template/README.md @@ -0,0 +1,11 @@ +# `dooringx-plugin-template` + +> TODO: description + +## Usage + +``` +const dooringxPluginTemplate = require('dooringx-plugin-template'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/dooringx-plugin-template/template/rollup.config.js b/packages/dooringx-plugin-template/template/rollup.config.js new file mode 100644 index 0000000..23688cd --- /dev/null +++ b/packages/dooringx-plugin-template/template/rollup.config.js @@ -0,0 +1,79 @@ +/* + * @Author: yehuozhili + * @Date: 2021-09-30 09:51:40 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-10-07 13:18:49 + * @FilePath: \dooringx\packages\dooringx-plugin-template\template\rollup.config.js + */ +import { DEFAULT_EXTENSIONS } from "@babel/core"; +import babel from "@rollup/plugin-babel"; +import typescript from "rollup-plugin-typescript2"; +import commonjs from "@rollup/plugin-commonjs"; +import postcss from "rollup-plugin-postcss"; +import resolve from "@rollup/plugin-node-resolve"; +import url from "@rollup/plugin-url"; +import svgr from "@svgr/rollup"; +import { terser } from "rollup-plugin-terser"; +import typescriptEngine from "typescript"; +import external from "rollup-plugin-peer-deps-external"; +const externalPkg = ["react", "react-dom"]; +const externals = (id) => externalPkg.some((e) => id.indexOf(e) === 0); + +export default { + input: "./src/index.tsx", + output: [ + { + file: "dist/index.js", + format: "umd", + name: "DOORINGXPLUGIN", + globals: { react: "React", "react-dom": "ReactDom" }, + freeze: false, + exports: "default", + }, + ], + onwarn: function (warning) { + // Skip certain warnings + // should intercept ... but doesn't in some rollup versions + if (warning.code === "THIS_IS_UNDEFINED") { + return; + } + // console.warn everything else + console.warn(warning.message); + }, + plugins: [ + postcss({ + modules: true, //cssmodule + plugins: [], + minimize: true, + }), + external({ + includeDependencies: true, + }), + typescript({ + typescript: typescriptEngine, + include: ["*.js+(|x)", "**/*.js+(|x)"], + exclude: [ + "coverage", + "config", + "dist", + "node_modules/**", + "*.test.{js+(|x), ts+(|x)}", + "**/*.test.{js+(|x), ts+(|x)}", + ], + }), + commonjs({ + sourceMap: true, + }), + babel({ + extensions: [...DEFAULT_EXTENSIONS, ".ts", "tsx"], + babelHelpers: "runtime", + exclude: /node_modules/, + skipPreflightCheck: true, + }), + url(), + svgr(), + resolve(), + terser(), + ], + external: externals, +}; diff --git a/packages/dooringx-plugin-template/template/src/global.d.ts b/packages/dooringx-plugin-template/template/src/global.d.ts new file mode 100644 index 0000000..5c7bd58 --- /dev/null +++ b/packages/dooringx-plugin-template/template/src/global.d.ts @@ -0,0 +1,12 @@ +/* + * @Author: yehuozhili + * @Date: 2021-09-30 09:55:01 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-09-30 09:55:02 + * @FilePath: \dooringx\packages\dooringx-plugin-template\src\global.d.ts + */ +/// +declare module "*.less" { + const classes: { readonly [key: string]: string }; + export default classes; +} diff --git a/packages/dooringx-plugin-template/template/src/index.less b/packages/dooringx-plugin-template/template/src/index.less new file mode 100644 index 0000000..632b799 --- /dev/null +++ b/packages/dooringx-plugin-template/template/src/index.less @@ -0,0 +1,3 @@ +.hello { + background: red; +} diff --git a/packages/dooringx-plugin-template/template/src/index.tsx b/packages/dooringx-plugin-template/template/src/index.tsx new file mode 100644 index 0000000..fa980ee --- /dev/null +++ b/packages/dooringx-plugin-template/template/src/index.tsx @@ -0,0 +1,57 @@ +/* + * @Author: yehuozhili + * @Date: 2021-09-30 09:54:13 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-09-30 09:54:24 + * @FilePath: \dooringx\packages\dooringx-plugin-template\src\index.tsx + */ +import React from "react"; +import styles from "./index.less"; +import { ComponentItemFactory, createPannelOptions } from "dooringx-lib"; +export interface FormBaseType { + receive?: string; +} +export interface FormInputType extends FormBaseType { + label: string; +} +export interface FormMap { + input: FormInputType; +} +const remoteCo = new ComponentItemFactory( + "remoteCo", + "远程组件", + { + style: [ + createPannelOptions("input", { + receive: "text", + label: "文字", + }), + ], + }, + { + width: 200, + height: 100, + props: { + text: "远程组件a", + }, + }, + (data) => { + return ( +
+ {data.props.text} +
+ ); + }, + true +); +remoteCo.url = + "https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png"; + +export default remoteCo; diff --git a/packages/dooringx-plugin-template/template/template.json b/packages/dooringx-plugin-template/template/template.json new file mode 100644 index 0000000..6a7ce20 --- /dev/null +++ b/packages/dooringx-plugin-template/template/template.json @@ -0,0 +1,51 @@ +{ + "name": "dooringx-plugin-template", + "version": "0.0.0", + "description": "> TODO: description", + "author": "yehuozhili <673632758@qq.com>", + "homepage": "https://github.com/H5-Dooring/dooringx#readme", + "license": "MIT", + "main": "index.js", + "publishConfig": { + "registry": "http://registry.npmjs.org/" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/H5-Dooring/dooringx.git" + }, + "scripts": { + "build": "rimraf ./dist && rollup -c" + }, + "bugs": { + "url": "https://github.com/H5-Dooring/dooringx/issues" + }, + "devDependencies": { + "@types/react": "^17.0.18", + "@types/react-dom": "^17.0.9", + "less": "^4.1.1", + "prettier": "^2.3.2", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "^4.0.3", + "rimraf": "^3.0.2", + "rollup": "^2.56.2", + "tslib": "^2.3.1", + "typescript": "^4.3.5", + "@babel/core": "^7.15.0", + "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/preset-typescript": "^7.15.0", + "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-commonjs": "^20.0.0", + "@rollup/plugin-json": "^4.1.0", + "@rollup/plugin-node-resolve": "^13.0.4", + "@rollup/plugin-url": "^6.1.0", + "@svgr/rollup": "^5.5.0", + "dooringx-lib": "^0.9.3", + "postcss": "^8.3.6", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.1", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.30.0" + }, + "dependencies": {} +} diff --git a/packages/dooringx-plugin-template/template/tsconfig.json b/packages/dooringx-plugin-template/template/tsconfig.json new file mode 100644 index 0000000..5d04cd8 --- /dev/null +++ b/packages/dooringx-plugin-template/template/tsconfig.json @@ -0,0 +1,50 @@ +{ + "compilerOptions": { + "declaration": false, + "module": "esnext", + "noImplicitAny": true, + "outDir": "./dist", + "target": "es5", + "moduleResolution": "node", + "baseUrl": "./src", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "isolatedModules": true, + "jsx": "react", + "resolveJsonModule": true, + "esModuleInterop": true, + "strict": true, + "pretty": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "downlevelIteration": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "noImplicitReturns": true, + "skipLibCheck": true, + "allowSyntheticDefaultImports": true, + "stripInternal": true, + "emitDecoratorMetadata": false, + "experimentalDecorators": false, + "strictPropertyInitialization": true, + "importHelpers": true, + "sourceMap": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "noImplicitThis": true, + "alwaysStrict": true, + "noEmit": false, + "paths": { + "*": ["*", "src/*"] + } + }, + "include": ["src/**/*", "node_modules/dooringx-lib/**/*"], + "exclude": [ + "coverage", + "config", + "dist", + "node_modules/**", + "**/*.test.js", + "**/*.test.ts" + ] +} diff --git a/script/publish.js b/script/publish.js index c8c2f25..44ac42c 100644 --- a/script/publish.js +++ b/script/publish.js @@ -2,18 +2,41 @@ * @Author: yehuozhili * @Date: 2021-07-04 10:28:57 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-29 10:59:24 + * @LastEditTime: 2021-10-07 14:40:30 * @FilePath: \dooringx\script\publish.js */ const fs = require('fs-extra'); const path = require('path'); const spawn = require('child_process').spawn; +const execSync = require('child_process').execSync; const root = process.cwd(); +execSync('npm run changelog'); const rootPath = path.resolve(root, 'packages', 'dooringx-lib'); +const templatePath = path.resolve(root, 'packages', 'dooringx-plugin-template'); +const templateJsonPath = path.resolve(templatePath, 'template', 'template.json'); +const templatePkgPath = path.resolve(templatePath, 'package.json'); const readme = path.resolve(root, 'README.md'); const libreadme = path.resolve(root, 'packages', 'dooringx-lib', 'README.md'); +const libPkgPath = path.resolve(root, 'packages', 'dooringx-lib', 'package.json'); fs.removeSync(libreadme); fs.copyFileSync(readme, libreadme); +const res = execSync('npm view dooringx-lib version'); +const version = res.toString().replace('\n', ''); +const libpkgVersion = JSON.parse(fs.readFileSync(libPkgPath).toString()).version; +console.log('npm version is' + version); +if (version === libpkgVersion) { + console.log('you might forget to change version'); + return; +} +//同步template +const templatejson = JSON.parse(fs.readFileSync(templateJsonPath).toString()); +templatejson.devDependencies['dooringx-lib'] = '^' + libpkgVersion; +fs.removeSync(templateJsonPath); +fs.writeFileSync(templateJsonPath, JSON.stringify(templatejson, null, 2)); +const templatePkgJson = JSON.parse(fs.readFileSync(templatePkgPath).toString()); +templatePkgJson.version = libpkgVersion; +fs.removeSync(templatePkgPath); +fs.writeFileSync(templatePkgPath, JSON.stringify(templatePkgJson, null, 2)); const command = `npm`; const args = [`publish`]; @@ -28,3 +51,14 @@ child.on('close', (i) => { process.exit(1); } }); +const tpl = spawn(command, args, { + stdio: 'inherit', + env: process.env, + shell: true, + cwd: templatePath, +}); +tpl.on('close', (i) => { + if (i !== 0) { + process.exit(1); + } +});