how to use both this.function in Vue.js - html

This is mine handleMove function which is basically working like
<div class="container" #mousemove="handleMove"></div>
I want to pass Multiple function where i have bold in the code the problem is that when i am doing this.moveSelectedNode(diffX,diffY) the other
this.moveSelectedDecision is not working
The issue is that one Nodes are going in this.moveSelectedDecision and vice versa for the decisions
when i Comment the One this the other this is working Fine
When i comment one this.moveSelectedNode or this.moveSelectedDecision the other one is working all fine
handleMove(e) {
if (this.action.linking) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
[this.draggingLink.mx, this.draggingLink.my] = [this.mouse.x, this.mouse.y];
}
if (this.action.dragging) {
this.mouse.x = e.pageX || e.clientX + document.documentElement.scrollLeft
this.mouse.y = e.pageY || e.clientY + document.documentElement.scrollTop
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.moveSelectedNode(diffX, diffY);
**this.moveSelectedDecision(diffX,diffY);**
console.log('I am here');
}
if (this.action.scrolling) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.scene.centerX += diffX;
this.scene.centerY += diffY;
// this.hasDragged = true
}
},
These are mine moveSelectedNode and moveSelectedDecision function which i am passing up in handleMove
moveSelectedNode(dx, dy) {
let index = this.scene.nodes.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.nodes[index].x + dx / this.scene.scale;
let top = this.scene.nodes[index].y + dy / this.scene.scale;
this.$set(this.scene.nodes, index, Object.assign(this.scene.nodes[index], {
x: left,
y: top,
}));
},
moveSelectedDecision(dx, dy) {
let index = this.scene.decisions.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.decisions[index].x + dx / this.scene.scale;
let top = this.scene.decisions[index].y + dy / this.scene.scale;
this.$set(this.scene.decisions, index, Object.assign(this.scene.decisions[index], {
x: left,
y: top,
}));
},

Related

Issue with using HTML for Floating button in react and not material UI

Working on a requirement that needs the usage of floating button to hide and show a menu, implementing this using material UI functions as needed, but if i change this to a button with icon using normal html and css doesn't work as required.
Expected behavior - on click of hide button present on the menu the menu section is hidden when a floating button is shown up, this button is used to flow around the screen on click and mouse drag and can be released freely and when clicked again the menu is again shown,
Where as if i change this to a normal html and css button the behavior is a bubble that appears with drag of the button and also the until i click back i wont be able to release the arrow from the button until clicked.
const [position, setPosition] = useState({ x: 75, y: 75 });
//Ref are needed instead of states so they can be used in handle move
const vector = useRef({ x: 0, y: 0 });
const clicked = useRef(false);
const oldPosition = useRef(position);
useEffect(() => {
const cachedPos = localStorage.getItem('OpenMenuIconPosition');
if (cachedPos) {
const newPos = JSON.parse(cachedPos);
const clampNewPos = {
x: clamp(newPos.x, 0, window.innerWidth - 60),
y: clamp(newPos.y, 0, window.innerHeight - 60)
};
setPosition(clampNewPos);
oldPosition.current = clampNewPos;
}
}, []);
const handleMouseDown = e => {
e.stopPropagation();
clicked.current = true;
vector.current = {
x: e.clientX - position.x,
y: e.clientY - position.y
};
window.addEventListener('mousemove', handleMove);
};
const handleMove = e => {
e.stopPropagation();
if (clicked.current === true) {
setPosition({
x: clamp(e.clientX - vector.current.x, 0, window.innerWidth - 60),
y: clamp(e.clientY - vector.current.y, 0, window.innerHeight - 60)
});
}
};
const handleMouseUp = e => {
e.stopPropagation();
clicked.current = false;
if (Math.abs(oldPosition.current.x - position.x) < 5 && Math.abs(oldPosition.current.y - position.y) < 5) showMenu();
oldPosition.current = position;
window.removeEventListener('mousemove', handleMove);
localStorage.setItem('OpenMenuIconPosition', JSON.stringify(position));
};
const handleTouchDown = e => {
e.stopPropagation();
clicked.current = false;
vector.current = {
x: e.changedTouches[0].clientX - position.x,
y: e.changedTouches[0].clientY - position.y
};
window.addEventListener('touchmove', handleTouchMove);
};
const handleTouchMove = e => {
e.stopPropagation();
if (clicked.current === true) {
setPosition({
x: clamp(e.changedTouches[0].clientX - vector.current.x, 0, window.innerWidth - 60),
y: clamp(e.changedTouches[0].clientY - vector.current.y, 0, window.innerHeight - 60)
});
}
};
const handleTouchUp = e => {
e.stopPropagation();
clicked.current = false;
if (Math.abs(oldPosition.current.x - position.x) < 5 && Math.abs(oldPosition.current.y - position.y) < 5) showMenu();
oldPosition.current = position;
window.removeEventListener('touchmove', handleTouchMove);
localStorage.setItem('OpenMenuIconPosition', JSON.stringify(position));
};
const [overButton, setOverButton] = useState(false);
const mouseMoveListener = e => {
if (e.clientX < 200 && e.clientY < 200) {
setOverButton(true);
} else {
setOverButton(false);
}
};
const limitedListener = useRef(throttle(mouseMoveListener, 1000));
const { updateState } = useContext(AppContext);
const showMenu = () => {
window.removeEventListener('mousemove', limitedListener.current);
setOverButton(false);
updateState('isMenuHidden', false);
}
return (
<div overButton className="floating-wrapper"><a className="floating-btn"
onMouseUp={e => handleMouseUp(e)}
onMouseDown={e => handleMouseDown(e)}
onTouchStart={e => handleTouchDown(e)}
onTouchEnd={e => handleTouchUp(e)}
style={{ top: position.y, left: position.x }}>
<img src="/imgs/action_add.svg" alt="Menu" className="menu-icon" /></a></div>
);
}

