Comments (9)
Do you have svg file loader config in loaders?
example like:
{ test: /\.(gif|png|jpe?g|svg)$/i, loaders: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack-loader'] },
from pannellum-react.
problem:
reason:when I ues "npm install pannellum-react" to my project and "npm start", the problems appear.
this is my webpack config:
module: {
loaders: [
{
test: /.css$/,
loaders: ['style', 'css?modules&camelCase'],
include: PATHS.app
},
{
test: /.json$/,
loader: 'json-loader'
},
{
test: /.jsx?$/,
loader: 'babel',
include: PATHS.app
}
// ,
// {
// test: /.(gif|png|jpe?g|svg)$/i,
// loaders: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack-loader']
// }
]
}
from pannellum-react.
Sorry for late reply...
so I've configure webpack (4) from zero (usually i use create-react-app so I don't go into webpack details) and I'm able to run the component without any issue:
webpack config file:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // [email protected]
disable: true, // [email protected] and newer
},
},
],
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
and my dependencies in package.json:
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.5.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"style-loader": "^0.23.1",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"pannellum-react": "^1.0.1"
}
and my .babelrc file:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
from pannellum-react.
@farminf Ah thanks for reply.next problems,I use it as component in container, when i setState int container, react-pannellum will get render.The next are code.
from pannellum-react.
@MrSandManSy I didn't understand well the issue. Is that when you change the state in the component the image gets re-render? can you screenshot the whole component code?
from pannellum-react.
@farminf It seems like re-render.
When i click 'Hotspot',the component show 'Loading'.
When i click button 'Company abstract',the component show 'Loading'.
Below is :
Below is code:
class ImageComponent extends Component {
constructor(props) {
super(props);
this.state = {
initImg: initImg,
companyVisible: false,
}
}
changeImg = () => {
this.setState({
initImg: alma,
})
}
handleOk = (e) => {
this.setState({
companyVisible: false,
});
}
handleCancel = (e) => {
this.setState({
companyVisible: false,
});
}
openCompany = () => {
this.setState({
companyVisible: true,
})
}
render() {
return (
<div>
<Pannellum
width="100%"
height={document.documentElement.clientHeight}
image={this.state.initImg}
pitch={10}
yaw={180}
hfov={100}
autoRotate={6}
compass={true}
autoLoad={true}
orientationOnByDefault={true}
keyboardZoom={false}
mouseZoom={true}
draggable={true}
showFullscreenCtrl={false}
showZoomCtrl={false}
showControls={false}
hotspotDebug={false}
>
<Pannellum.Hotspot
type="custom"
pitch={0}
yaw={150}
handleClick={(evt, args) => this.changeImg()}
/>
</Pannellum>
<div style={{ position: 'absolute', right: '150px', top: '40px', }}>
<Button onClick={() => this.openCompany()}>Company abstract</Button>
</div>
<Modal visible={this.state.companyVisible} style={{ position: 'absolute', left: '50%', top: '50%', }} onOk={this.handleOk} onCancel={this.handleCancel}>
<p style={{ position: 'center' }}>Fasion Company</p>
<p>...</p>
<p>...</p>
</Modal>
</div>
)
}
}
function mapStateToProps(state) {
const { setRotate } = state;
return {
imgRotate: setRotate.imgRotate,
}
}
export default connect(mapStateToProps)(ImageComponent);
analyse:I guess when use 'this.setState({ ... })', pannellum will get re-render,even if the state is not belong to pannellum.This situation is not good in full view navigation.Is there any way to remove 're-render'?
from pannellum-react.
@MrSandManSy Thanks for explanation. I got the point and yes that is the issue. I need to refactor some code on the component update since - not only the states that are not related to pannellum component - ,but also by updating some of the pannellum props it shouldn't re-render the whole component.
In next days I fix it and release new version. Thanks again for pointing out this issue
from pannellum-react.
@farminf Ok,Thanks for reply in time.Your are welcome.
from pannellum-react.
I'm closing this and opened #35 for the issue
from pannellum-react.
Related Issues (20)
- Css error while using with next js. HOT 8
- Error importing into gatsby HOT 1
- Request additional react props for supporting all pannellum options HOT 2
- Randomly when moving between two pages sometimes url is not loading
- No controls HOT 1
- orientationOnByDefault not working
- a way to disable animation and timeout HOT 1
- Display context menu on Pannellum
- Hotspots bug out when using React.StrictMode
- Tour add
- Dragging Hotspot
- NextJS Support HOT 1
- Persistent Loading Bar Problem Despite Image Size Reduction
- Cannot read property 'parentNode' of undefined HOT 1
- Next.js and Pannellum-react: "Global CSS cannot be imported from within node_modules." error HOT 6
- Feature request: Custom Hotspot Children as React Component HOT 2
- Typescript support HOT 6
- Unable to use with React 17 HOT 2
- React 17.x HOT 7
- doubleClickZoom support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pannellum-react.