javascript – React-based resizable sidebar

I am an experienced developer, but new to the react and the javascript world. I am trying to create a resizeable sidebar in react(Please see the full code and demo here) for a personal project. Although it seems to be working I am not sure if this is correct. Here is the main part of the code.

I would like some feedback on:

  1. If this code is idiomatically correct? Like the use of useEffect, useState, and useRef.
  2. I am not sure how the resizeSidebar function is correctly resizing despite the asynchronous nature of setSidebarWidth
import React from "react";
import { useState, useEffect, useRef } from "react";
import "./App.css";

function App() {
  const sidebarRef = useRef(null);
  const resizerRef = useRef(null);
  const prevX = useRef(null);
  const (sidebarWidth, setSidebarWidth) = useState(268); 
  const (isTracking, setIsTracking) = useState(false);

  const resizeSidebar = (mouseMoveEvent) => {
    if (prevX && prevX.current) {
      let delta = mouseMoveEvent.clientX - prevX.current;
      setSidebarWidth(sidebarRef.current.getBoundingClientRect().width + delta);
      prevX.current = mouseMoveEvent.clientX;
    }
  };

  const stopResize = (event) => {
    window.removeEventListener("mousemove", resizeSidebar);
    window.removeEventListener("mouseup", stopResize);
    setIsTracking(false);
  };

  const startResizing = (mouseDownEvent) => {
    prevX.current = mouseDownEvent.clientX;

    window.addEventListener("mousemove", resizeSidebar);
    window.addEventListener("mouseup", stopResize);
  };

  useEffect(() => {
    if (!isTracking) prevX.current = null;
  }, (isTracking));

  /*useEffect(() => {
      
  }, (sidebarWidth))*/

  useEffect(() => {
    const resizer = resizerRef.current;
    resizer.addEventListener("mousedown", startResizing);
    setIsTracking(true);
  }, ());

  return (
    <div className="app-container">
      <div
        ref={sidebarRef}
        className="app-sidebar"
        style={{ width: sidebarWidth }}
      >
        <div className="app-sidebar-content"></div>
        <div ref={resizerRef} className="app-sidebar-resizer"></div>
      </div>
      <div className="app-frame"></div>
    </div>
  );
}

export default App;

Here is a link to sandbox: https://codesandbox.io/s/react-resizable-sidebar-kz9de

Resizable panel sizes in simple JAVA swing window

I have a Java swing app like the screenshot below:

enter image description here

I need that when changing the size of the window, the text field on the bottom right also changes its size. Now it’s always the same size.

Layouts I used:

  • 3 x BorderLayout (red) – one for the entire GUI, one each for the
    PAGE_START and PAGE_END constraints of the main GUI panel.

  • In the panel used in the PAGE_START, 2 x FlowLayout (green), one in
    the LINE_START, the other in the LINE_END. (1)

  • In the panel in the PAGE_END, 2 x GridLayout (blue), the first a 3 x
    3, the other a single column.

enter image description here

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

public class MyJFrame extends JFrame {

    JPanel pan1 = new JPanel(); // top_left
    JPanel pan2 = new JPanel(); // top_right
    JPanel tPan = new JPanel(); // top
    JPanel pan4 = new JPanel(); // bottom_left
    JPanel pan5 = new JPanel(); // bottom_right
    JPanel bPan = new JPanel(); // bottom
    JPanel mPan = new JPanel(); // main

    JButton jButton1 = new JButton("FR");
    JButton jButton2 = new JButton("FG");
    JButton jButton3 = new JButton("FB");
    JButton jButton4 = new JButton("A");
    JButton jButton5 = new JButton("B");
    JButton jButton6 = new JButton("C");

    JTextArea textArea = new JTextArea();