Can I change text contents in the viewer?

I understand that access to the db is read-only, but can I change the text that is displayed by the viewer, i.e. overwrite the displayValue attribute of MText elements? Kind regards, Gregor
viewer.getProperties(dbid, (props) => {
// get set of properties for a dbid
// var properties = props.properties is an array of properties
}
{
attributeName: "Contents"
displayCategory: "Text"
displayName: "Contents"
displayValue: "some text i would like to change"
hidden: false
precision: 0
type: 20
units: null
}
Not sure why you want to change the specific text of the item properties. The simplest way is to create a driven class of the ViewerPropertyPanel and override ViewerPropertyPanel.prototype.setNodeProperties.
class MyViewerPropertyPanel extends Autodesk.Viewing.Extensions.ViewerPropertyPanel {
constructor( viewer ) {
super( viwer );
}
setNodeProperties( nodeId ) {
var that = this;
this.propertyNodeId = nodeId;
that.currentModel.getProperties(nodeId, function (result) {
if (!that.viewer)
return;
that.setTitle(result.name);
//!!!<<<<
// Modofy contents of `result.properties` here
//!!!<<<<
that.setProperties(result.properties);
that.highlight(that.viewer.searchText);
that.resizeToContent();
if (that.isVisible()) {
var toolController = that.viewer.toolController,
mx = toolController.lastClickX,
my = toolController.lastClickY,
panelRect = that.container.getBoundingClientRect(),
px = panelRect.left,
py = panelRect.top,
pw = panelRect.width,
ph = panelRect.height,
canvasRect = that.viewer.canvas.getBoundingClientRect(),
cx = canvasRect.left,
cy = canvasRect.top,
cw = canvasRect.width,
ch = canvasRect.height;
if ((px <= mx && mx < px + pw) && (py <= my && my < py + ph)) {
if ((mx < px + (pw / 2)) && (mx + pw) < (cx + cw)) {
that.container.style.left = Math.round(mx - cx) + 'px';
that.container.dockRight = false;
} else if (cx <= (mx - pw)) {
that.container.style.left = Math.round(mx - cx - pw) + 'px';
that.container.dockRight = false;
} else if ((mx + pw) < (cx + cw)) {
that.container.style.left = Math.round(mx - cx) + 'px';
that.container.dockRight = false;
} else if ((my + ph) < (cy + ch)) {
that.container.style.top = Math.round(my - cy) + 'px';
that.container.dockBottom = false;
} else if (cy <= (my - ph)) {
that.container.style.top = Math.round(my - cy - ph) + 'px';
that.container.dockBottom = false;
}
}
}
});
}
}
// Replace propertry panel to our owned
viewer.setPropertyPanel( new MyViewerPropertyPanel( viewer ) );
Enjoy it!

Vue multiple this.function() is not working

This is mine handleMove function which is basically working like
<div class="container" #mousemove="handleMove"></div>
I want to pass Multiple function where i have bold in the code the problem is that when i am doing this.moveSelectedNode(diffX,diffY) the other
this.moveSelectedDecision is not working
The issue is that one Nodes are going in this.moveSelectedDecision and vice versa for the decisions
when i Comment the One this the other this is working Fine
When i comment one this.moveSelectedNode or this.moveSelectedDecision the other one is working all fine
handleMove(e) {
if (this.action.linking) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
[this.draggingLink.mx, this.draggingLink.my] = [this.mouse.x, this.mouse.y];
}
if (this.action.dragging) {
this.mouse.x = e.pageX || e.clientX + document.documentElement.scrollLeft
this.mouse.y = e.pageY || e.clientY + document.documentElement.scrollTop
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.moveSelectedNode(diffX, diffY);
**this.moveSelectedDecision(diffX,diffY);**
console.log('I am here');
}
if (this.action.scrolling) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.scene.centerX += diffX;
this.scene.centerY += diffY;
// this.hasDragged = true
}
},
These are mine moveSelectedNode and moveSelectedDecision function which i am passing up in handleMove
moveSelectedNode(dx, dy) {
let index = this.scene.nodes.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.nodes[index].x + dx / this.scene.scale;
let top = this.scene.nodes[index].y + dy / this.scene.scale;
this.$set(this.scene.nodes, index, Object.assign(this.scene.nodes[index], {
x: left,
y: top,
}));
},
moveSelectedDecision(dx, dy) {
let index = this.scene.decisions.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.decisions[index].x + dx / this.scene.scale;
let top = this.scene.decisions[index].y + dy / this.scene.scale;
this.$set(this.scene.decisions, index, Object.assign(this.scene.decisions[index], {
x: left,
y: top,
}));
},

