Skip to content

Commit

Permalink
feat: visual class
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaxus
chaxus committed Sep 15, 2024
1 parent ecf5f85 commit 88aecc6
Show file tree
Hide file tree
Showing 7 changed files with 448 additions and 113 deletions.
2 changes: 1 addition & 1 deletion packages/docs/cn/src/article/visual.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
5. **事件系统：**集成一个高效的事件处理系统，允许用户将事件监听器绑定到单个图形元素或整个组上。这样，无论是用户交互（如点击、拖动）还是系统事件（如加载完成、数据更新），都能得到及时响应和处理。
6. **应用层封装：**在应用层，我们需要封装绘制引擎提供的底层功能，使其更加贴近业务需求。这包括提供易于使用的 API 接口、优化性能、处理异常和错误等。同时，通过持续的应用层反馈，不断优化和调整绘制引擎，确保其能够更好地服务于业务的发展。

因此，在绘制引擎架构中，我们会首先实现一个节点类 Vertex，这个类代表了最原始的‘节点’的概念，所有可以被展示到 canvas 画布上的、各种类型的节点都会继承于这个类，这是一个抽象类，我们并不会直接实例化这个类。
因此，在绘制引擎架构中，我们会首先实现一个节点类 `Vertex`，这个类代表了最原始的‘节点’的概念，所有可以被展示到 `canvas` 画布上的、各种类型的节点都会继承于这个类，这是一个抽象类，我们并不会直接实例化这个类。

这个类上面挂载了‘节点’的各种通用属性，比如：父元素、透明度、旋转角度、缩放、平移、节点是否可见等。

Expand Down
145 changes: 43 additions & 102 deletions packages/docs/cn/src/note/libreoffice2wasm.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,115 +92,70 @@ args.makecmd = '/opt/homebrew/bin/gmake'
```sh
find . -name soffice
```

然后执行

```sh
/home/core/instdir/program/soffice --headless --convert-to pdf /home/office/pptx.pptx
```

将 LibreOffice 编译成 WebAssembly 并在 Web 上运行特定命令（如 soffice --headless --convert-to pdf /home/office/pptx.pptx）是一个复杂的任务。以下是一个大致的实现步骤和思路：

1. 编译 LibreOffice 为 WebAssembly
假设你已经成功编译了 LibreOffice 并生成了 .wasm 文件和相关的 JavaScript 文件。
假设你已经成功编译了 LibreOffice 并生成了 .wasm 文件和相关的 JavaScript 文件。

2. 创建 HTML 和 JavaScript 文件
创建一个 HTML 文件来加载 WebAssembly 模块，并编写 JavaScript 代码来调用 soffice 命令。
创建一个 HTML 文件来加载 WebAssembly 模块，并编写 JavaScript 代码来调用 soffice 命令。

HTML 文件 (index.html)

