I am using Yjs with codemirrow 6 in my project. I followed codemirror 6 examples and Yjs codemirror.next example (https://github.com/yjs/y-codemirror.next) in github.
And when I ran it, I got this error.
Here is the source.
Please help.
Any idea is appreciated. Thanks.
================
Update 1
Here is my demo.ts
import * as Y from 'yjs'
// #ts-ignore
import { yCollab, yUndoManagerKeymap } from 'y-codemirror.next'
import { WebrtcProvider } from 'y-webrtc'
import {EditorState, EditorView, basicSetup} from "#codemirror/next/basic-setup"
import {html} from "#codemirror/next/lang-html"
//import {esLint} from "#codemirror/next/lang-javascript"
// #ts-ignore
//import Linter from "eslint4b-prebuilt"
//import {linter} from "#codemirror/next/lint"
//import {StreamLanguage} from "#codemirror/next/stream-parser"
//import {javascript} from "#codemirror/next/legacy-modes/mode/javascript"
import * as random from 'lib0/random'
export const usercolors = [
{ color: '#30bced', light: '#30bced33' },
{ color: '#6eeb83', light: '#6eeb8333' },
{ color: '#ffbc42', light: '#ffbc4233' },
{ color: '#ecd444', light: '#ecd44433' },
{ color: '#ee6352', light: '#ee635233' },
{ color: '#9ac2c9', light: '#9ac2c933' },
{ color: '#8acb88', light: '#8acb8833' },
{ color: '#1be7ff', light: '#1be7ff33' }
]
// select a random color for this user
export const userColor = usercolors[random.uint32() % usercolors.length]
const ydoc = new Y.Doc()
const provider = new WebrtcProvider('codemirror.doc', ydoc)
const ytext = ydoc.getText('codemirror')
const undoManager = new Y.UndoManager(ytext)
provider.awareness.setLocalStateField('user', {
name: 'Anonymous ' + Math.floor(Math.random() * 100),
color: userColor.color,
colorLight: userColor.light
})
let state = EditorState.create({doc: ytext.toString(), extensions: [
basicSetup,
html(),
yCollab(ytext, provider.awareness, { undoManager })
// linter(esLint(new Linter)),
// StreamLanguage.define(javascript),
]})
;(window as any).view = new EditorView({state, parent: document.querySelector("#editor")!})
Related
i use dependencies
"#react-three/drei": "7.5.1",
"#react-three/fiber": "6.2.3",
"#types/three": "0.128.0",
/* eslint-disable new-cap */
/* eslint-disable no-nested-ternary */
import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
import * as THREE from 'three';
import { useThree } from '#react-three/fiber';
import BMJUA from './BMJUA.json';
import GeometryUtils from './GeometryUtils';
const Particle = ({
children,
vAlign = 'center',
hAlign = 'center',
size = 40,
color = '#0000ef',
ref,
}: any) => {
const font = new THREE.FontLoader().parse(BMJUA);
const config = useMemo(
() => ({ font, size: 40, height: 3, bevelSegments: 5, step: 10 }),
[font]
);
const textGeoRef = useRef<THREE.TextGeometry>();
return (
<group ref={ref}>
<points>
<textGeometry
ref={textGeoRef}
attach="geometry"
args={[children, config]}
/>
<pointsMaterial size={1} sizeAttenuation vertexColors color="lime" />
</points>
</group>
);
};
export default Particle;
i tried text with points mesh
But I got the missing points.
my program screen
Why are there no intermediate midpoints?
I want to add a function to adjust the position of the text point.
Please help me
I am trying add markers dynamically/programatically after map is renderer but nothing is happening. Please see my code below
Service Code:
import { Injectable } from '#angular/core';
import { MapboxMarker, MapboxView, Mapbox } from "#nativescript-community/ui-mapbox";
import { registerElement } from '#nativescript/angular';
import { isIOS } from "#nativescript/core/platform";
#Injectable({
providedIn: 'root'
})
export class MapService {
mapboxView: MapboxView;
mapbox: Mapbox;
/**
* Creates an instance of Mapbox.
* #param config
* #memberof Mapbox
*/
constructor() {
registerElement("Mapbox", () => require("#nativescript-community/ui-mapbox").MapboxView);
}
generateMap(view: any) {
const settings = {
container: view,
accessToken: 'pk.eyJ1IjoiaGV5aXR6c3llZCIsImEiOiJjbDA5aTZlb3gwMGxsM2puejdyeTQyZnNjIn0.aJUDueGHXwKea-kN8lxn2g',
style: 'traffic_day',
margins: {
left: 18,
right: 18,
top: isIOS ? 390 : 454,
bottom: isIOS ? 50 : 8
},
center: {
lat: 52.3702160,
lng: 4.8951680
},
zoomLevel: 18, // 0 (most of the world) to 20, default 0
showUserLocation: false, // default false
hideAttribution: false, // default false
hideLogo: false, // default false
hideCompass: false, // default false
disableRotation: false, // default false
disableScroll: false, // default false
disableZoom: false, // default false
disableTilt: false, // default false
markers: [
{
id: 1,
lat: 52.3732160,
lng: 4.8941680,
title: 'Nice location',
subtitle: 'Really really nice location',
selected: true,
iconPath: '~/assets/Img/map.png',
onTap: () => console.log("'Nice location' marker tapped"),
onCalloutTap: () => console.log("'Nice location' marker callout tapped")
}
]
};
const mapView = new MapboxView();
mapView.setConfig(settings);
view.content = mapView;
}
}
Component.ts code:
import { Component, OnInit } from '#angular/core';
import { MapService } from 'map/map.service';
import { Page } from "#nativescript/core/ui/page";
import { ContentView } from "#nativescript/core/ui/content-view";
#Component({
selector: 'app-map-service-demo',
templateUrl: './map-service-demo.component.html',
styleUrls: ['./map-service-demo.component.css']
})
export class MapServiceDemoComponent implements OnInit {
constructor(public map: MapService, public page: Page) { }
ngOnInit(): void {
const contentView : ContentView = <ContentView>this.page.getViewById( 'mapContainer' );
this.map.generateMap(contentView);
}
}
Component.html code:
<StackLayout>
<ContentView height="100%" width="100%" id="mapContainer">
</ContentView>
</StackLayout>
The above implementation is not displaying markers by default even there is markers: [{}] property available in the settings.
Moreover, In the below code, I dont get what mapbox refers to
mapbox.addMarkers([
firstMarker,
{
// more markers..
}
])
Please guide me on adding markers programatically.
I am new to React Native. I am trying to build an app which has a Splash screen that would later navigate to Login screen if a user has not been authenticated or the Main screen if the user is authenticated. This is done using this.props.navigation.navigate()
The problem is that the Splash component would be mounted twice. I checked this by printing inside componentDidMount() of Splash. Because of this, the Login/Main screen enters twice, which looks very unpleasant. Is there any way to fix this?
Also, I want to add some delay when the screen changes from Splash to Login or Main using setTimeout(). Anyway to go about doing this?
Here's my code:
index.js
import React from 'react';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import reduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import { StyleSheet } from 'react-native';
import LoginScreen from './src/components/Login/LoginScreen';
import Splash from './src/components/Login/Splash';
import Navigation from './src/components/Navigation/Navigation';
import { Font } from 'expo';
import {
createStackNavigator
} from 'react-navigation';
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
const persistor = persistStore(store);
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
fontLoaded: false,
currentScreen: 'Splash',
};
setTimeout(() => this.setState({currentScreen: 'Login'}), 2000);
}
async componentDidMount() {
await Font.loadAsync({
'Quicksand': require('./assets/fonts/Quicksand-Regular.ttf'),
'Quicksand-Medium': require('./assets/fonts/Quicksand-Medium.ttf'),
'Quicksand-Bold': require('./assets/fonts/Quicksand-Bold.ttf'),
});
this.setState({ fontLoaded: true });
}
render() {
const MainNavigator = createStackNavigator({
Splash: { screen: Splash },
Main: { screen: Navigation },
Login: { screen: LoginScreen },
})
if (this.state.fontLoaded)
return (
<Provider store={store}>
<MainNavigator></MainNavigator>
</Provider>
)
else return null;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Splash.js
import React from 'react';
import { StyleSheet, Text, View, ImageBackground, Image, Button } from 'react-native';
import bgImage from '../../../assets/images/login-background2.png';
import logo from '../../../assets/images/app-logo.png';
import { connect } from 'react-redux';
import { checkAuth } from '../../actions/auth.actions';
class Splash extends React.Component {
static navigationOptions ={
header: null
}
constructor(props){
super(props);
this.state = {
stillLoading: true,
}
}
componentDidMount() {
this.props.checkAuth();
}
render() {
if (this.props.authState.isLoginPending)
return (
<ImageBackground source={bgImage} style={styles.backgroundContainer}>
<View style={styles.logoContainer}>
<Image source={logo} style={styles.logo}></Image>
<Text style={styles.logoText}> Welcome to HealthScout</Text>
</View>
</ImageBackground>
);
else if (this.props.authState.isLoginSuccess){
setTimeout(() => this.props.navigation.navigate('Main'));
return null;
}
else{
setTimeout(() => this.props.navigation.navigate('Login'));
return null;
}
}
}
const mapStateToProps = state => {
return {
authState: state.authState
}
}
const mapDispatchToProps = dispatch => {
return {
checkAuth: () => dispatch(checkAuth()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Splash);
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
justifyContent: 'center',
},
logoContainer: {
alignItems: 'center',
},
logo: {
width: 110,
height: 149,
},
logoText: {
color: '#fff',
fontSize: 40,
fontFamily: 'Quicksand',
opacity: 0.7,
marginTop: 20,
marginBottom: 10,
textAlign: 'center',
},
});
Solution
Take out the createStackNavigator from render.
It is better way wrapping screens above App class.
const MainNavigator = createStackNavigator({
Splash: { screen: Splash },
Main: { screen: Navigation },
Login: { screen: LoginScreen },
})
export default class App extends React.Component {
...
Why?
render is run repeatedly depends on various conditions as changing state, props and so on.
And your code looks making multiple components with createStackNavigation in render. Take out :)
p.s If you want to wait loading fonts before show home screen, just change to home screen from splash screen after loaded fonts. Thus, the better way is loading fonts in SplashScreen and do what you want.
I get the following error: TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
I know I can suppress this by setting "experimentalDecorators": true in tsconfig.json.
But I would still like to know why I get the error from this code:
import * as React from "react";
import scriptLoader from 'react-async-script-loader'
#scriptLoader(['https://maps.googleapis.com/maps/api/js?key=your-key'])
export default class Maps extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.map = null;
}
refs: {
[string: string]: any;
map: any;
}
map: any;
componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
if (isScriptLoadSucceed) {
this.map = new google.maps.Map(this.refs.map, {
center: { lat: 10.794234, lng: 106.706541 },
zoom: 20
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
this.map.setCenter(pos);
const marker = new google.maps.Marker({
position: pos,
map: this.map,
title: 'Hello World!'
});
}, () => {
console.log('navigator disabled');
});
} else {
// Browser doesn't support Geolocation
console.log('navigator disabled');
}
}
else this.props.onError()
}
}
render() {
return (
<div>
<div ref="map" style={{ height: '80%', width: '100%' }}></div>
{!this.map && <div className="center-md">Loading...</div>}
</div>
)
}
}
But I would still like to know why I get the error from this code:
Because you are using a decorator in #scriptLoader(['https://maps.googleapis.com/maps/api/js?key=your-key']).
I am trying to change the opacity of an element, per mouseEnter and mouseLeave events:
import React, { Component, PropTypes } from 'react';
import d3 from 'd3';
import Bar from './Bar';
import lodash from 'lodash';
export default class DataSeries extends Component {
static propTypes = {
availableHeight: PropTypes.number,
data: PropTypes.array,
height: PropTypes.number,
offset: PropTypes.number,
width: PropTypes.number
}
constructor() {
super();
this.state = ({
opacity: 1
});
}
onMouseEnterHandler() {
this.setState({ opacity: 0.5 });
}
onMouseLeaveHandler() {
this.setState({ opacity: 1 });
}
render() {
const props = this.props;
const yScale = d3.scale.linear()
.domain([0, d3.max(this.props.data)])
.range([0, this.props.height]);
const xScale = d3.scale.ordinal()
.domain(d3.range(this.props.data.length))
.rangeRoundBands([0, this.props.width], 0.05);
const colors = d3.scale.linear()
.domain([0, this.props.data.length])
.range(['#FFB832', '#C61C6F']);
const bars = lodash.map(this.props.data, function(point, index) {
return (
<Bar height={ yScale(point) } width={ xScale.rangeBand() }
offset={ xScale(index) } availableHeight={ props.height }
color={ colors(point) } key={ index }
onMouseEnter={ () => this.onMouseEnterHandler() }
onMouseLeave={ () => this.onMouseLeaveHandler() }
style = { { opacity: this.state.opacity } } <-- error points here
/>
);
});
return (
<g>{ bars }</g>
);
}
}
DataSeries.defaultPropTypes = {
title: '',
data: []
};
I am receiving the error:
TypeError: Cannot read property 'state' of undefined(…)
I see one issue is 'this' needs to be passed in. The other change is probably optional.
let vm = this;
let bars = lodash.map(this.props.data, function(point, index, vm) {
let opacity = { opacity: vm.state.opacity };
return (
<Bar height={ yScale(point) } width={ xScale.rangeBand() }
offset={ xScale(index) } availableHeight={ props.height }
color={ colors(point) } key={ index }
onMouseEnter={ vm.onMouseEnterHandler }
onMouseLeave={ vm.onMouseLeaveHandler }
style = { opacity }
/>
);
});