KineticJs layer malfunctioning after stage reconstruction

My canvas is created using KineticJs Stage, with three layers - a background that is always visible and two overlays toggled by a checkbox. Whenever the parent div of this stage is resized, I redraw the entire stage to maintain the layout. The toggling works under the following conditions: 1. Before resize and redraw. 2. If not toggled at all before the redraw.

However, there is an issue when: 1. Layer is toggled on then off, canvas is resized triggering a redraw, and then trying to toggle back on. In this case, although the visible attribute is set to true when show() is called, the layer does not appear.

While debugging, I noticed that the index of each layer increments every time it's rebuilt, despite instantiating new instances of the stage and every layer during rebuild. Any idea why the index increases even after everything has been destroyed and why the layer doesn't show up?

Before every rebuild, here's what I do:


stage = new $window.Kinetic.Stage({
                container: 'canvas',
                x: 0,
                y: 0,
                width: parent.clientWidth,
                height: parent.clientHeight
            });
            var layer = new $window.Kinetic.Layer();
            erosionLayer = new $window.Kinetic.Layer({
                visible: scope.erosionVisible
            });

And here's how I toggle it:

scope.$watch('erosionVisible', function(val) {
            if (!erosionLayer) return;

            var showErosion = false;

            if (!scope.erosionVisible) {
                showErosion = false;
            } else if (scope.erosionVisible) {
                showErosion = true;
            }

            if (showErosion) {
                erosionLayer.show();

            } else {
                erosionLayer.hide();
            }
        });

Just an FYI, this is within an AngularJS directive.

Answer №1

Resolved the problem by ensuring that I trigger the draw function on the layer whenever toggling, especially after rebuilding the stage.

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

Can an entire application built with a combination of PHP, JavaScript, and HTML be successfully converted to Angular 7?

After creating a complex application that heavily relies on JavaScript, PHP, HTML, and numerous AJAX calls, I am considering migrating the entire codebase to Angular 7. Is it feasible to achieve this transition without requiring a complete rewrite in Ang ...

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

When attempting to call the servlet that returns JSON data, I encounter an error while parsing the data. var jsonResponse = jQuery.parseJSON(data); var ht_4year_risk_opt = jsonResponse.ht_4year_risk_opt; ...

What is the process for uploading an image and entering text into the same row in Google Sheets?

Hello, I am currently working on a Google Script web app that enables users to upload 10 photos along with comments for each photo. This information will then be inserted into a Google Sheet when the user clicks the 'upload' button on the web app ...

What is the reason behind generating auth.js:65 Uncaught (in promise) TypeError: Unable to access property 'data' of undefined?

Encountering a login issue in my Django application while using Axios and React-Redux. The problem arises when providing incorrect login credentials, resulting in the LOGIN_FAIL action. However, when providing the correct information, the LOGIN_SUCCESS act ...

Error encountered in Google's Structured Data Testing Tool

<script type="application/ld+json"> {"@context" : "http://schema.org", "@type" : "LocalBusiness", "name" : "mywebsite.com", "description": "Lorem ipsum dolor sit amet", "image" : "http://mywebsite.com/image.jpg", "telephone" : "987654321", ...

jQuery - Incorrect folder path for image replacement

I have a specific request to change the image paths in multiple .html pages, redirecting them from the default folder to another folder. After implementing code from an external javascript file successfully, I am encountering an error where the HTML sou ...

The box shadow feature seems to be malfunctioning on Android devices

It seems that the box shadow is not functioning properly on Android devices, without any clear explanation as to why. My attempt to address this issue included the following code: -webkit-box-shadow: inset 0 0 0 2px #F3D280; box-shadow: inset 0 0 0 2px # ...

Combining state and props to efficiently pass them as props - what's the best method?

I am attempting to create a component that merges props and state together, allowing the actual view to simply focus on retrieving data from props. In the snippet of code provided below, I am experimenting with utilizing the spread operator (potentially ...

Upgrade to iOS 8 and experience the new Full Screen Mode feature. When you tap on a text field for the first time, the onscreen keyboard will flash briefly

Recently, I encountered a strange issue with my web app (AngularJS HTML5) after upgrading my iPad to iOS8. The onscreen keyboard started acting strangely - when I tapped a text field once, the keyboard would very briefly flash and then disappear. It was so ...

Tips for using jQuery to create a delete functionality with a select element

I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/ My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the t ...

Selecting items from a list at random using the power of math.random() and math.floor()

When attempting to randomize the popping of elements in a list stored in the baby variable, only baby[1] is being popped. How can I make it pop random elements? <body> <h1 id="1">bebe</h1> <h1 id="2">t ...

Tips for displaying a modal within a modal in React

Currently, I have two components with modals. My goal is to open one modal from a button in the other component but clicking the button only closes the current active modal and doesn't open a new one. //Modal 1 <div className="modal fade" ...

Combine two elements in an array

I am faced with a challenge in binding values from an Array. My goal is to display two values in a row, then the next two values in the following row, and so on. Unfortunately, I have been unable to achieve this using *ngFor. Any assistance would be greatl ...

Learn the best practices for sharing .env values from the main project component to various reusable npm installed components

In recent projects I've worked on using React and Vue.js, I have utilized .env variables to store API URLs for micro services and other configuration settings that are used throughout the root project. However, when it comes to child components insta ...

What could be causing TypeScript to throw errors when attempting to utilize refs in React?

Currently, I am utilizing the ref to implement animations on scroll. const foo = () => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); setAnimClass( rect.top >= 0 && rect.bottom <= window.i ...

Retrieving the size of every image with ajax while also storing extra image information

In my current project, the objective is to iterate through all images on a webpage and collect various details such as image name, original dimensions, actual size, ratio, display property, and FILESIZE. However, I have encountered a hurdle in my progress ...

Is it possible to turn off ajax within an iframe?

I'm currently developing a project that allows users to customize their page. What is the best way to prevent ajax functionality without having to disable javascript in an iframe? ...

What are the steps to organize an array of objects by a specific key?

Experimented with the following approach: if (field == 'age') { if (this.sortedAge) { this.fltUsers.sort(function (a, b) { if (b.totalHours > a.totalHours) { return 1; } }); this ...

Positioning Images in Tables with Absolute CSS Styling

I need to alternate between two sets of images using JavaScript. To achieve this, I have to use CSS to set the position of each image to absolute so that each new image replaces the old one as it cycles through. My goal is to arrange the image sets in an ...

Numerous social media sharing buttons conveniently located on a single webpage

Currently, I am working on a research database project where the goal is to allow users to share articles from the site on various social networks such as Facebook, Twitter, LinkedIn, and Google+. To achieve this, I successfully implemented share buttons ...