From 9411262a47e8f0470c359a13a9a6c1024c882901 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Wed, 9 Jun 2021 15:22:32 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=A0=91=E5=BD=A2=E5=9B=BE?= =?UTF-8?q?=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 5 + package.json | 1 + src/app/ui/ng-tree-diagram/README.md | 53 ++++ src/app/ui/ng-tree-diagram/karma.conf.js | 32 +++ src/app/ui/ng-tree-diagram/ng-package.json | 7 + src/app/ui/ng-tree-diagram/package.json | 15 ++ .../ng-tree-diagram/src/lib/classes/index.ts | 3 + .../src/lib/classes/node-maker.class.ts | 50 ++++ .../src/lib/classes/node.class.ts | 120 +++++++++ .../src/lib/classes/nodes-list.class.ts | 200 ++++++++++++++ src/app/ui/ng-tree-diagram/src/lib/index.ts | 1 + .../ui/ng-tree-diagram/src/lib/node/index.ts | 1 + .../src/lib/node/node.component.html | 65 +++++ .../src/lib/node/node.component.scss | 253 ++++++++++++++++++ .../src/lib/node/node.component.ts | 49 ++++ src/app/ui/ng-tree-diagram/src/lib/rtl.css | 13 + .../src/lib/services/nodes-list.service.ts | 29 ++ .../src/lib/tree.component.html | 27 ++ .../src/lib/tree.component.scss | 41 +++ .../ng-tree-diagram/src/lib/tree.component.ts | 95 +++++++ .../ui/ng-tree-diagram/src/lib/tree.module.ts | 26 ++ .../ui/ng-tree-diagram/src/ng-tree-diagram.ts | 8 + src/app/ui/ng-tree-diagram/src/test.ts | 26 ++ src/app/ui/ng-tree-diagram/tsconfig.lib.json | 23 ++ .../ui/ng-tree-diagram/tsconfig.lib.prod.json | 6 + src/app/ui/ng-tree-diagram/tsconfig.spec.json | 17 ++ src/app/ui/ng-tree-diagram/tslint.json | 17 ++ .../plan-template.component.html | 6 +- .../plan-template/plan-template.component.ts | 76 +++--- src/app/ui/ui.module.ts | 6 +- 30 files changed, 1228 insertions(+), 43 deletions(-) create mode 100644 src/app/ui/ng-tree-diagram/README.md create mode 100644 src/app/ui/ng-tree-diagram/karma.conf.js create mode 100644 src/app/ui/ng-tree-diagram/ng-package.json create mode 100644 src/app/ui/ng-tree-diagram/package.json create mode 100644 src/app/ui/ng-tree-diagram/src/lib/classes/index.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/classes/node-maker.class.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/classes/node.class.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/classes/nodes-list.class.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/index.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/node/index.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/node/node.component.html create mode 100644 src/app/ui/ng-tree-diagram/src/lib/node/node.component.scss create mode 100644 src/app/ui/ng-tree-diagram/src/lib/node/node.component.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/rtl.css create mode 100644 src/app/ui/ng-tree-diagram/src/lib/services/nodes-list.service.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/tree.component.html create mode 100644 src/app/ui/ng-tree-diagram/src/lib/tree.component.scss create mode 100644 src/app/ui/ng-tree-diagram/src/lib/tree.component.ts create mode 100644 src/app/ui/ng-tree-diagram/src/lib/tree.module.ts create mode 100644 src/app/ui/ng-tree-diagram/src/ng-tree-diagram.ts create mode 100644 src/app/ui/ng-tree-diagram/src/test.ts create mode 100644 src/app/ui/ng-tree-diagram/tsconfig.lib.json create mode 100644 src/app/ui/ng-tree-diagram/tsconfig.lib.prod.json create mode 100644 src/app/ui/ng-tree-diagram/tsconfig.spec.json create mode 100644 src/app/ui/ng-tree-diagram/tslint.json diff --git a/package-lock.json b/package-lock.json index 9c9cca4..fe55dc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5122,6 +5122,11 @@ "tslib": "^1.9.0" } }, + "angular2-tree-diagramm": { + "version": "1.0.7", + "resolved": "https://registry.nlark.com/angular2-tree-diagramm/download/angular2-tree-diagramm-1.0.7.tgz", + "integrity": "sha1-33XQ4LWccIbOguZ4v4GgXp+ZcoE=" + }, "animation-frame-polyfill": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/animation-frame-polyfill/download/animation-frame-polyfill-1.0.1.tgz", diff --git a/package.json b/package.json index 34713d6..65628c7 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@types/cesium": "^1.59.5", "@types/swiper": "^5.3.0", "angular-calendar": "^0.28.2", + "angular2-tree-diagramm": "^1.0.7", "bson-objectid": "^1.3.1", "cesium": "^1.64.0", "crypto-js": "^4.0.0", diff --git a/src/app/ui/ng-tree-diagram/README.md b/src/app/ui/ng-tree-diagram/README.md new file mode 100644 index 0000000..ba3b9c6 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/README.md @@ -0,0 +1,53 @@ +# Angular tree diagram + +### About +This is Angular 2+ Hierarchical UI module. + +### Preview + + +### Demo +On [gh-pages](https://artbelikov.github.io/angular2-tree-diagram/) + +### Features +- Drag and drop +- Zoom and pan +- Configurable node width/height +- Add/remove nodes +- TreeComponent-like UI +- Pure CSS relation lines +- No dependencies + +### Installation +``` +npm i angular2-tree-diagram +``` + +### Usage +- Import module in your project +- Use tree-diagram directive +- Pass array of nodes and config +- See example.json for more details + +### Example +``` + +... +data = { + json: [ + { + "guid": "bc4c7a02-5379-4046-92be-12c67af4295a", + "displayName": "Elentrix", + "children": [ + "85d412c2-ebc1-4d56-96c9-7da433ac9bb2", + "28aac445-83b1-464d-9695-a4157dab6eac" + ] + }, + ... + ], + config: { + nodeWidth: 200, + nodeHeight: 100 + } +} +``` diff --git a/src/app/ui/ng-tree-diagram/karma.conf.js b/src/app/ui/ng-tree-diagram/karma.conf.js new file mode 100644 index 0000000..c962550 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/karma.conf.js @@ -0,0 +1,32 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../../coverage/ng-tree-diagram'), + reports: ['html', 'lcovonly', 'text-summary'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/src/app/ui/ng-tree-diagram/ng-package.json b/src/app/ui/ng-tree-diagram/ng-package.json new file mode 100644 index 0000000..04d0ff4 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ng-tree-diagram", + "lib": { + "entryFile": "src/ng-tree-diagram.ts" + } +} \ No newline at end of file diff --git a/src/app/ui/ng-tree-diagram/package.json b/src/app/ui/ng-tree-diagram/package.json new file mode 100644 index 0000000..6d43b28 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/package.json @@ -0,0 +1,15 @@ +{ + "name": "angular2-tree-diagram", + "version": "1.2.0", + "author": "Artyom Belikov", + "peerDependencies": { + "@angular/common": "^9.0.1", + "@angular/core": "^9.0.1", + "tslib": "^1.10.0" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/artbelikov/angular2-tree-diagram/issues" + }, + "homepage": "https://github.com/artbelikov/angular2-tree-diagram#readme" +} \ No newline at end of file diff --git a/src/app/ui/ng-tree-diagram/src/lib/classes/index.ts b/src/app/ui/ng-tree-diagram/src/lib/classes/index.ts new file mode 100644 index 0000000..0df36b1 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/classes/index.ts @@ -0,0 +1,3 @@ +export * from './node.class'; +export * from './node-maker.class'; +export * from './nodes-list.class'; diff --git a/src/app/ui/ng-tree-diagram/src/lib/classes/node-maker.class.ts b/src/app/ui/ng-tree-diagram/src/lib/classes/node-maker.class.ts new file mode 100644 index 0000000..e44e90c --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/classes/node-maker.class.ts @@ -0,0 +1,50 @@ +import { TreeDiagramNode } from './node.class'; + +export class TreeDiagramNodeMaker extends TreeDiagramNode { + private isMakerState = true; + + public get isMaker() { + return this.isMakerState; + } + + public drop(event) { + event.preventDefault(); + + const guid = this.getThisNodeList().draggingNodeGuid; + + this.getThisNodeList().rootNode(guid); + this.displayName = 'New node'; + + return false; + } + + public dragenter(event) { + event.dataTransfer.dropEffect = 'move'; + + const guid = this.getThisNodeList().draggingNodeGuid; + const node = this.getThisNodeList().getNode(guid); + + if (node.parentId) { + this.displayName = 'Root'; + } + } + + public dragover(event) { + event.preventDefault(); + + const guid = this.getThisNodeList().draggingNodeGuid; + const node = this.getThisNodeList().getNode(guid); + + if (!this.isDragging && node.parentId) { + this.isDragover = true; + event.dataTransfer.dropEffect = 'move'; + } + + return false; + } + + public dragleave(event) { + this.displayName = 'New node'; + this.isDragover = false; + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/classes/node.class.ts b/src/app/ui/ng-tree-diagram/src/lib/classes/node.class.ts new file mode 100644 index 0000000..2d11d02 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/classes/node.class.ts @@ -0,0 +1,120 @@ +import { TreeDiagramNodesList } from './nodes-list.class'; + +export class TreeDiagramNode { + public parentId: string | null; + public guid: string; + public width: number; + public height: number; + public isDragover: boolean; + public isDragging: boolean; + public children: Set; + public displayName: string; + private toggleState: boolean; + + public get isMaker() { + return false; + } + + constructor( + props, + config, + public getThisNodeList: () => TreeDiagramNodesList + ) { + if (!props.guid) { + return; + } + + for (const prop in props) { + if (props.hasOwnProperty(prop)) { + this[prop] = props[prop]; + } + } + + this.toggleState = false; + + if (config.nodeWidth) { + this.width = config.nodeWidth; + } + + if (config.nodeHeight) { + this.height = config.nodeHeight; + } + + this.children = new Set(props.children as string[]); + } + + public get isExpanded() { + return this.toggleState; + } + + public destroy() { + this.getThisNodeList().destroy(this.guid); + } + + public hasChildren() { + return !!this.children.size; + } + + public toggle(state = !this.toggleState) { + this.toggleState = state; + + if (state) { + this.getThisNodeList().toggleSiblings(this.guid); + } + } + + public childrenCount() { + return this.children.size; + } + + public isRoot() { + return this.parentId == null; + } + + public dragenter(event) { + event.dataTransfer.dropEffect = 'move'; + } + + public dragleave(event) { + this.isDragover = false; + } + + public dragstart(event) { + event.dataTransfer.effectAllowed = 'move'; + this.isDragging = true; + this.toggle(false); + this.getThisNodeList().draggingNodeGuid = this.guid; + } + + public dragover(event) { + event.preventDefault(); + + if (!this.isDragging) { + this.isDragover = true; + } + + event.dataTransfer.dropEffect = 'move'; + return false; + } + + public dragend() { + this.isDragover = false; + this.isDragging = false; + } + + public drop(event) { + event.preventDefault(); + + const guid = this.getThisNodeList().draggingNodeGuid; + + this.getThisNodeList().transfer(guid, this.guid); + return false; + } + + public addChild() { + const newNodeGuid = this.getThisNodeList().newNode(this.guid); + + this.children.add(newNodeGuid); + this.toggle(true); + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/classes/nodes-list.class.ts b/src/app/ui/ng-tree-diagram/src/lib/classes/nodes-list.class.ts new file mode 100644 index 0000000..72a87c2 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/classes/nodes-list.class.ts @@ -0,0 +1,200 @@ +import { TreeDiagramNode } from './node.class'; +import { TreeDiagramNodeMaker } from './node-maker.class'; + +export class TreeDiagramNodesList { + public roots: TreeDiagramNode[]; + public makerGuid: string; + public draggingNodeGuid; + private nodesList: Map; + private nodeTemplate = { + displayName: 'New node', + children: [], + guid: '', + parentId: null + }; + + constructor(nodes: any[], private config) { + this.nodesList = new Map(); + nodes.forEach(treeNode => { + this.nodesList.set( + treeNode.guid, + new TreeDiagramNode(treeNode, config, this.getThisNodeList.bind(this)) + ); + }); + this.makeRoots(); + this.makerGuid = this.uuidv4(); + + const node = { + guid: this.makerGuid, + parentId: 'root', + children: [], + displayName: 'New node' + }; + const maker = new TreeDiagramNodeMaker( + node, + this.config, + this.getThisNodeList.bind(this) + ); + + this.nodesList.set(this.makerGuid, maker); + } + + public values() { + return this.nodesList.values(); + } + + public getNode(guid: string): TreeDiagramNode { + return this.nodesList.get(guid); + } + + public rootNode(guid: string) { + const node = this.getNode(guid); + const maker = this.getNode(this.makerGuid); + + node.isDragging = false; + node.isDragover = false; + + if (node.parentId) { + const parent = this.getNode(node.parentId); + parent.children.delete(guid); + } + + node.parentId = null; + + this.makeRoots(); + maker.isDragging = false; + maker.isDragover = false; + } + + public transfer(originId: string, targetId: string) { + const origin = this.getNode(originId); + const target = this.getNode(targetId); + + origin.isDragover = false; + origin.isDragging = false; + target.isDragover = false; + + if (origin.parentId === targetId || originId === targetId) { + return; + } + + const remakeRoots = origin.isRoot(); + + if (origin.parentId) { + const parent = this.getNode(origin.parentId); + + parent.children.delete(originId); + + if (!parent.hasChildren()) { + parent.toggle(false); + } + } + + target.children.add(originId); + origin.parentId = targetId; + + if (remakeRoots) { + this.makeRoots(); + } + + this.serialize(); + } + + public getThisNodeList() { + return this; + } + + public toggleSiblings(guid: string) { + const target = this.getNode(guid); + + if (target.parentId) { + const parent = this.getNode(target.parentId); + + parent.children.forEach(nodeGuid => { + if (nodeGuid === guid) { + return; + } + + this.getNode(nodeGuid).toggle(false); + }); + } else { + for (const root of this.roots) { + if (root.guid === guid) { + continue; + } + + root.toggle(false); + } + } + } + + public serialize() { + const out = []; + + this.nodesList.forEach((node: TreeDiagramNode) => { + const json: any = { + guid: node.guid, + displayName: node.displayName, + parentId: node.parentId, + children: Array.from(node.children), + }; + + out.push(json); + }); + + return out; + } + + public destroy(guid: string) { + const target = this.getNode(guid); + + if (target.parentId) { + const parent = this.getNode(target.parentId); + parent.children.delete(guid); + } + + if (target.hasChildren()) { + target.children.forEach((child: string) => { + this.nodesList.delete(child); + }); + } + + this.nodesList.delete(guid); + } + + public newNode(parentId = null) { + const nodeTemplate = Object.assign({}, this.nodeTemplate); + + nodeTemplate.guid = this.uuidv4(); + nodeTemplate.parentId = parentId; + this.nodesList.set( + nodeTemplate.guid, + new TreeDiagramNode( + nodeTemplate, + this.config, + this.getThisNodeList.bind(this) + ) + ); + this.makeRoots(); + + return nodeTemplate.guid; + } + + private uuidv4() { + // tslint:disable-next-line:only-arrow-functions + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + // tslint:disable-next-line:one-variable-per-declaration no-bitwise + const r = (Math.random() * 16) | 0, + // tslint:disable-next-line:triple-equals no-bitwise + v = c == 'x' ? r : (r & 0x3) | 0x8; + + return v.toString(16); + }); + } + + private makeRoots() { + this.roots = Array.from(this.values()).filter((node: TreeDiagramNode) => + node.isRoot() + ); + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/index.ts b/src/app/ui/ng-tree-diagram/src/lib/index.ts new file mode 100644 index 0000000..b8a26a5 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/index.ts @@ -0,0 +1 @@ +export { TreeDiagramModule } from './tree.module'; diff --git a/src/app/ui/ng-tree-diagram/src/lib/node/index.ts b/src/app/ui/ng-tree-diagram/src/lib/node/index.ts new file mode 100644 index 0000000..b059672 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/node/index.ts @@ -0,0 +1 @@ +export { NodeComponent } from './node.component'; diff --git a/src/app/ui/ng-tree-diagram/src/lib/node/node.component.html b/src/app/ui/ng-tree-diagram/src/lib/node/node.component.html new file mode 100644 index 0000000..933bd74 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/node/node.component.html @@ -0,0 +1,65 @@ +
+
+
+
+
+
+
+
+
+
+ {{ node.displayName }} +
+
+ + ({{ node.childrenCount() }}) +
+
+
+
+
+ +
+
+
diff --git a/src/app/ui/ng-tree-diagram/src/lib/node/node.component.scss b/src/app/ui/ng-tree-diagram/src/lib/node/node.component.scss new file mode 100644 index 0000000..cefa7b6 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/node/node.component.scss @@ -0,0 +1,253 @@ +@mixin tree-button { + width: 20px; + height: 20px; + cursor: pointer; + border-radius: 2px; +} + +.toggler { + position: absolute; + left: 0; + right: 0; + bottom: -10px; + background: #2c4c63; + margin: 0 auto; + display: none; + z-index: 10; + @include tree-button; +} + +.children-count { + display: none; +} + +.tree-element-has-children { + > .tree-element-main { + .toggler { + display: block; + } + .rect { + } + .children-count { + display: inline; + } + } + > .tree-children { + display: inline-block; + } +} + +.rect { + position: relative; + background-color: #fafafa !important; + border: 1px solid #dadada; + box-sizing: border-box; + -webkit-print-color-adjust: exact; + cursor: default !important; + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + border-radius: 2px; +} + +.tree-element-main { + text-align: center; + margin: 0 auto; + &:hover { + .buttons { + display: block; + } + } + &.expanded { + .rect { + background-color: #bce5ff !important; + } + .toggler { + transform: rotateZ(-45deg); + background: #427396; + } + } + &.dragover { + .rect { + box-shadow: 0 0 5px #427396; + } + } + &.dragging { + .buttons { + display: none !important; + } + .tree-node:before { + display: none !important; + } + } +} + +.tree-element-container { + z-index: 100; +} + +.tree-children { + text-align: center; + display: inline-block; + position: relative; + white-space: nowrap; + perspective: 3000px; + perspective-origin: center bottom; + &:before { + content: ""; + width: calc(50% - 1px); + position: absolute; + height: 30px; + left: 0; + top: -45px; + border-right: 1px solid #dadada; + max-width: 100%; + max-height: 100%; + } +} + +.line-to { + position: absolute; + top: -30px; + border-top: 1px solid #dadada; + width: calc(100% + 30px); + display: none; +} + +.tree-node { + position: relative; + display: inline-block; + margin: 15px; + vertical-align: top; + &:before { + content: ""; + width: calc(50% - 1px); + position: absolute; + height: 30px; + left: 0; + top: -30px; + border-right: 1px solid #dadada; + } + &:only-of-type { + > .line-to { + display: none !important; + } + } +} + +.buttons { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + .delete { + @include tree-button; + background-color: #a34851; + position: absolute; + right: -10px; + top: -10px; + } + .add { + @include tree-button; + background-color: #256947; + position: absolute; + right: -10px; + bottom: -10px; + &:before { + content: ""; + position: absolute; + height: 12px; + width: 4px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + background-color: #2ba423; + } + &:after { + content: ""; + position: absolute; + width: 12px; + height: 4px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + background-color: #2ba423; + } + } +} + +.tree-text { + z-index: 10; + white-space: pre-line; + span { + cursor: pointer; + } +} + +.tree-elements-group { + position: relative; + + & > .tree-node.tree-child { + & > .line-to { + left: 0; + display: block; + } + &:first-of-type { + & > .line-to { + right: -30px; + width: calc(50% + 30px); + display: block; + left: auto; + } + } + &:last-of-type { + & > .line-to { + left: 0; + right: auto; + width: 50%; + display: block; + } + } + > .tree-child:last-child { + margin-right: 0; + } + > .tree-child:first-child { + margin-left: 0; + } + } +} + +.tree-text-non-editable { + display: none; +} + +.tree-new-node { + .rect { + opacity: 0.5; + border: 1px dashed #dadada; + cursor: pointer !important; + } + &:hover, + &.dragover { + .rect { + opacity: 1; + } + } + .tree-children, + .buttons { + display: none !important; + } + .tree-text-non-editable { + display: block; + } + .tree-text-editable { + display: none; + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/node/node.component.ts b/src/app/ui/ng-tree-diagram/src/lib/node/node.component.ts new file mode 100644 index 0000000..a8a47c4 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/node/node.component.ts @@ -0,0 +1,49 @@ +import { Component, Input } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; + +import { NodesListService } from '../services/nodes-list.service'; +import { TreeDiagramNode } from '../classes/node.class'; +import { TreeDiagramNodeMaker } from '../classes/node-maker.class'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'tree-diagram-node', + styleUrls: ['./node.component.scss'], + templateUrl: './node.component.html' +}) +export class NodeComponent { + public node: TreeDiagramNode | TreeDiagramNodeMaker; + public childrenTransform; + private readonly isRtl: boolean; + + constructor( + private nodesSrv: NodesListService, + private sanitizer: DomSanitizer + ) { + this.isRtl = document.getElementsByTagName('html')[0].getAttribute('dir') === 'rtl'; + } + + @Input() set nodeId(guid) { + this.node = this.nodesSrv.getNode(guid); + + let calculation = `translate(calc(-50% + ${Math.round( + this.node.width / 2 + )}px), 45px)`; + + if (this.isRtl) { + calculation = `translate(calc(50% - ${Math.round( + this.node.width / 2 + )}px), 45px)`; + } + + this.childrenTransform = this.sanitizer.bypassSecurityTrustStyle( + calculation + ); + } + + onNodeBlur(event, nodeId) { + const node = this.nodesSrv.getNode(nodeId); + + node.displayName = event.target.innerText; + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/rtl.css b/src/app/ui/ng-tree-diagram/src/lib/rtl.css new file mode 100644 index 0000000..8fa5968 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/rtl.css @@ -0,0 +1,13 @@ +html[dir=rtl] .tree-elements-group > div > .line-to { + right: 0!important; +} + +html[dir=rtl] .tree-elements-group > div:first-of-type > .line-to { + left: -30px!important; + right: auto!important; +} + +html[dir=rtl] .tree-elements-group > div:last-of-type > .line-to { + right: 0!important; + left: auto; +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/services/nodes-list.service.ts b/src/app/ui/ng-tree-diagram/src/lib/services/nodes-list.service.ts new file mode 100644 index 0000000..8fa70af --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/services/nodes-list.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import { TreeDiagramNodesList } from '../classes'; + +@Injectable() +export class NodesListService { + private nodesList: TreeDiagramNodesList; + + public loadNodes(nodes: any[], config) { + this.nodesList = new TreeDiagramNodesList(nodes, config); + + return this.nodesList; + } + + public getNode(guid) { + return this.nodesList.getNode(guid); + } + + public newNode() { + this.nodesList.newNode(); + } + + public makerNode() { + return this.nodesList.makerGuid; + } + + public toJsonString() { + return JSON.stringify(this.nodesList.serialize()); + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/tree.component.html b/src/app/ui/ng-tree-diagram/src/lib/tree.component.html new file mode 100644 index 0000000..6b62190 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/tree.component.html @@ -0,0 +1,27 @@ +
+
+
+ + + + + +
+
+
diff --git a/src/app/ui/ng-tree-diagram/src/lib/tree.component.scss b/src/app/ui/ng-tree-diagram/src/lib/tree.component.scss new file mode 100644 index 0000000..9d561c7 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/tree.component.scss @@ -0,0 +1,41 @@ +:host { + -webkit-print-color-adjust: exact; + position: relative; + display: block; + -webkit-touch-callout: none; + user-select: none; + overflow: hidden; + height: 100vh; + text-align: center; +} + +.tree-roots-elements { + position: relative; + text-align: center; + display: inline-block; + white-space: nowrap; + cursor: default !important; + font-size: 0; + transform-origin: center; +} + +.tree-node { + position: relative; + display: inline-block; + margin: 15px; + vertical-align: top; + &:only-of-type { + > .line-to { + display: none; + } + } +} + +.tree-pane, +.tree-paning-container { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/tree.component.ts b/src/app/ui/ng-tree-diagram/src/lib/tree.component.ts new file mode 100644 index 0000000..6e6705a --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/tree.component.ts @@ -0,0 +1,95 @@ +import { Component, Input } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; + +import { NodesListService } from './services/nodes-list.service'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'tree-diagram', + styleUrls: ['./tree.component.scss'], + templateUrl: './tree.component.html' +}) +export class TreeComponent { + public nodes; + private config = { + nodeWidth: 200, + nodeHeight: 100 + }; + private paneDragging = false; + private paneTransformState; + private zoom = 1; + private paneX = 0; + private paneY = 0; + + public get paneTransform() { + return this.paneTransformState; + } + + public set paneTransform(value) { + this.paneTransformState = value; + } + + constructor( + private nodesSrv: NodesListService, + private sanitizer: DomSanitizer + ) {} + + @Input() set data(data: { config: any; json: any[] }) { + if (!data || !Array.isArray(data.json)) { + return; + } + + if (typeof data.config === 'object') { + this.config = Object.assign(this.config, data.config); + } + + this.nodes = this.nodesSrv.loadNodes(data.json, this.config); + } + + public get nodeMaker() { + return this.nodesSrv.makerNode(); + } + + public newNode() { + this.nodesSrv.newNode(); + } + + public onmousedown() { + this.paneDragging = true; + } + + public onmousemove(event) { + if (this.paneDragging) { + const { movementX, movementY } = event; + + this.paneX += movementX; + this.paneY += movementY; + this.makeTransform(); + } + } + + public onmouseup() { + this.paneDragging = false; + } + + public makeTransform() { + this.paneTransform = this.sanitizer.bypassSecurityTrustStyle( + `translate(${this.paneX}px, ${this.paneY}px) scale(${this.zoom})` + ); + } + + public preventMouse(event) { + event.stopPropagation(); + } + + public onmousewheel(event) { + let delta; + + event.preventDefault(); + delta = event.detail || event.wheelDelta; + this.zoom += delta / 1000 / 2; + this.zoom = Math.min(Math.max(this.zoom, 0.2), 3); + + this.makeTransform(); + } +} diff --git a/src/app/ui/ng-tree-diagram/src/lib/tree.module.ts b/src/app/ui/ng-tree-diagram/src/lib/tree.module.ts new file mode 100644 index 0000000..47cc782 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/lib/tree.module.ts @@ -0,0 +1,26 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { TreeComponent } from './tree.component'; +import { NodeComponent } from './node'; +import { NodesListService } from './services/nodes-list.service'; + +@NgModule({ + declarations: [ + TreeComponent, + NodeComponent + ], + imports: [ + CommonModule + ], + exports: [ + TreeComponent, + NodeComponent + ], + providers: [ + NodesListService + ] +}) +export class TreeDiagramModule { + +} diff --git a/src/app/ui/ng-tree-diagram/src/ng-tree-diagram.ts b/src/app/ui/ng-tree-diagram/src/ng-tree-diagram.ts new file mode 100644 index 0000000..0200b63 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/ng-tree-diagram.ts @@ -0,0 +1,8 @@ +/* + * Public API Surface of ng-tree-diagram + */ + +export * from './lib/tree.module'; +export * from './lib/services/nodes-list.service'; +export * from './lib/node'; +export * from './lib/classes'; diff --git a/src/app/ui/ng-tree-diagram/src/test.ts b/src/app/ui/ng-tree-diagram/src/test.ts new file mode 100644 index 0000000..303b32a --- /dev/null +++ b/src/app/ui/ng-tree-diagram/src/test.ts @@ -0,0 +1,26 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/zone'; +import 'zone.js/dist/zone-testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/src/app/ui/ng-tree-diagram/tsconfig.lib.json b/src/app/ui/ng-tree-diagram/tsconfig.lib.json new file mode 100644 index 0000000..4b5d4af --- /dev/null +++ b/src/app/ui/ng-tree-diagram/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "target": "es2015", + "declaration": true, + "inlineSources": true, + "types": [], + "lib": [ + "dom", + "es2018" + ] + }, + "angularCompilerOptions": { + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "enableResourceInlining": true + }, + "exclude": [ + "src/test.ts", + "**/*.spec.ts" + ] +} diff --git a/src/app/ui/ng-tree-diagram/tsconfig.lib.prod.json b/src/app/ui/ng-tree-diagram/tsconfig.lib.prod.json new file mode 100644 index 0000000..cbae794 --- /dev/null +++ b/src/app/ui/ng-tree-diagram/tsconfig.lib.prod.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.lib.json", + "angularCompilerOptions": { + "enableIvy": false + } +} diff --git a/src/app/ui/ng-tree-diagram/tsconfig.spec.json b/src/app/ui/ng-tree-diagram/tsconfig.spec.json new file mode 100644 index 0000000..16da33d --- /dev/null +++ b/src/app/ui/ng-tree-diagram/tsconfig.spec.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/src/app/ui/ng-tree-diagram/tslint.json b/src/app/ui/ng-tree-diagram/tslint.json new file mode 100644 index 0000000..124133f --- /dev/null +++ b/src/app/ui/ng-tree-diagram/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "lib", + "camelCase" + ], + "component-selector": [ + true, + "element", + "lib", + "kebab-case" + ] + } +} diff --git a/src/app/ui/plan-template/plan-template.component.html b/src/app/ui/plan-template/plan-template.component.html index a5a6f42..65bbc2e 100644 --- a/src/app/ui/plan-template/plan-template.component.html +++ b/src/app/ui/plan-template/plan-template.component.html @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2021-05-19 15:50:20 * @LastEditors: sueRimn - * @LastEditTime: 2021-06-08 15:52:04 + * @LastEditTime: 2021-06-09 15:08:00 -->
@@ -215,8 +215,8 @@
-
- +
+
diff --git a/src/app/ui/plan-template/plan-template.component.ts b/src/app/ui/plan-template/plan-template.component.ts index 3f093d0..b3c623a 100644 --- a/src/app/ui/plan-template/plan-template.component.ts +++ b/src/app/ui/plan-template/plan-template.component.ts @@ -4,61 +4,35 @@ * @Author: sueRimn * @Date: 2021-05-31 10:40:01 * @LastEditors: sueRimn - * @LastEditTime: 2021-06-08 15:33:13 + * @LastEditTime: 2021-06-09 15:04:53 */ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, OnInit,ViewEncapsulation } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree'; import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeNestedDataSource} from '@angular/material/tree'; -interface FoodNode { - name: string; - children?: FoodNode[]; - } - const TREE_DATA: FoodNode[] = [ - { - name: 'Fruit', - children: [ - {name: 'Apple'}, - {name: 'Banana'}, - {name: 'Fruit loops'}, - ] - }, { - name: 'Vegetables', - children: [ - { - name: 'Green', - children: [ - {name: 'Broccoli'}, - {name: 'Brussels sprouts'}, - ] - }, { - name: 'Orange', - children: [ - {name: 'Pumpkins'}, - {name: 'Carrots'}, - ] - }, - ] - }, - ]; + @Component({ selector: 'app-plan-template', + //encapsulation: ViewEncapsulation.None, templateUrl: './plan-template.component.html', styleUrls: ['./plan-template.component.scss'] }) export class PlanTemplateComponent implements OnInit { - treeControl = new NestedTreeControl(node => node.children); - dataSource = new MatTreeNestedDataSource(); + constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { - this.dataSource.data = TREE_DATA; + } ngOnInit(): void { this.getLeftdata() + this.tree = { + json:this.treedate, + config: this.treeConfig + }; } groupPanle=true//分组展开 attPanle=true @@ -67,6 +41,23 @@ export class PlanTemplateComponent implements OnInit { /* {planCategory:3,basicCategoryId:"5e7c49e861550e2754d461ce",buildingTypeId: "5e7c8ffba3050b1a840ed4b6",unitname:'高层建筑',data:[]}, {planCategory:5,basicCategoryId:"60127efe2757e904e5721d83",buildingTypeId: "5e7c9018a3050b1a840ed4b7",unitname:'地下建筑',data:[]} */ ] + //树形结构数据 + treedate=[ + { + "guid": "bc4c7a02-5379-4046-92be-12c67af4295a", + "displayName": "Elentrix", + "children": [ + /* "85d412c2-ebc1-4d56-96c9-7da433ac9bb2", + "28aac445-83b1-464d-9695-a4157dab6eac" */ + ] + } + + ] + tree + treeConfig = { + nodeWidth: 90, + nodeHeight: 60 +}; group=[] getLeftdata(){ this.http.get("/api/PlanTemplate").subscribe((data:any)=>{ @@ -463,6 +454,7 @@ export class PlanTemplateComponent implements OnInit { } //保存 save(){ + console.log(this.newleftTabledata,this.tree) const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 @@ -487,8 +479,7 @@ export class PlanTemplateComponent implements OnInit { } } - //树形结构 - hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0; + //单位基本信息和建筑信息表格 displayedColumns: string[] = ['name','level','default','must', 'danwei','operation']; @@ -830,10 +821,17 @@ export class disaster{ }else if(this.headName==undefined||this.headName==''){ this.snackBar.open('请输入表头名称!','确定',config); }else{ + let tree={ + json:[], + config: { + nodeWidth: 90, + nodeHeight: 60 + } + } let attrubute={ headName:this.headName, level:this.level, - tableth:this.level==1||this.level==2?[]:this.level==3?'':'', + tableth:this.level==1||this.level==2?[]:this.level==3?'':tree, lieNumber:this.lieNumber, hNumber:this.hNumber } diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index f11828f..089dffd 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -91,6 +91,8 @@ import { addGroup } from './plan-template/plan-template.component' import { adddwsurvey } from './plan-template/plan-template.component' import { addattinf } from './plan-template/plan-template.component' import { disaster } from './plan-template/plan-template.component' +import { BrowserModule } from '@angular/platform-browser'; +import { TreeDiagramModule } from './ng-tree-diagram/src/ng-tree-diagram'; @NgModule({ declarations: [UiComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent, @@ -153,7 +155,9 @@ import { disaster } from './plan-template/plan-template.component' ReactiveFormsModule, FormsModule, PaginatorModule, - FileUploadModule + FileUploadModule, + //BrowserModule, + TreeDiagramModule ],