feat(mobile): init basic mobile features (#2443)

* feat: init basic mobile features
dream-num · Jun 25, 2024 · 3583fe5 · 3583fe5
1 parent b523f62
commit 3583fe5
Show file tree

Hide file tree

Showing 82 changed files with 3,291 additions and 896 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -85,6 +85,27 @@ During the refactoring process, it is recommended to remove legacy folders such
 
 Avoid creating barrel imports (index.ts) unless it is the main root index.ts file of a plugin.
 
+#### Desktop & Mobile
+
+We added experimental support for mobile platforms since June 2024. After that, all UI plugins should split ui related code by their running platforms:
+
+```
+|- controllers/
+  |- render-controllers/
+    |- common/
+    |- desktop/
+    |- mobile/
+|- views/
+  |- components/
+    |- common/
+    |- desktop/
+    |- mobile/
+  |- parts/
+    |- common/
+    |- desktop/
+    |- mobile/
+```
+
 ### Connecting context
 
 To effectively contribute as a member of a software engineering team (and community as well!), it is crucial to establish strong contextual connections. Providing links to relevant resources can greatly assist others in understanding the context. Consider the following practices:

diff --git a/examples/esbuild.config.mjs b/examples/esbuild.config.mjs
@@ -92,7 +92,12 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
 
         // uni
         './src/uni/main.ts',
+
+        // mobile sheet
+        './src/mobile-s/main.ts',
+        './src/mobile-s/worker.ts',
     ],