FabricJS - How to dragging an object in Shape filled object?

Im trying to drawing line Shape (fabric.Line).
and then after drawn shape. it filled image.
When finished drawing an shape, I want to drag an filled image (inside Shape)
Here is the jsfiddle >> http://jsfiddle.net/dTpVw/
var canvas = new fabric.Canvas('c', { selection:false });
var mode = "add";
var currentShape;
canvas.observe("mouse:move", function (event) {
var pos = canvas.getPointer(event.e);
if (mode === "edit" && currentShape) {
if (currentShape.type === "line") {
currentShape.set({
x2 : pos.x,
y2 : pos.y
});
canvas.renderAll();
} else if (currentShape.type === "polygon") {
var points = currentShape.get("points");
points[points.length - 1].x = pos.x - currentShape.get("left");
points[points.length - 1].y = pos.y - currentShape.get("top");
currentShape.set({
points : points
});
canvas.renderAll();
}
}
});
canvas.observe("mouse:down", function (event) {
var pos = canvas.getPointer(event.e);
if (mode === "add") {
var polygon = new fabric.Line([ pos.x, pos.y, pos.x + 2,
pos.y + 2 ], {
fill : 'red'
});
currentShape = polygon;
canvas.add(currentShape);
mode = "edit";
} else if (mode === "edit" && currentShape
&& currentShape.type === "line") {
// replace line with polygon
canvas.remove(currentShape);
var points = [];
points.push({
x : currentShape.x1 - pos.x,
y : currentShape.y1 - pos.y
});
points.push({
x : currentShape.x2 - pos.x,
y : currentShape.y2 - pos.y
});
points.push({
x : currentShape.x2 - pos.x + 5,
y : currentShape.y2 - pos.y + 5
});
var polygon = new fabric.Polygon(points, {
fill : 'blue',
left : pos.x,
top : pos.y,
opacity: 0.5 // 투명도 적용
});
canvas.add(polygon);
Spolygon = polygon;
currentShape = polygon;
canvas.renderAll();
} else if (mode === "edit" && currentShape
&& currentShape.type === "polygon") {
var points = currentShape.get("points");
points.push({
x : pos.x - currentShape.get("left"),
y : pos.y - currentShape.get("top")
});
currentShape.set({
points : points
});
canvas.renderAll();
}
});
function loadPattern(url) {
fabric.util.loadImage(url, function(img) {
console.log(Spolygon);
Spolygon.fill = new fabric.Pattern({
source : img,
repeat : 'repeat'
});
canvas.renderAll();
});
Spolygon.hasControls = false;
// Spolygon.selectable = false;
Spolygon.hasRotatingPoint = false;
Spolygon.lockMovementX = true;
Spolygon.lockMovementY = true;
}
function dblClickHandler(event)
{
currentShape.setCoords();
mode ="add2";
loadPattern('http://fabricjs.com/assets/retina_wood.png');
};
fabric.util.addListener(fabric.document, 'dblclick', dblClickHandler);
//fabric.util.removeListener(canvas.upperCanvasEl, 'dblclick', dblClickHandler);
Thank you for reading my question... Please someone help me T_T
Try something like this in your dblClickHandler event:
function dblClickHandler(event)
{
currentShape.setCoords();
mode ="add2";
loadPattern('http://fabricjs.com/assets/retina_wood.png');
//alert(currentShape.height);
//alert(currentShape.width);
currentShape.hasControls = true;
currentShape.hasRotatingPoint = true;
currentShape.lockMovementX = false;
currentShape.lockMovementY = false;
canvas.setActiveObject(currentShape);
canvas.renderAll();
};
I have updated your fiddle: http://jsfiddle.net/dTpVw/3/
I hope it helps...

