334 lines
9.8 KiB
TypeScript
334 lines
9.8 KiB
TypeScript
import * as DrawShare from "./drawShare";
|
||
import {useAddSignal, useDispatchSignal, useRemoveSignal} from "@/hooks";
|
||
import OffScreenCanvasWorker from './offScreenCanvas.worker.ts?worker&url';
|
||
import App from "@/core/app/App.ts";
|
||
|
||
/** ----------------- 离屏渲染中的事件处理--------------------------- **/
|
||
const mouseEventHandler = makeSendPropertiesHandler( [
|
||
'ctrlKey',
|
||
'metaKey',
|
||
'shiftKey',
|
||
'button',
|
||
'pointerType',
|
||
'clientX',
|
||
'clientY',
|
||
'pageX',
|
||
'pageY',
|
||
] );
|
||
const wheelEventHandlerImpl = makeSendPropertiesHandler( [
|
||
'deltaX',
|
||
'deltaY',
|
||
] );
|
||
const keydownEventHandler = makeSendPropertiesHandler( [
|
||
'ctrlKey',
|
||
'metaKey',
|
||
'shiftKey',
|
||
'keyCode',
|
||
] );
|
||
function wheelEventHandler( event, sendFn ) {
|
||
event.preventDefault();
|
||
wheelEventHandlerImpl( event, sendFn );
|
||
}
|
||
|
||
function preventDefaultHandler( event ) {
|
||
event.preventDefault();
|
||
}
|
||
|
||
function copyProperties(src, properties, dst) {
|
||
for ( const name of properties ) {
|
||
dst[ name ] = src[ name ];
|
||
}
|
||
}
|
||
|
||
function makeSendPropertiesHandler( properties ) {
|
||
return function sendProperties(event, sendFn) {
|
||
const data = { type: event.type };
|
||
copyProperties( event, properties, data );
|
||
sendFn( data );
|
||
};
|
||
}
|
||
|
||
function touchEventHandler(event, sendFn) {
|
||
const touches: { pageX:number,pageY:number }[] = [];
|
||
const data = { type: event.type, touches };
|
||
for ( let i = 0; i < event.touches.length; ++ i ) {
|
||
const touch = event.touches[ i ];
|
||
touches.push({
|
||
pageX: touch.pageX,
|
||
pageY: touch.pageY,
|
||
});
|
||
}
|
||
|
||
sendFn( data );
|
||
}
|
||
|
||
// 四个方向键
|
||
const orbitKeys = {
|
||
'37': true, // left
|
||
'38': true, // up
|
||
'39': true, // right
|
||
'40': true, // down
|
||
};
|
||
function filteredKeydownEventHandler(event, sendFn) {
|
||
const { keyCode } = event;
|
||
if (orbitKeys[keyCode]) {
|
||
event.preventDefault();
|
||
keydownEventHandler( event, sendFn );
|
||
}
|
||
}
|
||
/** ----------------- 离屏渲染中的事件end --------------------------- **/
|
||
|
||
let nextProxyId = 0;
|
||
/**
|
||
* 转发 DOM 事件给Worker中的 ElementProxyReceiver
|
||
*/
|
||
class ElementProxy {
|
||
readonly id: number;
|
||
private worker: Worker;
|
||
private element: HTMLElement;
|
||
|
||
constructor(element, worker, eventHandlers) {
|
||
this.id = nextProxyId++;
|
||
this.worker = worker;
|
||
this.element = element;
|
||
|
||
// 注册一个响应元素id
|
||
worker.postMessage({
|
||
type: 'makeProxy',
|
||
data:{
|
||
id: this.id,
|
||
}
|
||
});
|
||
|
||
this.sendSize();
|
||
|
||
// 添加相应事件的监听
|
||
for (const [eventName, handler] of Object.entries(eventHandlers)) {
|
||
element.addEventListener(eventName, (event) => {
|
||
// @ts-ignore
|
||
handler(event, this.sendEvent.bind(this));
|
||
});
|
||
}
|
||
}
|
||
|
||
sendEvent(data){
|
||
this.worker.postMessage({
|
||
type: 'event',
|
||
data:{
|
||
id: this.id,
|
||
data,
|
||
}
|
||
});
|
||
};
|
||
|
||
sendSize() {
|
||
const rect = this.element.getBoundingClientRect();
|
||
this.sendEvent({
|
||
type: 'size',
|
||
left: rect.left,
|
||
top: rect.top,
|
||
width: this.element.clientWidth,
|
||
height: this.element.clientHeight,
|
||
});
|
||
}
|
||
}
|
||
|
||
let cadDialogMoveFn;
|
||
/**
|
||
* dxf对象的查看器类
|
||
* @param {any} data - dxf对象
|
||
* @param {HTMLCanvasElement} canvas - three 画布
|
||
* @param {Number} width - 渲染画布的宽度，以像素为单位
|
||
* @param {Number} height - 渲染画布的高度，以像素为单位
|
||
* @constructor
|
||
*/
|
||
class DxfViewer {
|
||
private worker:Worker | undefined;
|
||
private resizeObserver: ResizeObserver;
|
||
private proxy: ElementProxy | undefined;
|
||
private middleObject:any = new Proxy({},{
|
||
set(target, p: string | symbol, newValue: any): boolean {
|
||
target[p] = newValue;
|
||
|
||
// switch (p) {
|
||
// case "markList":
|
||
// break;
|
||
// }
|
||
|
||
return true;
|
||
}
|
||
})
|
||
|
||
constructor(data: any, canvas: HTMLCanvasElement, width: number, height: number, onComplete?:()=>void) {
|
||
//console.log('dxf data:', data);
|
||
canvas.style.width = `${width}px`;
|
||
canvas.style.height = `${height}px`;
|
||
|
||
const cadFontUrl = new URL(import.meta.env.BASE_URL + 'resource/fonts/Alimama_DongFangDaKai_Regular.ttf', import.meta.url).href;
|
||
|
||
// 检查是否支持离屏canvas
|
||
if (canvas.transferControlToOffscreen) {
|
||
// console.log('OffscreenCanvas supported');
|
||
// 创建Worker进行离屏渲染
|
||
this.worker = new Worker(OffScreenCanvasWorker, {type: 'module'});
|
||
const offscreen = canvas.transferControlToOffscreen();
|
||
offscreen.width = width;
|
||
offscreen.height = height;
|
||
|
||
// 添加鼠标事件的监听
|
||
const eventHandlers = {
|
||
contextmenu: preventDefaultHandler,
|
||
mousedown: mouseEventHandler,
|
||
mousemove: mouseEventHandler,
|
||
mouseup: mouseEventHandler,
|
||
pointerdown: mouseEventHandler,
|
||
pointermove: mouseEventHandler,
|
||
pointerup: mouseEventHandler,
|
||
touchstart: touchEventHandler,
|
||
//touchmove: touchEventHandler,
|
||
touchend: touchEventHandler,
|
||
wheel: wheelEventHandler,
|
||
keydown: filteredKeydownEventHandler,
|
||
};
|
||
this.proxy = new ElementProxy(canvas, this.worker, eventHandlers);
|
||
|
||
this.worker.postMessage({
|
||
type: 'start', data: {
|
||
canvas: offscreen,
|
||
canvasId: this.proxy.id,
|
||
data:data,
|
||
options: {
|
||
bgColor:0x000000,
|
||
contrastColor:0xffffff,
|
||
fontUrl:cadFontUrl
|
||
},
|
||
middleObject:{
|
||
markList: JSON.stringify(App.project.getKey("drawing.markList")),
|
||
selectedRectIndex: App.project.getKey("drawing.selectedRectIndex"),
|
||
}
|
||
}
|
||
}, [offscreen]);
|
||
|
||
this.worker.onmessage = (event) => {
|
||
const data = event.data;
|
||
switch (data.type) {
|
||
case 'complete':
|
||
onComplete && onComplete();
|
||
break;
|
||
case "signal":
|
||
this.handleSignal(data.data)
|
||
break;
|
||
case "style":
|
||
canvas.style[data.data.key] = data.data.value;
|
||
break;
|
||
case "middle":
|
||
this.middleObject[data.data.key] = data.data.value;
|
||
break;
|
||
}
|
||
}
|
||
|
||
cadDialogMoveFn = this.proxy.sendSize.bind(this.proxy);
|
||
useAddSignal("cadViewerResize",cadDialogMoveFn)
|
||
}else{
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
|
||
//不支持离屏渲染
|
||
DrawShare.main({
|
||
canvas,
|
||
inputElement:canvas,
|
||
data:data,
|
||
onComplete:onComplete,
|
||
signal:this.handleSignal,
|
||
options: {
|
||
bgColor:0x000000,
|
||
contrastColor:0xffffff,
|
||
fontUrl:cadFontUrl
|
||
},
|
||
middleObject:this.middleObject
|
||
});
|
||
}
|
||
|
||
// 监听窗口变化
|
||
this.resizeObserver = new ResizeObserver(entries => {
|
||
canvas.style.width = `${entries[0].contentRect.width}px`;
|
||
canvas.style.height = `${entries[0].contentRect.height}px`;
|
||
|
||
const data = {
|
||
width:entries[0].contentRect.width,
|
||
height:entries[0].contentRect.height
|
||
}
|
||
|
||
if(this.worker){
|
||
this.worker.postMessage({
|
||
type:"resize",
|
||
data
|
||
})
|
||
|
||
this.proxy?.sendSize();
|
||
}else{
|
||
DrawShare.resize(data)
|
||
}
|
||
});
|
||
this.resizeObserver.observe(canvas.parentElement as HTMLDivElement);
|
||
}
|
||
|
||
// 触发signal
|
||
handleSignal(args){
|
||
const {type,name,data} = args;
|
||
switch (type) {
|
||
case "dispatch":
|
||
useDispatchSignal(name,...data)
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 调用drawShare中的方法,data为传入的参数，对象展示
|
||
callMethod(methodName:string, data:any = {}){
|
||
if(this.worker){
|
||
this.worker.postMessage({
|
||
type:methodName,
|
||
data,
|
||
})
|
||
}else{
|
||
DrawShare[methodName](data);
|
||
}
|
||
}
|
||
|
||
dispose() {
|
||
if(this.worker){
|
||
this.worker.terminate();
|
||
useRemoveSignal("cadViewerResize",cadDialogMoveFn)
|
||
}else{
|
||
DrawShare.dispose();
|
||
}
|
||
|
||
this.resizeObserver.disconnect();
|
||
}
|
||
|
||
/* ------------------- 需要共同实现的标记相关方法 ------------------------- */
|
||
// 获取选中的标记
|
||
get selectRectIndex(){
|
||
return this.middleObject.selectRectIndex;
|
||
}
|
||
|
||
// 删除选中的标记
|
||
deleteRect(){
|
||
const id = this.middleObject.selectRect?.id;
|
||
if(!id) return;
|
||
|
||
const elementId = this.middleObject.selectRect?.elementId;
|
||
this.callMethod('callModuleMethod',{
|
||
moduleName: "drawRect", methodName: "deleteRect",elementId:elementId
|
||
})
|
||
}
|
||
|
||
// 根据模型选中对应标记
|
||
selectRect(uuid:string){
|
||
this.callMethod('callModuleMethod',{
|
||
moduleName: "drawRect", methodName: "setSelect",elementId:uuid
|
||
})
|
||
}
|
||
}
|
||
|
||
export {DxfViewer} |