HiNC-Deploy/Hi.Sample.Webapi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
iambossTC 2025-07-18 20:25:57 +08:00
commit 68c8096686
15 changed files with 2582 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
.gitignore vendored Normal file
View File

@ -0,0 +1,270 @@
!*.lib
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
# User-specific files
*.suo
*.user
*.userosscache
*.sln.docstates
# User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs
# Build results
[Dd]ebug/
[Dd]ebugPublic/
[Rr]elease/
[Rr]eleases/
x64/
x86/
bld/
[Bb]in/
[Oo]bj/
[Ll]og/
# Visual Studio 2015 cache/options directory
.vs/
# Uncomment if you have tasks that create the project's static files in wwwroot
#wwwroot/
# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*
# NUNIT
*.VisualState.xml
TestResult.xml
# Build Results of an ATL Project
[Dd]ebugPS/
[Rr]eleasePS/
dlldata.c
# DNX
project.lock.json
project.fragment.lock.json
artifacts/
*_i.c
*_p.c
*_i.h
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*.log
*.vspscc
*.vssscc
.builds
*.pidb
*.svclog
*.scc
# Chutzpah Test files
_Chutzpah*
# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opendb
*.opensdf
*.sdf
*.cachefile
*.VC.db
*.VC.VC.opendb
# Visual Studio profiler
*.psess
*.vsp
*.vspx
*.sap
# TFS 2012 Local Workspace
$tf/
# Guidance Automation Toolkit
*.gpState
# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper
*.DotSettings.user
# JustCode is a .NET coding add-in
.JustCode
# TeamCity is a build add-in
_TeamCity*
# DotCover is a Code Coverage Tool
*.dotCover
# NCrunch
_NCrunch_*
.*crunch*.local.xml
nCrunchTemp_*
# MightyMoose
*.mm.*
AutoTest.Net/
# Web workbench (sass)
.sass-cache/
# Installshield output folder
[Ee]xpress/
# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish/
# Publish Web Output
*.[Pp]ublish.xml
*.azurePubxml
# Comment the next line if you want to checkin your web deploy settings
# but database connection strings (with potential passwords) will be unencrypted
#*.pubxml
*.publishproj
# Microsoft Azure Web App publish settings. Comment the next line if you want to
# checkin your Azure Web App publish settings, but sensitive information contained
# in these scripts will be unencrypted
PublishScripts/
# NuGet Packages
*.nupkg
# The packages folder can be ignored because of Package Restore
**/packages/*
# except build/, which is used as an MSBuild target.
!**/packages/build/
# Uncomment if necessary however generally it will be regenerated when needed
#!**/packages/repositories.config
# NuGet v3's project.json files produces more ignoreable files
*.nuget.props
*.nuget.targets
# Microsoft Azure Build Output
csx/
*.build.csdef
# Microsoft Azure Emulator
ecf/
rcf/
# Windows Store app package directories and files
AppPackages/
BundleArtifacts/
Package.StoreAssociation.xml
_pkginfo.txt
# Visual Studio cache files
# files ending in .cache can be ignored
*.[Cc]ache
# but keep track of directories ending in .cache
!*.[Cc]ache/
# Others
ClientBin/
~$*
*~
*.dbmdl
*.dbproj.schemaview
*.jfm
*.pfx
*.publishsettings
node_modules/
orleans.codegen.cs
# Since there are multiple workflows, uncomment next line to ignore bower_components
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
#bower_components/
# RIA/Silverlight projects
Generated_Code/
# Backup & report files from converting an old project file
# to a newer Visual Studio version. Backup files are not needed,
# because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm
# SQL Server files
*.mdf
*.ldf
# Business Intelligence projects
*.rdl.data
*.bim.layout
*.bim_*.settings
# Microsoft Fakes
FakesAssemblies/
# GhostDoc plugin setting file
*.GhostDoc.xml
# Node.js Tools for Visual Studio
.ntvs_analysis.dat
# Visual Studio 6 build log
*.plg
# Visual Studio 6 workspace options file
*.opt
# Visual Studio LightSwitch build output
**/*.HTMLClient/GeneratedArtifacts
**/*.DesktopClient/GeneratedArtifacts
**/*.DesktopClient/ModelManifest.xml
**/*.Server/GeneratedArtifacts
**/*.Server/ModelManifest.xml
_Pvt_Extensions
# Paket dependency manager
.paket/paket.exe
paket-files/
# FAKE - F# Make
.fake/
# JetBrains Rider
.idea/
*.sln.iml
# CodeRush
.cr/
# Python Tools for Visual Studio (PTVS)
__pycache__/
*.pyc
!hasp*.exe
!hasp*.dll
!HiLock.dll
!Aladdin*.dll
Cache/*
*/Cache/*

173
Controllers/RenderingController.cs Normal file
View File

@ -0,0 +1,173 @@
using Microsoft.AspNetCore.Mvc;
using Hi.Webapi.Services;
using Hi.Disp;
using Hi.Geom;
namespace Sample.Controllers
{
[ApiController]
[Route("api/[controller]")]
public class RenderingController : ControllerBase
{
private readonly RenderingService _renderingService;
private readonly ILogger<RenderingController> _logger;
public RenderingController(RenderingService renderingService, ILogger<RenderingController> logger)
{
_renderingService = renderingService;
_logger = logger;
}
/// <summary>
/// 獲取當前活動的渲染引擎數量
/// </summary>
[HttpGet("engines/count")]
public IActionResult GetActiveEngineCount()
{
var count = _renderingService.GetActiveEngineCount();
return Ok(new { count });
}
/// <summary>
/// 創建測試用的 3D 對象
/// </summary>
[HttpPost("test-objects/{sessionId}")]
public IActionResult CreateTestObjects(string sessionId)
{
_logger.LogInformation($"CreateTestObjects called - SessionId: {sessionId}");
try
{
var engine = _renderingService.GetOrCreateEngine(sessionId);
_logger.LogInformation($"Engine retrieved - SessionId: {sessionId}");
// 創建一個簡單的測試顯示對象
var testDisplayee = new TestDisplayee();
engine.Displayee = testDisplayee;
_logger.LogInformation($"TestDisplayee created and set - SessionId: {sessionId}");
// 觸發一次渲染
engine.IsVisible = true;
_logger.LogInformation($"Engine visibility set to true to trigger render - SessionId: {sessionId}");
return Ok(new {
message = "Test objects created successfully",
sessionId = sessionId,
timestamp = DateTime.Now
});
}
catch (Exception ex)
{
_logger.LogError(ex, $"Error creating test objects - SessionId: {sessionId}");
return StatusCode(500, new {
error = ex.Message,
sessionId = sessionId,
timestamp = DateTime.Now
});
}
}
}
/// <summary>
/// 測試用的顯示對象
/// </summary>
public class TestDisplayee : IDisplayee
{
private readonly Drawing axesDrawing;
private readonly Drawing cubeDrawing;
private readonly Drawing groundDrawing;
public TestDisplayee()
{
// 創建彩色坐標軸 (使用 CV stamp - Color + Vertex)
double[] axesData = new double[] {
// Red X-axis (color + vertex)
1, 0, 0, 0, 0, 0, // Red color, origin
1, 0, 0, 200, 0, 0, // Red color, x-axis end
// Green Y-axis (color + vertex)
0, 1, 0, 0, 0, 0, // Green color, origin
0, 1, 0, 0, 200, 0, // Green color, y-axis end
// Blue Z-axis (color + vertex)
0, 0, 1, 0, 0, 0, // Blue color, origin
0, 0, 1, 0, 0, 200 // Blue color, z-axis end
};
axesDrawing = new Drawing(axesData, Stamp.CV, Hi.Disp.GL.GL_LINES);
// 創建立方體線框 (使用 CV stamp - 帶顏色)
var size = 100.0;
var cubeData = new System.Collections.Generic.List<double>();
// 黃色立方體
var color = new[] { 1.0, 1.0, 0.0 }; // 黃色
// 底面四條線
AddColoredLine(cubeData, color, -size/2, -size/2, -size/2, size/2, -size/2, -size/2);
AddColoredLine(cubeData, color, size/2, -size/2, -size/2, size/2, size/2, -size/2);
AddColoredLine(cubeData, color, size/2, size/2, -size/2, -size/2, size/2, -size/2);
AddColoredLine(cubeData, color, -size/2, size/2, -size/2, -size/2, -size/2, -size/2);
// 頂面四條線
AddColoredLine(cubeData, color, -size/2, -size/2, size/2, size/2, -size/2, size/2);
AddColoredLine(cubeData, color, size/2, -size/2, size/2, size/2, size/2, size/2);
AddColoredLine(cubeData, color, size/2, size/2, size/2, -size/2, size/2, size/2);
AddColoredLine(cubeData, color, -size/2, size/2, size/2, -size/2, -size/2, size/2);
// 垂直線
AddColoredLine(cubeData, color, -size/2, -size/2, -size/2, -size/2, -size/2, size/2);
AddColoredLine(cubeData, color, size/2, -size/2, -size/2, size/2, -size/2, size/2);
AddColoredLine(cubeData, color, size/2, size/2, -size/2, size/2, size/2, size/2);
AddColoredLine(cubeData, color, -size/2, size/2, -size/2, -size/2, size/2, size/2);
cubeDrawing = new Drawing(cubeData.ToArray(), Stamp.CV, Hi.Disp.GL.GL_LINES);
// 創建地面網格
var gridData = new System.Collections.Generic.List<double>();
var gridColor = new[] { 0.3, 0.3, 0.3 }; // 灰色
var gridSize = 500.0;
var gridStep = 50.0;
for (double i = -gridSize; i <= gridSize; i += gridStep)
{
// X 方向的線
AddColoredLine(gridData, gridColor, i, -gridSize, 0, i, gridSize, 0);
// Y 方向的線
AddColoredLine(gridData, gridColor, -gridSize, i, 0, gridSize, i, 0);
}
groundDrawing = new Drawing(gridData.ToArray(), Stamp.CV, Hi.Disp.GL.GL_LINES);
}
private void AddColoredLine(System.Collections.Generic.List<double> data, double[] color,
double x1, double y1, double z1, double x2, double y2, double z2)
{
// 第一個點
data.Add(color[0]); data.Add(color[1]); data.Add(color[2]);
data.Add(x1); data.Add(y1); data.Add(z1);
// 第二個點
data.Add(color[0]); data.Add(color[1]); data.Add(color[2]);
data.Add(x2); data.Add(y2); data.Add(z2);
}
public void Display(Bind bind)
{
// 顯示地面網格
groundDrawing.Display(bind);
// 顯示坐標軸
axesDrawing.Display(bind);
// 顯示立方體
cubeDrawing.Display(bind);
}
public void ExpandToBox3d(Box3d box)
{
// 擴展邊界框以包含我們的測試對象
box.Expand(new Vec3d(-500, -500, -100));
box.Expand(new Vec3d(500, 500, 200));
}
}
}

BIN
Font/WCL06.ttf Normal file
View File

Binary file not shown.

38
Hi.Sample.Webapi.csproj Normal file
View File

@ -0,0 +1,38 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net9.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
<Platforms>x64</Platforms>
<AssemblyName>Hi.Sample.Webapi</AssemblyName>
<RootNamespace>Sample</RootNamespace>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
<Configurations>Debug;Release</Configurations>
<VersionBuild>0</VersionBuild>
<VersionPrefix>3.1.$(VersionBuild)</VersionPrefix>
<Product>$(AssemblyName)</Product>
<OutputPath>bin\$(Platform).$(Configuration)\</OutputPath>
<DefineConstants>DEBUG;TRACE</DefineConstants>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Swashbuckle.AspNetCore" Version="7.2.0" />
</ItemGroup>
<ItemGroup Condition="'$(Configuration)'=='Debug'">
<ProjectReference Include="..\HiLicense\HiLicense.csproj" />
<ProjectReference Include="..\HiGeom\HiGeom.csproj" />
<ProjectReference Include="..\HiDisp\HiDisp.csproj" />
<ProjectReference Include="..\HiCbtr\HiCbtr.csproj" />
<ProjectReference Include="..\HiMech\HiMech.csproj" />
<ProjectReference Include="..\HiUniNc\HiUniNc.csproj" />
<ProjectReference Include="..\HiNc\HiNc.csproj" />
<ProjectReference Include="..\Hi.Webapi\Hi.Webapi.csproj" />
</ItemGroup>
<ItemGroup Condition="'$(Configuration)'=='Release'">
<PackageReference Include="HiNc" Version="3.1.*" />
<PackageReference Include="Hi.Webapi" Version="3.1.*" />
</ItemGroup>
</Project>

76
Program.cs Normal file
View File

@ -0,0 +1,76 @@
using Hi.HiNcKits;
using Hi.Webapi.Hubs;
using Hi.Webapi.Services;
SingleUserApp.AppBegin();
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring OpenAPI at https://aka.ms/aspnet/openapi
builder.Services.AddOpenApi();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// 添加 SignalR
builder.Services.AddSignalR(options =>
{
options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
});
// 添加 CORS
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAll", policy =>
{
policy.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
});
// 註冊 RenderingService
builder.Services.AddSingleton<RenderingService>();
// 配置允許 unsafe 代碼
builder.Services.Configure<Microsoft.AspNetCore.Server.Kestrel.Core.KestrelServerOptions>(options =>
{
options.AllowSynchronousIO = true;
});
var app = builder.Build();
// Configure application lifetime events
var lifetime = app.Services.GetRequiredService<IHostApplicationLifetime>();
lifetime.ApplicationStopping.Register(() =>
{
SingleUserApp.AppEnd();
});
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.MapOpenApi();
app.UseSwagger();
app.UseSwaggerUI();
}
// 在開發環境中不使用 HTTPS 重定向
// app.UseHttpsRedirection();
// 添加靜態文件支援
app.UseStaticFiles();
app.UseCors("AllowAll");
app.UseAuthorization();
app.MapControllers();
// 映射 SignalR Hub
app.MapHub<RenderingHub>("/renderingHub");
// 添加一個簡單的首頁
app.MapGet("/", () => Results.Redirect("/demo-vue.html"));
app.Run();

14
Properties/launchSettings.json Normal file
View File

@ -0,0 +1,14 @@
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "http://localhost:5000",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}

107
README.md Normal file
View File

@ -0,0 +1,107 @@
# Hi.Sample.Webapi
這是一個展示如何使用 Hi.Webapi 功能的範例專案。
## 專案描述
本專案示範了如何：
- 使用 Hi.Webapi 的 RenderingService 和 RenderingHub
- 建立自訂的 Controller 來創建測試 3D 物件
- 整合 SignalR 進行即時渲染通訊
- 實作 IDisplayee 介面來定義自訂的 3D 物件
## 功能特點
- **3D 物件渲染**：使用 Hi.Disp 引擎渲染 3D 圖形
- **即時通訊**：透過 SignalR 實現客戶端與服務器的即時互動
- **測試物件**：包含坐標軸、立方體和地面網格的示範物件
- **WebGL 渲染**：使用 HTML5 Canvas 進行硬體加速渲染
- **多種前端範例**：提供原生 JavaScript 和 Vue.js 兩種實作方式
## 執行專案
### 前置需求
- .NET 9.0 SDK
- Visual Studio 2022 或 VS Code
### 啟動步驟
1. 在專案目錄下執行：
```bash
dotnet build
dotnet run
```
2. 開啟瀏覽器訪問：
- 原生 JavaScript 版本：http://localhost:5180/demo-native.html
- Vue.js 內嵌版本：http://localhost:5180/demo-vue-inline.html
## 專案結構
```
Hi.Sample.Webapi/
├── Controllers/
│ └── RenderingController.cs # 範例控制器，展示如何創建測試物件
├── wwwroot/
│ ├── demo-native.html # 原生 JavaScript 範例頁面
│ └── demo-vue-inline.html # Vue.js 內嵌式範例頁面
├── Program.cs # 應用程式進入點
├── appsettings.json # 應用程式設定
├── Properties/
│ └── launchSettings.json # 啟動設定
└── Hi.Sample.Webapi.csproj # 專案檔案
```
## 使用說明
### 鍵盤控制
- **F1-F4**：切換不同視圖
- **方向鍵**：旋轉視圖
- **PageUp/PageDown**：縮放
- **Home**：重置視圖
### 滑鼠控制
- **左鍵拖曳**：旋轉視圖
- **右鍵拖曳**：平移視圖
- **滾輪**：縮放
## API 端點
- `GET /api/rendering/engines/count` - 獲取活動的渲染引擎數量
- `POST /api/rendering/test-objects/{sessionId}` - 為指定會話創建測試物件
## 重要類別說明
### TestDisplayee
實作 IDisplayee 介面的範例類別，展示如何創建自訂的 3D 物件：
- 使用 Drawing 類別創建圖形元素
- 實作 Display 方法來渲染物件
- 實作 ExpandToBox3d 方法來定義物件邊界
## 前端實作比較
### demo-native.html
- 使用原生 JavaScript
- 詳細的實作範例
- 適合學習底層 API 使用
### demo-vue-inline.html
- 使用 Vue.js 3
- 所有程式碼內嵌在單一 HTML 檔案中
- 展示如何用 Vue.js 整合渲染功能
- 無需外部依賴檔案，方便複製使用
## 依賴項目
- Hi.Webapi - 提供 Web API 和 SignalR 支援
- HiNc - 核心 NC 功能
- HiDisp - 顯示引擎
- HiGeom - 幾何運算
- 其他 HiAPI 相關專案
## 注意事項
這是一個範例專案，主要用於展示 Hi.Webapi 的使用方式。實際專案中可能需要根據具體需求進行調整和擴展。
### 關於 Vue.js 元件
如果您需要使用模組化的 Vue.js 元件（如 Hi.Webapi 專案中的 rendering-canvas.js），請參考 Hi.Webapi 專案的實作方式。本範例使用內嵌方式是為了保持簡單和獨立性。

8
appsettings.Development.json Normal file
View File

@ -0,0 +1,8 @@
{
"Logging": {
"LogLevel": {
"Default": "Debug",
"Microsoft.AspNetCore": "Debug"
}
}
}

9
appsettings.json Normal file
View File

@ -0,0 +1,9 @@
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}

734
wwwroot/demo-native.html Normal file
View File

@ -0,0 +1,734 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UJoin HiNC Demo</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 95%;
height: 95vh;
max-width: 1400px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
.status {
background-color: #e8f5e9;
padding: 10px;
margin: 10px;
border-radius: 4px;
font-size: 14px;
}
.status.connected {
background-color: #c8e6c9;
color: #2e7d32;
}
.status.error {
background-color: #ffcdd2;
color: #c62828;
}
.controls {
padding: 20px;
background-color: #f5f5f5;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.controls button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #2196F3;
color: white;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #1976D2;
}
.controls button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.view-controls {
padding: 10px 20px;
background-color: #e3f2fd;
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.view-controls button {
padding: 8px 16px;
border: 1px solid #2196F3;
border-radius: 4px;
background-color: white;
color: #2196F3;
cursor: pointer;
font-size: 13px;
transition: all 0.3s;
}
.view-controls button:hover {
background-color: #2196F3;
color: white;
}
.canvas-container {
position: relative;
width: 100%;
flex: 1;
min-height: 400px;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
overflow: hidden; /* 防止滾動條 */
}
#renderCanvas {
width: calc(100% - 20px); /* 減去 padding */
height: calc(100% - 20px); /* 減去 padding */
display: block;
cursor: grab;
border: 2px solid #666;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
box-sizing: border-box;
background-color: white; /* 確保有背景色 */
}
#renderCanvas:focus {
border-color: #4CAF50;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}
#renderCanvas:active {
cursor: grabbing;
}
.log-container {
padding: 20px;
background-color: #f5f5f5;
height: 200px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
flex-shrink: 0;
}
.log-entry {
margin: 2px 0;
padding: 2px 5px;
}
.log-entry.info {
color: #1976D2;
}
.log-entry.error {
color: #c62828;
background-color: #ffebee;
}
.log-entry.warning {
color: #f57c00;
}
.log-entry.debug {
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>HiNC WebAPI 渲染畫布示例</h1>
<div style="padding: 10px; background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; border-radius: 4px; margin: 10px;">
<strong>提示：</strong>點擊畫布以啟用鍵盤控制。畫布獲得焦點時邊框會變成綠色。
<br>鍵盤控制：F1-F4切換視圖，方向鍵旋轉視圖，PageUp/PageDown縮放，Home重置視圖
</div>
<div class="view-controls">
<button onclick="setView('front')">前視圖</button>
<button onclick="setView('back')">後視圖</button>
<button onclick="setView('left')">左視圖</button>
<button onclick="setView('right')">右視圖</button>
<button onclick="setView('top')">頂視圖</button>
<button onclick="setView('bottom')">底視圖</button>
<button onclick="setView('isometric')">等角視圖</button>
<button onclick="setView('home')">主視圖</button>
</div>
<div class="canvas-container">
<canvas id="renderCanvas" tabindex="0"></canvas>
</div>
<div class="log-container" id="logContainer"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
<script>
let connection = null;
let sessionId = null;
let canvas = null;
let canvasInitialized = false;
let compressionSupported = false;
let isFirefox = false;
// 頁面加載時自動連接
window.addEventListener('load', async () => {
canvas = document.getElementById('renderCanvas');
compressionSupported = typeof DecompressionStream !== 'undefined';
isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
console.log('頁面加載完成，開始連接服務器...');
await connect();
});
// 頁面卸載時斷開連接
window.addEventListener('beforeunload', () => {
if (connection && connection.state === signalR.HubConnectionState.Connected) {
connection.stop();
}
});
// 處理頁面可見性變化
document.addEventListener('visibilitychange', async () => {
console.log(`頁面可見性變化: ${document.visibilityState}`);
if (connection && connection.state === signalR.HubConnectionState.Connected) {
try {
await connection.invoke("HandleVisibilityChange", document.visibilityState);
console.log(`已通知服務器可見性狀態: ${document.visibilityState}`);
} catch (err) {
console.error("處理可見性變化失敗:", err);
}
}
});
async function connect() {
try {
connection = new signalR.HubConnectionBuilder()
.withUrl("/renderingHub")
.configureLogging(signalR.LogLevel.Information)
.build();
// 設置消息處理器
connection.on("ImageUpdate", handleImageUpdate);
connection.on("CanvasInitialized", (id) => {
sessionId = id;
canvasInitialized = true;
console.log("畫布初始化完成，會話ID:", sessionId);
// 自動載入測試物件
loadTestObjects();
});
// 連接到服務器
await connection.start();
console.log("已連接到服務器");
// 初始化畫布
const rect = canvas.getBoundingClientRect();
const width = Math.floor(rect.width);
const height = Math.floor(rect.height);
console.log(`初始化畫布 - 寬度: ${width}, 高度: ${height}`);
// 設置畫布的實際像素大小
canvas.width = width;
canvas.height = height;
if (width <= 0 || height <= 0) {
console.error("畫布大小無效，延遲初始化...");
setTimeout(async () => {
const newRect = canvas.getBoundingClientRect();
const newWidth = Math.floor(newRect.width);
const newHeight = Math.floor(newRect.height);
console.log(`重新嘗試初始化畫布 - 寬度: ${newWidth}, 高度: ${newHeight}`);
canvas.width = newWidth;
canvas.height = newHeight;
await connection.invoke("InitializeCanvas", newWidth, newHeight);
}, 100);
return;
}
await connection.invoke("InitializeCanvas", width, height);
// 設置事件處理
setupMouseEvents();
setupKeyboardEvents();
setupTouchEvents();
// 監聽窗口大小變化
window.addEventListener('resize', handleWindowResize);
} catch (err) {
console.error("連接失敗:", err);
setTimeout(() => connect(), 5000); // 5秒後重試
}
}
// 斷開連接
async function disconnect() {
console.log('===== 開始斷開連接 =====');
if (connection) {
try {
console.log('正在停止 SignalR 連接...');
await connection.stop();
console.log('✓ SignalR 連接已停止');
updateStatus('未連接', false);
sessionId = null;
console.log('清除 Canvas...');
ctx.clearRect(0, 0, canvas.width, canvas.height);
console.log('✓ Canvas 已清除');
window.frameCount = 0;
console.log('===== 斷開連接完成 =====');
} catch (err) {
console.error('斷開連接失敗: ' + err);
}
} else {
console.warn('沒有活動的連接');
}
}
// 載入測試對象
async function loadTestObjects() {
console.log('開始載入測試對象');
if (!sessionId) {
console.warn('尚未連接到服務器，無法載入測試對象');
return;
}
try {
const url = `/api/rendering/test-objects/${sessionId}`;
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
console.log('測試對象載入成功');
} else {
const errorText = await response.text();
console.error(`載入測試對象失敗: ${response.status} - ${errorText}`);
}
} catch (err) {
console.error('載入測試對象時出錯:', err);
}
}
// 設置視圖
async function setView(viewType) {
console.log(`===== 切換視圖: ${viewType} =====`);
if (connection && connection.state === 'Connected') {
try {
console.log(`正在調用 SetView('${viewType}')...`);
await connection.invoke('SetView', viewType);
console.log(`✓ 視圖已成功切換到: ${viewType}`);
} catch (err) {
console.error(`切換視圖失敗: ${err}`);
console.error('錯誤詳情: ' + JSON.stringify(err));
}
} else {
console.warn(`無法切換視圖: 連接狀態為 ${connection ? connection.state : 'null'}`);
}
}
// 渲染幀
function renderFrame(rgba, width, height) {
try {
// 檢查參數
if (!rgba || !width || !height) {
console.error(`無效的渲染參數 - rgba: ${rgba ? 'exists' : 'null'}, width: ${width}, height: ${height}`);
return;
}
// 檢查數據長度
const expectedLength = width * height * 4;
if (rgba.length !== expectedLength) {
console.error(`數據長度不匹配 - 預期: ${expectedLength}, 實際: ${rgba.length}`);
return;
}
// 確保 rgba 是正確的類型
let uint8Array;
if (rgba instanceof Uint8ClampedArray) {
uint8Array = rgba;
} else if (rgba instanceof Array || rgba instanceof Uint8Array) {
uint8Array = new Uint8ClampedArray(rgba);
} else {
console.error(`未知的數據類型: ${typeof rgba}`);
return;
}
const imageData = new ImageData(uint8Array, width, height);
ctx.putImageData(imageData, 0, 0);
// 不記錄每一幀，避免日誌過多
// log('info', '幀已渲染');
} catch (err) {
console.error('渲染錯誤: ' + err.message);
console.error('詳細錯誤:', err);
}
}
async function handleImageUpdate(compressedData, originalLength, width, height) {
try {
console.log(`收到圖像更新 - 寬度: ${width}, 高度: ${height}, 原始長度: ${originalLength}, 壓縮數據類型: ${typeof compressedData}`);
let imageData;
if (compressionSupported) {
// 解壓縮數據
const decompressed = await decompressData(compressedData, originalLength);
imageData = new Uint8ClampedArray(decompressed);
} else {
// 不支持壓縮，直接使用數據
imageData = new Uint8ClampedArray(compressedData);
}
console.log(`圖像數據準備就緒，長度: ${imageData.length}`);
// 創建 ImageData 對象並繪製到畫布
const ctx = canvas.getContext('2d');
const imgData = new ImageData(imageData, width, height);
ctx.putImageData(imgData, 0, 0);
console.log('圖像已繪製到畫布');
} catch (err) {
console.error("處理圖像更新時出錯:", err);
}
}
async function decompressData(compressedData, originalLength) {
try {
let bytes;
// 檢查輸入類型
if (compressedData instanceof Uint8Array) {
bytes = compressedData;
} else if (compressedData instanceof ArrayBuffer) {
bytes = new Uint8Array(compressedData);
} else if (typeof compressedData === 'string') {
// 如果是 Base64 字符串，轉換為 Uint8Array
const binaryString = atob(compressedData);
bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
} else {
console.error("未知的壓縮數據類型:", typeof compressedData);
throw new Error("未知的壓縮數據類型");
}
// 使用 DecompressionStream 解壓縮
const stream = new ReadableStream({
start(controller) {
controller.enqueue(bytes);
controller.close();
}
});
const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
const reader = decompressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
// 合併所有塊
const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
const result = new Uint8Array(totalLength);
let offset = 0;
for (const chunk of chunks) {
result.set(chunk, offset);
offset += chunk.length;
}
return result;
} catch (err) {
console.error("解壓縮失敗:", err);
throw err;
}
}
function setupMouseEvents() {
let isMouseDown = false;
let lastX = 0;
let lastY = 0;
let mouseButton = 0;
canvas.addEventListener('mousedown', async (e) => {
if (!canvasInitialized) return;
isMouseDown = true;
mouseButton = e.button;
const rect = canvas.getBoundingClientRect();
lastX = e.clientX - rect.left;
lastY = e.clientY - rect.top;
try {
await connection.invoke("HandleMouseDown", lastX, lastY, e.button);
} catch (err) {
console.error("鼠標按下處理失敗:", err);
}
});
canvas.addEventListener('mousemove', async (e) => {
if (!canvasInitialized) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 計算 buttonMask
const buttonMask = isMouseDown ? (1 << mouseButton) : 0;
try {
await connection.invoke("HandleMouseMove", x, y, buttonMask);
} catch (err) {
console.error("鼠標移動處理失敗:", err);
}
lastX = x;
lastY = y;
});
canvas.addEventListener('mouseup', async (e) => {
if (!canvasInitialized) return;
isMouseDown = false;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
try {
await connection.invoke("HandleMouseUp", x, y, e.button);
} catch (err) {
console.error("鼠標釋放處理失敗:", err);
}
});
canvas.addEventListener('wheel', async (e) => {
if (!canvasInitialized) return;
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 根據瀏覽器類型調整滾輪縮放因子
const browserBrand = isFirefox ? 'firefox' : 'chrome';
try {
await connection.invoke("HandleMouseWheel", x, y, e.deltaX, e.deltaY, browserBrand);
} catch (err) {
console.error("鼠標滾輪處理失敗:", err);
}
});
// 防止右鍵菜單
canvas.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
}
function setupKeyboardEvents() {
// Canvas 焦點管理
canvas.addEventListener('click', () => {
console.log('Canvas clicked, focusing...');
canvas.focus();
});
canvas.addEventListener('focus', () => {
console.log('Canvas focused');
canvas.style.borderColor = '#28a745';
});
canvas.addEventListener('blur', () => {
console.log('Canvas lost focus');
canvas.style.borderColor = '#dee2e6';
});
// 鍵盤事件
canvas.addEventListener('keydown', async (e) => {
console.log(`鍵盤按下: key=${e.key}, code=${e.code}, ctrl=${e.ctrlKey}, shift=${e.shiftKey}, alt=${e.altKey}`);
if (!canvasInitialized) {
console.warn('Canvas 尚未初始化，忽略鍵盤事件');
return;
}
// 防止瀏覽器默認行為（如 F5 刷新頁面）
e.preventDefault();
try {
await connection.invoke("HandleKeyDown", e.key, e.code, e.ctrlKey, e.shiftKey, e.altKey);
console.log('鍵盤按下事件已發送到服務器');
} catch (err) {
console.error("鍵盤按下處理失敗:", err);
}
});
canvas.addEventListener('keyup', async (e) => {
console.log(`鍵盤釋放: key=${e.key}, code=${e.code}`);
if (!canvasInitialized) {
console.warn('Canvas 尚未初始化，忽略鍵盤事件');
return;
}
e.preventDefault();
try {
await connection.invoke("HandleKeyUp", e.key, e.code, e.ctrlKey, e.shiftKey, e.altKey);
console.log('鍵盤釋放事件已發送到服務器');
} catch (err) {
console.error("鍵盤釋放處理失敗:", err);
}
});
}
function setupTouchEvents() {
let touchStartX = 0;
let touchStartY = 0;
canvas.addEventListener('touchstart', async (e) => {
if (!canvasInitialized) return;
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
touchStartX = touch.clientX - rect.left;
touchStartY = touch.clientY - rect.top;
try {
await connection.invoke("HandleTouchDown", touch.identifier, touchStartX, touchStartY);
} catch (err) {
console.error("觸摸開始處理失敗:", err);
}
});
canvas.addEventListener('touchmove', async (e) => {
if (!canvasInitialized) return;
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
try {
await connection.invoke("HandleTouchMove", touch.identifier, x, y);
} catch (err) {
console.error("觸摸移動處理失敗:", err);
}
});
canvas.addEventListener('touchend', async (e) => {
if (!canvasInitialized) return;
e.preventDefault();
const touch = e.changedTouches[0];
try {
await connection.invoke("HandleTouchUp", touch.identifier);
} catch (err) {
console.error("觸摸結束處理失敗:", err);
}
});
}
let resizeTimeout = null;
async function handleWindowResize() {
// 使用防抖來避免頻繁調整
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(async () => {
const rect = canvas.getBoundingClientRect();
const width = Math.floor(rect.width);
const height = Math.floor(rect.height);
console.log(`調整畫布大小: ${width}x${height}`);
// 保存當前畫布內容
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 更新畫布大小
canvas.width = width;
canvas.height = height;
// 嘗試恢復畫布內容（如果大小相容）
try {
if (imageData.width > 0 && imageData.height > 0) {
ctx.putImageData(imageData, 0, 0);
}
} catch (e) {
console.warn('無法恢復畫布內容，等待服務器重繪');
}
if (connection && connection.state === signalR.HubConnectionState.Connected) {
try {
// 通知服務器調整大小並重新渲染
await connection.invoke("HandleResize", width, height);
console.log('已通知服務器調整大小');
} catch (err) {
console.error("調整大小失敗:", err);
}
}
}, 300); // 300ms 防抖延遲
}
</script>
</body>
</html>