jQuery click() each() unique?

I want to have multiple span.play without IDs which can be clicked and play some audio file.
Problem: Display the duration on only the current file $(this)
$('.play').each(function() {
$(this).append('<span class="playIcon"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fairytale_player_play.png/14px-Fairytale_player_play.png"></span><span class="playDur"></span>');
$(this).click(function() {
var file = this.firstChild;
if (file.paused != false) {
//+ stop all others before playing new one
file.play();
} else {
file.pause();
}
file.addEventListener("timeupdate", function() {
var len = file.duration,
ct = file.currentTime,
s = parseInt(ct % 60),
m = parseInt((ct / 60) % 60);
if (s < 10) {
s = '0' + s;
}
$(".playDur").html(' (' + m + ':' + s + ')');
if (ct == len) {
$(".playDur").html('');
}
}, false);
});
});
Test:
http://jsfiddle.net/sQPPP/
http://jsfiddle.net/sQPPP/1/ - using $(this).children( ".foo" )
You need to save .play jQuery object in a variable, as this changes within the addEventListener callback.
http://jsfiddle.net/sQPPP/2/
$('.play').each(function(index) {
var $play = $(this);
$play.append('<span class="playIcon"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fairytale_player_play.png/14px-Fairytale_player_play.png"></span><span class="playDur"></span>');
$play.click(function() {
var file = this.firstChild;
if (file.paused != false) {
//+ stop all others before playing new one
file.play();
} else {
file.pause();
}
file.addEventListener("timeupdate", function() {
var len = file.duration,
ct = file.currentTime,
s = parseInt(ct % 60),
m = parseInt((ct / 60) % 60);
if (s < 10) {
s = '0' + s;
}
$play.children( ".playDur" ).html(' (' + m + ':' + s + ')');
if (ct == len) {
$play.children( ".playDur" ).html('');
}
}, false);
});
});​