+
     outdir: './local',
 
     define: {

diff --git a/examples/public/mobile-s/index.html b/examples/public/mobile-s/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <title>Univer Sheets</title>
+
+        <link rel="icon" type="image/x-icon" href="../favicon.svg" />
+        <link rel="stylesheet" href="./main.css" />
+        <style>
+            html,
+            body {
+                height: 100%;
+                margin: 0;
+            }
+        </style>
+
+        <script>
+            new EventSource('/esbuild').addEventListener('change', () => {
+                console.info('reload--');
+                location.reload();
+            });
+        </script>
+    </head>
+
+    <body style="overflow: hidden">
+        <div id="app" style="height: 100%"></div>
+
+        <script src="./main.js"></script>
+    </body>
+</html>
diff --git a/examples/src/main.tsx b/examples/src/main.tsx
@@ -55,6 +55,9 @@ function Examples() {
     }, {
         title: '🌌 Universe',
         href: './uni/',
+    }, {
+        title: '📱 Mobile',
+        href: './mobile-s/',
     }];
 
     return (

diff --git a/packages/ui/src/components/menu/index.ts → examples/src/mobile-s/lazy.ts b/packages/ui/src/components/menu/index.ts → examples/src/mobile-s/lazy.ts
@@ -14,4 +14,11 @@
  * limitations under the License.
  */
 
-export * from './Menu';
+import type { Plugin, PluginCtor } from '@univerjs/core';
+import { UniverSheetsFilterUIPlugin } from '@univerjs/sheets-filter-ui';
+
+export default function getLazyPlugins(): Array<[PluginCtor<Plugin>] | [PluginCtor<Plugin>, unknown]> {
+    return [
+        [UniverSheetsFilterUIPlugin],
+    ];
+}
diff --git a/examples/src/mobile-s/main.ts b/examples/src/mobile-s/main.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core';
+import { defaultTheme } from '@univerjs/design';
+import { UniverDocsPlugin } from '@univerjs/docs';
+import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
+import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
+import { UniverSheetsPlugin } from '@univerjs/sheets';
+import { UniverSheetsMobileUIPlugin } from '@univerjs/sheets-ui';
+import { UniverMobileUIPlugin } from '@univerjs/ui';
+import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
+import type { FUniver } from '@univerjs/facade';
+import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter';
+import { UniverSheetsFilterMobileUIPlugin } from '@univerjs/sheets-filter-ui';
+import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
+import type { IUniverRPCMainThreadConfig } from '@univerjs/rpc';
+import { UniverRPCMainThreadPlugin } from '@univerjs/rpc';
+import { UniverSheetsFormulaMobilePlugin } from '@univerjs/sheets-formula';
+import { UniverSheetsDataValidationMobilePlugin } from '@univerjs/sheets-data-validation';
+import { UniverSheetsConditionalFormattingMobileUIPlugin } from '@univerjs/sheets-conditional-formatting-ui';
+import { DEFAULT_WORKBOOK_DATA_DEMO } from '../data/sheets/demo/default-workbook-data-demo';
+import { enUS } from '../locales';
+
+// univer
+const univer = new Univer({
+    theme: defaultTheme,
+    locale: LocaleType.EN_US,
+    locales: {
+        [LocaleType.EN_US]: enUS,
+    },
+    logLevel: LogLevel.VERBOSE,
+});
+
+univer.registerPlugin(UniverFormulaEnginePlugin);
+
+// core plugins
+univer.registerPlugin(UniverDocsPlugin, {
+    hasScroll: false,
+});
+univer.registerPlugin(UniverRenderEnginePlugin);
+univer.registerPlugin(UniverMobileUIPlugin, { container: 'app', contextMenu: true });
+univer.registerPlugin(UniverRPCMainThreadPlugin, {
+    workerURL: './worker.js',
+} as IUniverRPCMainThreadConfig);
+
+univer.registerPlugin(UniverDocsUIPlugin);
+univer.registerPlugin(UniverSheetsPlugin);
+
+univer.registerPlugin(UniverSheetsMobileUIPlugin);
+univer.registerPlugin(UniverSheetsFilterPlugin);
+univer.registerPlugin(UniverSheetsFilterMobileUIPlugin);
+univer.registerPlugin(UniverSheetsNumfmtPlugin);
+univer.registerPlugin(UniverSheetsFormulaMobilePlugin);
+univer.registerPlugin(UniverSheetsConditionalFormattingMobileUIPlugin);
+univer.registerPlugin(UniverSheetsDataValidationMobilePlugin);
+
+const mockUser = {
+    userID: 'Owner_qxVnhPbQ',
+    name: 'Owner',
+    avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBtZU9TxtBEIbfWRzFSIdkikhBSqRQkJqkCKTCFkqVInSUSaT0wC8w/gXxD4gU2nRJkXQWhAZowDUUWKIwEgWWbEEB3mVmx3dn4DA2nB/ppNuPeWd29mMIPXDr+RxwtgRHeW6+guNPRxogqnL7Dwz9psJ27S4NShaeZTH3kwXy6I81dlRKcmRui88swdq9AcSFL7Buz1Vmlns64MiLsCjzwnIYHLH57tbfFbs7KRaXyEU8FVZofqccOfA5l7Q8LPIkGrwnb2RPNEXWFVMUF3L+kDCk0btDDAMzOm5YfAHDwp4tG74wnzAsiOYMnJ3GoDybA7IT98/jm5+JNnfiIzAS6LlqHQBN/i6b2t/cV1Hh6BfwYlHnHP4AXi5q/8kmMMpOs8+BixZw/Fd6xUEHEbnkgclvQP2fGp7uShRKnQ3G32rkjV1th8JhIGG7tR/JyjGteSOZELwGMmNqIIigRCLRh2OZIE6BjItdd7pCW6Uhm1zzkUtungSxwEUzNpQ+GQumtH1ej1MqgmNT6vwmhCq5yuwq56EYTbgeQUz3yvrpV1b4ok3nYJ+eYhgYmjRUqErx2EDq0Fr8FhG++iqVGqxlUJI/70Ar0UgJaWHj6hYVHJrfKssAHot1JfqwE9WVWzXZVd5z2Ws/4PnmtEjkXeKJDvxUecLbWOXH/DP6QQ4J72NS0adedp1aseBfXP8odlZFfPvBF7SN/8hky1TYuPOAXAEipMx15u5ToAAAAABJRU5ErkJggg==',
+    anonymous: false,
+    canBindAnonymous: false,
+};
+
+const injector = univer.__getInjector();
+const userManagerService = injector.get(UserManagerService);
+userManagerService.setCurrentUser(mockUser);
+
+declare global {
+    // eslint-disable-next-line ts/naming-convention
+    interface Window {
+        univer?: Univer;
+        univerAPI?: ReturnType<typeof FUniver.newAPI>;
+    }
+}
+
+univer.createUnit(UniverInstanceType.UNIVER_SHEET, DEFAULT_WORKBOOK_DATA_DEMO);
diff --git a/examples/src/mobile-s/worker.ts b/examples/src/mobile-s/worker.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LocaleType, LogLevel, Univer } from '@univerjs/core';
+import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
+import { UniverRPCWorkerThreadPlugin } from '@univerjs/rpc';
+import { UniverSheetsPlugin } from '@univerjs/sheets';
+
+// Univer web worker is also a univer application.
+const univer = new Univer({
+    locale: LocaleType.ZH_CN,
+    logLevel: LogLevel.VERBOSE,
+});
+
+univer.registerPlugin(UniverSheetsPlugin, { onlyRegisterFormulaRelatedMutations: true });
+univer.registerPlugin(UniverFormulaEnginePlugin);
+univer.registerPlugin(UniverRPCWorkerThreadPlugin);
+
+declare let self: WorkerGlobalScope & typeof globalThis & { univer: Univer };
+self.univer = univer;
diff --git a/examples/src/sheets-uniscript/draw-univer-logo.js b/examples/src/sheets-uniscript/draw-univer-logo.js
@@ -16,6 +16,7 @@
 
 /* eslint-disable */
 