325
wwwroot/demo-vue-inline.html Normal file
View File

@ -0,0 +1,325 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Inline Rendering Canvas Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.canvas-wrapper {
position: relative;
height: 600px;
border: 1px solid #ddd;
margin: 20px 0;
background: #fafafa;
}
.rendering-canvas {
width: 100%;
height: 100%;
display: block;
cursor: grab;
}
.rendering-canvas:active {
cursor: grabbing;
}
.controls {
margin-bottom: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.view-button {
padding: 8px 16px;
border: 1px solid #2196F3;
background: white;
color: #2196F3;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.view-button:hover {
background: #2196F3;
color: white;
}
.status {
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.status.connected {
background: #e8f5e9;
color: #2e7d32;
}
.status.disconnected {
background: #ffebee;
color: #c62828;
}
</style>
</head>
<body>
<div id="app">
<div class="demo-container">
<h1>Vue.js 內嵌式渲染畫布示範</h1>
<div class="status" :class="isConnected ? 'connected' : 'disconnected'">
{{ isConnected ? '已連接' : '未連接' }}
<span v-if="sessionId">- Session: {{ sessionId }}</span>
</div>
<div class="controls">
<button class="view-button" @click="setView('front')">前視圖</button>
<button class="view-button" @click="setView('back')">後視圖</button>
<button class="view-button" @click="setView('left')">左視圖</button>
<button class="view-button" @click="setView('right')">右視圖</button>
<button class="view-button" @click="setView('top')">頂視圖</button>
<button class="view-button" @click="setView('bottom')">底視圖</button>
<button class="view-button" @click="setView('isometric')">等角視圖</button>
<button class="view-button" @click="setView('home')">主視圖</button>
</div>
<div class="canvas-wrapper">
<canvas ref="canvas" class="rendering-canvas"></canvas>
</div>
<p>提示：使用滑鼠拖曳旋轉視圖，滾輪縮放，鍵盤 F1-F4 切換視圖</p>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
connection: null,
sessionId: null,
isConnected: false,
canvas: null,
ctx: null
}
},
mounted() {
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext('2d');
this.connect();
},
beforeUnmount() {
if (this.connection) {
this.connection.stop();
}
},
methods: {
async connect() {
try {
this.connection = new signalR.HubConnectionBuilder()
.withUrl("/renderingHub")
.configureLogging(signalR.LogLevel.Information)
.build();
// 設置消息處理器
this.connection.on("ImageUpdate", (compressedData, originalLength, width, height) => {
this.handleImageUpdate(compressedData, originalLength, width, height);
});
this.connection.on("CanvasInitialized", (id) => {
this.sessionId = id;
console.log("畫布初始化完成，會話ID:", id);
this.loadTestObjects();
});
// 連接到服務器
await this.connection.start();
this.isConnected = true;
console.log("已連接到服務器");
// 初始化畫布
await this.initializeCanvas();
} catch (err) {
console.error("連接失敗:", err);
this.isConnected = false;
setTimeout(() => this.connect(), 5000);
}
},
async initializeCanvas() {
const rect = this.canvas.getBoundingClientRect();
const width = Math.floor(rect.width);
const height = Math.floor(rect.height);
this.canvas.width = width;
this.canvas.height = height;
await this.connection.invoke("InitializeCanvas", width, height);
// 設置事件處理
this.setupEvents();
},
setupEvents() {
// 滑鼠事件
let isMouseDown = false;
let mouseButton = 0;
this.canvas.addEventListener('mousedown', async (e) => {
isMouseDown = true;
mouseButton = e.button;
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
await this.connection.invoke("HandleMouseDown", x, y, e.button);
});
this.canvas.addEventListener('mousemove', async (e) => {
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const buttonMask = isMouseDown ? (1 << mouseButton) : 0;
await this.connection.invoke("HandleMouseMove", x, y, buttonMask);
});
this.canvas.addEventListener('mouseup', async (e) => {
isMouseDown = false;
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
await this.connection.invoke("HandleMouseUp", x, y, e.button);
});
this.canvas.addEventListener('wheel', async (e) => {
e.preventDefault();
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
await this.connection.invoke("HandleMouseWheel", x, y, e.deltaX, e.deltaY, "chrome");
});
this.canvas.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
// 鍵盤事件
this.canvas.tabIndex = 0;
this.canvas.addEventListener('keydown', async (e) => {
e.preventDefault();
await this.connection.invoke("HandleKeyDown", e.key, e.code, e.ctrlKey, e.shiftKey, e.altKey);
});
},
async handleImageUpdate(compressedData, originalLength, width, height) {
try {
// 解壓縮數據
const imageData = await this.decompressData(compressedData, originalLength);
// 創建 ImageData 對象並繪製到畫布
const imgData = new ImageData(new Uint8ClampedArray(imageData), width, height);
this.ctx.putImageData(imgData, 0, 0);
} catch (err) {
console.error("處理圖像更新時出錯:", err);
}
},
async decompressData(compressedData, originalLength) {
let bytes;
if (typeof compressedData === 'string') {
// Base64 字符串轉換
const binaryString = atob(compressedData);
bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
} else {
bytes = new Uint8Array(compressedData);
}
// 使用 DecompressionStream 解壓縮
const stream = new ReadableStream({
start(controller) {
controller.enqueue(bytes);
controller.close();
}
});
const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
const reader = decompressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
// 合併所有塊
const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
const result = new Uint8Array(totalLength);
let offset = 0;
for (const chunk of chunks) {
result.set(chunk, offset);
offset += chunk.length;
}
return result;
},
async setView(viewType) {
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke('SetView', viewType);
console.log(`視圖已切換到: ${viewType}`);
} catch (err) {
console.error(`切換視圖失敗: ${err}`);
}
}
},
async loadTestObjects() {
try {
const response = await fetch(`/api/rendering/test-objects/${this.sessionId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
console.log('測試對象載入成功');
} else {
console.error('載入測試對象失敗');
}
} catch (err) {
console.error('載入測試對象時出錯:', err);
}
}
}
}).mount('#app');
</script>
</body>
</html>

115
wwwroot/demo-vue.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Vue.js Rendering Canvas Demo</title>
<!-- Use vue.global.prod.js for production deployment -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
}
.canvas-wrapper {
height: 600px;
border: 1px solid #ddd;
margin: 20px 0;
}
.controls {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="demo-container">
<h1>Simple Rendering Canvas Demo</h1>
<div class="controls" v-if="canvas">
<!-- View dropdown component -->
<rendering-canvas-view-dropdown
:rendering-canvas="canvas"
></rendering-canvas-view-dropdown>
</div>
<div class="canvas-wrapper">
<!-- Self-contained canvas component -->
<rendering-canvas
ref="canvas"
:auto-connect="true"
@initialized="onCanvasInitialized"
@server-initialized="onServerInitialized"
></rendering-canvas>
</div>
</div>
</div>
<script type="module">
import RenderingCanvas from './disp/rendering-canvas.js';
import RenderingCanvasViewDropdown from './disp/rendering-canvas-view-dropdown.js';
const { createApp } = Vue;
createApp({
components: {
RenderingCanvas,
RenderingCanvasViewDropdown
},
data() {
return {
canvas: null
}
},
mounted() {
// Make the canvas reference available after mounting
this.$nextTick(() => {
this.canvas = this.$refs.canvas;
});
},
methods: {
onCanvasInitialized(canvasId) {
console.log('Canvas initialized:', canvasId);
// Update the canvas reference to ensure dropdown is enabled
this.canvas = this.$refs.canvas;
},
async onServerInitialized(sessionId) {
console.log('Server initialized with session:', sessionId);
// Load test objects for this demo
await this.loadTestObjects(sessionId);
},
async loadTestObjects(sessionId) {
try {
const response = await fetch(`/api/rendering/test-objects/${sessionId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
console.log('Test objects loaded successfully');
} else {
const errorText = await response.text();
console.error(`Failed to load test objects: ${response.status} - ${errorText}`);
}
} catch (err) {
console.error(`Error loading test objects: ${err}`);
}
}
}
}).mount('#app');
</script>
</body>
</html>