    public MyJFrame(){

        setTitle("Simple Swing App");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        textArea.setFont(new Font("Ubuntu Mono", Font.PLAIN, 22));
        textArea.setEnabled(false);
        textArea.setText(" Obszar tekstowy typu jTextAreann");
        textArea.setDisabledTextColor(Color.RED);

        JScrollPane scrollPane = new JScrollPane(textArea);

        jButton1.setBackground(Color.red);
        jButton2.setBackground(Color.green);
        jButton3.setBackground(Color.blue);

        jButton1.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textArea.setDisabledTextColor(Color.red);
                mPan.updateUI();
            }
        });
        jButton2.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textArea.setDisabledTextColor(Color.green);
                mPan.updateUI();
            }
        });
        jButton3.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textArea.setDisabledTextColor(Color.blue);
                mPan.updateUI();
            }
        });

        pan1.setLayout(new FlowLayout());
        pan2.setLayout(new FlowLayout());
        tPan.setLayout(new BorderLayout());
        pan4.setLayout(new GridLayout(3,3,2,2));
        pan5.setLayout(new GridLayout(3,1,0,2));
        bPan.setLayout(new BorderLayout());
        mPan.setLayout(new BorderLayout(2,2));

        bPan.setBorder(BorderFactory.createEmptyBorder(4,4,4,4));

        for (int i=1; i<10; i++) {
            JButton jButton = new JButton(i+"");
            pan4.add(jButton);
        }

        for (int i=1; i<4; i++){
            JTextField jTextField = new JTextField(" Pole tekstowe " + i + " typu jTextField ");
            jTextField.setBackground(Color.WHITE);
            jTextField.setBorder(BorderFactory.createLineBorder(Color.CYAN));
            jTextField.addKeyListener(new KeyAdapter() {
                @Override
                public void keyReleased(KeyEvent e) {
                    if (e.getKeyCode() == KeyEvent.VK_ENTER){
                        textArea.append(jTextField.getText() + "nn");
                        mPan.updateUI();
                    }
                }
            });
            pan5.add(jTextField);
        }

        pan1.add(jButton1);
        pan1.add(jButton2);
        pan1.add(jButton3);

        pan2.add(jButton4);
        pan2.add(jButton5);
        pan2.add(jButton6);

        tPan.add(pan1, BorderLayout.LINE_START);
        tPan.add(pan2, BorderLayout.LINE_END);

        bPan.add(pan4, BorderLayout.WEST);
        bPan.add(pan5, BorderLayout.EAST);

        mPan.add(tPan, BorderLayout.PAGE_START);
        mPan.add(scrollPane);
        mPan.add(bPan, BorderLayout.PAGE_END);

        add(mPan);
        setResizable(true);
        setSize(600,400);
        setLocationRelativeTo(null);
        setVisible(true);
    }
}

python – Embed a mini-window in a resizable canvas

I have a resizable canvas, and I want to add a mini-window that I obtained via a previous question.

The code is too long to be shared, that’s why I’m sharing snippets of code with you

class ResizableCanvas(Canvas):

    def __init__(self, parent, **kwargs):
        Canvas.__init__(self, parent, **kwargs)
        self.bind("<Configure>", self.on_resize)
        self.height = self.winfo_reqheight()
        self.width = self.winfo_reqwidth()

    def on_resize(self, event):
        wscale = float(event.width) / self.width
        hscale = float(event.height) / self.height
        self.width = event.width
        self.height = event.height
        self.config(width=self.width, height=self.height)


