Merge pull request #79 from idrawjs/dev-v0.4

Dev v0.4

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.20",
+  "version": "0.4.0-alpha.21",
   "workspaces": [
     "packages/*"
   ],
@@ -19,56 +19,56 @@
     "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.20",
+    "idraw": "0.4.0-beta.21",
     "antd": "5.12.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.19",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@rollup/plugin-json": "^6.0.0",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-typescript": "^7.24.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^29.5.5",
-    "@types/koa-compose": "^3.2.6",
-    "@types/node": "^20.6.2",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@types/serve-handler": "^6.1.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "antd": "^5.3.0",
+    "@types/jest": "^29.5.12",
+    "@types/koa-compose": "^3.2.8",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.78",
+    "@types/react-dom": "^18.2.25",
+    "@types/serve-handler": "^6.1.4",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "antd": "^5.16.1",
     "babel-jest": "^29.7.0",
     "chalk": "^5.3.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.19.3",
-    "eslint": "^8.49.0",
+    "esbuild": "^0.20.2",
+    "eslint": "^9.0.0",
     "execa": "^8.0.1",
-    "fs-extra": "^11.1.1",
-    "glob": "^10.3.4",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.12",
     "http-server": "^14.1.1",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jimp": "^0.22.10",
+    "jimp": "^0.22.12",
     "koa-compose": "^4.1.0",
     "less": "^4.2.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.29.2",
-    "rollup-plugin-dts": "^6.0.2",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup": "^4.14.2",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-esbuild": "^6.1.1",
     "serve-handler": "^6.1.5",
-    "terser": "^5.19.4",
-    "ts-morph": "^19.0.0",
-    "ts-node": "^10.9.1",
+    "terser": "^5.30.3",
+    "ts-morph": "^22.0.0",
+    "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-node": "^0.34.4"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-node": "^1.5.0"
   }
 }

packages/studio-base/package.json