```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<head>
<title>LibreOffice WebAssembly</title>
<script src="libreoffice.js"></script>
</head>
<body>
</head>
<body>
<input type="file" id="fileInput" />
<button onclick="convertToPDF()">Convert to PDF</button>
<script src="main.js"></script>
</body>
</body>
</html>
JavaScript 文件 (main.js)
// Initialize the Module
var Module = {
onRuntimeInitialized: function() {
console.log("LibreOffice WebAssembly Module Loaded");
}
};
// Function to convert file to PDF
function convertToPDF() {
var fileInput = document.getElementById('fileInput');
if (fileInput.files.length == 0) {
alert("Please select a file.");
return;
}
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var arrayBuffer = event.target.result;
var byteArray = new Uint8Array(arrayBuffer);
// Write the file to the WASM virtual file system
var filename = '/home/office/' + file.name;
Module.FS_createDataFile('/', filename, byteArray, true, true);
// Call the soffice command
var command = 'soffice --headless --convert-to pdf ' + filename;
Module.ccall(
'system', // name of C function
'number', // return type
['string'], // argument types
[command] // arguments
);
// Read the output PDF file
var outputFilename = '/home/office/' + file.name.replace(/\.[^/.]+$/, "") + '.pdf';
var output = Module.FS_readFile(outputFilename);
// Create a blob and a link to download the PDF
var blob = new Blob([output], { type: 'application/pdf' });
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = file.name.replace(/\.[^/.]+$/, "") + '.pdf';
link.click();
};
reader.readAsArrayBuffer(file);
}
JavaScript 文件 (main.js) // Initialize the Module var Module = { onRuntimeInitialized: function() {
console.log("LibreOffice WebAssembly Module Loaded"); } }; // Function to convert file to PDF function convertToPDF() {
var fileInput = document.getElementById('fileInput'); if (fileInput.files.length == 0) { alert("Please select a file.");
return; } var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function(event) { var
arrayBuffer = event.target.result; var byteArray = new Uint8Array(arrayBuffer); // Write the file to the WASM virtual
file system var filename = '/home/office/' + file.name; Module.FS_createDataFile('/', filename, byteArray, true, true);
// Call the soffice command var command = 'soffice --headless --convert-to pdf ' + filename; Module.ccall( 'system', //
name of C function 'number', // return type ['string'], // argument types [command] // arguments ); // Read the output
PDF file var outputFilename = '/home/office/' + file.name.replace(/\.[^/.]+$/, "") + '.pdf'; var output =
Module.FS_readFile(outputFilename); // Create a blob and a link to download the PDF var blob = new Blob([output], {
type: 'application/pdf' }); var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob);
link.download = file.name.replace(/\.[^/.]+$/, "") + '.pdf'; link.click(); }; reader.readAsArrayBuffer(file); }
```
3. 部署和测试
将生成的 .wasm 文件、JavaScript 文件和 HTML 文件部署到你的 Web 服务器上，打开 index.html 文件，选择一个 PPTX 文件并点击“Convert to PDF”按钮。这个过程会：
将生成的 .wasm 文件、JavaScript 文件和 HTML 文件部署到你的 Web 服务器上，打开 index.html 文件，选择一个 PPTX 文件并点击“Convert to PDF”按钮。这个过程会：
从文件输入中读取 PPTX 文件。
将文件写入 WebAssembly 模块的虚拟文件系统。
调用 soffice --headless --convert-to pdf 命令进行转换。
从虚拟文件系统中读取生成的 PDF 文件。
创建一个下载链接，允许用户下载生成的 PDF 文件。
4. 注意事项
创建一个下载链接，允许用户下载生成的 PDF 文件。4. 注意事项
这个过程可能需要大量的内存和计算资源，可能需要优化和调整。
需要确保 Emscripten 的文件系统（MEMFS）能够正确处理大文件。
需要处理可能的错误和异常情况，并提供用户友好的错误提示。
通过这些步骤，你应该能够在 Web 上调用 soffice 命令并将 PPTX 文件转换为 PDF。如果遇到具体问题，请提供详细的错误信息，以便更好地帮助你解决问题。
减少 WebAssembly 文件的体积是一个常见的需求，尤其是在处理像 LibreOffice 这样的大型项目时。如果你只需要特定的功能（如将文件转换为 PDF），可以采取以下几种方法来减小生成的 WebAssembly 文件的体积：
1. 精简功能模块
确保只编译你需要的功能模块。你已经在 autogen.input 中指定了 --with-main-module=writer，这会限制编译的模块，但你可以进一步精简。
确保只编译你需要的功能模块。你已经在 autogen.input 中指定了 --with-main-module=writer，这会限制编译的模块，但你可以进一步精简。
2. 移除不必要的组件
在 autogen.input 中，进一步禁用不必要的组件和功能。例如：
在 autogen.input 中，进一步禁用不必要的组件和功能。例如：
--disable-dbus
--disable-odk
Expand Down Expand Up @@ -228,30 +183,28 @@ function convertToPDF() {
--disable-pch
--disable-skia
--disable-scripting
1. 使用 Emscripten 优化选项
Emscripten 提供了多种优化选项，可以帮助减小生成的 WebAssembly 文件的体积：
Emscripten 提供了多种优化选项，可以帮助减小生成的 WebAssembly 文件的体积：
使用 -O3 或 -Oz 进行最大化优化。
使用 --closure 1 进行 JavaScript 代码的闭包优化。
使用 --llvm-lto 3 进行链接时间优化。
在编译时，确保使用这些选项：
emconfigure ./configure ...
emmake make CXXFLAGS="-O3 --llvm-lto 3" LDFLAGS="-O3 --llvm-lto 3"
4. 移除调试信息
emmake make CXXFLAGS="-O3 --llvm-lto 3" LDFLAGS="-O3 --llvm-lto 3" 4. 移除调试信息
确保移除所有调试信息，这可以显著减小文件体积：
emconfigure ./configure ...
emmake make CXXFLAGS="-O3 --llvm-lto 3 -g0" LDFLAGS="-O3 --llvm-lto 3 -g0"
5. 使用 WebAssembly Minifier
emmake make CXXFLAGS="-O3 --llvm-lto 3 -g0" LDFLAGS="-O3 --llvm-lto 3 -g0" 5. 使用 WebAssembly Minifier
使用 WebAssembly Minifier 工具（如 wasm-opt）进一步优化和减小生成的 WebAssembly 文件：
wasm-opt -Oz -o optimized.wasm original.wasm
6. 自定义构建脚本
wasm-opt -Oz -o optimized.wasm original.wasm 6. 自定义构建脚本
如果上述方法仍然不能满足需求，可以考虑编写自定义构建脚本，只包含必要的源文件和库，进一步精简生成的 WebAssembly 文件。
7. 动态加载模块
如果可能，将一些功能模块拆分为单独的 WebAssembly 文件，并在需要时动态加载，以减少初始加载的体积。
如果可能，将一些功能模块拆分为单独的 WebAssembly 文件，并在需要时动态加载，以减少初始加载的体积。
示例 autogen.input
以下是一个示例 autogen.input 文件，结合了上述建议：
Expand Down Expand Up @@ -294,48 +247,46 @@ wasm-opt -Oz -o optimized.wasm original.wasm
通过这些步骤，你应该能够显著减小生成的 WebAssembly 文件的体积，同时保留将文件转换为 PDF 的功能。如果遇到具体问题，请提供详细的错误信息，以便更好地帮助你解决问题。
wasm-opt 是 Binaryen 项目的一部分，它是一个用于优化和处理 WebAssembly 二进制文件的工具。你可以在 Ubuntu 上通过以下步骤安装和使用 wasm-opt：
1. 安装依赖项
首先，确保你的系统上已经安装了必要的依赖项：
首先，确保你的系统上已经安装了必要的依赖项：
sudo apt update
sudo apt install cmake build-essential git
2. 下载和编译 Binaryen
sudo apt install cmake build-essential git 2. 下载和编译 Binaryen
接下来，从源码编译 Binaryen：
# 克隆 Binaryen 仓库
git clone https://github.com/WebAssembly/binaryen.git
cd binaryen
# 创建并进入构建目录
mkdir build
cd build
# 使用 CMake 配置构建
cmake ..
# 编译 Binaryen
make
# 安装 Binaryen
sudo make install
3. 使用 wasm-opt
sudo make install 3. 使用 wasm-opt
安装完成后，你可以使用 wasm-opt 命令来优化 WebAssembly 文件。例如：
# 假设你有一个名为 original.wasm 的 WebAssembly 文件
wasm-opt -Oz -o optimized.wasm original.wasm
在这个命令中：
-Oz 表示进行最大化的尺寸优化。
-o optimized.wasm 指定输出文件名为 optimized.wasm。
original.wasm 是输入的 WebAssembly 文件。
4. 验证安装
original.wasm 是输入的 WebAssembly 文件。4. 验证安装
你可以通过运行以下命令来验证 wasm-opt 是否正确安装：
wasm-opt --version
Expand All @@ -349,11 +300,6 @@ wasm-opt -Oz -o example_optimized.wasm example.wasm
通过这些步骤，你应该能够在 Ubuntu 上成功安装和使用 wasm-opt 来优化你的 WebAssembly 文件。如果在安装或使用过程中遇到任何问题，请提供详细的错误信息，以便进一步帮助你解决问题。
--disable-debug
--enable-sal-log
--disable-crashdump
Expand Down Expand Up @@ -388,7 +334,6 @@ wasm-opt -Oz -o example_optimized.wasm example.wasm
--disable-skia
--disable-scripting
步骤 1：下载最新的 OpenSSL 源代码
首先，确保你在一个干净的目录中，然后下载最新版本的 OpenSSL 源代码。你可以访问 OpenSSL 官方网站 查看最新版本。假设最新版本是 openssl-3.0.9：
Expand Down Expand Up @@ -427,15 +372,11 @@ emconfigure ./configure --disable-debug --enable-sal-log --disable-crashdump --h
cat config.log | grep openssl
通过确保 OpenSSL 已正确安装并设置正确的环境变量，我们应该能够解决配置过程中遇到的问题。如果问题仍然存在，请提供 config.log 文件中与 OpenSSL 相关的更多详细信息，以便进一步诊断和解决问题。
emconfigure ./configure --disable-debug --enable-sal-log --disable-crashdump --host=wasm32-local-emscripten --disable-gui --with-main-module=writer --with-package-format=emscripten --disable-dbus --disable-odk --disable-postgresql-sdbc --disable-firebird-sdbc --disable-coinmp --disable-cve-tests --disable-gtk3 --disable-gstreamer-1-0 --disable-kf5 --disable-scripting-beanshell --disable-scripting-javascript --disable-extensions --disable-epm --disable-online-update --disable-python --disable-pdfimport --disable-lpsolve --disable-sdremote --disable-scripting --disable-avmedia --disable-coinmp --disable-report-builder --disable-odk --disable-pch --disable-skia --disable-scripting --srcdir=/home/core --enable-option-checking=fatal
emmake make CXXFLAGS="-I/usr/local/ssl/include -O3 -g0 -msimd128" LDFLAGS="-L/usr/local/ssl/lib -lssl -lcrypto -O3 -g0"
emconfigure ./configure --disable-cups --disable-dbus --without-system-fontconfig --with-system-zlib --disable-dynamic-loading --disable-gui CXXFLAGS=-std=c++20 --host=wasm32-unknown-emscripten
emconfigure ./configure --disable-cups --disable-dbus --without-system-fontconfig --with-system-zlib --disable-dynamic-loading --disable-gui CXXFLAGS=-std=c++20 --host=wasm32-unknown-emscripten
root@8cb3480a4441:/home/core/instsetoo_native# vim CustomTarget_emscripten-install.mk
Expand Down
2 changes: 0 additions & 2 deletions packages/ranuts/src/utils/visual/application.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@ export class Application {
constructor(options: IApplicationOptions) {
const { view } = options;
this.view = view;

this.renderer = getRenderer(options);

this.start();
}

Expand Down
1 change: 1 addition & 0 deletions packages/ranuts/src/utils/visual/math/enums.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export const DEG_TO_RAD = Math.PI / 180;
export const RAD_TO_DEG = 180 / Math.PI;
export const PI_2 = Math.PI * 2;
Loading

0 comments on commit 88aecc6

Please sign in to comment.