class ViewerTab:
    def __init__(self, master, quit_import, dim=1000):

    
        self.coords = {"x": 0, "y": 0, "x2": 0, "y2": 0}

        self.lines = ()
        self.oval = ()
        self.rectangle = ()
        self.arc = ()

        self.canvas = ResizableCanvas(self.master,
                                      width=dim,
                                      height=dim,
                                      highlightthickness=0,
                                      bg="lavender")
        self.canvas.pack(fill=BOTH, expand=YES)
        

        self.canvas.bind("<Button-1>", self.dirbutton)
        self.canvas.bind("<B1-Motion>", self.move)
        self.canvas.bind("<ButtonRelease-1>", self.nomove)
        self.canvas.bind("<Button-2>", self.get_position)
        self.canvas.bind('<Button-3>', self.xy)

    def initView(self):

        self.canvas.delete('all')

        self.image = self.initImage()

        self.angle = 0
        self.redraw()
        self.isSlideOn = True

    def initViewSuperposed(self):

        self.canvas.delete('all')


        self.image = self.initImage()
        self.cmap = self.initImagePng()
        self.cmap = PIL.Image.fromarray((self.cmap * 255).astype(numpy.uint8))
        self.isSuperposed = True
        self.isSlideOn = True
        self.set_labels()
        self.redrawSuperposed()


    def my_resize(self, size):
        needed_y , needed_x = size
        size_new_image = max((needed_x,needed_y))
        new_image = PIL.Image.new('RGBA',(size_new_image,size_new_image),color=(255,255,255,0))
        n = numpy.array(new_image)
        factor = (2**self.level)
        pixel_size = 1

        for key in self.positions.keys():
            if key != 'size_x' and key != 'size_y':
                xo = int( (key(0) *598) / factor)
                yo = int( (key(1) *598) /factor)


            if self.level > 7:
                pixel_size = 1

            if self.level == 7:
                pixel_size = 4

            if self.level == 6:
                pixel_size = 9

            if self.level == 5:
                pixel_size = 18

            if self.level == 4:
                pixel_size = 37

            if self.level == 3:
                pixel_size = 74

            elif self.level == 2:
                pixel_size = 149

            elif self.level == 1:
                pixel_size = 299

            elif self.level == 0:
                pixel_size = 598

            for i in range(pixel_size):
                for j in range(pixel_size):
                    x_good = xo + i
                    y_good = yo + j
                    if x_good > needed_x:
                        x_good = 0
                    if y_good > needed_y:
                        y_good = 0
                    n(x_good,y_good) = self.positions(key)

        new_image = PIL.Image.fromarray(n)
        
        return new_image



    def dirbutton(self, event):
        if self.mode.get() == "pan":
            if self.isSlideOn:
                if self.tool == "slide":
                    self.xref = event.x
                    self.yref = event.y
        if self.mode.get() == "annotate" or self.mode.get() == "line" :
            self.canvas.scan_mark(event.x, event.y)

    def move(self, event):
        if self.mode.get() == "pan":
            if self.isSlideOn:
                if self.tool == "slide":
                    dpx = (event.x - self.xref)
                    dpy = (event.y - self.yref)
                    self.canvas.delete("image")
                    self.canvas.create_image(-self.canvas.width + dpx,
                                            -self.canvas.height + dpy, anchor=NW,
                                            image=self.photoimage, tags="image")
            
        if self.mode.get() == "annotate" or self.mode.get() == "line" or self.mode.get() == "oval" or self.mode.get() == "rectangle" or self.mode.get() == "arc":
            self.canvas.scan_dragto(event.x, event.y, gain=1)
    
    def nomove(self, event):
        if self.mode.get() == "pan":
            if self.isSuperposed:
                if self.tool == "slide":
                    self.image = self.translateImage(self.xref,
                                                        self.yref,
                                                        event)
                    self.redrawSuperposed()
        
            if self.isSlideOn and self.isSuperposed == False:
                if self.tool == "slide":
                    self.image = self.translateImage(self.xref,
                                                        self.yref,
                                                        event)
                    self.redraw()
            
  
    def get_position(self, event):
        factory = (-1)*int(numpy.sin(numpy.radians(self.angle))) + int(numpy.cos(numpy.radians(self.angle)))
        factorx = int(numpy.sin(numpy.radians(self.angle))) + int(numpy.cos(numpy.radians(self.angle)))*(-1)**(self.angle/90)
        if self.flip:
            event.x = self.canvas.width - event.x
        if self.angle % 180 == 0:
            abs_x = factorx*event.x + self.canvas.width*2**(self.angle/180) - self.cmapx
            abs_y = factory*event.y + self.canvas.height*2**(self.angle/180) - self.cmapy
        else:
            abs_x = factory*event.y + (3*self.canvas.width+self.canvas.height*(factorx))/2 - self.cmapx
            abs_y = factorx*event.x + (3*self.canvas.height+self.canvas.width*(factory))/2 - self.cmapy
        factor_resize_x = self.cmap_resize.size(0)/self.cmap_png.shape(0)
        factor_resize_y = self.cmap_resize.size(1)/self.cmap_png.shape(1)
        index_x = int(abs_x/factor_resize_x)
        index_y = int(abs_y/factor_resize_y)
        messagebox.showinfo('Patch coordinates', 'X: % d n Y: % d' % (index_x, index_y))

And the code I want to add is here:

from tkinter import Tk, Canvas
from PIL import Image, ImageTk
import requests

try:
    open('space.jpg')
except FileNotFoundError:
    url = 'https://images5.alphacoders.com/866/866360.jpg'
    img = requests.get(url)
    if img.status_code == 200:
        with open('space.jpg', 'wb') as file:
            file.write(img.content)
        print('File not found. Downloaded the necessary file.')
    else:
        print('File not found. Could not download the necessary file.')
        exit()


start_coords = {'x': 0, 'y': 0, 'move': False}

def set_start_coords(event):
    x1, y1, x2, y2 = nav_canvas.coords(nav_box)
    if x1 < event.x < x2 and y1 < event.y < y2:
        start_coords('x') = event.x - x1
        start_coords('y') = event.y - y1
        start_coords('move') = True
    else:
        start_coords('move') = False

