What is the best way to adjust for a container view that has been rotated within my circular slider component?

After combining different code snippets, I have successfully created a circular slider component that functions as a slideable control dial with a defined maximum angle. However, I am now seeking more flexibility by wanting to specify a custom start angle. This would allow me to create dials similar to car dashboard controls. The images below demonstrate my attempt at implementing this feature, which unfortunately disrupts the touch handling:

https://i.sstatic.net/SyRAZ.gif

I am currently encapsulating an SVG component within a view to achieve this functionality, rotating the container view and appropriately adjusting text rotation values. Here is a TypeScript snippet of the component:

(component code here)

The current implementation of the component is done using the following parameters: 

<CircularSlider rotationOffset={-135} maxAngle={270} onValueChange={(angle) => angle } />
. (Or without the offset for the first GIF example).

In attempting to handle touch events while compensating for the rotation of the container view, I have experimented with various approaches like adjusting the current angle before inputting into PolarToCartesian(), utilizing different measurement methods, and altering the way parameters are passed. However, none of these solutions provided the desired behavior.

I am looking for guidance on how to effectively compensate for the rotation of the container view in touch handling or if there is an alternative approach that can achieve the required functionality. (Developed using React Native 0.57.0 and react-native-svg ^7.0.2).

javascripttypescriptreact-nativesvgreact-native-svg

Answer №1

After some trial and error, I realized that adjusting the angle in the cartesianToPolar() function within the onPanResponderMove() function was key. However, I overlooked properly handling the maxAngle when it approached 0. To resolve this, I made the following update in onPanResponderMove(): 

let a2 = 0;
if (a + this.props.rotationOffset > 0) {
  a2 = a - (360 + this.props.rotationOffset);
} else {
  a2 = a - this.props.rotationOffset;
}

this.setState({ angle: a2 > 0 ? Math.min(a2, this.props.maxAngle) : this.props.maxAngle });

In addition, I decided to eliminate the rotation transform from the view and instead rotate my arc paths as a group using: 

<G transform={`rotate(${this.props.rotationOffset} ${width / 2} ${width / 2})`}>
... my paths ... 
</G>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the recommended method for obtaining the maximum suggested number for the y-axis?

How do I determine the suggestedMax value for the yAxes scale? For instance, in the provided image, it is 4000 for legend2 and 400 for legend1) Legend Label 1: https://i.sstatic.net/ZfVSz.png Legend Label 2: https://i.sstatic.net/l05ar.png var canva ...

javascriptcanvaschart.js

Encountered a problem while attempting to convert column chart to 3D using Google Sheets API

I've encountered a problem while attempting to convert all column charts in my spreadsheet to 3D column charts. Despite following Google's documentation, I receive an error message when running the code below. Could this be an issue with the API ...

javascriptgoogle-apps-scriptgoogle-sheets

Can template literal types be utilized to verify if one numeric value is greater than another?

I am attempting to define the Record for migration functions, which use the direction of the migration as the key: v${number}-v${number}, Considering that these migrations are all UP, they need to be validated as v${first-number}-v${first-number + 1} and ...

typescripttypescript-template-literals

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

I am working with an SVG file that includes both rectangular elements and text elements. index.html <svg id="timeline" width="300" height="100"> <g transform="translate(10,10)" class="container" width="280" height="96"> <rect x ...

javascripttypescriptd3.jssvg

Array shuffled randomly

I need to connect a list of words with corresponding instructions, but I want the order of the words to be random. For example, if I have pairs like (cat, forget) and (dog, remember), the word should always be followed by its matching instruction, but the ...

javascriptarrays

Ways to showcase every input within an array of objects using Javascript

Assume I have created an array of objects as shown below: var person = [{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}, {firstName:"Arunima", lastName:"Ghosh", age:20, eyeColor:"black"}]; When running console.log(person); the output is ...

javascriptarrays

Using NestJS and Mongoose to create a schema with a personalized TypeScript type

I'm struggling to devise a Mongo Schema using nestjs/mongoose decorators based on the structure of the class below: @Schema() export class Constraint { @Prop() reason: string; @Prop() status: Status; @Prop() time: number; } The challeng ...

