Reactjs 删除具有相同组件名称的上一个形状组件时，如何避免形状更改大小和位置？康瓦
我在使用react konva时遇到了这个问题。当我移除阵列中的形状时，所有形状都移动到初始位置，如果形状放置在删除形状上方的一个位置，并且具有相同的组件名称，例如：deleted===RegularPolygon和RegularPolygon正上方的一个，然后，它将采用与已删除零部件相同的位置以及相同的大小和旋转。我尝试过将索引更改为删除时的最远位置，也尝试过将其删除并放置在数组顶部，但仍然不起作用。使用strictMode会使形状在删除时变大，而不会保持其初始大小。我只是希望所有形状在从数组中删除形状时保持相同的位置、大小和旋转，我如何才能做到这一点 代码相当大，但以下是相关的代码块： 母国：Reactjs 删除具有相同组件名称的上一个形状组件时，如何避免形状更改大小和位置？康瓦,reactjs,react-konva,konvajs-reactjs,Reactjs,React Konva,Konvajs Reactjs,我在使用react konva时遇到了这个问题。当我移除阵列中的形状时，所有形状都移动到初始位置，如果形状放置在删除形状上方的一个位置，并且具有相同的组件名称，例如：deleted===RegularPolygon和RegularPolygon正上方的一个，然后，它将采用与已删除零部件相同的位置以及相同的大小和旋转。我尝试过将索引更改为删除时的最远位置，也尝试过将其删除并放置在数组顶部，但仍然不起作用。使用strictMode会使形状在删除时变大，而不会保持其初始大小。我只是希望所有形状在从数组
constructor(props){
super(props)
//this.animationDeleteInheritance = React.createRef();
this.state={
chosenSelectedCategory:"",
animations:false,
chooseColor:"",
paused:true,
timerString:"00",
timer: 0,
colorPicker:false,
selectedDestinationID:"",
selectedRouteID:"",
selectedElementsID:"",
selectedType:"",
elements:[],
destinations:[],
routes:[],
travelers:[],
konva:false
//final destination
}
}
//this.animationDeleteInheritance.current.animationInheritance（）
console.log（this.state.selectedType）
//让s=[]
设r=[]
for（设i=0；i{
返回
})
}
render(){
const polygon= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
ref={node => {
this.polygon = node;
}}
sides= {6} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
sides= {6} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const triangle= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
ref={node => {
this.polygon = node;
}}
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
sides= {3} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
sides= {3} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const rectangle= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
ref={node => {
this.polygon = node;
}}
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const borderRectangle= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
ref={node => {
this.polygon = node;
}}
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
cornerRadius= {8}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
cornerRadius= {8}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const oval= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Ellipse
id="konva"
ref={node => {
this.polygon = node;
}}
draggable="true"
x= {300}
y= {200}
width={80}
height={80}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {40}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Ellipse
id="konva"
draggable="true"
x= {300}
y= {200}
width={80}
height={80}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {40}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const line= <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Line id="konva"
points={[this.props.rX,this.props.rY,this.props.sX,this.props.sY]}
visible={this.props.visibilityStatus===false ? false :true}
fill={`${this.props.color}`}
stroke={`${this.props.color}`}
strokeWidth={2.5}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*70/10 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
} />
<Rect
id="r"
ref={node => {
this.pointR = node;
}}
//zIndex={1}
draggable="true"
cornerRadius= {2}
x={this.props.rX -5}
y={this.props.rY - 5}
width={10}
height={10}
fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
<Rect
ref={node => {
this.pointS = node;
}}
id="s"
// zIndex={1}
draggable="true"
cornerRadius= {2}
x={this.props.sX -5}
y={this.props.sY - 5}
width={10}
height={10}
fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
</Group>
const arrow=
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} zIndex={this.props.elements.length -1} >
<Arrow
points={[this.props.rX,this.props.rY,this.props.sX,this.props.sY]}
pointerLength={10}
pointerWidth={10}
id="konva" fill={`${this.props.color}`}
visible={this.props.visibilityStatus===false ? false :true}
stroke={`${this.props.color}`}
strokeWidth={2.5}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}/>
<Rect
id="r"
ref={node => {
this.pointR = node;
}}
//zIndex={1}
cornerRadius= {2}
x={this.props.rX - 5}
y={this.props.rY - 5}
width={10}
height={10}
draggable={true} fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
<Rect
id="s"
ref={node => {
this.pointS = node;
}}
//zIndex={1}
cornerRadius= {2}
x={this.props.sX -5}
y={this.props.sY - 5}
width={10}
height={10}
draggable={true} fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
</Group>
return(
this.props.element==="line" ? line : this.props.element==="polygon" ? polygon :
this.props.element==="triangle" ? triangle : this.props.element==="rectangle" ? rectangle :
this.props.element==="Oval" ? oval :
this.props.element==="border rectangle" ? borderRectangle :arrow
)
}
}
render（）{
const polygon=this.props.id==this.props.selectedElementsID？
{
this.polygon=节点；
}}
三角形的边={6}//3
fill={this.props.color}
//笔划=‘黑色’
//冲程宽度={4}
visible={this.props.visibilityStatus==false？false:true}
dragBoundFunc={pos=>{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
{
this.transformer=节点；
}}
/>
:
{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
const triangle=this.props.id==this.props.selectedElementsID？
{
this.polygon=节点；
}}
指针长度={20}
draggable=“true”
指针宽度={20}
x={300}
y={200}
宽度={60}
高度={90}
三角形的边={3}//3
fill={this.props.color}
//笔划=‘黑色’
//冲程宽度={4}
visible={this.props.visibilityStatus==false？false:true}
dragBoundFunc={pos=>{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
{
this.transformer=节点；
}}
/>
:
{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
const rectangle=this.props.id==this.props.selectedElementsID？
{
this.polygon=节点；
}}
指针长度={20}
draggable=“true”
指针宽度={20}
x={300}
y={200}
宽度={100}
高度={60}
fill={this.props.color}
//笔划=‘黑色’
//冲程宽度={4}
visible={this.props.visibilityStatus==false？false:true}
dragBoundFunc={pos=>{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
{
this.transformer=节点；
}}
/>
:
{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
const borderRectangle=this.props.id==this.props.selectedElementsID？
{
this.polygon=节点；
}}
指针长度={20}
draggable=“true”
指针宽度={20}
x={300}
y={200}
宽度={100}
高度={60}
拐角半径={8}
fill={this.props.color}
//笔划=‘黑色’
//冲程宽度={4}
visible={this.props.visibilityStatus==false？false:true}
dragBoundFunc={pos=>{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
{
this.transformer=节点；
}}
/>
:
{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
const oval=this.props.id==this.props.selectedElementsID？
{
this.polygon=节点；
}}
draggable=“true”
x={300}
y={200}
宽度={80}
高度={80}
fill={this.props.color}
//笔划=‘黑色’
//冲程宽度={40}
visible={this.props.visibilityStatus==false？false:true}
dragBoundFunc={pos=>{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
{
this.transformer=节点；
}}
/>
:
{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*4/5？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
}
/>
常数线=
{
var Ylimit=pos.y>window.innerHeight*8.65/10？window.innerHeight*8.65/10:pos.y
var Xlimit=pos.x>window.innerWidth*70/10？window.innerWidth*4/5:pos.x
返回{
x:pos.x，
y:位置y
};}
} />
{
this.pointR=节点；
}}
//zIndex={1}
draggable=“true”
拐角半径={2}
x={this.props.rX-5}
y={this.props.rY-5}
宽度={10}
高度={10}
fill=“绿色”
可见={this.props.visibilityS
<div class="designScreen" >
<Stage
width={window.innerWidth*4/5}
height={window.innerHeight*8.65/10}
onClick={this.getKonvaChildren}
onMouseDown={this.activateRouteTrigger} onMouseUp={this.deactivateRouteTrigger} onDragMove={this.updateRoute}
>
<Layer onClick={this.getKonvaChildren}
>
{
this.state.elements.map((el) => {
return <Content id={el.id}
element={el.element}
color={el.color}
title={el.title}
type={el.type}
rY={el.rY}
rX={el.rX}
sX={el.sX}
sY={el.sY}
zIndex={el.zIndex}
konvaTrigger={this.konvaTrigger}
elements={this.state.elements}
visibilityStatus={el.visibilityStatus}
selectType={this.selectType}
parentCallback = {this.selectDestinations}
selectedDestinationID = {this.state.selectedDestinationID}
destinations={this.state.destinations}
parentCallbackColor = {this.changeColorSelector}
timerString={this.state.timerString}
elementsID={this.selectElements}
selectedRouteID={this.state.selectedRouteID}
selectedElementsID={this.state.selectedElementsID}
selectedRouteIDParentCallback={this.updateselectedRouteID}
updateRouteX={this.updateRouteX}
updateRouteY={this.updateRouteY}
updateRoutePosition={this.updateRoutePosition}
/>
})
}
</Layer>
</Stage>
</div>
render(){
const polygon= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
ref={node => {
this.polygon = node;
}}
sides= {6} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
sides= {6} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const triangle= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
ref={node => {
this.polygon = node;
}}
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
sides= {3} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={60}
height={90}
sides= {3} //3 for Triangle
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const rectangle= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
ref={node => {
this.polygon = node;
}}
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const borderRectangle= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
ref={node => {
this.polygon = node;
}}
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
cornerRadius= {8}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
pointerLength={20}
draggable="true"
pointerWidth={20}
x= {300}
y= {200}
width={100}
height={60}
cornerRadius= {8}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const oval= this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Ellipse
id="konva"
ref={node => {
this.polygon = node;
}}
draggable="true"
x= {300}
y= {200}
width={80}
height={80}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {40}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
<Transformer
ref={node => {
this.transformer = node;
}}
/>
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Ellipse
id="konva"
draggable="true"
x= {300}
y= {200}
width={80}
height={80}
fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {40}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}
/>
</Group>
const line= <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Line id="konva"
points={[this.props.rX,this.props.rY,this.props.sX,this.props.sY]}
visible={this.props.visibilityStatus===false ? false :true}
fill={`${this.props.color}`}
stroke={`${this.props.color}`}
strokeWidth={2.5}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*70/10 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
} />
<Rect
id="r"
ref={node => {
this.pointR = node;
}}
//zIndex={1}
draggable="true"
cornerRadius= {2}
x={this.props.rX -5}
y={this.props.rY - 5}
width={10}
height={10}
fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
<Rect
ref={node => {
this.pointS = node;
}}
id="s"
// zIndex={1}
draggable="true"
cornerRadius= {2}
x={this.props.sX -5}
y={this.props.sY - 5}
width={10}
height={10}
fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
</Group>
const arrow=
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} zIndex={this.props.elements.length -1} >
<Arrow
points={[this.props.rX,this.props.rY,this.props.sX,this.props.sY]}
pointerLength={10}
pointerWidth={10}
id="konva" fill={`${this.props.color}`}
visible={this.props.visibilityStatus===false ? false :true}
stroke={`${this.props.color}`}
strokeWidth={2.5}
dragBoundFunc={ pos=> {
var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
return {
x: pos.x,
y: pos.y
};}
}/>
<Rect
id="r"
ref={node => {
this.pointR = node;
}}
//zIndex={1}
cornerRadius= {2}
x={this.props.rX - 5}
y={this.props.rY - 5}
width={10}
height={10}
draggable={true} fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
<Rect
id="s"
ref={node => {
this.pointS = node;
}}
//zIndex={1}
cornerRadius= {2}
x={this.props.sX -5}
y={this.props.sY - 5}
width={10}
height={10}
draggable={true} fill="green"
visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
</Rect>
</Group>
return(
this.props.element==="line" ? line : this.props.element==="polygon" ? polygon :
this.props.element==="triangle" ? triangle : this.props.element==="rectangle" ? rectangle :
this.props.element==="Oval" ? oval :
this.props.element==="border rectangle" ? borderRectangle :arrow
)
}
}