def move_coords(event):
    if not start_coords('move'):
        return

    dx = start_coords('x')
    dy = start_coords('y')
    x = event.x - dx
    y = event.y - dy

    if x < 0:
        x = 0
    elif x + 70 > 200:
        x = 130
    if y < 0:
        y = 0
    elif y + 50 > 100:
        y = 50

    nav_canvas.coords(nav_box, x, y, x + 70, y + 50)
    main_canvas.coords(main_image_id, -x * 10, -y * 10)
root = Tk()
image = Image.open('space.jpg')
main_image = ImageTk.PhotoImage(image)
nav_image = ImageTk.PhotoImage(image.resize((200, 100), Image.ANTIALIAS))

main_canvas = Canvas(root, width=700, height=500, highlightthickness=0)
main_canvas.pack()
main_image_id = main_canvas.create_image((0, 0), image=main_image, anchor='nw')

nav_canvas = Canvas(width=200, height=100, highlightthickness=0)
main_canvas.create_window((500, 400), window=nav_canvas, anchor='nw', tags='nav_canvas')

nav_canvas.create_image((0, 0), image=nav_image, anchor='nw')
nav_box = nav_canvas.create_rectangle((0, 0, 70, 50), outline='white')

nav_canvas.bind('<Button-1>', set_start_coords)
nav_canvas.bind('<B1-Motion>', move_coords)

root.mainloop()

Resizable SVG boxes

I have followed the tutorial and the excellent code here https://github.com/petercollingridge/code-for-blog/blob/master/svg-interaction/draggable/draggable_groups.svg

And have a few nice draggable rects on screen. I want to next create a resize handle in the corner but am not sure how to go about extending this code to include resizing. I don’t want to use any libraries.

html – [CSS Challenge]: Creating a resizable textbox that can stretch vertically and horizontally without warping corner elements

I am creating a resizable textbox that can stretch vertically and horizontally without warping graphical corner elements. To do so, I am using three vertical sections (top, center, bottom) and three horizontal sections (left, middle, right) within the top and bottom vertical sections. This way, the ‘top-middle’ and ‘bottom-middle’ sections can stretch horizontally and the center section can stretch vertically, while the corner sections (top-left, top-right, bottom-left..) stay the same width and height to avoid warping.

The problem is: positioning elements so that they line up with one another. Specifically, I seem to be getting some cut-off on the right sides of my corner elements.

Here is the HTML:

<div className='textbox-container'>
  <div className='top-block'>
    <div className='left-block' />
    <div className='middle-block'>
      <p>
        Top Block
      </p>
    </div>
    <div className='right-block' />
  </div>
  
  <div className='center-block'>
    <p>
      Center Block
    </p>
  </div>
  
  <div className='bottom-block'>
    <div className='left-block' />
    <div className='middle-block'>
      <p>
        Bottom Block
      </p>
    </div>
    <div className='right-block' />
  </div>
</div>

And here is the CSS I am using:

