update 0.9.3

This commit is contained in:
yehuozhili
2021-10-07 14:41:24 +08:00
parent 02337bae3c
commit c37d442b45
18 changed files with 494 additions and 48 deletions

View File

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

View File

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

View File

@@ -1,5 +1,5 @@
{
"version": "0.9.2",
"version": "0.9.3",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/dooringx-lib.esm.js",

View File

@@ -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 ? (

View File

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

View File

@@ -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) {
// 还需要拿到注册的组件状态
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;
},

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,11 @@
# `dooringx-plugin-template`
> TODO: description
## Usage
```
const dooringxPluginTemplate = require('dooringx-plugin-template');
// TODO: DEMONSTRATE API
```

View File

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

View File

@@ -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;
}

View File

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

View File

@@ -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;

View File

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

View File

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

View File

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