typescriptmongodbmongoosenestjsmongoose-schema

Retrieve the attributes of a class beyond the mqtt callback limitation

Currently, I am utilizing npm-mqtt to retrieve information from a different mqtt broker. My objective is to add the obtained data to the array property of a specific class/component every time a message is received. However, I'm facing an issue wher ...

javascriptangulartypescriptscopemqtt

Ways to remove identical key from distinct object within an array

Is there a way to remove specific date keys from multiple objects in an array of objects? I attempted to use a for loop and the delete function, but it doesn't seem to be working. var data = matchScoreData.tbl_FallOfWicket; matchScoreData.tbl_Fall ...

javascriptarraysjson

Angular: Elf facade base class implementation for utilizing store mechanics

What is the most effective way to access the store within a facade base class, allowing for the encapsulation of commonly used methods for interacting with the store? Imagine we have a store (repository) export class SomeRepository { private readonly s ...

angulartypescript

Ajax UpdateProgress not functional

How can I resolve the issue where my AJAX UpdateProgress bar in ASP.NET is not running when executing a query in the correct format upon button click? Any solutions or help would be greatly appreciated. <html xmlns="http://www.w3.org/1999/xhtml"> ...

javascriptasp.netajax

Guide to initiating an AJAX request to the GraphHopper Route Optimization API

Currently, I am exploring the functionalities of GraphHopper Route Optimization API for solving Vehicle Routing Problems (VRP) with pickups and deliveries. To test it out, I am using an example from . The specific request I am making is as follows: var ...

javascriptajaxgraphhopper

typescript when an argument is missing, it will automatically be assigned

Here is my TypeScript function: function more(argv: {a: number, b?: string}): number{ console.log( b) return a } I am invoking the function this way: let arc = more({a: 5}) Unexpectedly, I see 10 in the console. I was anticipating undefined ...

typescript

Attempting to navigate a tutorial on discord.js, I encountered an issue labeled as "Unknown application" that disrupted my progress

I attempted a tutorial for discord.js, but encountered an error message saying "DiscordAPIError[10002]: Unknown Application." Even though I checked my clientID and applicationID and they seem to be correct! You can find the tutorial here. Here is the co ...

javascriptnode.jsdiscord.js

Is it possible for a jQuery ajaxSuccess function to detect an AJAX event in a separate JavaScript file? If it is, what steps am I missing?

I've been attempting to initiate a function following an ajax event. I have been informed that despite the ajax event occurring in a different file (on the same server, if that makes a difference) and that the file is javascript, not jquery, "Ajaxsucc ...

javascriptajaxjquery

Storing specific items in an array for easy access on the following page

I have some code that extracts specific keys and values from a row and then sends them to the next page. let HistoryData = []; for (const [key, value] of Object.entries(this.Items)) { HistoryData.push(value) } this.$router.push( ...

javascriptvue.jsvuejs2

Which behaviors that are typically exhibited by browsers will be stopped by calling `event.preventDefault()`?

While I grasp that using event.preventDefault() stops default actions triggered by events in the browser, I find this explanation too general. For instance, what exactly are these default event behaviors in the browser? It's common to see developers u ...

javascriptjquerydom-events

The issue of checkboxes not being sorted properly in Slick Grid

Currently, I am working on resolving a sorting issue within one of our applications using Slick Grid for grid implementation. The existing sort function, although functional, presents a challenge. While it successfully sorts columns, the checkbox associate ...

javascriptjqueryhtmlsortingslickgrid

Having trouble locating the bootstrap import statement

Currently, I am working on a project in Angular where I have defined two styles in the angular.json file - styles.css and node_modules/bootstrap/dist/css/bootstrap.min.css. After running ng serve, it shows that it compiled successfully. However, upon ins ...

javascriptangulartypescripttwitter-bootstrap-3

display and conceal elements and refresh action

Can anyone help me with a function to hide and show a div? function toggledDivVisibility(divName) { if (divName.is(':hidden')) { var hiddenDiv = document.getElementById("filter"); hiddenDiv.style.display = 'block&a ...

javascriptjquery