.textbox-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 75%;
    margin: 0 auto;
  }

  .top-block {
    display: inline-flex;
    flex-direction: row;
    float: left;
    width: 100%;
    height: 80px;
    margin:0 auto;
    margin-top: 10vh;
  }

  .top-block .left-block {
    background-image: url('/src/images/Textbox-Top-Left.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 80px;
    margin:0 auto;
  }

  .top-block .middle-block {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: right;
    vertical-align: middle;
    background-image: url('/src/images/Textbox-Top-Middle.png');
    color: #fff;
    margin:0 auto;
  }
  
  .top-block .right-block {
    float:right;
    background-image: url('/src/images/Textbox-Top-Right.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 80px;
    margin:0 auto;
  }

  .center-block {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 800px;
    background-image: url('/src/images/Textbox-Center.png');
    background-repeat: repeat-y;
    background-size: contain;
    margin: 0;
  }

  .bottom-block {
    display: inline-flex;
    flex-direction: row;
    float: left;
    width: 100%;
    height: 80px;
    margin-bottom: 20vh;
  }

  /* Close but no cigar with magic numbers in bot sections: */
  .bottom-block .left-block {
    width: 220px;
    height: 80px;
    background-image: url('/src/images/Textbox-Bottom-Left.png')
  }

  .bottom-block .middle-block {
    width: 100%;
    line-height: 80px;
    text-align: right;
    padding-right: 5vw;
    vertical-align: middle;
    height: 80px;
    background-image: url('/src/images/Textbox-Bottom-Middle.png');
    color: #fff;
    margin: none;
  }

  .bottom-block .right-block {
    float:right;
    width: 220px;
    height: 80px;
    background-image: url('/src/images/Textbox-Bottom-Right.png')
  }

Fiddle (currently not working):
https://jsfiddle.net/edmundw/6xku4qwa/6/

Fiddle collaborate invite:
https://jsfiddle.net/edmundw/6xku4qwa/4/#&togetherjs=4VMz2rGNAo

Any solutions would be greatly appreciated as I am stumped.

Many thanks for reading this far,

Betty.

disk utility – Create 2 resizable logical drives from one physical drive under Catalina

I have partitioned a drive to create two logical partitions from one physical drive in the past, but the partitions were not resizable after I initially created them and it ended up being a nightmare to undo.

I have a new MacBook Pro that I’d like to set up two logical drives that can be resized. What is the correct way to go about doing this? I see articles online about it, but they discuss El Capitan and older OSes.

opengl – How do I render to a resizable window from a large fixed size back buffer in current graphics APIs?

I have some code that uses DirectX 9 with Windows native window management, that I would like to port to newer graphics APIs, but this code has a fairly unusual approach to window resizing, and it doesn’t seem obvious how to achieve the same things with newer graphics APIs.

The code I want to port allocates a back buffer large enough for a full screen window which remains the same size across window maximised, minimised, and resize events. When the window is smaller than the back buffer, only part of the back buffer is shown.

In order to render from this large back buffer, in DirectX 9, I’m specifying regions with the pSourceRect and pDestRect in IDirect3DDevice9::Present and using D3DSWAPEFFECT_COPY.

The advantages of this, as I see it, are as follows:

  • There’s no need to free and reallocate any resources in response to window size changes.
  • Not reallocating resources reduces code complexity significantly.
  • Not reallocating resources makes the application more responsive in the case of windows size changes.
  • The rendered scene continues to be drawn, smoothly, as the application window is being resized, without any need for potentially tricky and complicated attempts to update rendering settings in response to resize events.

(As the code is written, the application is essentially paused during window resize. The user nevertheless gets a smoothly updated view of the relevant part of the current static rendered scene during window resize.)

How do I do the same thing with newer graphics APIs?

In newer DirectX versions it seems like the ‘BitBlt model’ described on this page roughly corresponds to D3DSWAPEFFECT_COPY in DirectX 9:
https://docs.microsoft.com/en-us/windows/win32/direct3ddxgi/dxgi-flip-model

However, when I try setting the swap effect to DXGI_SWAP_EFFECT_DISCARD, in DirectX 12, I get the following error:
IDXGIFactory::CreateSwapChain: This D3D API version requires the swap effect to be one of DXGI_SWAP_EFFECT_FLIP_*.

So I guess the BitBlit model is no longer supported. 🙁

I guess a logical alternative would then be to do something equivalent ‘manually’, but it seems like doing something like this would lose one of the advantages of the trick, as it works out in DirectX 9, which is the smooth update during resizing without needing to intercept resize events and update stuff in response to these, in the application code.

What I’d like to see, ideally, are links to working code that does something equivalent to what I’m doing in DirectX 9, in DirectX 12, OpenGL, or Vulkan.

If it helps to see the code in action, and the resulting resize behaviour, you can see this in the PathEngine graphical testbed, which can be downloaded here: https://pathengine.com/downloads
(And I could also look at stripping out and posting source code for a minimal example application that demonstrates this behaviour, if this would help.)

Legal – Why are Windows software licenses not resizable?

In almost all the programs I installed on Windows, the EULA text is in a small, non-resizable text area.

The text itself is also in small print, it is not resizable and because there is a lot of it, the scroll bar shrinks and only its arrow buttons are practically usable.

Generally, no attempt is made to simplify license navigation or even display a table of contents.

My usual solution is to copy the text in a text editor. But today I found a software installer that allows me to select the license text, but it blocks the copy.

For me, the only thing understandable is to limit the width of the text for easier reading, everything else seems arbitrary.

What are the reasons for paralyzing the user interface in this way?
Or is it just an artifact of the past in MS Windows installers?

Maybe it's a subtle push from the user not to bother reading the license?

javascript – Resizable split DIVs Vue.js

Hi fellow Developers / Programmers!

I just started Developing Web App (Vue.js) for my company for around 1-2 months.
Therefore, my knowledge and experience in HTML, CSS and Javascript is kinda shallow.

I've created a custom resizable split DIVs and it working just fine as what I wanted.
However, I would like to know if my code is a good code or to bad code.
Below is a snippet of my code. Live demo: https://codepen.io/aziziaziz/pen/yLBeRxQ

var dividerRef = '';
var currentDivider = null;

var leftDivider = null;
var rightDivider = null;
var leftRightDivider = null;

var topLeft = null;
var topRight = null;
var bottomLeft = null;
var bottomRight = null;

var app = new Vue({
  el: '#app',
  methods: 
  {
		dividerDragStart: function(e) {
			e.dataTransfer.setDragImage(new Image, 0, 0);
		},
    dividerDrag: function(e) {
			if (dividerRef == 'lrDivider') {
				currentDivider.style.left = e.clientX + 'px';

				leftDivider.style.width = (e.clientX + 2) + 'px';

				rightDivider.style.left = (e.clientX) + 'px';
				rightDivider.style.width = (window.innerWidth - e.clientX + 2) + 'px';

				topLeft.style.width = e.clientX + 'px';
				bottomLeft.style.width = e.clientX + 'px';

				topRight.style.left = e.clientX + 'px';
				topRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
				bottomRight.style.left = e.clientX + 'px';
				bottomRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
			} else if (dividerRef == 'rtbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topRight.style.height = (e.clientY) + 'px'

				bottomRight.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomRight.style.top = (e.clientY) + 'px';
			} else if (dividerRef == 'ltbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topLeft.style.height = (e.clientY) + 'px'

				bottomLeft.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomLeft.style.top = (e.clientY) + 'px';
			}
		},
		dividerMouseDown: function(name) {
			dividerRef = name;
			currentDivider = this.$refs(dividerRef);
		},
		dividerDragEnd: function(e) {
			if (dividerRef == 'lrDivider') {
				currentDivider.style.left = e.clientX + 'px';
				leftDivider.style.width = (e.clientX + 2) + 'px';

				rightDivider.style.left = (e.clientX) + 'px';
				rightDivider.style.width = (window.innerWidth - e.clientX + 2) + 'px';

				topLeft.style.width = e.clientX + 'px';
				bottomLeft.style.width = e.clientX + 'px';

				topRight.style.left = e.clientX + 'px';
				topRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
				bottomRight.style.left = e.clientX + 'px';
				bottomRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
			} else if (dividerRef == 'rtbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topRight.style.height = (e.clientY) + 'px'

				bottomRight.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomRight.style.top = (e.clientY) + 'px';
			} else if (dividerRef == 'ltbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topLeft.style.height = (e.clientY) + 'px'

				bottomLeft.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomLeft.style.top = (e.clientY) + 'px';
			}

			dividerRef = '';
			currentDivider = null;
		}
  },
  mounted() {
    topLeft = this.$refs.topLeft;
    topRight = this.$refs.topRight;
    bottomLeft = this.$refs.bottomLeft;
    bottomRight = this.$refs.bottomRight;

    var heightHalf = (window.innerHeight - 80) / 2;
		var widthHalf = window.innerWidth / 2;
		
		leftDivider = this.$refs.ltbDivider;
		rightDivider = this.$refs.rtbDivider;
		leftRightDivider = this.$refs.lrDivider;
  }
})

Resize me using the black bars

Resize me using the black bars

Resize me using the black bars

Resize me using the black bars

So if any Web Developer master would like to give feedback, comments or opinions on my code, would be much appreciated.

I've posted this in StackOverflow and someone suggested to post it here.
Here's the link to my original post in StackOverflow: https://stackoverflow.com/questions/58319810/resizable-split-divs-vue-js

Thank you so much for your time.
Appreciate it.

Full screen, resizable canvas in Elm not visible on page load

I am using Elm 0.19 and the joakin / elm-canvas package.

All I try to do is draw a canvas that spans the entire width and height of the screen and dynamically resizes as the window size changes. I've spent several hours debugging and researching, but I'm stuck. I have tried several implementations and I can make it work, but not on the initial page load. Instead, it is processed only after the update function is called. I feel that I am missing something obvious, since I am still very new to Elm.

Here is a link to the Ellie code / demo that works that shows the problem: https://ellie-app.com/6JZDxnQWPLSa1
Notice how the screen is blank until after a key press event triggers the update, and then the canvas appears.