@@ -22,7 +22,7 @@
   "peerDependencies": {
     "antd": "^5.12.1",
     "classnames": "^2.3.2",
-    "idraw": "^0.4.0-beta.20",
+    "idraw": "^0.4.0-beta.21",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio-base/src/icons/file-add.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z"></path>
+        <path d="M544 472c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v108H372c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h108v108c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V644h108c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V472z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/index.ts

@@ -32,6 +32,7 @@ import IconEdit from './edit';
 import IconExperiment from './experiment';
 import IconFile from './file';
 import IconFileCopy from './file-copy';
+import IconFileAdd from './file-add';
 import IconFullCornerRadius from './full-corner-radius';
 import IconGitHub from './github';
 import IconGroup from './group';
@@ -107,6 +108,7 @@ export {
   IconEdit,
   IconExperiment,
   IconFile,
+  IconFileAdd,
   IconFileCopy,
   IconFullCornerRadius,
   IconGitHub,

packages/studio-base/src/index.ts

@@ -49,6 +49,7 @@ export {
   IconEdit,
   IconExperiment,
   IconFile,
+  IconFileAdd,
   IconFileCopy,
   IconFullCornerRadius,
   IconGitHub,

packages/studio-base/src/modules/layout-detail/content-attribute.tsx

@@ -2,15 +2,15 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import type { Element, DataLayout, RecursivePartial } from 'idraw';
 import { getElementSize } from 'idraw';
-import { Col, Row, Form } from 'antd';
+import { Col, Row, Form, Select } from 'antd';
 import type { FormInstance } from 'antd';
 import { useModuleLocale } from './hooks';
 import { MultipleColor } from '../element-detail/field-item/multiple-color';
 import { generateClassName } from '../../css';
 
 const modName = 'base-element-content-attribute';
 
-type LayoutDetailContent = Pick<DataLayout['detail'], 'background'>;
+type LayoutDetailContent = Pick<DataLayout['detail'], 'background' | 'overflow'>;
 
 export interface ContentAttributeProps {
   className?: string;
@@ -23,10 +23,11 @@ export interface ContentAttributeProps {
 type FieldType = LayoutDetailContent;
 
 const elementToFormData = (detail?: LayoutDetailContent | null) => {
-  const { background } = detail || {};
+  const { background, overflow = 'visible' } = detail || {};
 
   const formData: FieldType = {
-    background
+    background,
+    overflow
   };
   return formData;
 };
@@ -72,6 +73,19 @@ export const ContentAttribute = (props: ContentAttributeProps) => {
               </Form.Item>
             </Col>
           </Row>
+          <Row className={rowClassName}>
+            <Col className={colClassName} span="10">
+              {moduleLocale.overflow}
+            </Col>
+            <Col span="12" className={colClassName}>
+              <Form.Item className={formItemClassName} name="overflow">
+                <Select size="small" disabled={disabled}>
+                  <Select.Option value="visible">{moduleLocale.visible}</Select.Option>
+                  <Select.Option value="hidden">{moduleLocale.hidden}</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
         </Form>
       </>
     );

packages/studio/package.json

@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "antd": "^5.12.1",
-    "idraw": "^0.4.0-beta.20",
+    "idraw": "^0.4.0-beta.21",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio/src/index.ts

@@ -1,7 +1,8 @@
 export * from '@idraw/studio-base';
 export { Studio } from './studio';
-export { cloneEditingDataByPosition, updateEditingDataChildrenToData } from './util/data';
+export { cloneEditingDataByPosition, updateEditingDataChildrenToData, wrapPageData } from './util/data';
 export { pickJSONFile } from './util/file';
 export type { StudioProps, StudioImperativeHandle, StudioActionType, StudioState, SharedStore, SharedEvent, StudioThemeMode } from './types';
 export { ExportFile, exportFileDialogWidth } from './modules/export-image-file';
 export { useLocale } from './locale';
+export { Context } from './modules/context';

packages/studio/src/modules/context.ts

@@ -3,17 +3,20 @@ import { ElementPosition, getElementPositionFromList } from 'idraw';
 import { getElementTree, getPageTree } from '@idraw/studio-base';
 import type { Data } from 'idraw';
 import { StudioState, StudioAction, StudioContext, StudioProps } from '../types';
-import { cloneEditingDataByPosition, updateEditingDataLayoutToTargetGroup } from '../util/data';
+import { cloneEditingDataByPosition, updateEditingDataLayoutToTargetGroup, wrapPageData } from '../util/data';
 
 const defaultThemeMode = 'dark';
 const defaultLocale = 'en-US';
 const defaultEditMode = 'data';
 
 export function createStudioContextStateByProps(props?: StudioProps): StudioState {
-  const data = {
+  let data = {
     elements: [],
     ...(props?.data || {})
   };
+  if (props?.defaultEditMode === 'page') {
+    data = wrapPageData(data);
+  }
   let editingDataPosition: ElementPosition = [];
   let editingData: Data = data;
 

packages/studio/src/modules/nav-menu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useContext } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import { generateClassName, IconRect, IconCircle, IconText, IconStar, IconGroup, IconImage, IconHTML } from '@idraw/studio-base';
@@ -11,6 +11,7 @@ import { ExportFile, exportFileDialogWidth } from '../export-image-file';
 import { useLocale } from '../../locale';
 import { pickJSONFile } from '../../util/file';
 import type { SharedEvent, SharedStore } from '../../types';
+import { Context } from '../context';
 
 const useModuleLocale = () => {
   const [moduleLocale] = useLocale('NavMenu');
@@ -37,6 +38,10 @@ export const NavMenu = (props: NavMenuProps) => {
     sharedEvent.trigger('createElement', { type: key as ElementType, element: { name: key } });
   };
 
+  const { state } = useContext(Context);
+  const { editMode, pageTree } = state;
+  const disabledAddElement = !!(editMode === 'page' && pageTree.length === 0);
+
   const resetDevicePixelRatio = (radio: number) => {
     const idraw = sharedStore.get('idraw');
     idraw?.resize({
@@ -143,29 +148,34 @@ export const NavMenu = (props: NavMenuProps) => {
         key: 'rect',
         label: moduleLocale.rect,
         icon: <IconRect />,
+        disabled: disabledAddElement,
         onClick: clickToCreateElement
       },
       {
         key: 'circle',
         label: moduleLocale.circle,
         icon: <IconCircle />,
+        disabled: disabledAddElement,
         onClick: clickToCreateElement
       },
       {
         key: 'text',
         label: moduleLocale.text,
         icon: <IconText />,
+        disabled: disabledAddElement,
         onClick: clickToCreateElement
       },
       {
         key: 'image',
         label: moduleLocale.image,
         icon: <IconImage />,
+        disabled: disabledAddElement,
         onClick: clickToCreateElement
       },
       {
         key: 'svg',
         label: moduleLocale.svg,
+        disabled: disabledAddElement,
         icon: <IconStar />,
         onClick: clickToCreateElement
       },
@@ -180,6 +190,7 @@ export const NavMenu = (props: NavMenuProps) => {
         key: 'group',
         label: moduleLocale.group,
         icon: <IconGroup />,
+        disabled: disabledAddElement,
         onClick: clickToCreateElement
       }
     ]