+
 const newSheet = univerAPI.getActiveWorkbook().create("Draw Univer Logo", 80, 80);
 newSheet.setRowHeights(0, 80, 6);
 newSheet.setColumnWidths(0, 80, 6);
@@ -1548,4 +1549,5 @@ const key = setInterval(() => {
     }
 
     index += 1;
-}, 23);
+}, 23);
+
diff --git a/packages/core/src/common/array.ts b/packages/core/src/common/array.ts
@@ -83,3 +83,9 @@ export function groupBy<T>(arr: Readonly<T[]>, keyFn: (v: T) => string): Map<str
 
     return groups;
 }
+
+export function makeArray<T>(thing: T | T[]): T[] {
+    if (Array.isArray(thing)) return thing;
+
+    return [thing];
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -23,7 +23,7 @@ export { Univer } from './univer';
 export { shallowEqual, isRangesEqual, isUnitRangesEqual } from './common/equal';
 export { isNumeric, isSafeNumeric } from './common/number';
 export { isBooleanString } from './common/boolean';
-export { dedupe, remove, rotate, groupBy } from './common/array';
+export { dedupe, remove, rotate, groupBy, makeArray } from './common/array';
 export { mergeSets } from './common/set';
 export {
     DEFAULT_EMPTY_DOCUMENT_VALUE,

diff --git a/packages/core/src/shared/after-init-apply.ts b/packages/core/src/shared/after-init-apply.ts
@@ -23,7 +23,7 @@ import { fromCallback } from './rxjs';
 export const afterInitApply = (commandService: ICommandService) => {
     return new Promise<void>((res) => {
         merge(
-            fromCallback(commandService.onCommandExecuted).pipe(filter(([info]) => {
+            fromCallback(commandService.onCommandExecuted.bind(commandService)).pipe(filter(([info]) => {
                 return info.type === CommandType.MUTATION;
             })),
             timer(300)

diff --git a/packages/core/src/shared/rxjs.ts b/packages/core/src/shared/rxjs.ts
@@ -19,6 +19,15 @@ import { Observable } from 'rxjs';
 
 type CallbackFn<T extends readonly unknown[]> = (cb: (...args: T) => void) => IDisposable;
 
+/**
+ * Creates an observable from a callback function.
+ *
+ * @param callback The callback function that will be called when the observable is subscribed to. **Please not that the
+ * if the callback function has `this` context, it will be lost when the callback is called. So you probably
+ * should bind the callback to the correct context.**
+ *
+ * @returns The observable that will emit when the callback function gets called.
+ */
 export function fromCallback<T extends readonly unknown[]>(callback: CallbackFn<T>): Observable<T> {
     return new Observable((subscriber) => {
         const disposable: IDisposable | undefined = callback((...args: T) => subscriber.next(args));

diff --git a/packages/core/src/univer.ts b/packages/core/src/univer.ts
@@ -174,7 +174,7 @@ function createUniverInjector(parentInjector?: Injector, override?: DependencyOv
         [IUniverInstanceService, { useClass: UniverInstanceService }],
         [IPermissionService, { useClass: PermissionService }],
         [ILogService, { useClass: DesktopLogService, lazy: true }],
-        [ICommandService, { useClass: CommandService, lazy: true }],
+        [ICommandService, { useClass: CommandService }],
         [IUndoRedoService, { useClass: LocalUndoRedoService, lazy: true }],
         [IConfigService, { useClass: ConfigService }],
         [IContextService, { useClass: ContextService }],

diff --git a/packages/docs-ui/src/index.ts b/packages/docs-ui/src/index.ts
@@ -18,5 +18,6 @@ export * from './basics';
 export * from './docs-ui-plugin';
 export { DocRenderController } from './controllers/render-controllers/doc.render-controller';
 export * from './services';
+export { DocsRenderService } from './services/docs-render.service';
 export { DocCanvasPopManagerService } from './services/doc-popup-manager.service';
 export { docDrawingPositionToTransform, transformToDocDrawingPosition } from './basics/transform-position';