element in src/app.html
+ target: '#svelte',
+ adapter: staticAdapter({
+ pages: 'build',
+ assets: 'build',
+ }),
+ paths: process.env.DEPLOY
+ ? {
+ base: '/svelte-kit-markdown',
+ }
+ : {},
+ trailingSlash: 'ignore',
+ },
+};
+
+export default config;
diff --git a/packages/dooringx-doc/tsconfig.json b/packages/dooringx-doc/tsconfig.json
new file mode 100644
index 0000000..d826f6e
--- /dev/null
+++ b/packages/dooringx-doc/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "module": "es2020",
+ "lib": ["es2020"],
+ "target": "es2019",
+ /**
+ svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+ to enforce using \`import type\` instead of \`import\` for Types.
+ */
+ "importsNotUsedAsValues": "error",
+ "isolatedModules": true,
+ "resolveJsonModule": true,
+ /**
+ To have warnings/errors of the Svelte compiler at the correct position,
+ enable source maps by default.
+ */
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "baseUrl": ".",
+ "allowJs": true,
+ "checkJs": true,
+ "paths": {
+ "$lib/*": ["src/lib/*"]
+ }
+ },
+ "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}
diff --git a/packages/dooringx-lib/.babelrc b/packages/dooringx-lib/.babelrc
new file mode 100644
index 0000000..c32b644
--- /dev/null
+++ b/packages/dooringx-lib/.babelrc
@@ -0,0 +1,18 @@
+{
+ "plugins": [
+ [
+ "import-v2",
+ {
+ "libraryName": "@ant-design",
+ "libraryDirectory": "icons",
+ "camel2DashComponentName": false,
+ "style": false
+ }
+ ],
+ [
+ "import",
+ { "libraryName": "antd", "libraryDirectory": "lib", "style": true },
+ "antd"
+ ]
+ ]
+}
diff --git a/packages/dooringx-lib/.eslintrc.js b/packages/dooringx-lib/.eslintrc.js
new file mode 100644
index 0000000..5779591
--- /dev/null
+++ b/packages/dooringx-lib/.eslintrc.js
@@ -0,0 +1,10 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-03-14 05:00:20
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-09 01:34:14
+ * @FilePath: \dooringx\packages\dooringx-lib\.eslintrc.js
+ */
+module.exports = {
+ extends: ['react-app'],
+};
diff --git a/packages/dooringx-lib/LICENSE b/packages/dooringx-lib/LICENSE
new file mode 100644
index 0000000..0feab53
--- /dev/null
+++ b/packages/dooringx-lib/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 yehuozhili
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/dooringx-lib/README.md b/packages/dooringx-lib/README.md
new file mode 100644
index 0000000..079a0f4
--- /dev/null
+++ b/packages/dooringx-lib/README.md
@@ -0,0 +1,16 @@
+
+
+## DooringX 核心包
+
+## changelog
+
+- 0.1.7 修改预览特殊条件显示，删除 console
+- 0.1.6 调整初始缩放，画布初始比例，增加回正画布功能。
+- 0.1.5 删除未作按钮，增加 fixed 配置
+- 0.1.4 基础功能
diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json
new file mode 100644
index 0000000..108f377
--- /dev/null
+++ b/packages/dooringx-lib/package.json
@@ -0,0 +1,52 @@
+{
+ "version": "0.1.7",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/dooringx-lib.esm.js",
+ "browser": "dist/dooringx-lib.esm.js",
+ "typings": "dist/index.d.ts",
+ "files": [
+ "dist"
+ ],
+ "engines": {
+ "node": ">=10"
+ },
+ "scripts": {
+ "start": "tsdx watch --noclean ",
+ "build": "tsdx build ",
+ "test": "tsdx test --passWithNoTests",
+ "lint": "tsdx lint",
+ "prepare": "tsdx build"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "antd": ">=4"
+ },
+ "name": "dooringx-lib",
+ "author": "yehuozhili",
+ "devDependencies": {
+ "@ant-design/icons": "^4.6.2",
+ "antd": "^4.15.2",
+ "postcss-modules": "^4.0.0",
+ "babel-plugin-import": "^1.13.3",
+ "babel-plugin-import-v2": "^1.0.0",
+ "@types/react-color": "^3.0.4",
+ "@types/react": "^17.0.0",
+ "@types/react-dom": "^17.0.0",
+ "size-limit": "^4.10.1",
+ "tsdx": "^0.14.1",
+ "react": "17.x",
+ "react-dom": "17.x",
+ "postcss": "^8.2.8",
+ "less": "^4.1.1",
+ "rollup-plugin-postcss": "^4.0.0",
+ "@types/uuid": "^8.3.0"
+ },
+ "dependencies": {
+ "deepcopy": "^2.1.0",
+ "react-color": "^2.19.3",
+ "react-sortable-hoc": "^2.0.0",
+ "uuid": "^8.3.2",
+ "animate.css": "^4.1.1"
+ }
+}
diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx
new file mode 100644
index 0000000..c1b4a15
--- /dev/null
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -0,0 +1,201 @@
+import { IBlockType } from '../core/store/storetype';
+import { CSSProperties, PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
+import { innerDrag } from '../core/innerDrag';
+import { BlockResizer } from '../core/resizeHandler';
+import { contextMenuEvent } from '../core/contextMenu';
+import React from 'react';
+import { transfer } from '../core/transfer';
+import { UserConfig } from '../config';
+import styles from '../index.less';
+interface BlockProps {
+ data: IBlockType;
+ context: 'edit' | 'preview';
+ config: UserConfig;
+}
+
+/**
+ *
+ * 用来从component里拿到渲染进行渲染,由于异步拉代码，所以需要等待代码拉取完毕
+ * @param {*} props
+ * @returns
+ */
+function Blocks(props: PropsWithChildren
) {
+ const [state, setState] = useState(null);
+
+ const [previewState, setPreviewState] = useState({
+ top: props.data.top,
+ left: props.data.left,
+ height: props.data.height,
+ width: props.data.width,
+ });
+
+ useEffect(() => {
+ const fn = () => props.config.getComponentRegister().getComp(props.data.name);
+ const data = fn();
+ let unregist = () => {};
+ let newdata = { ...props.data };
+ if (props.context === 'preview') {
+ newdata = {
+ ...props.data,
+ top: previewState.top,
+ left: previewState.left,
+ height: previewState.height,
+ width: previewState.width,
+ };
+ }
+
+ if (data) {
+ setState(data.render(newdata, props.context, props.config.getStore(), props.config));
+ } else {
+ const callback = () => {
+ const tmp = fn();
+ setState(tmp.render(newdata, props.context, props.config.getStore(), props.config));
+ unregist();
+ };
+ unregist = props.config.getComponentRegister().on(props.data.name, callback);
+ }
+ return () => {
+ unregist();
+ };
+ }, [props.data, props.context, props.config, previewState]);
+
+ const ref = useRef(null);
+ const innerDragData = useMemo(() => {
+ return { ...innerDrag(props.data, ref) };
+ }, [props.data]);
+
+ useEffect(() => {
+ const fn = () => {
+ const { top, left, width, height } = transfer(
+ props.data.top,
+ props.data.left,
+ props.data.height,
+ props.data.width,
+ props.data.fixed
+ );
+
+ setPreviewState({ top, left, width, height });
+ };
+ fn();
+ window.addEventListener('resize', fn);
+ return () => {
+ window.removeEventListener('resize', fn);
+ };
+ }, [
+ previewState.height,
+ previewState.left,
+ previewState.top,
+ previewState.width,
+ props.data.height,
+ props.data.left,
+ props.data.top,
+ props.data.width,
+ props.data.fixed,
+ ]);
+
+ const animatecss = useMemo(() => {
+ const animate = props.data.animate;
+ if (Object.keys(animate).length > 0) {
+ return `animate__animated ${animate.animate ?? ''} ${animate.delay ?? ''} ${
+ animate.speed ?? ''
+ }`;
+ }
+ return '';
+ }, [
+ props.data.animate.animate,
+ props.data.animate.delay,
+ // props.data.animate.duration,
+ props.data.animate.speed,
+ ]);
+ const animateCount = useMemo(() => {
+ const animate = props.data.animate;
+
+ if (Object.keys(animate).length > 0) {
+ return { animationIterationCount: animate.animationIterationCount };
+ }
+ return { animationIterationCount: 1 };
+ }, [props.data.animate.animationIterationCount]);
+
+ const render = useMemo(() => {
+ // 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。
+ if (state && props.context === 'edit') {
+ const style: CSSProperties = props.data.canDrag ? { pointerEvents: 'none' } : {};
+ return (
+ {
+ if (props.data.name !== 'modalMask') {
+ contextMenuEvent(e, ref);
+ }
+ }}
+ >
+ {props.data.position !== 'static' && (
+
+ {state}
+
+ )}
+ {/* 这里暂不考虑布局影响 */}
+ {props.data.position === 'static' && props.data.display !== 'inline' && (
+
+ {state}
+
+ )}
+ {props.data.position === 'static' && props.data.display === 'inline' && (
+
{state}
+ )}
+
+
+ {state}
+
+ );
+ }
+ }, [
+ state,
+ props.context,
+ props.data,
+ innerDragData,
+ previewState.top,
+ previewState.left,
+ previewState.width,
+ previewState.height,
+ ]);
+ return render;
+}
+export default Blocks;
diff --git a/packages/dooringx-lib/src/components/container.tsx b/packages/dooringx-lib/src/components/container.tsx
new file mode 100644
index 0000000..6ba08a1
--- /dev/null
+++ b/packages/dooringx-lib/src/components/container.tsx
@@ -0,0 +1,131 @@
+import { containerDragResolve } from '../core/crossDrag';
+import { containerFocusRemove } from '../core/focusHandler';
+import { innerContainerDrag } from '../core/innerDrag';
+import { NormalMarkLineRender } from '../core/markline';
+import { scaleState } from '../core/scale/state';
+import { IStoreData } from '../core/store/storetype';
+import { wrapperMoveState } from './wrapperMove/event';
+import { CSSProperties, PropsWithChildren, useMemo } from 'react';
+import Blocks from './blocks';
+import { containerResizer } from '../core/resizeHandler/containerResizer';
+import React from 'react';
+import UserConfig from '../config';
+import styles from '../index.less';
+import { getRealHeight } from '../core/transfer';
+import { IconFont } from '../core/utils/icon';
+interface ContainerProps {
+ state: IStoreData;
+ context: 'edit' | 'preview';
+ config: UserConfig;
+ editContainerStyle?: CSSProperties;
+ previewContainerStyle?: CSSProperties;
+}
+function Container(props: PropsWithChildren) {
+ const { editContainerStyle, previewContainerStyle } = props;
+
+ const transform = useMemo(() => {
+ if (props.context === 'edit') {
+ return `scale(${scaleState.value}) translate(${wrapperMoveState.needX}px, ${wrapperMoveState.needY}px)`;
+ } else {
+ return undefined;
+ }
+ }, [props.context]);
+
+ const bgColor = () => {
+ const isEdit = props.config.getStoreChanger().isEdit();
+ if (isEdit) {
+ return 'rgba(255,255,255,1)';
+ } else {
+ return props.state.globalState.containerColor;
+ }
+ };
+
+ return (
+ <>
+ {props.context === 'edit' && (
+ <>
+
+
+
+ {props.context === 'edit' && }
+ {props.state.block.map((v) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ {/* */}
+
+
+ {props.state.block.map((v) => {
+ return (
+
+ );
+ })}
+
+ )}
+
+ );
+}
+export default Container;
diff --git a/packages/dooringx-lib/src/components/control.tsx b/packages/dooringx-lib/src/components/control.tsx
new file mode 100644
index 0000000..38488cb
--- /dev/null
+++ b/packages/dooringx-lib/src/components/control.tsx
@@ -0,0 +1,281 @@
+import {
+ CompressOutlined,
+ DeleteOutlined,
+ FullscreenExitOutlined,
+ FullscreenOutlined,
+ GatewayOutlined,
+ MenuOutlined,
+ SyncOutlined,
+ UnorderedListOutlined,
+} from '@ant-design/icons';
+import { Button, Divider, Form, Input, List, Modal, Popconfirm, Popover } from 'antd';
+import React, { CSSProperties, PropsWithChildren, useState } from 'react';
+import { UserConfig } from '..';
+import { IBlockType, IStoreData } from '../core/store/storetype';
+import { deepCopy, arrayMove, changeItem, changeLayer, focusEle } from '../core/utils';
+
+import { SortEnd, SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { wrapperMoveState } from './wrapperMove/event';
+export interface ControlProps {
+ config: UserConfig;
+ style?: CSSProperties;
+}
+
+const DragHandle = SortableHandle(() => );
+const SortableItem = SortableElement(
+ ({ value }: { value: { value: IBlockType; config: UserConfig } }) => (
+
+
+
+
+
+
+ {value.config.getComponentRegister().getMap()[value.value.name].display}
+
+
+
{value.value.id.slice(-6)}
+
+
{value.value.position}
+
+
+
{
+ changeItem(value.config.getStore(), value.value.id, 'position', 'absolute');
+ }}
+ >
+ }>
+
+
{
+ changeItem(value.config.getStore(), value.value.id, 'position', 'static');
+ }}
+ >
+ }>
+
+
}
+ onClick={() => {
+ focusEle(value.config.getStore(), value.value.id);
+ }}
+ >
+
{
+ changeLayer(value.config.getStore(), value.value.id, 'delete');
+ }}
+ >
+ } title="删除" type="link">
+
+
+
+ {items.data.map((value, index: number) => (
+
+ ))}
+
+ );
+ }
+);
+
+export function Control(props: PropsWithChildren) {
+ const { style } = props;
+ const [visible, setVisible] = useState(false);
+ const [configVisible, setConfigVisible] = useState(false);
+ const [form] = Form.useForm();
+
+ const data = props.config.getStore().getData().block;
+
+ const onSortEnd = (sort: SortEnd) => {
+ const { oldIndex, newIndex } = sort;
+ const newblocks: IBlockType[] = arrayMove(data, oldIndex, newIndex);
+ // 这里要判断是否edit ,如果edit时，只要看第一个是不是container，不是则不移动
+ const isEdit = props.config.getStoreChanger().isEdit();
+ if (isEdit) {
+ const firstType = newblocks[0].name;
+ if (firstType !== 'modalMask') {
+ return;
+ }
+ }
+ const store = props.config.getStore();
+ const cloneData: IStoreData = deepCopy(store.getData());
+ cloneData.block = newblocks;
+ store.setData(cloneData);
+ };
+
+ const content =
+ data.length === 0 ? (
+ 暂时没有组件
+ ) : (
+
+
+
+ );
+
+ return (
+ <>
+
+
+ }>
+
+
+ {/*
}> */}
+
+
+
+ 
+