Spring/spring-flo
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Palette floater reacts to shape size changes

Browse Source
This commit is contained in:
BoykoAlex
2020-07-03 12:23:53 -04:00
parent 72a56e20a7
commit a78778cb68
3 changed files with 1339 additions and 1175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2482
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -35,12 +35,13 @@
"lint": "tslint ./src/**/*.ts -t verbose" "lint": "tslint ./src/**/*.ts -t verbose"
}, },
"dependencies": { "dependencies": {
"@types/resize-observer-browser": "^0.1.3",
"codemirror-minified": "5.54.0", "codemirror-minified": "5.54.0",
"jointjs": "3.2.0", "jointjs": "3.2.0",
"ts-disposables": "2.2.3" "ts-disposables": "2.2.3"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "latest", "@angular-devkit/build-angular": "0.901.10",
"@angular-devkit/schematics": "9.1.0", "@angular-devkit/schematics": "9.1.0",
"@angular/animations": "9.1.0", "@angular/animations": "9.1.0",
"@angular/common": "9.1.0", "@angular/common": "9.1.0",

29
src/lib/palette/palette.component.ts
View File

@@ -1,5 +1,5 @@
import {Component, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy, Inject, ViewEncapsulation} from '@angular/core'; import {Component, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy, Inject, ViewEncapsulation} from '@angular/core';
import { Subject } from 'rxjs'; import { Subject, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import { dia } from 'jointjs'; import { dia } from 'jointjs';
import { Flo } from '../shared/flo-common'; import { Flo } from '../shared/flo-common';
@@ -591,6 +591,33 @@ export class Palette implements OnInit, OnDestroy {
// Only node view expected // Only node view expected
this.viewBeingDragged = this.floaterpaper.findViewByModel(floaternode); this.viewBeingDragged = this.floaterpaper.findViewByModel(floaternode);
const resizeObserver = new ResizeObserver(() => {
const box: dia.BBox = (<dia.ElementView>this.viewBeingDragged).getBBox();
parent.css('width', box.width);
parent.css('height', box.height);
});
resizeObserver.observe(this.viewBeingDragged.el);
// const interval = setInterval(() => {
// if (this.viewBeingDragged) {
// // let box: dia.BBox = (<dia.ElementView>this.viewBeingDragged).getBBox();
// // console.log(`Current view size: w=${box.width} h=${box.height}`);
//
// // const modelSize = floaternode.size();
// // console.log(`Current model size: w=${modelSize.width} h=${modelSize.height}`);
//
// const width = Math.random() * 400;
// const height = Math.random() * 300;
// console.log(`Setting width=${width} height=${height}`);
// (<dia.ElementView>this.viewBeingDragged).model.size(width, height);
// // (<dia.ElementView>this.viewBeingDragged).update();
// } else {
// clearInterval(interval);
// }
// }, 2000);
let box: dia.BBox = (<dia.ElementView>this.viewBeingDragged).getBBox(); let box: dia.BBox = (<dia.ElementView>this.viewBeingDragged).getBBox();
let size: dia.Size = floaternode.get('size'); let size: dia.Size = floaternode.get('size');
parent.css('width', box.width + box.width - size.width); parent.css('width', box.width + box.width - size.width);