Fossil SCM
pikchr: documented what appears to be a fundamental incompatibility between our desire to open the source view in the same size/pos as the SVG view and how centering is handled. We seem to have two evils to choose from and currently use what seems to be the lesser of them.
Commit
a35126bf289da01c85c6a676d4851f0d00b46daf551ae748a5d7fdd43858c346
Parent
212d01c1aed8bfa…
1 file changed
+41
-7
+41
-7
| --- src/fossil.pikchr.js | ||
| +++ src/fossil.pikchr.js | ||
| @@ -134,25 +134,59 @@ | ||
| 134 | 134 | } |
| 135 | 135 | } |
| 136 | 136 | ); |
| 137 | 137 | D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy); |
| 138 | 138 | btnFlip.addEventListener('click', function f(){ |
| 139 | - if(!f.hasOwnProperty('parentMaxWidth')){ | |
| 140 | - f.parentMaxWidth = parent.style.maxWidth; | |
| 139 | + if(!f.hasOwnProperty('origMaxWidth')){ | |
| 140 | + f.origMaxWidth = parent.style.maxWidth; | |
| 141 | 141 | } |
| 142 | 142 | const svgStyle = window.getComputedStyle(svg); |
| 143 | 143 | srcView.style.minWidth = svgStyle.width; |
| 144 | 144 | srcView.style.minHeight = svgStyle.height; |
| 145 | 145 | /* ^^^ The SVG wrapper/parent element has a max-width, so the |
| 146 | 146 | textarea will be too small on tiny images and won't be |
| 147 | 147 | enlargable. */ |
| 148 | + if(0){ | |
| 149 | + /* We seem to have a fundamental incompatibility with how we | |
| 150 | + really want to position srcView at the same pos/size as the | |
| 151 | + svg and how that interacts with centered items. | |
| 152 | + Until/unless this can be solved, we have to decide between | |
| 153 | + the lesser of two evils: | |
| 154 | + | |
| 155 | + 1) This option. Small images have uselessly tiny source | |
| 156 | + view which cannot be enlarged because the parent element | |
| 157 | + has a width and/or max-width. width/max-width are important | |
| 158 | + for center alignment via the margin:auto trick. | |
| 159 | + | |
| 160 | + 2) Center-aligned images shift all the way to the left when | |
| 161 | + the source view is visible, then back to the center when | |
| 162 | + source view is hidden. Source views are resizable and may | |
| 163 | + even grow a bit automatically for tiny images. | |
| 164 | + */ | |
| 165 | + if(srcView.classList.contains('hidden')){/*initial state*/ | |
| 166 | + parent.style.width = f.origMaxWidth; | |
| 167 | + parent.style.maxWidth = 'unset'; | |
| 168 | + }else{/*srcView is active*/ | |
| 169 | + parent.style.maxWidth = f.origMaxWidth; | |
| 170 | + parent.style.width = 'unset'; | |
| 171 | + } | |
| 172 | + }else{ | |
| 173 | + /* Option #2: gives us good results for non-centered items but | |
| 174 | + not for centered. We apparently have no(?) reliable way of | |
| 175 | + distinguishing centered from left/indented pikchrs here | |
| 176 | + unless we add a CSS class to mark them as such in the | |
| 177 | + pikchr-to-wiki-image code. */ | |
| 178 | + if(srcView.classList.contains('hidden')){/*initial state*/ | |
| 179 | + parent.style.width = 'unset'; | |
| 180 | + parent.style.maxWidth = 'unset'; | |
| 181 | + }else{/*srcView is active*/ | |
| 182 | + parent.style.maxWidth = f.origMaxWidth; | |
| 183 | + parent.style.width = 'unset'; | |
| 184 | + } | |
| 185 | + | |
| 186 | + } | |
| 148 | 187 | btnFlip.classList.toggle('src-active'); |
| 149 | 188 | D.toggleClass([svg, srcView], 'hidden'); |
| 150 | - if(svg.classList.contains('hidden')){ | |
| 151 | - parent.style.maxWidth = 'unset'; | |
| 152 | - }else{ | |
| 153 | - parent.style.maxWidth = f.parentMaxWidth; | |
| 154 | - } | |
| 155 | 189 | }, false); |
| 156 | 190 | }; |
| 157 | 191 | |
| 158 | 192 | })(window.fossil); |
| 159 | 193 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -134,25 +134,59 @@ | |
| 134 | } |
| 135 | } |
| 136 | ); |
| 137 | D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy); |
| 138 | btnFlip.addEventListener('click', function f(){ |
| 139 | if(!f.hasOwnProperty('parentMaxWidth')){ |
| 140 | f.parentMaxWidth = parent.style.maxWidth; |
| 141 | } |
| 142 | const svgStyle = window.getComputedStyle(svg); |
| 143 | srcView.style.minWidth = svgStyle.width; |
| 144 | srcView.style.minHeight = svgStyle.height; |
| 145 | /* ^^^ The SVG wrapper/parent element has a max-width, so the |
| 146 | textarea will be too small on tiny images and won't be |
| 147 | enlargable. */ |
| 148 | btnFlip.classList.toggle('src-active'); |
| 149 | D.toggleClass([svg, srcView], 'hidden'); |
| 150 | if(svg.classList.contains('hidden')){ |
| 151 | parent.style.maxWidth = 'unset'; |
| 152 | }else{ |
| 153 | parent.style.maxWidth = f.parentMaxWidth; |
| 154 | } |
| 155 | }, false); |
| 156 | }; |
| 157 | |
| 158 | })(window.fossil); |
| 159 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -134,25 +134,59 @@ | |
| 134 | } |
| 135 | } |
| 136 | ); |
| 137 | D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy); |
| 138 | btnFlip.addEventListener('click', function f(){ |
| 139 | if(!f.hasOwnProperty('origMaxWidth')){ |
| 140 | f.origMaxWidth = parent.style.maxWidth; |
| 141 | } |
| 142 | const svgStyle = window.getComputedStyle(svg); |
| 143 | srcView.style.minWidth = svgStyle.width; |
| 144 | srcView.style.minHeight = svgStyle.height; |
| 145 | /* ^^^ The SVG wrapper/parent element has a max-width, so the |
| 146 | textarea will be too small on tiny images and won't be |
| 147 | enlargable. */ |
| 148 | if(0){ |
| 149 | /* We seem to have a fundamental incompatibility with how we |
| 150 | really want to position srcView at the same pos/size as the |
| 151 | svg and how that interacts with centered items. |
| 152 | Until/unless this can be solved, we have to decide between |
| 153 | the lesser of two evils: |
| 154 | |
| 155 | 1) This option. Small images have uselessly tiny source |
| 156 | view which cannot be enlarged because the parent element |
| 157 | has a width and/or max-width. width/max-width are important |
| 158 | for center alignment via the margin:auto trick. |
| 159 | |
| 160 | 2) Center-aligned images shift all the way to the left when |
| 161 | the source view is visible, then back to the center when |
| 162 | source view is hidden. Source views are resizable and may |
| 163 | even grow a bit automatically for tiny images. |
| 164 | */ |
| 165 | if(srcView.classList.contains('hidden')){/*initial state*/ |
| 166 | parent.style.width = f.origMaxWidth; |
| 167 | parent.style.maxWidth = 'unset'; |
| 168 | }else{/*srcView is active*/ |
| 169 | parent.style.maxWidth = f.origMaxWidth; |
| 170 | parent.style.width = 'unset'; |
| 171 | } |
| 172 | }else{ |
| 173 | /* Option #2: gives us good results for non-centered items but |
| 174 | not for centered. We apparently have no(?) reliable way of |
| 175 | distinguishing centered from left/indented pikchrs here |
| 176 | unless we add a CSS class to mark them as such in the |
| 177 | pikchr-to-wiki-image code. */ |
| 178 | if(srcView.classList.contains('hidden')){/*initial state*/ |
| 179 | parent.style.width = 'unset'; |
| 180 | parent.style.maxWidth = 'unset'; |
| 181 | }else{/*srcView is active*/ |
| 182 | parent.style.maxWidth = f.origMaxWidth; |
| 183 | parent.style.width = 'unset'; |
| 184 | } |
| 185 | |
| 186 | } |
| 187 | btnFlip.classList.toggle('src-active'); |
| 188 | D.toggleClass([svg, srcView], 'hidden'); |
| 189 | }, false); |
| 190 | }; |
| 191 | |
| 192 | })(window.fossil); |
| 193 |