diff --git a/src/canvas/Add.vue b/src/canvas/Add.vue
index c814831a5..44fa6a117 100644
--- a/src/canvas/Add.vue
+++ b/src/canvas/Add.vue
@@ -7,17 +7,17 @@ import ModelUtil from 'core/ModelUtil'
export default {
- name: 'Add',
- mixins:[],
- data: function () {
- return {
- addNDropOffSet: 10,
- zoomOnLineAdd: false
- }
- },
- components: {},
- methods: {
- addMultiThemedScreens (params) {
+ name: 'Add',
+ mixins: [],
+ data: function () {
+ return {
+ addNDropOffSet: 10,
+ zoomOnLineAdd: false
+ }
+ },
+ components: {},
+ methods: {
+ addMultiThemedScreens(params) {
let z = this.getZoomFactor();
let screens = params.obj;
@@ -25,29 +25,29 @@ export default {
let pos = this.getCanvasMousePosition(params.event);
pos = this.getUnZoomedBox(pos, this.zoom, this.zoom);
- for(let i=0; i< screens.length;i++){
+ for (let i = 0; i < screens.length; i++) {
/**
* FIXME: Do something with rows???
*/
let screen = screens[i];
- let clonedScreen = this.getZoomedBox(lang.clone(screen),z,z);
+ let clonedScreen = this.getZoomedBox(lang.clone(screen), z, z);
clonedScreens.push(clonedScreen);
- clonedScreen.x = pos.x + (this.model.screenSize.w + this.getZoomed(100,this.zoom)) * i;
+ clonedScreen.x = pos.x + (this.model.screenSize.w + this.getZoomed(100, this.zoom)) * i;
clonedScreen.y = pos.y;
}
this.controller.addMultiScreens(clonedScreens, true);
},
- addScriptObject (params) {
- this.logger.log(1,"addScriptObject", "enter");
+ addScriptObject(params) {
+ this.logger.log(1, "addScriptObject", "enter");
this._createAddCommand("addScriptObject", params);
this._addWidget(params, params.obj, "addScript");
},
- addRestObject (params){
- this.logger.log(1,"addRestObject", "enter");
+ addRestObject(params) {
+ this.logger.log(1, "addRestObject", "enter");
this._createAddCommand("addRestObject", params);
@@ -55,8 +55,8 @@ export default {
},
- addLogicGroup (params){
- this.logger.log(0,"addLogicGroup", "enter");
+ addLogicGroup(params) {
+ this.logger.log(0, "addLogicGroup", "enter");
this._createAddCommand("addLogicGroup", params);
@@ -65,7 +65,7 @@ export default {
},
- addClonedWidget (zoomedModel, e){
+ addClonedWidget(zoomedModel, e) {
/**
* Same as adding themed widget. Just we do not change mode
@@ -73,48 +73,48 @@ export default {
* on mouse up!
*/
var params = {
- obj : this.getUnZoomedBox(zoomedModel, this.zoom, this.zoom),
- event : e,
- mouseup : true
+ obj: this.getUnZoomedBox(zoomedModel, this.zoom, this.zoom),
+ event: e,
+ mouseup: true
};
this.addThemedWidget(params, "distance");
},
- addImportedApp (params) {
- this.logger.log(-1,"addThemedScreenAndWidgets", "enter", params);
+ addImportedApp(params) {
+ this.logger.log(-1, "addThemedScreenAndWidgets", "enter", params);
this._createAddCommand("addImportedApp", params);
this._addScreensAndWidgets(params, params.obj, 'MatcImportBox');
},
-
+
/**********************************************************************
* Add from Theme. Themes are essentially the same as templates, but we
* do not assume there is a template defined in the model. Instead, there
* is an external theme and we will copy all styles
**********************************************************************/
- addThemedWidget (params, mode){
- this.logger.log(1,"addThemedWidget", "enter");
+ addThemedWidget(params, mode) {
+ this.logger.log(1, "addThemedWidget", "enter");
this._createAddCommand("addThemedWidget", params);
this._addWidget(params, params.obj, mode);
},
- addThemedScreen (params){
- this.logger.log(1,"addThemedScreen", "enter");
+ addThemedScreen(params) {
+ this.logger.log(1, "addThemedScreen", "enter");
this._createAddCommand("addThemedScreen", params);
this._addScreen(params, params.obj);
},
- addThemedScreenAndWidgets (params){
- this.logger.log(-1,"addThemedScreenAndWidgets", "enter", params);
+ addThemedScreenAndWidgets(params) {
+ this.logger.log(-1, "addThemedScreenAndWidgets", "enter", params);
this._createAddCommand("addThemedScreenAndWidgets", params);
this._addScreensAndWidgets(params, params.obj);
},
- addThemedGroup (params){
- this.logger.log(1,"addThemedGroup", "enter");
+ addThemedGroup(params) {
+ this.logger.log(1, "addThemedGroup", "enter");
this._createAddCommand("addThemedGroup", params);
@@ -126,25 +126,25 @@ export default {
* create div
*/
var boundingBox = this.getBoundingBoxByBoxes(group.children);
- boundingBox = this.getZoomedBox(boundingBox,z,z);
+ boundingBox = this.getZoomedBox(boundingBox, z, z);
var div = this.createBox(boundingBox);
css.add(div, "MatcAddBox")
var children = group.children;
- for(var i=0; i< children.length; i++){
+ for (var i = 0; i < children.length; i++) {
var child = children[i];
/**
* Create a copy and resize it...Otherwise
* the zoomed model arrives in the controller..
*/
- var widget = this.getZoomedBox(lang.clone(child),z,z);
+ var widget = this.getZoomedBox(lang.clone(child), z, z);
var widgetDIV = this.createWidget(widget);
div.appendChild(widgetDIV);
}
- if(!this._alignmentToolInited){
+ if (!this._alignmentToolInited) {
this.alignmentStart("boundingbox", boundingBox, "All");
}
@@ -155,8 +155,8 @@ export default {
},
- _onThemedGroupAdd (pos, group){
- this.logger.log(0,"_onThemedGroupAdd", "enter");
+ _onThemedGroupAdd(pos, group) {
+ this.logger.log(0, "_onThemedGroupAdd", "enter");
this.controller.addGroupByTheme(group, pos);
@@ -171,8 +171,8 @@ export default {
* Add Template
**********************************************************************/
- addTemplatedWidget (params){
- this.logger.log(1,"addTemplatedWidget", "enter > " + params.id);
+ addTemplatedWidget(params) {
+ this.logger.log(1, "addTemplatedWidget", "enter > " + params.id);
this._createAddCommand("addTemplatedWidget", params);
@@ -189,15 +189,15 @@ export default {
- addTemplatedScreen (params){
- this.logger.log(0,"addTemplatedScreen", "enter");
+ addTemplatedScreen(params) {
+ this.logger.log(0, "addTemplatedScreen", "enter");
this._createAddCommand("addTemplatedScreen", params);
},
- addTemplatedGroup (params){
- this.logger.log(-1,"addTemplatedGroup", "enter > XXX");
+ addTemplatedGroup(params) {
+ this.logger.log(-1, "addTemplatedGroup", "enter > XXX");
this._createAddCommand("addTemplatedGroup", params);
@@ -206,7 +206,7 @@ export default {
this._addTemplatedGroup(params, group, "_onTemplateGroupAdd");
},
- _addTemplatedGroup (params, group, callback){
+ _addTemplatedGroup(params, group, callback) {
this.setMode("add");
@@ -216,27 +216,27 @@ export default {
* create div
*/
let boundingBox = this.getBoundingBox(group.children);
- boundingBox = this.getZoomedBox(boundingBox,z,z);
+ boundingBox = this.getZoomedBox(boundingBox, z, z);
const div = this.createBox(boundingBox);
css.add(div, "MatcAddBox")
const children = this.getTemplateGroupOrderChildren(group);
- for(var i=0; i< children.length; i++){
+ for (var i = 0; i < children.length; i++) {
const child = children[i];
let widget = this.factory.createTemplatedModel(child);
- widget = this.getZoomedBox(widget,z,z);
+ widget = this.getZoomedBox(widget, z, z);
const widgetDIV = this.createZoomedWidget(widget);
div.appendChild(widgetDIV);
}
- if(!this._alignmentToolInited){
+ if (!this._alignmentToolInited) {
this.alignmentStart("boundingbox", boundingBox, "All");
}
this._onAddNDropStart(div, group, params.event, callback);
this.setState(3);
},
- _onTemplateGroupAdd (pos, group){
+ _onTemplateGroupAdd(pos, group) {
this.controller.addGroupByTemplate(group, pos);
this._onAddDone();
this.setState(0);
@@ -248,7 +248,7 @@ export default {
**********************************************************************/
- addScreen (params){
+ addScreen(params) {
this.logger.warn("addScreen", "DEPRECATED");
var screen = this.factory.createScreenModel(params);
@@ -257,16 +257,16 @@ export default {
this._addScreen(params, screen);
},
- _addScreen (params, screen){
+ _addScreen(params, screen) {
- if(!this._alignmentToolInited){
+ if (!this._alignmentToolInited) {
var zoomedModel = this.getZoomedBox(lang.clone(screen), this.getZoomFactor(), this.getZoomFactor());
this.alignmentStart("screen", zoomedModel, "All");
}
this.setMode("addScreen");
var z = this.getZoomFactor();
- var zoomedScreen = this.getZoomedBox(lang.clone(screen),z,z);
+ var zoomedScreen = this.getZoomedBox(lang.clone(screen), z, z);
var div = this.createScreen(zoomedScreen);
css.add(div, "MatcAddBox")
this.renderFactory.setStyle(div, zoomedScreen);
@@ -274,7 +274,7 @@ export default {
this.setState(3);
},
- onScreenAdded (pos, model){
+ onScreenAdded(pos, model) {
this.controller.addScreen(model, pos);
this._onAddDone();
this.setState(0);
@@ -283,7 +283,7 @@ export default {
/**********************************************************************
* Add Screens && Widget
**********************************************************************/
- _addScreensAndWidgets (params, app, cls) {
+ _addScreensAndWidgets(params, app, cls) {
const screens = Object.values(app.screens)
if (screens.length !== 1) {
@@ -291,14 +291,14 @@ export default {
return
}
const screen = screens[0]
- if(!this._alignmentToolInited){
+ if (!this._alignmentToolInited) {
var zoomedModel = this.getZoomedBox(lang.clone(screen), this.getZoomFactor(), this.getZoomFactor());
this.alignmentStart("screen", zoomedModel, "All");
}
this.setMode("add");
const z = this.getZoomFactor();
- const zoomedScreen = this.getZoomedBox(lang.clone(screen),z,z);
+ const zoomedScreen = this.getZoomedBox(lang.clone(screen), z, z);
const div = this.createScreen(zoomedScreen);
css.add(div, "MatcAddBox")
if (cls) {
@@ -311,7 +311,7 @@ export default {
this.setState(3);
},
- onScreensAndWidgetsAdded (pos, model) {
+ onScreensAndWidgetsAdded(pos, model) {
this.logger.log(-1, "onScreensAndWidgetsAdded", "enter", pos, model);
this.controller.addScreensAndWidgets(model, pos);
this._onAddDone();
@@ -322,15 +322,15 @@ export default {
* Add Widget
**********************************************************************/
- addWidget (params){
+ addWidget(params) {
console.warn("addWidget() > DEPRECATED");
- this.logger.log(1,"addWidget", "enter");
+ this.logger.log(1, "addWidget", "enter");
/**
* create temp widget for rendering
*/
var widget = this.factory.createWidgetModel(params);
- widget.id ="_tempWidget";
+ widget.id = "_tempWidget";
/**
* Render drag and drop!
@@ -338,10 +338,10 @@ export default {
this._addWidget(params, widget);
},
- _addWidget (params, widget, mode){
- this.logger.log(-1,"_addWidget", "enter", widget);
+ _addWidget(params, widget, mode) {
+ this.logger.log(-1, "_addWidget", "enter", widget);
- if(mode){
+ if (mode) {
this.setMode(mode);
} else {
this.setMode("add");
@@ -352,13 +352,13 @@ export default {
* the controller
*/
var z = this.getZoomFactor();
- var zoomedWidget = this.getZoomedBox(lang.clone(widget),z,z);
+ var zoomedWidget = this.getZoomedBox(lang.clone(widget), z, z);
/**
* Call after setMode() because the might trigger a redraw and would
* remove the GridRuler
*/
- if(!this._alignmentToolInited){
+ if (!this._alignmentToolInited) {
this.alignmentStart("widget", zoomedWidget, "All");
}
@@ -373,15 +373,15 @@ export default {
*/
this._onAddNDropStart(div, widget, params.event, "onWidgetAdded", params.mouseup);
this.setState(3);
- this.logger.log(2,"_addWidget", "exit");
+ this.logger.log(2, "_addWidget", "exit");
},
- onWidgetAdded (pos, model){
- this.logger.log(0,"onWidgetAdded", "enter");
+ onWidgetAdded(pos, model) {
+ this.logger.log(0, "onWidgetAdded", "enter");
var newWidget = this.controller.addWidget(model, pos);
- if(newWidget){
- requestAnimationFrame( () => {
+ if (newWidget) {
+ requestAnimationFrame(() => {
this.onWidgetSelected(newWidget.id, true);
})
}
@@ -405,8 +405,8 @@ export default {
* 3) the user select the end screen (onLineEndSelected)
**********************************************************************/
- addLineAtSelected (e, isLineDndStarted = false) {
- this.logger.log(-1,"addLineAtSelected", "enter > isLineDnd: " + isLineDndStarted);
+ addLineAtSelected(e, isLineDndStarted = false) {
+ this.logger.log(-1, "addLineAtSelected", "enter > isLineDnd: " + isLineDndStarted);
const selectedWidget = this.getSelectedWidget()
@@ -416,29 +416,29 @@ export default {
* Check if there is a line
*/
if (!ModelUtil.isLogicWidget(selectedWidget)) {
- let lines = this.getFromLines(selectedWidget)
- if (lines.length > 0) {
- this.logger.log(-1,"addLineAtSelected", "EXIT because line exists");
- this.showError('The widget has already a link')
- return
- }
+ let lines = this.getFromLines(selectedWidget)
+ if (lines.length > 0) {
+ this.logger.log(-1, "addLineAtSelected", "EXIT because line exists");
+ this.showError('The widget has already a link')
+ return
+ }
}
this.addLine({
- from : selectedWidget.id,
- event:this._lastMouseMoveEvent
+ from: selectedWidget.id,
+ event: this._lastMouseMoveEvent
})
}
if (this.getSelectedScreen() && this._lastMouseMoveEvent) {
this.addLine({
- from : this.getSelectedScreen().id,
- event:this._lastMouseMoveEvent
+ from: this.getSelectedScreen().id,
+ event: this._lastMouseMoveEvent
})
}
if (this.getSelectedGroup() && this._lastMouseMoveEvent) {
this.addLine({
- from : this.getSelectedGroup().id,
- event:this._lastMouseMoveEvent
+ from: this.getSelectedGroup().id,
+ event: this._lastMouseMoveEvent
})
}
@@ -449,8 +449,8 @@ export default {
this._addLineIsDndStarted = isLineDndStarted
},
- addLine (params){
- this.logger.log(-1,"addLine", "enter " + params.from + " " + params.animation);
+ addLine(params) {
+ this.logger.log(-1, "addLine", "enter " + params.from + " " + params.animation);
/**
* Set extra mode to also work with the
@@ -482,9 +482,9 @@ export default {
if (widget.template) {
let parent = this.getParentScreen(widget, this.model)
if (!parent) {
- this.logger.log(-1,"addLine", "addTemplate", widget.name);
+ this.logger.log(-1, "addLine", "addTemplate", widget.name);
this._addLineActionTargets.push(widget)
- }
+ }
}
} else {
if (widget.type === "Rest") {
@@ -492,48 +492,48 @@ export default {
}
if (widget.type === "LogicOr") {
this._addLineActionTargets.push(widget)
- }
+ }
if (widget.type === "Script") {
this._addLineActionTargets.push(widget)
- }
+ }
}
}
- if (params.from){
+ if (params.from) {
let widget = this.model.widgets[params.from];
if (widget) {
- this.logger.log(1,"addLine", "draw widget line");
- this.onLineStartSelected(params.from, null, null, params.event );
+ this.logger.log(1, "addLine", "draw widget line");
+ this.onLineStartSelected(params.from, null, null, params.event);
this._updateAddLineMove(params.event);
} else {
let screen = this.model.screens[params.from];
if (screen) {
- this.logger.log(0,"addLine", "draw screen line");
- this.onLineStartSelected(params.from, null, null, params.event );
+ this.logger.log(0, "addLine", "draw screen line");
+ this.onLineStartSelected(params.from, null, null, params.event);
this._updateAddLineMove(params.event);
} else if (this.model.groups) {
let group = this.model.groups[params.from];
- if (group){
- this.logger.log(1,"addLine", "draw group line");
- this.onLineStartSelected(params.from, null, null, params.event );
+ if (group) {
+ this.logger.log(1, "addLine", "draw group line");
+ this.onLineStartSelected(params.from, null, null, params.event);
this._updateAddLineMove(params.event);
} else {
- this.logger.log(0,"addLine", "No element with id ", params.from);
+ this.logger.log(0, "addLine", "No element with id ", params.from);
}
}
}
} else {
- this.logger.log(0,"addLine", "No start passed...");
+ this.logger.log(0, "addLine", "No start passed...");
this.setBoxClickCallback("onLineStartSelected");
/**
* fade out all widgets that have an transition
*/
- for(let i=0; i< this.model.widgets.length; i++){
+ for (let i = 0; i < this.model.widgets.length; i++) {
let widget = this.model.widgets[i];
- if(this.hasLine(widget)){
+ if (this.hasLine(widget)) {
var div = this.widgetDivs[widget.id];
css.add(div, "");
}
@@ -543,18 +543,18 @@ export default {
}
},
- isLineStartedFromTemplate (params) {
- if (params.from){
+ isLineStartedFromTemplate(params) {
+ if (params.from) {
const widget = this.model.widgets[params.from];
if (this.isTemplatedWidgetOnCanvas(widget)) {
return true
}
-
+
const group = this.model.groups[params.from];
- if (group && group.template){
+ if (group && group.template) {
this.logger.warn("isLineStartedFromTemplate", "groups not supported");
const children = group.children
- for (let i=0; i < children.length; i++) {
+ for (let i = 0; i < children.length; i++) {
let id = children[i]
const widget = this.model.widgets[id];
if (this.isTemplatedWidgetOnCanvas(widget)) {
@@ -566,18 +566,18 @@ export default {
return false
},
- isTemplatedWidgetOnCanvas (widget) {
+ isTemplatedWidgetOnCanvas(widget) {
if (widget && widget.template) {
- const parent = this.getParentScreen(widget, this.model)
- if (!parent) {
- return true
- }
+ const parent = this.getParentScreen(widget, this.model)
+ if (!parent) {
+ return true
+ }
}
return false
},
- onLineStartSelected (id, div, pos,e){
- this.logger.log(1,"onLineStartSelected", "enter > " +id);
+ onLineStartSelected(id, div, pos, e) {
+ this.logger.log(1, "onLineStartSelected", "enter > " + id);
var line = this.factory.createLineModel();
@@ -593,9 +593,9 @@ export default {
this._addLineStartPos = this._getMousePosition(e);
this._addLineStartId = id
this._addLineModel = line;
- this._addLinePoints=[];
+ this._addLinePoints = [];
this._addLineIsPaused = false;
- this._addNDropMove = on(win.body(),"mousemove", lang.hitch(this,"_updateAddLineMove"));
+ this._addNDropMove = on(win.body(), "mousemove", lang.hitch(this, "_updateAddLineMove"));
this.showHint("Select the screen where the click should go to. You can also set some way points in the middle to make it look nicer!");
@@ -603,10 +603,10 @@ export default {
},
- onLinePointSelected (e){
- this.logger.log(1,"onLinePointSelected", "enter > ");
+ onLinePointSelected(e) {
+ this.logger.log(1, "onLinePointSelected", "enter > ");
- if(!this._addLineStartPos){
+ if (!this._addLineStartPos) {
this._onAddCleanup();
}
@@ -621,9 +621,9 @@ export default {
this._addLineModel.points.push(pos);
},
- onLineEndSelected (id, e){
- this.logger.log(-1,"onLineEndSelected", "enter > "+ id);
-
+ onLineEndSelected(id, e) {
+ this.logger.log(-1, "onLineEndSelected", "enter > " + id);
+
if (this._addLineStartedFromTemplate) {
let widget = this.model.widgets[id];
if (this.isTemplatedWidgetOnCanvas(widget)) {
@@ -638,8 +638,8 @@ export default {
model.isGroup = true
} else {
model.to = widget.id;
- }
-
+ }
+
this.controller.addLine(model, e);
this._onAddDone();
@@ -651,7 +651,7 @@ export default {
* check if we clicked on a screen or widget
*/
var screen = this.model.screens[id];
- if (!screen){
+ if (!screen) {
let widget = this.model.widgets[id];
screen = this.getParentScreen(widget);
}
@@ -659,20 +659,20 @@ export default {
if (screen) {
let model = this._addLineModel;
model.to = screen.id;
- this.controller.addLine(model,e);
+ this.controller.addLine(model, e);
this._onAddDone();
} else {
/**
* Check if we have clicked on LogicElement
*/
let widget = this.model.widgets[id];
- if(this.hasLogic(widget)){
+ if (this.hasLogic(widget)) {
//let fromWidget = this.model.widgets[this._addLineModel.from];
//if(!this.hasLogic(fromWidget)){
- let model = this._addLineModel;
- model.to = widget.id;
- this.controller.addLine(model, e);
- this._onAddDone();
+ let model = this._addLineModel;
+ model.to = widget.id;
+ this.controller.addLine(model, e);
+ this._onAddDone();
//} else {
// this.showError("You cannot connect two logic nodes!");
//}
@@ -686,20 +686,20 @@ export default {
}
}
}
-
+
this.cleanUpAddLine();
this.setMode(this._oldMode);
this._onAddDone();
this.setState(0);
},
- onLineSuggestEnd (e) {
- this.logger.log(-1,"onLineSuggestEnd", "enter > ", e);
+ onLineSuggestEnd(e) {
+ this.logger.log(-1, "onLineSuggestEnd", "enter > ", e);
// TODO: add here some cool "create new element" stuff?
},
- _updateAddLineMove (e){
-
+ _updateAddLineMove(e) {
+
/**
* Pressing space will pause this operation!
* The canvas DnD handler will instead move the
@@ -710,7 +710,7 @@ export default {
}
this.stopEvent(e);
- if(!this._addLineStartPos){
+ if (!this._addLineStartPos) {
this._onAddCleanup();
}
@@ -719,22 +719,25 @@ export default {
to.h = 2;
to.w = 2;
+ if (this._addLineTargetDiv) {
+ css.remove(this._addLineTargetDiv, "MatcLineTarget")
+ }
+
+
/**
* check if we are hovering over anything
*/
- const screen = this.getHoverScreen(to);
- if(screen && !this._addLineStartedFromTemplate){
- /**
- * Do not snapp to same screen
- */
- const startWidget = this.model.widgets[this._addLineStartId]
- if (startWidget) {
- let startParent = this.getParentScreen(startWidget);
- if (!startParent || startParent.id !== screen.id) {
- to = screen;
- }
- } else {
+ const screen = this.getHoverScreen(to);
+ if (screen && !this._addLineStartedFromTemplate) {
+
+ const startParent = this.getAddLineStartScreen()
+ if (!startParent || startParent.id !== screen.id) {
to = screen;
+ const dndDiv = this.screenDivs[screen.id];
+ if (dndDiv) {
+ css.add(dndDiv, "MatcLineTarget")
+ this._addLineTargetDiv = dndDiv
+ }
}
} else {
@@ -742,36 +745,63 @@ export default {
* Check for all the smart widgets, if we can snapp
*/
if (this._addLineActionTargets) {
- for (let i=0; i < this._addLineActionTargets.length; i++) {
+ for (let i = 0; i < this._addLineActionTargets.length; i++) {
const action = this._addLineActionTargets[i]
if (this._isContainedInBox(to, action)) {
to = action
+ const dndDiv = this.widgetDivs[action.id];
+ if (dndDiv) {
+ css.add(dndDiv, "MatcLineTarget")
+ this._addLineTargetDiv = dndDiv
+ }
break;
}
}
}
}
+
const layoutedLine = this.layoutLine(from, to, this._addLineModel);
- if(!this._addLineSVG){
- this._addLineSVG = this.drawLine(this._addLineModel.id, layoutedLine);
+ if (!this._addLineSVG) {
+ this._addLineSVG = this.drawLine(this._addLineModel.id, layoutedLine, this._addLineModel.databinding);
} else {
this._addLineSVG.attr("d", this.lineFunction(layoutedLine));
}
},
- cancelAddLine (){
- this.logger.log(0,"cancelAddLine", "enter");
+ getAddLineStartScreen() {
+ const startWidget = this.model.widgets[this._addLineStartId]
+ if (startWidget) {
+ let startParent = this.getParentScreen(startWidget);
+ return startParent
+ }
+
+ const startGroup = this.model.groups[this._addLineStartId]
+ if (startGroup) {
+ const groupChilden = this.getAllGroupChildren(startGroup)
+ if (groupChilden.length > 0) {
+ const fristGroupWidget = this.model.widgets[groupChilden[0]]
+ if (fristGroupWidget) {
+ let groupParent = this.getParentScreen(fristGroupWidget);
+ return groupParent
+ }
+ }
+ }
+ },
+
+
+ cancelAddLine() {
+ this.logger.log(0, "cancelAddLine", "enter");
this.cleanUpAddLine();
this._onAddDone();
},
- cleanUpAddLine (){
- this.logger.log(0,"cleanUpAddLine", "enter");
+ cleanUpAddLine() {
+ this.logger.log(0, "cleanUpAddLine", "enter");
this.cleanUpClickCallbacks();
delete this._addLineParams;
this._addLinePoints = null;
@@ -779,10 +809,14 @@ export default {
this._addLineIsPaused = false;
this._addLineActionTargets = null;
this._addLineStartedFromTemplate = false;
- if(this._addLineSVG){
+ if (this._addLineSVG) {
this._addLineSVG.remove();
}
this._addLineSVG = null;
+ if (this._addLineTargetDiv ) {
+ css.remove(this._addLineTargetDiv, "MatcLineTarget")
+ }
+ delete this._addLineTargetDiv
this._onAddCleanup();
this.setState(0);
return true;
@@ -792,7 +826,7 @@ export default {
/**********************************************************************
* AddNDropMethods
**********************************************************************/
- _onAddNDropStart (div, model, e, onEndCallback , mouseup){
+ _onAddNDropStart(div, model, e, onEndCallback, mouseup) {
this.setCanvasCancelCallback("_onAddCancel");
@@ -815,33 +849,33 @@ export default {
/**
* append node to domNode
*/
- css.add(this._addNDropNode,"");
- css.add(this._addNDropNode,"MatcCanvasAddNDropNode");
+ css.add(this._addNDropNode, "");
+ css.add(this._addNDropNode, "MatcCanvasAddNDropNode");
this._addNDropUpDateUI();
this.dndContainer.appendChild(this._addNDropNode);
/**
* register mouse move and release listener, mazbe also esc listener
*/
- this._addNDropMove = on(win.body(),"mousemove", lang.hitch(this,"_onAddNDropMove"));
+ this._addNDropMove = on(win.body(), "mousemove", lang.hitch(this, "_onAddNDropMove"));
this.setDragNDropActive(false);
- if(mouseup === true){
- this._addNDropUp = on(win.body(),"mouseup", lang.hitch(this,"_onAddNDropUp"));
+ if (mouseup === true) {
+ this._addNDropUp = on(win.body(), "mouseup", lang.hitch(this, "_onAddNDropUp"));
} else {
- this._addNDropUp = on(win.body(),"mousedown", lang.hitch(this,"_onAddNDropUp"));
+ this._addNDropUp = on(win.body(), "mousedown", lang.hitch(this, "_onAddNDropUp"));
}
},
- _onAddNDropMove (e){
+ _onAddNDropMove(e) {
this.stopEvent(e);
/**
* Sometimes there might be still a listener.
* We stop that now.
*/
- if(!this._addNDropNode){
+ if (!this._addNDropNode) {
this._onAddCleanup();
return;
}
@@ -858,26 +892,26 @@ export default {
this._addNDropNodePos.h = this.getZoomed(this._addNDropModel.h, this.getZoomFactor());
this._addNDropNodePos = this.allignPosition(this._addNDropNodePos, e);
- if(!window.requestAnimationFrame){
+ if (!window.requestAnimationFrame) {
console.warn("No requestAnimationFrame()");
this._addNDropUpDateUI();
} else {
var callback = lang.hitch(this, "_addNDropUpDateUI");
- requestAnimationFrame(callback);
+ requestAnimationFrame(callback);
}
return false;
},
- _addCorrectOffset (box){
+ _addCorrectOffset(box) {
box.x -= this.addNDropOffSet;
box.y -= this.addNDropOffSet;
return box;
},
- _addNDropUpDateUI ( ){
- if(!this._addNDropNode || !this._addNDropNodePos){
+ _addNDropUpDateUI() {
+ if (!this._addNDropNode || !this._addNDropNodePos) {
this._onAddCleanup();
return;
}
@@ -887,18 +921,18 @@ export default {
},
- _onAddNDropUp (e){
+ _onAddNDropUp(e) {
this.stopEvent(e);
var pos = this._addNDropNodePos;
- if(pos.x > 0 && pos.y >0 && pos.x < this.getZoomed(this.canvasPos.w, this.zoom) && pos.y < this.getZoomed(this.canvasPos.h, this.zoom)){
+ if (pos.x > 0 && pos.y > 0 && pos.x < this.getZoomed(this.canvasPos.w, this.zoom) && pos.y < this.getZoomed(this.canvasPos.h, this.zoom)) {
var model = this._addMDropModel;
var callback = this._addNDropEndCallback;
- try{
- if(this[callback]){
+ try {
+ if (this[callback]) {
this[callback](this._addNDropNodePos, model, e);
}
- } catch(e){
+ } catch (e) {
this.logger.error("_onAddNDropUp", "Could not indluce callback.", e);
}
} else {
@@ -910,15 +944,15 @@ export default {
},
- _onAddCleanup (){
+ _onAddCleanup() {
- if(this._addNDropNode){
- css.remove(this._addNDropNode,"MatcCanvasAddNDropNode");
+ if (this._addNDropNode) {
+ css.remove(this._addNDropNode, "MatcCanvasAddNDropNode");
}
this._addNDropMoveCallback = null;
this._addNDropEndCallback = null;
- this._addNDropClickCallback=null;
+ this._addNDropClickCallback = null;
this._addMDropModel = null;
this._addNDropNewPos = null;
this._addLineStartId = null
@@ -926,13 +960,13 @@ export default {
delete this._addNDropModel;
delete this._addLineIsDndStarted
- if(this._addNDropMove)
+ if (this._addNDropMove)
this._addNDropMove.remove();
- if(this._addNDropUp)
+ if (this._addNDropUp)
this._addNDropUp.remove();
this._addNDropStarted = false;
- if (this._addNDropNode && this._addNDropNode.parentNode){
+ if (this._addNDropNode && this._addNDropNode.parentNode) {
this._addNDropNode.parentNode.removeChild(this._addNDropNode);
}
@@ -942,45 +976,45 @@ export default {
this.cleanUpAlignment();
},
- _onAddCancel (){
+ _onAddCancel() {
this._onAddDone();
return true;
},
- _createAddCommand (method, params){
- if(!this._addCurrentCommand){
+ _createAddCommand(method, params) {
+ if (!this._addCurrentCommand) {
this._addCurrentCommand = {
- m : method,
- p : params
+ m: method,
+ p: params
};
}
},
- _onAddDone (){
+ _onAddDone() {
/**
* The add was complete or canceled. We can delete the command!
*/
- if(this._addCurrentCommand){
+ if (this._addCurrentCommand) {
delete this._addCurrentCommand;
}
this.setMode("edit", true);
},
- renderAddCommand (){
+ renderAddCommand() {
/**
* If there is a current add going on, we
* should continue doing it...
*/
- if(this._addCurrentCommand){
- this.logger.log(3,"renderAddCommand", "enter > " + this._addCurrentCommand.m);
+ if (this._addCurrentCommand) {
+ this.logger.log(3, "renderAddCommand", "enter > " + this._addCurrentCommand.m);
var method = this._addCurrentCommand.m;
- if(this[method]){
+ if (this[method]) {
/**
* Set the last mouse move event as the event, to make sure we
* continue add the same position with the add dnd.
*/
- var params =this._addCurrentCommand.p;
+ var params = this._addCurrentCommand.p;
params.event = this._lastMouseMoveEvent;
this[method](params);
}
@@ -988,11 +1022,11 @@ export default {
}
},
- cleanUpAddNDrop (){
+ cleanUpAddNDrop() {
this._onAddCleanup();
}
- },
- mounted () {
- }
+ },
+ mounted() {
+ }
}
\ No newline at end of file
diff --git a/src/canvas/toolbar/components/ActionButton.vue b/src/canvas/toolbar/components/ActionButton.vue
index a98bc40f4..3bbac4939 100644
--- a/src/canvas/toolbar/components/ActionButton.vue
+++ b/src/canvas/toolbar/components/ActionButton.vue
@@ -67,7 +67,7 @@ export default {
.tooltip("Add Link to other screen")
.build(parent);
- db.span("mdi mdi-link-variant MatcButtonIcon").build(btn);
+ btn.appendChild(iconDOM("Link"))
db.span("MatcButtonIconLabel", "Add Link").build(btn);
this.tempOwn(on(btn, touch.press, lang.hitch(this, "onNewLine")));
@@ -164,21 +164,15 @@ export default {
* Thing set, show drop down
*/
let row = db.div("MatcToolbarItem").build(parent);
- let btn = this.$new(ToolbarDropDownButton, { maxLabelLength: 20 });
- btn.setLabel('Add Action');
+ let btn = this.$new(ToolbarDropDownButton, { maxLabelLength: 20, icon: "Link" });
+ btn.setLabel('Add Link');
btn.updateLabel = false;
btn.setOptions(this.getLineTypes());
btn.setPopupCss("MatcMultiActionDropDownPopup");
btn.reposition = true;
css.add(btn.domNode, "MatcMultiActionDropDown MatcToolbarButton MatcButton");
btn.placeAt(row);
- // btn.setShowListener(() => {
- // topic.publish("matc/canvas/fadeout", {});
- // });
- // btn.setHideListener(() => {
- // topic.publish("matc/canvas/fadein", {});
- // });
-
+
} else if (action) {
let actionCntr = db.div("MatcToobarActionSelector").build(parent);
diff --git a/src/style/canvas/canvas.scss b/src/style/canvas/canvas.scss
index f1d3b2e0b..7c6aa634e 100644
--- a/src/style/canvas/canvas.scss
+++ b/src/style/canvas/canvas.scss
@@ -1547,4 +1547,10 @@
.Xdebug .MatcBorderNode{
background: orange;
opacity:0.2;
-}
\ No newline at end of file
+}
+
+.MatcCanvasModeaddLine .MatcLineTarget,
+.MatcCanvasModeaddLine .MatcWidgetDND.MatcLineTarget {
+ outline:1px solid $canvas_selection;
+ background:rgba(73,192,240,0.3);
+}
diff --git a/src/style/toolbar/toolbar_input.scss b/src/style/toolbar/toolbar_input.scss
index d0f8cd57d..67cc8c5ae 100644
--- a/src/style/toolbar/toolbar_input.scss
+++ b/src/style/toolbar/toolbar_input.scss
@@ -41,6 +41,10 @@
text-decoration: none;
color:#fff;
height: 34px;
+
+ .MatcQIcon svg {
+ color:#fff
+ }
}
.MatcButton.MatcToolbarCloseButton {