When working with version 2.2.1 of JointJS I imported it like this:
import { default as joint } from "jointjs";
Now I'm working with version 3.0.2. "joint" from the line above is undefined. The import no longer works. I noticed in the release notes for JointJS 3.0.0:
Notable changes -
full support for ES Modules
How should I import it now?
there is no default import anymore,
import * as joint from 'jointjs' works just fine. If need a smaller bundle you can cherry pick parts you actually need:
import { dia } from 'jointjs/src/core.mjs';
// import shapes you need
import * as standard from 'jointjs/src/shapes/standard.mjs';
const graph = new dia.Graph([], { cellNamespace: { standard } });
new dia.Paper({
cellViewNamespace: { standard },
el: document.getElementById('paper'),
width: 500, height: 500,
model: graph
});
const rectangle = new standard.Rectangle().size(200, 200).position(100, 100).addTo(graph)
Please note you need to be careful with the cellViewNamespace for the dia.Paper and cellNamespace option for the dia.Graph in this setup. Otherwise, you could encounter the Uncaught Error: dia.ElementView: markup required error
runnig this snippet is a quick check you've set up the namespaces correctly:
const cells = JSON.stringify(graph.toJSON());
graph.clear();
graph.fromJSON(JSON.parse(cells));
Related
I am using highcharts and highcharts-angular in order to create a pdf with multiple graphs, using the offline exporting.
Previous to the upgrade to highcharts 9.0.1 I have been using highcharts 8.2 and highcharts-angular 2.4 and everything worked fine. After upgrade I keep encountering this error
[]
My code looks like:
import * as Highcharts from 'highcharts';
import HC_exporting from "highcharts/modules/exporting";
import offlineExporting from "highcharts/modules/offline-exporting";
HC_exporting(Highcharts);
offlineExporting(Highcharts);
import { defaultSeriesColorsArray, defaultSpecialColorsArray, defaultSpecialColorsEnum } from '../../constants/colors.constants';
import { ChartModel, PieChartModel } from '../../models/chart.model';
export class ChartOptionsHelper {
constructor() {
}
public static buildChart(options: Highcharts.Options): any {
const chartDiv = document.createElement('div');
const charAsSVG = Highcharts.chart(chartDiv, options).getSVG();
return charAsSVG;
}
}
So far I have tried moving the calls to HC_exporting and offlineExporting before the getSVG is being called, but the error persisted. The only way I managed to get rid of the error is by removing those 2 calls.
Is there a workaround or a fix for this issue? I have not seen any information about these methods being deprecated
This is my first time making graphs in React so I'm following the guide and documentation. I have no prior experience with graphology, sigma.js or react-sigma (I know how to use normal React).
The setup documentation says:
Import the React Sigma style file in your application. Example : import "#react-sigma/core/lib/react-sigma.min.css"
What are style files? CSS? How can I make one? I can't find any documentation. Is it something basic from a previous library?
Honestly I'm finding it very hard to learn sigma.js and insert it in my react website. I can't find any guides. Are there any? I just want to start with a simple graph and learn from there.
The documentation refers specifically to their own CSS file which must be imported in a React app like they are showing in the example:
import "#react-sigma/core/lib/react-sigma.min.css";
Disclaimer: depending on your React app setup, the way to import a CSS file might differ.
The example in the documentation was broken when I wrote this answer. I opened an issue on the react-sigma repo and it was fixed since then.
When I tried it, some dependencies were missing and some changes were needed.
npm install #react-sigma/core sigma graphology graphology-types lodash
import { useEffect } from "react";
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "#react-sigma/core";
// Import the style file here
import "#react-sigma/core/lib/react-sigma.min.css";
export const LoadGraph = () => {
// first change to their example
const loadGraph = useLoadGraph();
// also wrapped their graph instantiation side-effect with useEffect
useEffect(() => {
const graph = new Graph();
graph.addNode("first", {
// Required position
x: 1,
y: 1,
size: 15,
label: "My first node",
color: "#FA4F40"
});
// Calling the function that was missing from the example
loadGraph(graph);
}, [loadGraph]);
// Returning null to get a valid component
return null;
};
export const DisplayGraph = () => {
return (
<SigmaContainer style={{ height: "500px", width: "500px" }}>
<LoadGraph />
</SigmaContainer>
);
};
Note that I used TypeScript for the example, which gives insightful error messages since react-sigma provides its own types.
Then it was clear that the useLoadGraph hook wasn't used properly since it doesn't accept any parameter and it returns a function accepting a graph parameter. This can be confirmed with the API documentation.
I also figured that lodash was missing from errors in the developer console.
Please refer to the documentation as it's now up-to-date.
I thought react is less pain than Angular for such projects, and you could still mix "plain" javascript into your project. So I have in my react project in index.html this script tags:
I try to integrate this example of AR.js into my react component.
<script src='libs/three/example/vendor/three.js/build/three.js'></script>
<!-- jsartookit -->
<script src="libs/three/vendor/jsartoolkit5/build/artoolkit.min.js"></script>
<script src='libs/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include threex.artoolkit -->
<script src="libs/three/src/threex/threex-artoolkitsource.js"></script>
<script src="libs/three/src/threex/threex-artoolkitcontext.js"></script>
<script src="libs/three//src/threex/threex-arbasecontrols.js"></script>
<script src="libs/three/src/threex/threex-armarkercontrols.js"></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
Now I want in my ARcomponent.js make use of this THREE and THREEx:
import React, { Component } from 'react'
export class ARcomponent extends Component {
componentDidMount() {
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: true
});
//...
}
render() {
return (
<div className="canvas">
</div>
)
}
}
export default ARcomponent
but I get the error message that THREE and THREEx are undefined..
Line 200:20: 'THREE' is not defined no-undef
How can I use Three.js with AR.js (NOT with fiber! not with Aframe!) in my react project? Yes I tried npm install three - but where do I get THREEx and AR.js as npm packages?
Even when I get those errors and my app breaks - when I check on the F12 console THREE and THREEx are loaded.. maybe I need somehow wait a bit longer in my component with using THREE and THREEx?
AR.js in a React environment
AR.js not provide a npm package with ES6 standard yet but there is a PR #116 on the way to add this feature. In the meantime folow this instructions if you want to test:
import AR.js with npm
You need to manually write the import (in package.json) in this way:
"#ar-js-org/ar.js": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
where the <GIT_COMMIT_HASH> is the latest git commit hash (take it from the latest commit in the ES6 branch!)
Example code
I will not post the whole code, but consider that Ar.js is based on Three.js and the preferable way to load it, is in the ComponentDidMount:
import React from 'react'
import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'arjs/three.js/build/ar-threex.js';
import * as THREE from 'three';
export default class ThreexComp extends React.Component {
componentDidMount() {
// your AR.js code here!
}
render() {
return (
<div
style={{ width: "800px", height: "800px" }}
ref={mount => { this.mount = mount}}
/>
)
}
}
You can take a look at this my testing example here: and you can also take in consideration this issue
Final considerations
Importing Ar.js as a npm package, with the ES6 standard, it will be the best way to import into React and similar frameworks. But it is still in devlopment,and could be some bugs. Anyway we think to merge in the dev branch soon and publish a first beta package.
I have made a web application based around an OpenLayers. I installed OpenLayers through npm, and made everything work.
Due to changes in requirements (yay), i need to remove everything node related, and replace it with local files.
All examples i have been able to find (including on OpenLayers own example page), are doing it the Node way.
So far i have downloaded the dist version of OpenLayers from here: https://openlayers.org/download/
And added that file to my project.
Now i don't get how i'm supposed to replace all my imports, with calls to this file.
This is all the imports i want to replace:
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import TileWMS from "ol/source/TileWMS";
import { get as getProjection } from "ol/proj";
import Projection from "ol/proj/Projection.js";
import { getTopLeft } from "ol/extent.js";
import { register } from "ol/proj/proj4.js";
When you add this as a normal script tag you will get a global var called ol..
So all you would need to do is ->
const { Map, View } = ol;
const TileLayer = ol.layer.Tile;
//etc..
It seems I have a fundamental lack of understanding when it comes to import vs require. From what I've read I know the difference is that require is based on a module loaders like CommonJS while import is actually an ES6 feature.
Assuming the following:
import ExamplePost from 'example-post.md'
This is an example import with MDX JS as appropriate loader and I
set this in my React render function like:
render () {
return <ExamplePost />
}
The above works perfectly fine, but
as I want to dynamically load different Markdown files and I have read that ES6 import are static I intended to go like:
let postName = 'example-post'
const ExamplePost = require(`${postName}.md`)
Unfortunately it doesn't work, I am getting: ExamplePost is not defined
I'm setting both examples at the top of the document. I also inspected both versions and I can see a difference in the outcome:
ES6 import returns: [Function]
Require returns: Object [Module] { default: [Function] }
Help to get me on the right track on why the require above does not work the same?
You import the default export of module and require the module itself.
const ExamplePost = require(`${postName}.md`).default
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Also check Can't require() default export value in Babel 6.x