Const r1 = new shapes.standard.Rectangle(); r1.size(120,120);
Const r2 = new shapes.standard.Rectangle(); r2.size(100,20);
r1.embed(r2);
graph.addCells([r1, r2]);
Result
I want to achieve the below expected result but the parent rectangle properties are being overridden by child properties and the parent is being automatically resized. Please suggest how to retain parent properties irrespective of child dimensions.
Expected result
It is difficult to say what the issue is from the code provided? Could you post more details or code?
The following code produces the desired result for example.
const namespace = joint.shapes;
const graph = new joint.dia.Graph({}, { cellNamespace: namespace });
const paper = new joint.dia.Paper({
el: document.getElementById('canvas'),
model: graph,
width: 600,
height: 600,
gridSize: 1,
cellViewNamespace: namespace
});
const r1 = new joint.shapes.standard.Rectangle();
r1.position(35, 35);
r1.resize(120,120);
const r2 = new joint.shapes.standard.Rectangle();
r2.position(45, 125);
r2.resize(100,20);
r1.embed(r2);
graph.addCells([r1, r2]);
Related
https://threejs.org/examples/#css3d_periodictable in this periodic table I'd like to add coneGometry
Here attached my function but I don't know how to add conegeometric coordinates to the object, please help.
function addConeObject(index) {
let object = new THREE.Object3D();
const geometry = new THREE.ConeGeometry(3,1,2);
const material = new THREE.MeshLambertMaterial({ color: 0xfb8e00 });
mesh = new THREE.Mesh(object, material);
scene.add(mesh);
targets.cone.push(object);
}
I'm super new to Vue and I'm trying to get into components.
Basically, I have the main script file with my new vue app (with a countdown function based on setInterval and in the same file a vue component( it's a stamina bar made with canvas) with width increasing and decreasing methods. Basically, I would like to decrease the bar width every second but I don't get how to call the methods declared in the component. I guess that when they are declared inside the component I could access them from everywhere, but I didn't find a proper solution ( I tried with $refs but it's not working)
Is there any way where I can call the addWidth() and subWidth() function from a method in my new Vue app?
thank you
this is the component
Vue.component('stamina', {
template: '<div><canvas ref="stamina" style="height:25px;width:300px;" /></div>',
data(){
return {
stamina_width:300,
// vueCanvas: null
}
},
methods: {
drawStamina(){
// clear canvas
this.vueCanvas.clearRect(0, 0, 300, 50);
// draw rect
this.vueCanvas.rect(20,20, this.stamina_width, 100);
//colorize with gradient
var grd = this.vueCanvas.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "orange");
grd.addColorStop(1, "green");
this.vueCanvas.fillStyle = grd;
//fill the rect with gradient
this.vueCanvas.fillRect(0, 10,this.stamina_width, 10);
},
addWidth() {
this.stamina_width += 20
this.drawStamina()
},
subWidth() {
this.stamina_width -= 20
this.drawStamina()
}
},
mounted () {
var ctx = this.$refs.stamina.getContext('2d');
this.vueCanvas = ctx;
var stam = this.stamina_width;
var grd = this.vueCanvas.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "orange");
grd.addColorStop(1, "green");
this.vueCanvas.fillStyle = grd;
//fill the rect with gradient
this.vueCanvas.fillRect(0,25,stam,25);
}
});
and this is the main vue
var match = new Vue({
el:'#app',
methods:{
//call the methods from component stamina
}
yes you can call methods up/down of parent/child components. You may need to look at creating custom events and listen for them.
Another option I believe might be less complex is to consider using Vuex.
All of your addWidth and subWidth logic will reside in a centralized place this way. All of your components--no matter how nested can "subscribe" to these things (and modify them if needed).
Check out actions. You'll dispatch an action addWidth which sends it to Vuex. In your component that is responsible for rendering the stamina bar I would use a computed property to watch for updates. Something like this:
computed: {
barWidth() {
return this.$store.getters["bar/width"]; // 20
}
}
That is just a really rough example and will not likely be what you're looking for.
VueSchool has some nice (free) courses to help get you rolling with Vuex as well.
want to create a new instance of vue-moveable whenever I drop an element on a certain div.
Below is a screenshot of my code.
https://user-images.githubusercontent.com/20570511/103152952-2a441d80-478d-11eb-98bc-9850d420353c.png
var ComponentClass = Vue.extend(Moveable)
var instance = new ComponentClass({
propsData: {
moveable: this.moveable,
}
})
instance.ondrag = this.handleDrag;
instance.onresize = this.handleResize;
instance.onScale = this.handleScale;
instance.onRotate = this.handleRotate;
instance.onWarp = this.handleWarp;
instance.onPinch = this.handlePinch;
instance.$slots.default = ['Sample Text Goes Here']
instance.$mount() // pass nothing
this.$refs.page.appendChild(instance.$el)
Vue-moveable repo: https://github.com/probil/vue-moveable
The code by the left is the actual code I wrote for creating a new instance of vue-moveable. Any help on how to get around this would be helpful.
https://user-images.githubusercontent.com/20570511/103153046-d6860400-478d-11eb-8753-3620170f1fe1.png
Green Circle is for the hardcoded vue-moveable, Red Circle is for the dynamic vue-moveable.
What are some common ways in ThreeJS to work with creating Meshes (consisting of Geometry and Materials) and then later deleting those objects?
My use case is to display lat/long points on a rotating 3D globe. Each point should be clickable and show further information. The points displayed should also be able to change based on data that is binded with Vue.
I currently use something like this but am running into memory leak issues:
var material = new THREE.MeshPhongMaterial({
color: 0xdc143c,
});
var cone = new THREE.Mesh(
new THREE.ConeBufferGeometry(radius, height, 8, 1, true),
material
);
cone.position.y = height * 0.5;
cone.rotation.x = Math.PI;
var sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(sphereRadius, 16, 8),
material
);
export default class Marker extends THREE.Object3D {
constructor() {
super();
this.name = "Marker";
this.add(cone, sphere);
}
destroy() {
this.remove(cone, sphere);
}
}
Are there libraries on top of Three that makes the management of Meshes/Materials/Geometry more simple to work with?
What I do is create a function in some utils file, and any time I need to dispose of a mesh, I pass the mesh in as the function parameter:
const removeMesh = (meshToRemove) => {
meshToRemove.visible = false;
scene.remove(meshToRemove);
meshToRemove.geometry.dispose();
meshToRemove.material.dispose();
meshToRemove= undefined;
}
Greeatings!
I'm using mxGraph and i impact with a problem. I need to create picture of created diagram on server. For this purposes i use default java servlet -java\examples\com\mxgraph\examples\web\ExportServlet.java
It's create picture, but in some cases i got inverted colors and increased fonts.
There is example of js code i use to send on server:
EditorUi.prototype.getImageXML = function(){
var graph = this.editor.graph;
var bounds = graph.getGraphBounds();
var vs = graph.view.scale;
// Resuable image export instance
var imgExport = new mxImageExport();
// New image export
var xmlDoc = mxUtils.createXmlDocument();
var root = xmlDoc.createElement('output');
xmlDoc.appendChild(root);
// Renders graph. Offset will be multiplied with state's scale when painting state.
var xmlCanvas = new mxXmlCanvas2D(root);
xmlCanvas.translate(Math.floor(( - bounds.x) / vs), Math.floor(( - bounds.y) / vs));
xmlCanvas.scale(1 / vs);
imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
// Puts request data together
var w = Math.ceil(bounds.width / vs + 2);
var h = Math.ceil(bounds.height / vs + 2);
return {
xml: encodeURIComponent(mxUtils.getXml(root)),
width: w,
height: h
};
};
There is how diagram is looks like:
Part of diagramm, as it is
And there how diag look after export:
Image of diag created by servlet
Some colors are inverted and font is increased.
Is it bug or i go wrong somewhere?