185
wwwroot/disp/rendering-canvas-view-dropdown.js Normal file
View File

@ -0,0 +1,185 @@
export default {
name: 'RenderingCanvasViewDropdown',
template: `
<div class="view-dropdown">
<button
type="button"
class="btn btn-info dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
v-if="useBootstrap"
>
<span class="oi oi-magnifying-glass">🔍</span>
</button>
<ul class="dropdown-menu" v-if="useBootstrap">
<li><h6 class="dropdown-header">{{ viewLabel }}</h6></li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="frontLabel + ' (F1)'"
@click="setView('front')"
:disabled="!canvasReady"
>{{ frontLabel }}</button>
</li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="backLabel"
@click="setView('back')"
:disabled="!canvasReady"
>{{ backLabel }}</button>
</li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="rightLabel + ' (F2)'"
@click="setView('right')"
:disabled="!canvasReady"
>{{ rightLabel }}</button>
</li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="leftLabel"
@click="setView('left')"
:disabled="!canvasReady"
>{{ leftLabel }}</button>
</li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="topLabel + ' (F3)'"
@click="setView('top')"
:disabled="!canvasReady"
>{{ topLabel }}</button>
</li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="bottomLabel"
@click="setView('bottom')"
:disabled="!canvasReady"
>{{ bottomLabel }}</button>
</li>
<li>
<button
type="button"
class="dropdown-item text-nowrap"
:title="isometricLabel + ' (F4)'"
@click="setView('isometric')"
:disabled="!canvasReady"
>{{ isometricLabel }}</button>
</li>
</ul>
<!-- Non-Bootstrap version -->
<div class="view-controls" v-if="!useBootstrap">
<button @click="setView('front')" :disabled="!canvasReady">{{ frontLabel }}</button>
<button @click="setView('back')" :disabled="!canvasReady">{{ backLabel }}</button>
<button @click="setView('left')" :disabled="!canvasReady">{{ leftLabel }}</button>
<button @click="setView('right')" :disabled="!canvasReady">{{ rightLabel }}</button>
<button @click="setView('top')" :disabled="!canvasReady">{{ topLabel }}</button>
<button @click="setView('bottom')" :disabled="!canvasReady">{{ bottomLabel }}</button>
<button @click="setView('isometric')" :disabled="!canvasReady">{{ isometricLabel }}</button>
<button @click="setView('home')" :disabled="!canvasReady">{{ homeLabel }}</button>
</div>
</div>
`,
props: {
renderingCanvas: {
type: Object,
default: null
},
useBootstrap: {
type: Boolean,
default: false
},
locale: {
type: String,
default: 'zh-TW'
}
},
computed: {
canvasReady() {
return this.renderingCanvas && this.renderingCanvas.isInitialized && this.renderingCanvas.isConnected;
},
// Localization
viewLabel() {
return this.getLocalizedText('view', '視圖');
},
frontLabel() {
return this.getLocalizedText('front', '前視圖');
},
backLabel() {
return this.getLocalizedText('back', '後視圖');
},
leftLabel() {
return this.getLocalizedText('left', '左視圖');
},
rightLabel() {
return this.getLocalizedText('right', '右視圖');
},
topLabel() {
return this.getLocalizedText('top', '頂視圖');
},
bottomLabel() {
return this.getLocalizedText('bottom', '底視圖');
},
isometricLabel() {
return this.getLocalizedText('isometric', '等角視圖');
},
homeLabel() {
return this.getLocalizedText('home', '主視圖');
}
},
methods: {
async setView(viewType) {
if (this.renderingCanvas && this.renderingCanvas.setView) {
try {
await this.renderingCanvas.setView(viewType);
} catch (err) {
console.error(`Failed to set view: ${err}`);
}
} else {
console.warn('No rendering canvas component provided or setView method not available');
}
},
getLocalizedText(key, defaultText) {
// Simple localization - can be extended with actual i18n library
const translations = {
'en-US': {
view: 'View',
front: 'Front',
back: 'Back',
left: 'Left',
right: 'Right',
top: 'Top',
bottom: 'Bottom',
isometric: 'Isometric',
home: 'Home'
},
'zh-TW': {
view: '視圖',
front: '前視圖',
back: '後視圖',
left: '左視圖',
right: '右視圖',
top: '頂視圖',
bottom: '底視圖',
isometric: '等角視圖',
home: '主視圖'
}
};
const localeTranslations = translations[this.locale] || translations['zh-TW'];
return localeTranslations[key] || defaultText;
}
}
}

