diff options
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 13 | ||||
| -rw-r--r-- | src/client/views/nodes/RadialMenu.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/RadialMenuItem.tsx | 31 |
3 files changed, 35 insertions, 11 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c9a56b46f..9bc0244ba 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -146,7 +146,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu @action onRadialMenu = async (event: React.TouchEvent): Promise<void> => { - console.log("YUH") // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 // if (e.button === 0) { // e.preventDefault(); @@ -166,18 +165,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const two = RadialMenu.Instance.findByDescription("two..."); const three = RadialMenu.Instance.findByDescription("three..."); const four= RadialMenu.Instance.findByDescription("four..."); - const five= RadialMenu.Instance.findByDescription("five..."); - const six= RadialMenu.Instance.findByDescription("six..."); - const seven= RadialMenu.Instance.findByDescription("seven..."); + // const five= RadialMenu.Instance.findByDescription("five..."); + // const six= RadialMenu.Instance.findByDescription("six..."); + // const seven= RadialMenu.Instance.findByDescription("seven..."); !one?rm.addItem({ description: "one", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null; !two?rm.addItem({ description: "two", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null; !three?rm.addItem({ description: "three", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null; !four?rm.addItem({ description: "four", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null; - !five?rm.addItem({ description: "five", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null; - !six?rm.addItem({ description: "six", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null; - !seven?rm.addItem({ description: "seven", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null; + // !five?rm.addItem({ description: "five", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null; + // !six?rm.addItem({ description: "six", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null; + // !seven?rm.addItem({ description: "seven", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null; runInAction(() => { // cm.addItem({ diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx index 4fbb40c5f..b0cf3bb98 100644 --- a/src/client/views/nodes/RadialMenu.tsx +++ b/src/client/views/nodes/RadialMenu.tsx @@ -188,7 +188,7 @@ export class RadialMenu extends React.Component { return null; } const style = this._yRelativeToTop ? { left: this._mouseX-150, top: this._mouseY-150 } : - { left: this._mouseX-150, bottom: this._mouseY+150 }; + { left: this._mouseX-150, top: this._mouseY-150 }; const contents = ( <> diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx index 727d1c3be..f077dd447 100644 --- a/src/client/views/nodes/RadialMenuItem.tsx +++ b/src/client/views/nodes/RadialMenuItem.tsx @@ -12,7 +12,7 @@ export interface OriginalMenuProps { description: string; event: (stuff?: any) => void; undoable?: boolean; - icon: IconProp; //maybe should be optional (icon?) + icon: IconProp; closeMenu?: () => void; min?: number; max?:number; @@ -68,10 +68,8 @@ export class RadialMenuItem extends React.Component<RadialMenuProps & { selected if (circlemax%3===1 && circlemin===circlemax-1){ color="#c2c2c5"; } - console.log(this.props.selected,this.props.min) if (this.props.selected === this.props.min){ - console.log(this.props.selected,this.props.min) color="#808080"; } @@ -86,10 +84,37 @@ export class RadialMenuItem extends React.Component<RadialMenuProps & { selected } } + calculatorx(){ + let circlemin=0; + let circlemax=1 + this.props.min? circlemin=this.props.min:null; + this.props.max? circlemax=this.props.max:null; + let avg = ((circlemin/circlemax)+((circlemin+1)/circlemax))/2; + let degrees = 360*avg; + let x= 100*Math.cos(degrees*Math.PI/180); + let y =-125*Math.sin(degrees*Math.PI/180); + return x; + } + + calculatory(){ + + let circlemin=0; + let circlemax=1 + this.props.min? circlemin=this.props.min:null; + this.props.max? circlemax=this.props.max:null; + let avg = ((circlemin/circlemax)+((circlemin+1)/circlemax))/2; + let degrees = 360*avg; + let x= 125*Math.cos(degrees*Math.PI/180); + let y =-100*Math.sin(degrees*Math.PI/180); + return y; + } + + render() { return ( <div className={"radialMenu-item" + (this.props.selected ? " radialMenu-itemSelected" : "")} onClick={this.handleEvent}> <canvas id="myCanvas" height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas> + <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position:"absolute", left:this.calculatorx()+150-19, top:this.calculatory()+150-19}} /> </div> ); } |