16 | }
17 |
18 | export interface IDesignerLayoutContext {
19 | theme?: 'dark' | 'light' | (string & {})
20 | prefixCls: string
21 | position: 'fixed' | 'absolute' | 'relative'
22 | }
23 |
24 | export interface IWorkspaceContext {
25 | id: string
26 | title?: string
27 | description?: string
28 | }
29 |
30 | export type DnFC = React.FC
& {
31 | Resource?: IResource[]
32 | Behavior?: IBehavior[]
33 | }
34 |
35 | export type DnComponent
= React.ComponentType
& {
36 | Resource?: IResource[]
37 | Behavior?: IBehavior[]
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react/src/variables.less:
--------------------------------------------------------------------------------
1 | @prefix-cls: ~'dn';
2 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/AuxToolWidget/Copy.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { TreeNode } from '@pind/designable-core'
3 | import { usePrefix } from '../../hooks'
4 | import { IconWidget } from '../IconWidget'
5 | import { Button } from 'antd'
6 | import { ReactFC } from '@formily/reactive-react'
7 | export interface ICopyProps {
8 | node: TreeNode
9 | style?: React.CSSProperties
10 | }
11 |
12 | export const Copy: ReactFC = ({ node, style }) => {
13 | const prefix = usePrefix('aux-copy')
14 | if (node === node.root) return null
15 | return (
16 | {
21 | TreeNode.clone([node])
22 | }}
23 | >
24 |
26 | )
27 | }
28 |
29 | Copy.displayName = 'Copy'
30 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/AuxToolWidget/Delete.tsx:
--------------------------------------------------------------------------------
1 | import { ReactFC } from '@formily/reactive-react'
2 | import { TreeNode } from '@pind/designable-core'
3 | import { Button } from 'antd'
4 | import React from 'react'
5 | import { usePrefix } from '../../hooks'
6 | import { IconWidget } from '../IconWidget'
7 |
8 | export interface IDeleteProps {
9 | node: TreeNode
10 | style?: React.CSSProperties
11 | }
12 |
13 | export const Delete: ReactFC = ({ node, style }) => {
14 | const prefix = usePrefix('aux-copy')
15 | if (node === node.root) return null
16 | return (
17 | {
22 | TreeNode.remove([node])
23 | }}
24 | >
25 |
27 | )
28 | }
29 |
30 | Delete.displayName = 'Delete'
31 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/AuxToolWidget/DragHandler.tsx:
--------------------------------------------------------------------------------
1 | import { observer, ReactFC } from '@formily/reactive-react'
2 | import { TreeNode } from '@pind/designable-core'
3 | import { Button } from 'antd'
4 | import React from 'react'
5 | import { useDesigner, usePrefix } from '../../hooks'
6 | import { IconWidget } from '../IconWidget'
7 |
8 | export interface IDragHandlerProps {
9 | node: TreeNode
10 | style?: React.CSSProperties
11 | }
12 |
13 | export const DragHandler: ReactFC = observer(
14 | ({ node, style }) => {
15 | const designer = useDesigner()
16 | const prefix = usePrefix('aux-drag-handler')
17 | if (node === node.root || !node.allowDrag()) return null
18 | const handlerProps = {
19 | [designer.props.nodeDragHandlerAttrName]: 'true',
20 | }
21 | return (
22 |
23 |
25 | )
26 | }
27 | )
28 |
29 | DragHandler.displayName = 'DragHandler'
30 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/AuxToolWidget/TranslateHandler.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import cls from 'classnames'
3 | import { useDesigner, usePrefix } from '../../hooks'
4 | import { TreeNode } from '@pind/designable-core'
5 | import { IconWidget } from '../IconWidget'
6 | import { ReactFC } from '@formily/reactive-react'
7 |
8 | export interface ITranslateHandlerProps {
9 | node: TreeNode
10 | }
11 |
12 | export const TranslateHandler: ReactFC = (props) => {
13 | const designer = useDesigner()
14 | const prefix = usePrefix('aux-node-translate-handler')
15 | const createHandler = (value: string) => {
16 | return {
17 | [designer.props.nodeTranslateAttrName]: value,
18 | className: cls(prefix, value),
19 | }
20 | }
21 | const allowTranslate = props.node.allowTranslate()
22 | if (!allowTranslate) return null
23 | return (
24 | <>
25 |
26 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/ComponentTreeWidget/styles.less:
--------------------------------------------------------------------------------
1 | @import '../../variables.less';
2 |
3 | .@{prefix-cls}-component-tree {
4 | height: 100%;
5 | min-height: 100%;
6 | min-width: 100%;
7 | max-width: 100%;
8 | max-height: 100%;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/DesignerToolsWidget/styles.less:
--------------------------------------------------------------------------------
1 | @import '../../variables.less';
2 |
3 | .@{prefix-cls}-designer-tools {
4 | display: flex;
5 | align-items: center;
6 |
7 | .ant-input-number {
8 | font-size: 12px !important;
9 | background: var(--dn-toolbar-input-bg-color) !important;
10 | border-color: var(--dn-toolbar-input-border-color) !important;
11 | color: var(--dn-toolbar-input-color) !important;
12 |
13 | .ant-input-number-handler-wrap,
14 | .ant-input-number-handler {
15 | background: var(--dn-toolbar-input-handler-bg-color) !important;
16 | border-color: var(--dn-toolbar-input-border-color) !important;
17 | color: var(--dn-toolbar-input-color) !important;
18 | }
19 |
20 | .ant-input-number-handler-down-inner,
21 | .ant-input-number-handler-up-inner {
22 | color: var(--dn-toolbar-input-color) !important;
23 | }
24 |
25 | &:hover {
26 | border-color: var(--dn-toolbar-input-hover-border-color) !important;
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/DroppableWidget/styles.less:
--------------------------------------------------------------------------------
1 | .dn-droppable-placeholder {
2 | height: 60px;
3 | background-color: var(--dn-droppable-bg-color);
4 | border: 1px dashed var(--dn-droppable-border-color);
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | color: var(--dn-droppable-color);
9 | font-weight: lighter;
10 | font-size: 13px;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/EmptyWidget/styles.less:
--------------------------------------------------------------------------------
1 | @import '../../variables.less';
2 |
3 | .@{prefix-cls}-empty {
4 | transform: perspective(1px) translate3d(0, 0, 0);
5 | position: absolute;
6 | top: 0;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | height: 100%;
11 | width: 100%;
12 | pointer-events: none;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | background: var(--dn-empty-bg-color);
17 | .animations {
18 | display: flex;
19 | flex-wrap: wrap;
20 | justify-content: center;
21 | }
22 | .hotkeys-list {
23 | text-align: center;
24 | line-height: 30px;
25 | color: #888;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/GhostWidget/styles.less:
--------------------------------------------------------------------------------
1 | @import '../../variables.less';
2 |
3 | .@{prefix-cls}-ghost {
4 | padding-left: 25px;
5 | padding-right: 15px;
6 | height: 30px;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | position: fixed;
11 | color: var(--dn-ghost-color);
12 | font-size: 12px;
13 | z-index: 9999;
14 | border-radius: 50px;
15 | background-color: var(--dn-ghost-bg-color);
16 | pointer-events: none;
17 | left: 0;
18 | top: 0;
19 | transform: translate3d(0, 0, 0);
20 | }
21 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/HistoryWidget/styles.less:
--------------------------------------------------------------------------------
1 | @import '../../variables.less';
2 |
3 | .@{prefix-cls}-history {
4 | &-item {
5 | display: flex;
6 | justify-content: space-between;
7 | min-height: 32px;
8 | padding: 0 10px;
9 | align-items: center;
10 | cursor: pointer;
11 | color: var(--dn-outline-tree-node-header-color);
12 | &-timestamp {
13 | font-size: 10px;
14 | }
15 | &:hover {
16 | background-color: var(--dn-panel-active-bg-color);
17 | }
18 |
19 | &.active {
20 | background-color: var(--dn-panel-active-bg-color);
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/IconWidget/styles.less:
--------------------------------------------------------------------------------
1 | @import '../../variables.less';
2 |
3 | .@{prefix-cls}-icon {
4 | display: inline-block;
5 | color: inherit;
6 | font-style: normal;
7 | line-height: 0;
8 | text-align: center;
9 | text-transform: none;
10 | vertical-align: -0.125em;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | svg {
15 | pointer-events: none;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/NodePathWidget/styles.less:
--------------------------------------------------------------------------------
1 | .dn-node-path {
2 | padding: 4px 10px !important;
3 | border-bottom: 1px solid var(--dn-panel-border-color);
4 |
5 | .dn-icon {
6 | font-size: 11px;
7 | }
8 |
9 | .ant-breadcrumb-separator {
10 | margin: 0 4px !important;
11 | }
12 |
13 | a {
14 | font-size: 12px;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/NodeTitleWidget/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { observer, ReactFC } from '@formily/reactive-react'
3 | import { TreeNode } from '@pind/designable-core'
4 | export interface INodeTitleWidgetProps {
5 | node: TreeNode
6 | }
7 |
8 | export const NodeTitleWidget: ReactFC = observer(
9 | (props) => {
10 | const takeNode = () => {
11 | const node = props.node
12 | if (node.componentName === '$$ResourceNode$$') {
13 | return node.children[0]
14 | }
15 | return node
16 | }
17 | const node = takeNode()
18 | return {node.getMessage('title') || node.componentName}
19 | }
20 | )
21 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/OutlineWidget/context.ts:
--------------------------------------------------------------------------------
1 | import { TreeNode } from '@pind/designable-core'
2 | import React, { createContext } from 'react'
3 |
4 | export interface INodeContext {
5 | renderTitle?: (node: TreeNode) => React.ReactNode
6 | renderActions?: (node: TreeNode) => React.ReactNode
7 | }
8 |
9 | export const NodeContext = createContext({})
10 |
--------------------------------------------------------------------------------
/packages/react/src/widgets/index.ts:
--------------------------------------------------------------------------------
1 | export * from './AuxToolWidget'
2 | export * from './ComponentTreeWidget'
3 | export * from './DesignerToolsWidget'
4 | export * from './DroppableWidget'
5 | export * from './EmptyWidget'
6 | export * from './GhostWidget'
7 | export * from './HistoryWidget'
8 | export * from './IconWidget'
9 | export * from './NodeActionsWidget'
10 | export * from './NodePathWidget'
11 | export * from './NodeTitleWidget'
12 | export * from './OutlineWidget'
13 | export * from './ResourceListWidget'
14 | export * from './ResourceWidget'
15 | export * from './TextWidget'
16 | export * from './ViewToolsWidget'
17 |
--------------------------------------------------------------------------------
/packages/react/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "paths": {
6 | "@pind/designable-*": ["../*"]
7 | },
8 | "declaration": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["./src/**/*.ts", "./src/**/*.tsx"],
4 | "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/shared/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | build
4 | __tests__
--------------------------------------------------------------------------------
/packages/shared/README.md:
--------------------------------------------------------------------------------
1 | # @pind/designable-shared
2 |
--------------------------------------------------------------------------------
/packages/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@pind/designable-shared",
3 | "version": "2.0.0-beta.6",
4 | "license": "MIT",
5 | "main": "lib",
6 | "types": "lib/index.d.ts",
7 | "engines": {
8 | "npm": ">=3.0.0"
9 | },
10 | "module": "esm",
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/pindjs/designable.git"
14 | },
15 | "bugs": {
16 | "url": "https://github.com/pindjs/designable/issues"
17 | },
18 | "homepage": "https://github.com/pindjs/designable#readme",
19 | "scripts": {
20 | "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd",
21 | "build:cjs": "tsc --project tsconfig.build.json",
22 | "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
23 | "build:umd": "rollup --config --bundleConfigAsCjs"
24 | },
25 | "publishConfig": {
26 | "access": "public"
27 | },
28 | "dependencies": {
29 | "requestidlecallback": "^0.3.0"
30 | },
31 | "gitHead": "bda070c137ba0003cc4451b2208e089d2e326b23"
32 | }
33 |
--------------------------------------------------------------------------------
/packages/shared/rollup.config.js:
--------------------------------------------------------------------------------
1 | import baseConfig from '../../scripts/rollup.base'
2 |
3 | export default baseConfig('designable.shared', 'Designable.Shared')
4 |
--------------------------------------------------------------------------------
/packages/shared/src/animation.ts:
--------------------------------------------------------------------------------
1 | export const createUniformSpeedAnimation = (
2 | speed = 10,
3 | callback: (delta: number) => void
4 | ) => {
5 | let request: number | null = null
6 | let startTime: number | null = null
7 | const start = () => {
8 | if (request) return
9 | request = requestAnimationFrame((timestamp) => {
10 | if (startTime === null) {
11 | startTime = timestamp
12 | }
13 | const deltaTime = timestamp - startTime
14 | const delta = (deltaTime / 1000) * speed
15 | callback(delta)
16 | request = null
17 | start()
18 | })
19 | }
20 |
21 | start()
22 |
23 | return () => {
24 | if (request) {
25 | cancelAnimationFrame(request)
26 | request = null
27 | }
28 | startTime = null
29 | }
30 | }
31 |
32 | //越接近阈值，速度越小，越远离阈值，速度越大
33 | export const calcSpeedFactor = (delta = 0, threshold = Infinity) => {
34 | if (threshold >= delta) {
35 | return (threshold - delta) / threshold
36 | }
37 | return 0
38 | }
39 |
--------------------------------------------------------------------------------
/packages/shared/src/compose.ts:
--------------------------------------------------------------------------------
1 | export const compose = (...fns: ((payload: any) => any)[]) => {
2 | return (payload: any) => {
3 | return fns.reduce((buf, fn) => {
4 | return fn(buf)
5 | }, payload)
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/shared/src/globalThisPolyfill.ts:
--------------------------------------------------------------------------------
1 | function getGlobalThis() {
2 | try {
3 | if (typeof self !== 'undefined') {
4 | return self
5 | }
6 | } catch (e) {}
7 | try {
8 | if (typeof globalThisPolyfill !== 'undefined') {
9 | return globalThisPolyfill
10 | }
11 | } catch (e) {}
12 | try {
13 | if (typeof global !== 'undefined') {
14 | return global
15 | }
16 | } catch (e) {}
17 | return Function('return this')()
18 | }
19 | export const globalThisPolyfill: Window = getGlobalThis()
20 |
--------------------------------------------------------------------------------
/packages/shared/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './event'
2 | export * from './scroller'
3 | export * from './subscribable'
4 | export * from './coordinate'
5 | export * from './types'
6 | export * from './uid'
7 | export * from './clone'
8 | export * from './instanceof'
9 | export * from './lru'
10 | export * from './compose'
11 | export * from './array'
12 | export * from './keycode'
13 | export * from './animation'
14 | export * from './request-idle'
15 | export * from './element'
16 | export * from './globalThisPolyfill'
17 | export * from './observer'
18 |
--------------------------------------------------------------------------------
/packages/shared/src/instanceof.ts:
--------------------------------------------------------------------------------
1 | import { isStr, isFn } from './types'
2 | import { globalThisPolyfill } from './globalThisPolyfill'
3 | export const instOf = (value: any, cls: any) => {
4 | if (isFn(cls)) return value instanceof cls
5 | if (isStr(cls))
6 | return globalThisPolyfill[cls]
7 | ? value instanceof globalThisPolyfill[cls]
8 | : false
9 | return false
10 | }
11 |
--------------------------------------------------------------------------------
/packages/shared/src/request-idle.ts:
--------------------------------------------------------------------------------
1 | import 'requestidlecallback'
2 | import { globalThisPolyfill } from './globalThisPolyfill'
3 |
4 | export interface IIdleDeadline {
5 | didTimeout: boolean
6 | timeRemaining: () => DOMHighResTimeStamp
7 | }
8 |
9 | export interface IdleCallbackOptions {
10 | timeout?: number
11 | }
12 |
13 | export const requestIdle = (
14 | callback: (params: IIdleDeadline) => void,
15 | options?: IdleCallbackOptions
16 | ): number => {
17 | return globalThisPolyfill['requestIdleCallback'](callback, options)
18 | }
19 |
20 | export const cancelIdle = (id: number) => {
21 | globalThisPolyfill['cancelIdleCallback'](id)
22 | }
23 |
--------------------------------------------------------------------------------
/packages/shared/src/uid.ts:
--------------------------------------------------------------------------------
1 | let IDX = 36,
2 | HEX = ''
3 | while (IDX--) HEX += IDX.toString(36)
4 |
5 | export function uid(len?: number) {
6 | let str = '',
7 | num = len || 11
8 | while (num--) str += HEX[(Math.random() * 36) | 0]
9 | return str
10 | }
11 |
--------------------------------------------------------------------------------
/packages/shared/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "paths": {
6 | "@pind/designable-*": ["../*"]
7 | },
8 | "declaration": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/shared/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["./src/**/*.ts", "./src/**/*.tsx"],
4 | "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vue/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | build
4 | __tests__
--------------------------------------------------------------------------------
/packages/vue/README.md:
--------------------------------------------------------------------------------
1 | # @pind/designable-react
2 |
--------------------------------------------------------------------------------
/packages/vue/copy.ts:
--------------------------------------------------------------------------------
1 | import { runCopy } from '../../scripts/build-style'
2 |
3 | runCopy({
4 | esStr: 'antd/es/',
5 | libStr: 'antd/lib/',
6 | })
7 |
--------------------------------------------------------------------------------
/packages/vue/rollup.config.js:
--------------------------------------------------------------------------------
1 | import baseConfig from '../../scripts/rollup.base.js'
2 |
3 | export default baseConfig('designable.vue', 'Designable.Vue')
4 |
--------------------------------------------------------------------------------
/packages/vue/src/context.ts:
--------------------------------------------------------------------------------
1 | import { InjectionKey, Ref } from 'vue'
2 | import { TreeNode, Engine } from '@pind/designable-core'
3 | import { IDesignerComponents } from './types'
4 |
5 | export const DesignerEngineContext: InjectionKey> = Symbol(
6 | 'DesignerEngineContext'
7 | )
8 | export const DesignerComponentsContext: InjectionKey> =
9 | Symbol('DesignerComponentsContext')
10 |
11 | export const TreeNodeContext: InjectionKey> =
12 | Symbol('TreeNodeContext')
13 |
--------------------------------------------------------------------------------
/packages/vue/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDesigner'
2 | export * from './useComponents'
3 | export * from './usePrefix'
4 | export * from './useTreeNode'
5 |
--------------------------------------------------------------------------------
/packages/vue/src/hooks/useComponents.ts:
--------------------------------------------------------------------------------
1 | import { inject, Ref } from 'vue'
2 | import { DesignerComponentsContext } from '../context'
3 | import { IDesignerComponents } from '../types'
4 |
5 | export function useComponents() {
6 | const components = inject(DesignerComponentsContext)
7 | return components as Ref
8 | }
9 |
--------------------------------------------------------------------------------
/packages/vue/src/hooks/useDesigner.ts:
--------------------------------------------------------------------------------
1 | import { Engine } from '@pind/designable-core'
2 | import { inject, Ref } from 'vue'
3 | import { DesignerEngineContext } from '../context'
4 |
5 | export function useDesigner() {
6 | const designer = inject(DesignerEngineContext)
7 | return designer as Ref
8 | }
9 |
--------------------------------------------------------------------------------
/packages/vue/src/hooks/usePrefix.ts:
--------------------------------------------------------------------------------
1 | export function usePrefix(after = '') {
2 | return `dn-${after}`
3 | }
4 |
--------------------------------------------------------------------------------
/packages/vue/src/hooks/useTreeNode.ts:
--------------------------------------------------------------------------------
1 | import { TreeNode } from '@pind/designable-core'
2 | import { inject, Ref } from 'vue'
3 | import { TreeNodeContext } from '../context'
4 |
5 | export function useTreeNode() {
6 | const designer = inject(TreeNodeContext)
7 | return designer as Ref
8 | }
9 |
--------------------------------------------------------------------------------
/packages/vue/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './widgets'
2 | export * from './hooks'
3 | export * from './types'
4 | export * from './context'
5 |
--------------------------------------------------------------------------------
/packages/vue/src/types.ts:
--------------------------------------------------------------------------------
1 | import { IBehavior, IResource } from '@pind/designable-core'
2 | import { defineComponent } from 'vue'
3 |
4 | type Component = ReturnType>
5 |
6 | export type DnFC = Component
& {
7 | Resource?: IResource[]
8 | Behavior?: IBehavior[]
9 | }
10 |
11 | export type DnComponent
= Component
& {
12 | Resource?: IResource[]
13 | Behavior?: IBehavior[]
14 | }
15 |
16 | export interface IDesignerComponents {
17 | [key: string]: DnFC | DnComponent
18 | }
19 |
--------------------------------------------------------------------------------
/packages/vue/src/widgets/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ComponentTreeWidget'
2 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "paths": {
6 | "@pind/designable-*": ["../*"]
7 | },
8 | "declaration": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["./src/**/*.ts", "./src/**/*.tsx"],
4 | "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
5 | }
6 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | # all packages in subdirs of packages/ and components/
3 | - 'packages/**'
4 | - 'designable/**'
5 | - 'formily/**'
6 | - 'examples/**'
7 | - 'examples-vue/**'
8 |
--------------------------------------------------------------------------------
/scripts/build-style/buildAllStyles.ts:
--------------------------------------------------------------------------------
1 | import typescript from 'rollup-plugin-typescript2'
2 | import { build, getRollupBasePlugin } from './helper'
3 |
4 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
5 | export const buildAllStyles = async (outputFile: string) => {
6 | await build({
7 | input: 'src/style.ts',
8 | output: {
9 | file: outputFile,
10 | },
11 | plugins: [
12 | typescript({
13 | tsconfig: './tsconfig.json',
14 | tsconfigOverride: {
15 | compilerOptions: {
16 | module: 'ESNext',
17 | declaration: false,
18 | },
19 | },
20 | }),
21 | ...getRollupBasePlugin(),
22 | ],
23 | })
24 | }
25 |
--------------------------------------------------------------------------------
/scripts/build-style/helper.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
2 | import { OutputOptions, rollup, RollupOptions } from 'rollup'
3 | import postcss from 'rollup-plugin-postcss'
4 | import NpmImport from 'less-plugin-npm-import'
5 | import resolve from '@rollup/plugin-node-resolve'
6 |
7 | export const getRollupBasePlugin = () => [
8 | resolve(),
9 | postcss({
10 | extract: true,
11 | minimize: true,
12 | sourceMap: true,
13 | // extensions: ['.css', '.less', '.sass'],
14 | use: {
15 | less: {
16 | plugins: [new NpmImport({ prefix: '~' })],
17 | javascriptEnabled: true,
18 | },
19 | sass: {},
20 | stylus: {},
21 | },
22 | }),
23 | ]
24 |
25 | export const build = async (
26 | rollupConfig: Omit & { output: OutputOptions }
27 | ) => {
28 | const { output, ...input } = rollupConfig
29 | const bundle = await rollup(input)
30 |
31 | return bundle.write(output as OutputOptions)
32 | }
33 |
--------------------------------------------------------------------------------
/scripts/build-style/index.ts:
--------------------------------------------------------------------------------
1 | import { runCopy, CopyBaseOptions } from './copy'
2 | import { buildAllStyles } from './buildAllStyles'
3 |
4 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
5 | export function build({
6 | allStylesOutputFile,
7 | ...opts
8 | }: CopyBaseOptions & { allStylesOutputFile: string }) {
9 | return Promise.all([buildAllStyles(allStylesOutputFile), runCopy(opts)])
10 | }
11 |
12 | export { runCopy }
13 |
--------------------------------------------------------------------------------
/scripts/global.ts:
--------------------------------------------------------------------------------
1 | import prettyFormat from 'pretty-format'
2 |
3 | global['prettyFormat'] = prettyFormat
4 |
5 | global['sleep'] = (time) => {
6 | return new Promise((resolve) => setTimeout(resolve, time))
7 | }
8 |
9 | global['requestAnimationFrame'] = (fn) => setTimeout(fn)
10 |
11 | global.document.documentElement.style['grid-column-gap'] = true
12 |
--------------------------------------------------------------------------------
/scripts/jest.base.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | module.exports = {
3 | collectCoverage: true,
4 | verbose: true,
5 | testEnvironment: 'jsdom',
6 | preset: 'ts-jest',
7 | testMatch: ['**/__tests__/**/*.spec.[jt]s?(x)'],
8 | setupFilesAfterEnv: [
9 | require.resolve('jest-dom/extend-expect'),
10 | path.resolve(__dirname, './global.ts'),
11 | ],
12 | // moduleNameMapper: process.env.TEST_ENV === 'production' ? undefined : alias,
13 | globals: {
14 | 'ts-jest': {
15 | babelConfig: true,
16 | tsconfig: 'tsconfig.jest.json',
17 | diagnostics: false,
18 | },
19 | },
20 | coveragePathIgnorePatterns: [
21 | '/node_modules/',
22 | '/__tests__/',
23 | '/esm/',
24 | '/lib/',
25 | 'package.json',
26 | '/demo/',
27 | '/packages/builder/src/__tests__/',
28 | '/packages/builder/src/components/',
29 | '/packages/builder/src/configs/',
30 | 'package-lock.json',
31 | ],
32 | }
33 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "moduleResolution": "node",
5 | "allowJs": true,
6 | "module": "commonjs",
7 | "target": "es5"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/tsconfig.jest.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "jsx": "react",
5 | "paths": {
6 | "@pind/designable-*": ["./packages/*/src"]
7 | }
8 | },
9 | "exclude": ["./packages/*/esm", "./packages/*/lib"]
10 | }
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "moduleResolution": "node",
5 | "jsx": "react",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "allowJs": false,
9 | "noUnusedLocals": true,
10 | "preserveConstEnums": true,
11 | "sourceMap": false,
12 | "declaration": true,
13 | "skipLibCheck": true,
14 | "experimentalDecorators": true,
15 | "strictNullChecks": true,
16 | "downlevelIteration": true,
17 | "baseUrl": ".",
18 | "paths": {
19 | "@pind/designable-*": ["./packages/*/src"],
20 | "@pind/designable-formily-*": ["./formily/*/src"],
21 | "@examples-vue/*": ["./examples-vue/*/src"]
22 | },
23 | "lib": ["DOm", "DOM.Iterable"]
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
3 | 
15 |
16 | ## Features
17 |
18 | - 🚀 High performance, Smooth and beautiful drag and drop experience
19 | - 💡 Full scene coverage
20 | - 🎨 Support Low Code and No Code
21 | - 🏅 Strong scalability
22 |
23 | ## Website
24 |
25 | [playground](https://designable.netlify.app)
26 |
27 | ## Contributors
28 |
29 | This project exists thanks to all the people who contribute.
30 |
31 |