Merge pull request #17 from thingraph/feature/add-list

add example list

Author: Libra-lsp

.github/workflows/workflow.yml

@@ -1,68 +1,43 @@
-# .github/workflows/auto-deploy.yml
-
-name: auto deploy 🚀
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
 
 on:
-  # 监听push操作
+  # Runs on pushes targeting the default branch
   push:
-    branches:
-      - main # 这里只配置了main分支，所以只有推送main分支才会触发以下任务
-  pull_request:
+    branches: ["main"]
 
-  # 这个选项可以使你手动在 Action tab 页面触发工作流
-  # workflow_dispatch:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
 
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
-  # 允许对仓库的内容进行写操作。包括创建、修改和删除文件、目录以及提交更改等
-  # 这里只配置了push，所以只有推送main分支才会触发以下任务 
-  contents: write
-  # 允许管理 GitHub Pages 服务并对其进行写操作
+  contents: read
   pages: write
+  id-token: write
 
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
 
 jobs:
-  # 任务ID
-  build-and-deploy:
-    # 运行环境
-    # runs-on: macos-latest
-    # runs-on: windows-latest
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}
-    
-    # 步骤
     steps:
-      # 官方action，将代码拉取到虚拟机
       - name: Checkout
-        uses: actions/checkout@v3
-
-      # 建一个名为setup-node的步骤（安装指定版本的Node.js）
-      - name: setup-node 
-        # 使用setup-node@v3这个action
-        uses: actions/setup-node@v3
-        # 指定某个action 可能需要输入的参数
-        with:
-          node-version: '20'
-
-      # 安装 pnpm
-      - name: Install pnpm
-        run: npm install pnpm -g
-
-      # 安装依赖  
-      - name: Install dependencies
-        run: pnpm i
-      # 打包
-      - name: Build application 🔧
-        run: pnpm run build
-
-      # 部署 https://github.com/JamesIves/github-pages-deploy-action
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4
-        if: github.ref == 'refs/heads/main'
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          branch: gh-pages  # default: gh-pages
-          folder: dist
-          clean: true # Automatically remove deleted files from the deploy branch
-          # commit-message: ${{ github.event.head_commit.message }} # default: `Deploying to gh-pages from @ 3238feb 🚀`
-          # commit-message: "deploy: ${{ github.sha }} (${{ github.event.head_commit.message }}) 🚀 "
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,23 +1 @@
-.DS_Store
 node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

README.md

@@ -1,27 +1,11 @@
 # dxf-viewer-examples
-Examples for viewing DXF files using Three.js and Vue3.
+Examples for viewing DXF files using Three.js.
 
-## Project setup
+## Run examples
 ```
-npm install
+npm start
 ```
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-
 # dxf-viewer
 This example project is built on a WebGL based JS SDK, which provides a Viewer2d.
 
@@ -59,18 +43,18 @@ viewer.goToHomeView();
 - Supported entity types includes: POINT, 3DFACE, ARC, ATTDEF, ATTRIB, CIRCLE, DIMENSION, MLEADER, MULTILEADER, ELLIPSE, HATCH, INSERT, LEADER, LINE, LWPOLYLINE, MTEXT, RAY, POLYLINE, SOLID, SPLINE, TEXT, VERTEX, VIEWPORT, XLINE, etc. IMAGE, OLE2FRAME, REGION are partially supported.
 
 - Load and view dxf file
-<img src="public/images/snapshots/load_and_view.gif" width="400">
+<img src="images/snapshots/load_and_view.gif" width="400">
 - Switch between layouts
-<img src="public/images/snapshots/layouts.gif" width="400">
+<img src="images/snapshots/layouts.gif" width="400">
 - Distance measurement
-<img src="public/images/snapshots/measure_dist.gif" width="400">
+<img src="images/snapshots/measure_dist.gif" width="400">
 - Area measurement
 - Angle measurement
 - Markups
-<img src="public/images/snapshots/markups.gif" width="400">
+<img src="images/snapshots/markups.gif" width="400">
 - Comparison
-<img src="public/images/snapshots/dxf_compare_2_viewports.gif" width="400">
-<img src="public/images/snapshots/dxf_compare.png" width="400">
+<img src="images/snapshots/dxf_compare_2_viewports.gif" width="400">
+<img src="images/snapshots/dxf_compare.png" width="400">
 - Undo/redo
 
 ### Limitations

babel.config.js

