\r\n \r\n \r\n\r\n \r\n \r\n }\r\n\r\n renderPatternLogo()\r\n {\r\n let patternData = this.state.patternLogo;\r\n if(patternData == null || patternData.length ===0)\r\n {\r\n return
\r\n }\r\n\r\n let patterns = patternData.map(function(pattern,index){\r\n let classText =(index===this.state.patternIdx)?\"color-item color-active\":\"color-item\";\r\n return },this);\r\n patterns.push(this.renderAddLogo());\r\n\r\n return \r\n
Drag-Drop onto the object for adding \r\n \r\n {patterns} \r\n \r\n \r\n \r\n }\r\n\r\n render()\r\n { \r\n if(this.props.data !=null)\r\n {\r\n\r\n return(\r\n \r\n {this.renderColors()}\r\n {this.renderPatterns()} \r\n {this.renderPatternLogo()}\r\n \r\n\t\t\t\t \r\n );\r\n }\r\n else\r\n {\r\n return(\r\n this.selectedItem(index)} >\r\n {color.name}\r\n
\r\n }, this);\r\n return {listItem}
\r\n }\r\n else\r\n {\r\n return
\r\n }\r\n \r\n }\r\n}","import React, { Component } from 'react';\r\nimport Slider from '@material-ui/lab/Slider';\r\n\r\nexport class LogoText extends Component\r\n{\r\n \r\n \r\n constructor(props)\r\n {\r\n super(props);\r\n this.state=\r\n {\r\n scale:props.scale,\r\n rotate:props.rotate,\r\n text:props.text,\r\n font:props.font,\r\n color:props.color,\r\n isNew:props.isNew\r\n };\r\n \r\n }\r\n \r\n \r\n handleChangeScale = (event, value) => {\r\n this.setState({ scale:value });\r\n this.props.onScaleChanged(value);\r\n };\r\n handleChangeRotate = (event, value) => {\r\n this.setState({ rotate:value });\r\n this.props.onRotateChanged(value);\r\n };\r\n\r\n createHeaderToolbar(props)\r\n {\r\n if(props.isNew == false)\r\n {\r\n return(\r\n \r\n
\r\n\r\n\r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\n
this.props.onClick()}>\r\n {this.createHeaderToolbar(this.props)}\r\n
this.props.onDragStart(event)} >{this.props.text}
\r\n
\r\n \r\n {this.props.isNew?(\r\n
\r\n
TO ADD THIS TEXT
\r\n
\r\n\r\n \r\n\r\n
Drag and drop this text to product by click and hold. Then move text to the product.
\r\n \r\n
\r\n ):(
\r\n
\r\n
Scale {this.state.scale}
\r\n
\r\n
\r\n
\r\n
Rotate {this.state.rotate} degrees
\r\n
\r\n
\r\n
) \r\n \r\n }\r\n \r\n
\r\n
this.props.onStyleChange(colorIdx,patternIdx)}> \t\t\t\t\t\r\n\t\t }\r\n\t\t else\r\n\t\t {\r\n\t\t\treturn \r\n\t\t\t\t
First click on the object then select any color to change \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\tPantone PMS Colors \r\n\t\t\t\t\t\t\t\t\tColor Picker \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n \r\n \t\t\t\t\t\t\t \r\n\t\t\t\t\t
\r\n
\r\n
{this.props.data.TypeName} \r\n
{this.props.data.Name}
\r\n
\r\n\t\t\t\t\t\t{this.props.data.Description}\r\n
\r\n
\r\n
\r\n
\r\n
this.props.onClosed()}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
this.handleTextChange(event)}>\r\n
this.handleColorChange(color) } />\r\n \r\n this.createText(event)}>SAVE \r\n \r\n\r\n this.showTextEditor(false)} onSubmit={(txt)=> this.insertText(txt)}> \r\n \r\n )\r\n }\r\n }\r\n\r\n renderHeaderToolbar()\r\n {\r\n return(\r\n \r\n
this.handleClearAll(e)} >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n Clear all \r\n \r\n
this.handleOnClick(index)} onDragStart={(evt)=> this.dragStart(evt,index)}\r\n onScaleChanged={(value)=>this.handleOnScaleChanged(index,value)} \r\n onRotateChanged={(value)=>this.handleRotateChanged(index,value)}\r\n key={index}\r\n isNew={model.isNew}\r\n active={this.state.activeIndex==index}\r\n onDelete={()=>this.handleOnDelete(index)}\r\n onClear={()=>this.handleOnClear(index)}\r\n >\r\n \r\n },this);\r\n \r\n return(\r\n \r\n \r\n {this.renderHeaderToolbar()}\r\n
\r\n {this.renderTextEditor()}\r\n {listItem} \r\n
\r\n
\r\n this.showTextEditor(true)}>+ ADD NEW TEXT \r\n
\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t
Click on the Pantone to choose color or click on the Color Picker to choose a color. \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\tPantone PMS Colors \r\n\t\t\t\t\t\t\t\t\t\tColor Picker \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.active? this.handleChangeComplete(color) } />:null}\r\n\t\t\t\t\t\t\t\t\t \r\n\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t CLEAR COLOR \r\n
\r\n\t\t\t
this.handleOnClick(index)} \r\n onScaleChanged={(value)=>this.handleOnScaleChanged(index,value)} \r\n onRotateChanged={(value)=>this.handleRotateChanged(index,value)}\r\n key={index}\r\n active={activeIndex === index}\r\n onDelete={()=>this.handleOnDelete(index)}\r\n onClear={()=>this.handleOnClear(index)}\r\n title={this.props.title}\r\n subTitle={this.props.subTitle}\r\n isNew={true}\r\n >\r\n \r\n },this);\r\n\r\n return(\r\n \r\n
\r\n
\r\n \r\n
this.handleClearAll(e)} >\r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\nClear all \r\n \r\n
\r\n
\r\n {listItem} \r\n
\r\n
\r\n + ADD NEW \r\n
\r\n\t\t\t
this.copyLinkToMem()}>\r\n this.copyLinkToMem()}> {this.state.copyMessage} \r\n
);\r\n }\r\n else\r\n {\r\n return null;\r\n }\r\n }\r\n render()\r\n {\r\n if(this.state.isClosed===true)\r\n {\r\n return null;\r\n }\r\n\r\n return(\r\n
\r\n
Sharing your design \r\n
this.props.onClosed()}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
{this.state.step}
\r\n {this.renderCopyLink()}\r\n
\r\n \r\n
{this.state.percent} % \r\n
this.onStyleChange(colorIdx,patternIdx)}>,document.getElementById('styleInfo'));\r\n window.loadProduct(product);\r\n }\r\n \r\n\r\n \r\n onStyleChange(colorIdx,patternIdx)\r\n {\r\n let product = this.state.products[this.state.productIdx]; \r\n product.colorIdx= colorIdx;\r\n product.patternIdx = patternIdx;\r\n window.loadProduct(product);\r\n }\r\n\r\n handleColorClick(index)\r\n {\r\n this.setState({colorIdx:index});\r\n }\r\n\r\n handleFrabricClick(index)\r\n {\r\n this.setState({fabricIdx:index});\r\n }\r\n\r\n renderHeaderBar()\r\n {\r\n if(this.state.isShowMenu)\r\n {\r\n return(\r\n \r\n
this.handleOnOffMenu()}>\r\n \r\n \r\n \r\n \r\n \r\n Decoration Editing \r\n \r\n
\r\n
this.handleOnOffMenu()}>\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
this.handleLogoClick(i)} type=\"logo\" styleName=\"logo highlightHover\"\r\n title=\"TO ADD THIS LOGO\"\r\n subTitle=\"Drag and drop this logo to product by click and hold. Then move logo to the product.\"\r\n active={this.state.menuActive[0]}>\r\n \r\n\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
{product.TypeName} \r\n
{product.Name}
\r\n
\r\n\t\t\t\t\t\t {product.Description}\r\n
\r\n
\r\n \r\n
\r\n
\r\n Click the “Share Your Design” to generate the link for sharing \r\n
\r\n
this.handleSharingOnOff()}>\r\n Share Your Design \r\n
\r\n
\r\n
\r\n }\r\n return( this.handleProductOnOff(true)}> \r\n \r\n\r\n\r\n\r\n\r\n \r\nPRODUCTS LIST\r\n );\r\n }\r\n renderContentRight()\r\n {\r\n \r\n return(\r\n \r\n \r\n {this.renderBtnProductOnOff()}\r\n
window.drop(evt)} onDragOver={(evt)=> window.allowDrop(evt)}>\r\n \r\n
\r\n {this.renderProductInfor()}\r\n
\r\n Products List \r\n this.handleProductOnOff(false)}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n renderDecorationEditing()\r\n {\r\n let style='decorationEditing';\r\n if(this.state.isShowProduct===true)\r\n {\r\n style=' hidden';\r\n }\r\n else if(this.state.isShowMenu== false)\r\n {\r\n style+=' collapse';\r\n }\r\n return(this.handleOnOffMenu()}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.state.isShowMenu? Decoration Editing :null}\r\n \r\n );\r\n }\r\n\r\n renderToolbar()\r\n {\r\n let style='toolbar';\r\n if(this.state.isShowMenuToolbar===false)\r\n {\r\n style='hidden';\r\n }\r\n return(\r\n \r\n
\r\n
this.setMenuActive(0)}>\r\n Logo \r\n
\r\n
this.setMenuActive(1)}>\r\n Text \r\n
\r\n
this.setMenuActive(2)}>\r\n Pattern \r\n
\r\n
this.setMenuActive(3)}>\r\n Color \r\n
\r\n
\r\n {this.renderContentLeft()}\r\n
\r\n
\r\n {this.renderProductListHeader(this.state.isShowProduct)}\r\n
this.handleProductClick(i)} styles={this.state.products} active={this.state.isShowProduct}> \r\n {this.renderDecorationEditing()}\r\n {this.renderToolbar()}\r\n
\r\n {this.renderContentRight()}\r\n {this.state.isShowSharing?
this.handleSharingOnOff()}> :null}\r\n
\r\n
\r\n {this.renderProductListHeader()}\r\n
this.handleProductClick(i)} styles={this.state.products} active={this.state.menuActive[4]}> \r\n
\r\n {this.renderContentRight()}\r\n
\r\n
\r\n {this.renderDecorationEditing()}\r\n {this.renderToolbar()}\r\n
\r\n {this.renderContentRight()}\r\n
\r\n
\r\n {this.renderDecorationEditing()}\r\n {this.renderToolbar()}\r\n
\r\n {this.renderContentRight()}\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Decoration Editing \r\n \r\n
\r\n
\r\n
\r\n \r\n PRODUCT LIST \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
W-4 \r\n
Antiviral 3 Layers
\r\n
\r\n 3 layer filter with antiviral and antimicrobial technology making the mask extra resistent to virues and bacteria.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Click the “Share Your Design” to generate the link for sharing \r\n
\r\n
\r\n Share Your Design \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
![](\"\\Zion3D\\image\\add.png\")
\r\n \r\n \r\n\r\n \r\n \r\n }\r\n\r\n renderPatternLogo()\r\n {\r\n let patternData = this.state.patternLogo;\r\n if(patternData == null || patternData.length ===0)\r\n {\r\n return \r\n }\r\n\r\n let patterns = patternData.map(function(pattern,index){\r\n let classText =(index===this.state.patternIdx)?\"color-item color-active\":\"color-item\";\r\n return },this);\r\n patterns.push(this.renderAddLogo());\r\n\r\n return ![](\"./theme/img/decoration)
\r\n Logo\r\n ![](\"/theme/img/decoration)
\r\n