38
wwwroot/disp/rendering-canvas.css Normal file
View File

@ -0,0 +1,38 @@
/* Rendering Canvas Component Styles */
.canvas-container {
position: relative;
width: 100%;
height: 100%;
background-color: #f8f8f8;
}
.canvas-container canvas {
background-color: rgba(204, 204, 204, 0.5);
touch-action: none;
width: 100%;
height: 100%;
object-fit: none;
border: 0;
padding: 0;
margin: 0;
display: block;
cursor: grab;
outline: none;
transition: box-shadow 0.3s, border-color 0.3s;
}
.canvas-container canvas:focus {
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
}
.canvas-container canvas:active {
cursor: grabbing;
}
/* Context menu disabled */
.canvas-container canvas {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

490
wwwroot/disp/rendering-canvas.js Normal file
View File

@ -0,0 +1,490 @@
// Add CSS link to the document if not already present
if (!document.querySelector('link[href*="rendering-canvas.css"]')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = './disp/rendering-canvas.css';
document.head.appendChild(link);
}
export default {
name: 'RenderingCanvas',
template: `
<div class="canvas-container">
<canvas
ref="renderCanvas"
:id="canvasId"
tabindex="0"
@contextmenu.prevent
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp"
@wheel.prevent="handleWheel"
@keydown="handleKeyDown"
@keyup="handleKeyUp"
@touchstart.prevent="handleTouchStart"
@touchmove.prevent="handleTouchMove"
@touchend.prevent="handleTouchEnd"
@click="focusCanvas"
@focus="onFocus"
@blur="onBlur"
></canvas>
</div>
`,
props: {
hubUrl: {
type: String,
default: '/renderingHub'
},
autoConnect: {
type: Boolean,
default: true
},
width: {
type: Number,
default: 800
},
height: {
type: Number,
default: 600
}
},
data() {
return {
canvasId: `rendering-canvas-${Math.random().toString(36).substr(2, 9)}`,
connection: null,
sessionId: null,
isConnected: false,
isInitialized: false,
hasFocus: false,
mouseState: {
isDown: false,
button: 0,
lastX: 0,
lastY: 0
},
compressionSupported: typeof DecompressionStream !== 'undefined',
isFirefox: navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
resizeObserver: null
}
},
async mounted() {
await this.setupCanvas();
this.setupResizeObserver();
if (this.autoConnect) {
await this.connect();
}
// Add visibility change listener
this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
document.addEventListener('visibilitychange', this.handleVisibilityChange);
},
async beforeUnmount() {
// Remove visibility change listener
document.removeEventListener('visibilitychange', this.handleVisibilityChange);
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
if (this.connection) {
await this.disconnect();
}
},
watch: {
// No longer needed since we manage connection internally
},
methods: {
async connect() {
try {
// Create SignalR connection
this.connection = new signalR.HubConnectionBuilder()
.withUrl(this.hubUrl)
.configureLogging(signalR.LogLevel.Information)
.build();
// Set up event handlers
this.connection.on("ImageUpdate", (compressedData, originalLength, width, height) => {
this.handleImageUpdate(compressedData, originalLength, width, height);
});
this.connection.on("CanvasInitialized", (id) => {
this.sessionId = id;
this.$emit('serverInitialized', id);
});
// Start connection
await this.connection.start();
this.isConnected = true;
this.$emit('connected');
// Initialize server canvas
const canvas = this.$refs.renderCanvas;
const rect = canvas.getBoundingClientRect();
const width = Math.floor(rect.width);
const height = Math.floor(rect.height);
await this.connection.invoke("InitializeCanvas", width, height);
} catch (err) {
this.$emit('error', `Connection failed: ${err}`);
console.error('Connection failed:', err);
// Retry after 5 seconds
setTimeout(() => this.connect(), 5000);
}
},
async disconnect() {
if (this.connection) {
try {
await this.connection.stop();
this.connection = null;
this.sessionId = null;
this.isConnected = false;
// Clear canvas
const canvas = this.$refs.renderCanvas;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
this.$emit('disconnected');
} catch (err) {
console.error('Disconnect failed:', err);
}
}
},
async setupCanvas() {
const canvas = this.$refs.renderCanvas;
canvas.width = this.width;
canvas.height = this.height;
this.isInitialized = true;
this.$emit('initialized', this.canvasId);
},
setupResizeObserver() {
this.resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const { width, height } = entry.contentRect;
this.handleResize(width, height);
}
});
this.resizeObserver.observe(this.$refs.renderCanvas.parentElement);
},
async handleResize(width, height) {
const canvas = this.$refs.renderCanvas;
canvas.width = Math.floor(width);
canvas.height = Math.floor(height);
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleResize", canvas.width, canvas.height);
} catch (err) {
this.$emit('error', `Resize failed: ${err}`);
}
}
},
async handleVisibilityChange() {
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleVisibilityChange", document.visibilityState);
this.$emit('visibilityChanged', document.visibilityState);
} catch (err) {
this.$emit('error', `Visibility change failed: ${err}`);
}
}
},
focusCanvas() {
this.$refs.renderCanvas.focus();
},
onFocus() {
this.hasFocus = true;
this.$emit('focus');
},
onBlur() {
this.hasFocus = false;
this.$emit('blur');
},
// Mouse event handlers
async handleMouseDown(e) {
if (!this.isInitialized || !this.connection) return;
this.mouseState.isDown = true;
this.mouseState.button = e.button;
const rect = this.$refs.renderCanvas.getBoundingClientRect();
this.mouseState.lastX = e.clientX - rect.left;
this.mouseState.lastY = e.clientY - rect.top;
if (this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleMouseDown",
this.mouseState.lastX,
this.mouseState.lastY,
e.button
);
} catch (err) {
this.$emit('error', `Mouse down failed: ${err}`);
}
}
},
async handleMouseMove(e) {
if (!this.isInitialized) return;
const rect = this.$refs.renderCanvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const buttonMask = this.mouseState.isDown ? (1 << this.mouseState.button) : 0;
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleMouseMove", x, y, buttonMask);
} catch (err) {
this.$emit('error', `Mouse move failed: ${err}`);
}
}
this.mouseState.lastX = x;
this.mouseState.lastY = y;
},
async handleMouseUp(e) {
if (!this.isInitialized) return;
this.mouseState.isDown = false;
const rect = this.$refs.renderCanvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleMouseUp", x, y, e.button);
} catch (err) {
this.$emit('error', `Mouse up failed: ${err}`);
}
}
},
async handleWheel(e) {
if (!this.isInitialized) return;
const rect = this.$refs.renderCanvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const browserBrand = this.isFirefox ? 'firefox' : 'chrome';
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleMouseWheel",
x, y, e.deltaX, e.deltaY, browserBrand
);
} catch (err) {
this.$emit('error', `Mouse wheel failed: ${err}`);
}
}
},
// Keyboard event handlers
async handleKeyDown(e) {
if (!this.isInitialized) return;
e.preventDefault();
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleKeyDown",
e.key, e.code, e.ctrlKey, e.shiftKey, e.altKey
);
} catch (err) {
this.$emit('error', `Key down failed: ${err}`);
}
}
},
async handleKeyUp(e) {
if (!this.isInitialized) return;
e.preventDefault();
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleKeyUp",
e.key, e.code, e.ctrlKey, e.shiftKey, e.altKey
);
} catch (err) {
this.$emit('error', `Key up failed: ${err}`);
}
}
},
// Touch event handlers
async handleTouchStart(e) {
if (!this.isInitialized) return;
const touch = e.touches[0];
const rect = this.$refs.renderCanvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleTouchDown", touch.identifier, x, y);
} catch (err) {
this.$emit('error', `Touch start failed: ${err}`);
}
}
},
async handleTouchMove(e) {
if (!this.isInitialized) return;
const touch = e.touches[0];
const rect = this.$refs.renderCanvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleTouchMove", touch.identifier, x, y);
} catch (err) {
this.$emit('error', `Touch move failed: ${err}`);
}
}
},
async handleTouchEnd(e) {
if (!this.isInitialized) return;
const touch = e.changedTouches[0];
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke("HandleTouchUp", touch.identifier);
} catch (err) {
this.$emit('error', `Touch end failed: ${err}`);
}
}
},
// Image update handler
async handleImageUpdate(compressedData, originalLength, width, height) {
try {
let imageData;
if (this.compressionSupported) {
const decompressed = await this.decompressData(compressedData, originalLength);
imageData = new Uint8ClampedArray(decompressed);
} else {
imageData = new Uint8ClampedArray(compressedData);
}
const canvas = this.$refs.renderCanvas;
const ctx = canvas.getContext('2d');
const imgData = new ImageData(imageData, width, height);
ctx.putImageData(imgData, 0, 0);
this.$emit('imageUpdated');
} catch (err) {
this.$emit('error', `Image update failed: ${err}`);
}
},
async decompressData(compressedData, originalLength) {
let bytes;
if (compressedData instanceof Uint8Array) {
bytes = compressedData;
} else if (compressedData instanceof ArrayBuffer) {
bytes = new Uint8Array(compressedData);
} else if (typeof compressedData === 'string') {
const binaryString = atob(compressedData);
bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
} else {
throw new Error(`Unknown compressed data type: ${typeof compressedData}`);
}
const stream = new ReadableStream({
start(controller) {
controller.enqueue(bytes);
controller.close();
}
});
const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
const reader = decompressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
const result = new Uint8Array(totalLength);
let offset = 0;
for (const chunk of chunks) {
result.set(chunk, offset);
offset += chunk.length;
}
return result;
},
// Public methods that can be called from parent
async setView(viewType) {
if (this.connection && this.connection.state === 'Connected') {
try {
await this.connection.invoke('SetView', viewType);
this.$emit('viewChanged', viewType);
} catch (err) {
this.$emit('error', `Set view failed: ${err}`);
}
}
},
// Public method to manually connect if autoConnect is false
async manualConnect() {
if (!this.isConnected) {
await this.connect();
}
},
// Public method to manually disconnect
async manualDisconnect() {
await this.disconnect();
},
// Getters for component state
getConnectionState() {
return {
isConnected: this.isConnected,
sessionId: this.sessionId,
connectionState: this.connection ? this.connection.state : 'Not initialized'
};
},
// Get session ID
getSessionId() {
return this.sessionId;
}
}
}