@@ -0,0 +1,72 @@
+b {
+    font-weight: bold;
+}
+
+.compare-hide {
+    opacity: 0;
+}
+
+.compare-panel-container {
+    position: absolute;
+    top: 80px;
+    right: 10px;
+    width: 160px;
+    height: auto;
+    min-height: 200px;
+    padding: 10px;
+    z-index: 100;
+    box-sizing: border-box;
+    background-color: #fff;
+    user-select: none;
+}
+.compare-panel-container h3 {
+    position: fixed;
+    margin: 0;
+    padding-left: 5px;
+    line-height: 30px;
+    border-bottom: 1px solid #aaa;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.compare-detail {
+    margin-top: 35px;
+    max-height: 500px;
+    overflow: hidden;
+    cursor: pointer;
+}
+.compare-list {
+    margin-top: 6px;
+}
+.list-title {
+    display: flex;
+    align-items: center;
+}
+.title-icon {
+    padding: 5px;
+}
+.title-icon::before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border-right: 8px solid #666;
+    border-top: 8px solid transparent;
+}
+.compare-collapse .title-icon::before {
+    transform: rotate(-40deg);
+}
+.title-content {
+    font-size: 12px;
+}
+.compare-detail ul {
+    margin-left: 18px;
+    max-height: 150px;
+    font-size: 12px;
+    overflow-x: none;
+    overflow-y: scroll;
+}
+
+.compare-detail ul li {
+    margin: 6px 0;
+}

compare/dxfComparePanel.css

@@ -0,0 +1,111 @@
+/* eslint-disable no-undef */
+export default class DxfComparePanel {
+    compareDetail;
+    container;
+    compareHelper;
+
+    constructor(compareHelper, container = document.body) {
+        this.init(compareHelper, container);
+    }
+
+    init(compareHelper, container) {
+        this.compareHelper = compareHelper;
+        this.container = container;
+
+        this.buildPanel();
+        this.initEvents();
+    }
+
+    buildPanel() {
+        const panelContainer = document.createElement("div");
+        panelContainer.classList.add("compare-panel-container");
+
+        const header = document.createElement("h3");
+        panelContainer.appendChild(header);
+        this.container.appendChild(panelContainer);
+
+        const compareDetail = document.createElement("div");
+        compareDetail.classList.add("compare-detail");
+        panelContainer.appendChild(compareDetail);
+        this.compareDetail = compareDetail;
+
+        const changes = this.compareHelper.getChanges();
+        if (!changes) {
+            return;
+        }
+        const changesValues = Object.values(changes);
+
+        header.innerHTML = `差异列表(${changesValues.length})`;
+
+        const addedChangesValues = changesValues.filter((val) => val.type === "Added");
+        const deletedChangeValues = changesValues.filter((val) => val.type === "Removed");
+        const modifiedChanageValues = changesValues.filter((val) => val.type === "Modified");
+
+        if (addedChangesValues.length > 0) {
+            this.buildList(addedChangesValues, "新增");
+        }
+
+        if (deletedChangeValues.length > 0) {
+            this.buildList(deletedChangeValues, "删除");
+        }
+
+        if (modifiedChanageValues.length > 0) {
+            this.buildList(modifiedChanageValues, "修改");
+        }
+    }
+
+    buildList(changesValues, text) {
+        const section = document.createElement("div");
+        section.classList.add("compare-list", "compare-add");
+        this.compareDetail.appendChild(section);
+        this.buildListTitle(section, `${text}(<b>${changesValues.length}</b>)`);
+        const listEle = document.createElement("ul");
+        listEle.classList.add("list", "hide");
+        section.appendChild(listEle);
+
+        let listFragment = "";
+        changesValues.forEach((val) => {
+            listFragment += `<li data-id=${val.id} class="list-item">${val.handle}</li>`;
+        });
+        listEle.innerHTML = listFragment;
+    }
+
+    buildListTitle(group, title) {
+        const listTitle = document.createElement("div");
+        listTitle.classList.add("list-title", "compare-collapse");
+        group.appendChild(listTitle);
+
+        const titleIcon = document.createElement("span");
+        titleIcon.classList.add("title-icon");
+        listTitle.appendChild(titleIcon);
+
+        const titleContent = document.createElement("span");
+        titleContent.classList.add("title-content");
+        titleContent.innerHTML = title;
+        listTitle.appendChild(titleContent);
+    }
+
+    initEvents() {
+        const listTitles = document.querySelectorAll(".list-title");
+        listTitles.forEach((listTitle) => {
+            listTitle.addEventListener("click", () => {
+                listTitle.classList.toggle("compare-collapse");
+                listTitle.nextSibling?.classList.toggle("hide");
+            });
+        });
+
+        const lists = document.querySelectorAll(".list");
+        lists.forEach((list) => {
+            list.addEventListener("click", (e) => {
+                if (e.target.tagName.toUpperCase() === "LI" && e.target.dataset.id) {
+                    this.compareHelper.zoomToChange(e.target.dataset.id);
+                }
+            });
+        });
+    }
+
+    destroy() {
+        this.container.remove();
+        this.container = undefined;
+    }
+}

compare/dxfComparePanel.js

@@ -0,0 +1 @@
+.about{padding-top:30px}