update 0.9.3

CHANGELOG.md

@@ -1,5 +1,13 @@
 ## changelog
 
+## 0.9.3
+
+增加双击置入画布。
+
+变更元素初始focus状态。
+
+存在元素宽高，则置入时定位于元素中心。
+
 ## 0.9.2
 
 增加远程组件调用全流程，component中增加url属性，便于script加载。

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加载。

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",

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) {
 								<div
 									className={`${styles.coitem} yh-left-item-wrap`}
 									key={index}
-									{...dragEventResolve(v)}
+									{...dragEventResolve(v, props.config)}
 								>
 									<div className={`${styles.redbox} yh-left-item-img-wrap`}>
 										{v.imgCustom ? (
@@ -140,7 +140,7 @@ function LeftConfig(props: LeftConfigProps) {
 							<div
 								className={`${styles.coitem} yh-left-item-wrap`}
 								key={index}
-								{...dragEventResolve(v)}
+								{...dragEventResolve(v, props.config)}
 							>
 								<div className={`${styles.redbox} yh-left-item-img-wrap`}>
 									{v.imgCustom ? (

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,

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<HTMLDivElement> | 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<HTMLDivElement>) => {
@@ -55,30 +110,7 @@ export const containerDragResolve = (config: UserConfig) => {
 			const offestY = Math.round(e.nativeEvent.offsetY);
 			//drop后修改store，
 			if (currentDrag) {
-				// 还需要拿到注册的组件状态
+				resolveDrop(config, currentDrag, e, offsetX, offestY);
-				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 });
 			}
 			currentDrag = null;
 		},

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,10 +12,8 @@ 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 onMouseDown = (e: React.MouseEvent) => {
 	const focusState = config.getFocusState();
 	const clonedata = deepCopy(store.getData());
 	const newBlock = clonedata.block.map((v: IBlockType) => {
@@ -24,10 +22,19 @@ export function containerFocusRemove(config: UserConfig) {
 	});
 	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) => {
+		resolveRemove(config);
 		if (!innerDragState.item) {
 			selectRangeMouseDown(e, config);
 		}
-		unmountContextMenu();
 	};
 	return {
 		onMouseDown,

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"
+  }
+}

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,
+					},
+				],
+			],
+		},
+	},
+};

packages/dooringx-plugin-template/template/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+  "TrailingCooma": "es5"
+}

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
+```

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,
+};

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
+ */
+/// <reference types="react-scripts" />
+declare module "*.less" {
+	const classes: { readonly [key: string]: string };
+	export default classes;
+}

packages/dooringx-plugin-template/template/src/index.less

@@ -0,0 +1,3 @@
+.hello {
+	background: red;
+}

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<FormMap, "input">("input", {
+				receive: "text",
+				label: "文字",
+			}),
+		],
+	},
+	{
+		width: 200,
+		height: 100,
+		props: {
+			text: "远程组件a",
+		},
+	},
+	(data) => {
+		return (
+			<div
+				className={styles.hello}
+				style={{
+					zIndex: data.zIndex,
+					width: data.width,
+					height: data.height,
+				}}
+			>
+				{data.props.text}
+			</div>
+		);
+	},
+	true
+);
+remoteCo.url =
+	"https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png";
+
+export default remoteCo;

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": {}
+}

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"
+	]
+}

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);
+	}
+});