[GitHub] [echarts] 100pah opened a new issue, #18022: [Feature] [RFC] border-box or content-box or half-border-box

[GitBox]

100pah opened a new issue, #18022:
URL: https://github.com/apache/echarts/issues/18022

   ### What problem does this feature solve?
   
   At present, if a component can be set `width`/`height` and `border` and/or 
`pending` and `left`/`right`/`top`/`bottom`, the behavior is not consistent and 
not straight forward.
   
   Basically, there three box models: 
   
   <img width="779" alt="image" 
src="https://user-images.githubusercontent.com/1956569/205641249-a515869f-d677-4d8b-a2b4-1eb354dfc5e2.png";>
   
   The name of the third one `half-border-box` is what I made just now. this 
box model seems to be not straight forward but it is the default behavior of 
HTML canvas, and widely used in echarts. Consider various graphic (e.g., 
polygon), content box or border box need complicated calculation but 
`half-border-box` is simple and work well in the most cases.
   
   But when we set `width`/`height` and `border` and/or `pending` and 
`left`/`right`/`top`/`bottom` to a "container" or "component", the 
`half-border-box` seems to be not easy to understand. Since CSS box model only 
use `border-box` and `content-box`, the `half-border-box` probably makes users 
feel it is a bug.
   
   Consider the case below:
   
   <img width="876" alt="image" 
src="https://user-images.githubusercontent.com/1956569/205642686-91803ee0-663d-43bb-a4eb-bc2880214adf.png";>
   
   Padding follows `content-box`/`border-box` rule (in echarts). But border 
follows `half-border-box` rule.
   
   BTW, at present in echarts, there are inconsistent:
   + if user set `left: 0, top: 0`
       + `grid` and `title` show half of left-top border
       + `visualMap` and `treemap.breadcrumb` show full border
   
   BTW, at present in echarts, there are facts (just for the record):
   + `title` `legend` `visualMap` `timeline` can set `pending`
   + `title` `legend` `grid` `visualMap` `toolbox` (and the future `thumbnail`) 
can set `border`
   + `grid` `visualMap` (and the future `thumbnail`) can set `width`/`height` 
of the container, while the others calculate content according to their content.
   
   
   
   
   ### What does the proposed API look like?
   
   For component 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org