diff --git a/css-doodle.js b/css-doodle.js index 5b63175..8c66f9d 100644 --- a/css-doodle.js +++ b/css-doodle.js @@ -134,7 +134,7 @@ function remove_unit(str) { return unit ? +(str.replace(unit, '')) : str; } -const { cos, sin, sqrt, pow, PI } = Math; +const { cos, sin, tan, sqrt, pow, PI } = Math; const DEG = PI / 180; function polygon(option, fn) { @@ -165,21 +165,27 @@ function polygon(option, fn) { return `polygon(${ points.join(',') })`; } - -function circle() { - return 'circle(49.5%)'; +function rotate(x, y, deg) { + var rad = DEG * deg; + return [ + x * cos(rad) - y * sin(rad), + y * cos(rad) + x * sin(rad) + ]; } -function siogon(sides = 3) { - return polygon({ split: minmax(sides, 3, 8) }); +function circle() { + return 'circle(49%)'; } function triangle() { - return polygon({ split: 3, start: -90 }); + return polygon({ split: 3, start: -90 }, t => [ + cos(t) * 1.1, + sin(t) * 1.1 + .2 + ]); } function rhombus() { - return siogon(4); + return polygon({ split: 4 }); } function pentagon() { @@ -190,6 +196,14 @@ function hexgon() { return polygon({ split: 6, start: 30 }); } +function heptagon() { + return polygon({ split: 7, start: -90}); +} + +function octagon() { + return polygon({ split: 8}); +} + function star() { return polygon({ split: 5, start: 54, deg: 144 }); } @@ -209,33 +223,37 @@ function cross() { function clover(k = 3) { k = minmax(k, 3, 5); if (k == 4) k = 2; - return polygon({ split: 240 }, t => [ - cos(k * t) * cos(t), - cos(k * t) * sin(t) - ]); + return polygon({ split: 240 }, t => { + var x = cos(k * t) * cos(t); + var y = cos(k * t) * sin(t); + if (k == 3) x -= .2; + if (k == 2) { + x /= 1.1; + y /= 1.1; + } + return [x, y]; + }); } function hypocycloid(k = 3) { k = minmax(k, 3, 6); var m = 1 - k; - return polygon({ scale: 1 / k }, t => [ - m * cos(t) + cos(m * (t - PI)), - m * sin(t) + sin(m * (t - PI)) - ]); + return polygon({ scale: 1 / k }, t => { + var x = m * cos(t) + cos(m * (t - PI)); + var y = m * sin(t) + sin(m * (t - PI)); + if (k == 3) { + x = x * 1.1 - .6; + y = y * 1.1; + } + return [x, y]; + }); } function astroid() { return hypocycloid(4); } -function tie() { - return polygon(t => [ - cos(t), - sin(t * 2) / 2 - ]); -} - -function eternity() { +function infinity() { return polygon(t => { var a = .7 * sqrt(2) * cos(t); var b = (pow(sin(t), 2) + 1); @@ -254,30 +272,78 @@ function heart() { - cos(2 * t) * (5 / 18) - cos(3 * t) / 18 - cos(4 * t) / 18; - return [ - (-x - y * sin(PI)), - (-y + x * sin(PI)) - .2 - ]; + return rotate( + x * 1.2, (y + .2) * 1.1, 180 + ) + }); +} + +function bean() { + return polygon(t => { + var [a, b] = [pow(sin(t), 3), pow(cos(t), 3)]; + return rotate( + (a + b) * cos(t) * 1.3 - .45, + (a + b) * sin(t) * 1.3 - .45, + -90 + ); + }); +} + +function bicorn() { + return polygon(t => rotate( + cos(t), + pow(sin(t), 2) / (2 + sin(t)) - .5, + 180 + )); +} + +function pear() { + return polygon(t => [ + sin(t), + (1 + sin(t)) * cos(t) / 1.4 + ]); +} + +function fish() { + return polygon(t => [ + cos(t) - pow(sin(t), 2) / sqrt(2), + sin(2 * t) / 2 + ]); +} + +function whale() { + return polygon({ split: 240 }, t => { + var r = 3.4 * (pow(sin(t), 2) - .5) * cos(t); + return rotate( + cos(t) * r + .75, + sin(t) * r * 1.2, + 180 + ) }); } var shapes = Object.freeze({ circle: circle, - siogon: siogon, triangle: triangle, rhombus: rhombus, pentagon: pentagon, hexgon: hexgon, + heptagon: heptagon, + octagon: octagon, star: star, diamond: diamond, cross: cross, clover: clover, hypocycloid: hypocycloid, astroid: astroid, - tie: tie, - eternity: eternity, - heart: heart + infinity: infinity, + heart: heart, + bean: bean, + bicorn: bicorn, + pear: pear, + fish: fish, + whale: whale }); function index(x, y, count) { diff --git a/css-doodle.min.js b/css-doodle.min.js index 5637659..fb08936 100644 --- a/css-doodle.min.js +++ b/css-doodle.min.js @@ -1 +1 @@ -!function(e,t){typeof exports==='object'&&typeof module!=='undefined'?t():typeof define==='function'&&define.amd?define(t):(t())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function t(e,t,n){return e=>e==n}function n(e,t){return(n,r)=>e==n&&t==r}function r(t,n,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function u(t,n,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function o(t,n,r){return t=>e.even(r-1)}function c(t,n,r){return t=>e.odd(r-1)}var s=Object.freeze({nth:t,at:n,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(t=>e[t])}function l(e,...t){return t.reduce((e,t)=>e.apply(null,i(t)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,t,n){return Math.max(t,Math.min(n,e))}function h(e){return`-webkit-${e}${e}`}let m={};function d(e,t){return function(...n){let r=e+n.join('-');if(m[r])return m[r];return m[r]=t.apply(null,n)}}function y(...e){let t=e.reduce((e,t)=>e.concat(t),[]);return t[Math.floor(Math.random()*t.length)]}function g(e,t,n){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,t]=[u(e),e]);o<3&&(n=u(e));let c=[];while(n>0&&et){c.push(e);e+=n;if(r++>=1e3)break}return c}function x(e){return function(...t){let n=w(t[0]);if(n){t=t.map(b);return _(e,n).apply(null,t)}return e.apply(null,t)}}function _(e,t){return function(...n){n=n.map(b);let r=e.apply(null,n);t&&(r=r.map(e=>e+t));return r}}function w(e){if(!e)return'';let t=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,n=''.trim.call(e).match(t);return n?n[0]:''}function b(e){let t=w(e);return t?+(e.replace(t,'')):e}let{cos:v,sin:z,sqrt:k,pow:L,PI:T}=Math,H=T/180;function M(e,t){typeof arguments[0]=='function'&&(t=e,e={});t||(t=e=>[v(e),z(e)]);var n=e.split||120,r=e.scale||1,u=H*(e.start||0),o=e.deg?e.deg*H:T/(n/2),c=[];for(var s=0;s[v(e*t)*v(t),v(e*t)*z(t)])}function P(e = 3){e=f(e,3,6);var t=1-e;return M({scale:1/e},e=>[t*v(e)+v(t*(e-T)),t*z(e)+z(t*(e-T))])}function D(){return P(4)}function F(){return M(e=>[v(e),z(e*2)/2])}function G(){return M(e=>{var t=.7*k(2)*v(e),n=L(z(e),2)+1;return[t/n,t*z(e)/n]})}function I(){return M(e=>{var t=.75*L(z(e),3),n=v(1*e)*.7222222222222222-v(2*e)*.2777777777777778-v(3*e)/18-v(4*e)/18;return[-t-n*z(T),-n+t*z(T)-.2]})}var J=Object.freeze({circle:S,siogon:j,triangle:A,rhombus:W,pentagon:C,hexgon:R,star:q,diamond:B,cross:E,clover:O,hypocycloid:P,astroid:D,tie:F,eternity:G,heart:I});function K(e,t,n){return e=>n}function N(e,t,n){return t=>e}function Q(e,t,n){return e=>t}function U(){return function(...e){return y.apply(null,e)}}function V(){return U.apply(null,arguments)}function X(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function Y(e,t,n){return d('shape',function(e,...t){if(e){e=e.trim();if(J[e]){return J[e].apply(null,t)}}})}var Z=Object.freeze({index:K,row:N,col:Q,any:U,pick:V,rand:X,shape:Y});class ${constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,t){var n=this.rules[e];n||(n=this.rules[e]=[]);n.push.apply(n,p(t))}compose_selector(e,t = ''){return`.cell:nth-of-type(${e}) .shape${t}`}compose_argument(e,t){var n=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var n=Z[e.name.substr(1)];if(n){var r=e.arguments.map(e=>{return this.compose_argument(e,t)});return l(n,t,r)}}});return n.length>2?n.join(''):n[0]}compose_value(e,t){return e.reduce((e,n)=>{switch(n.type){case 'text':{e+=n.value;break};case 'func':{var r=Z[n.name.substr(1)];if(r){var u=n.arguments.map(e=>{return this.compose_argument(e,t)});e+=l(r,t,u)}}}return e},'')}compose_rule(e,t){var n=e.property,r=this.compose_value(e.value,t);n=='transition'&&(this.props.has_transition=!0);var u=`${n}:${r};`;n=='clip-path'&&(u=h(u),u+=';overflow:hidden;');n=='size'&&(u=`width:${r};height:${r};`);return u}compose(e,t){(t||this.tokens).forEach((t,n)=>{if(t.skip)return!1;switch(t.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(t,e));break;case 'psudo':{t.selector.startsWith(':doodle')&&(t.selector=t.selector.replace(/^\:+doodle/,':host'));var c=t.selector.startsWith(':host');c&&(t.skip=!0);var i=t.styles.map(t=>this.compose_rule(t,e)),a=c?t.selector:this.compose_selector(e.count,t.selector);this.add_rule(a,i);break};case 'cond':var o=s[t.name.substr(1)];if(o){var r=t.arguments.map(t=>{return this.compose_argument(t,e)}),u=l(o,e,r);u&&this.compose(e,t.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var t=e.startsWith(':host');let n=t?'host':'cells';this.styles[n]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function ee(e,t){var n=new $(e);for(var r=1,u=0;r<=t.x;++r){for(var o=1;o<=t.y;++o)n.compose({x:r,y:o,count:++u})}return n.output()}let te={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},ne={'(':')','[':']','{':'}'},re={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return ne.hasOwnProperty(e)},close_bracket_of(e){var t=ne[e];return e=>e==t},number(e){return!isNaN(e)}};function ue(e){var t=0,n=1,r=1;return{curr:(n = 0)=>e[t+n],end:()=>e.length<=t,info:()=>({index:t,col:n,line:r}),next:()=>{var u=e[t++];u=='\n'?(r++, n=0):n++;return u}}}function oe(e,{col:t,line:n}){throw new Error(`(at line ${n}, column ${t}) ${e}`)}function ce(e){if(e.trim().length){return re.number(+e)?+e:e.trim()}else{return e}}function se(e){var[t,n]=[e.curr(),e.curr()],r=re.close_bracket_of(n);e.next();while(!e.end()){if(r(n=e.curr())){t+=n;break}else re.open_bracket(n)?(t+=se(e)):(t+=n);e.next()}return t}function ie(e,t ={}){var n=te.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else n.value+=r;r=e.curr();if(t.inline){if(r=='\n')return n}else{if(r=='*'&&e.curr(1)=='/')break}n.value+=r;e.next()}e.next();e.next();return n}function le(e){var t='',n;while(!e.end()){if((n=e.curr())==':')break;else /[a-zA-Z\-]/.test(n)?re.white_space(n)||(t+=n):oe('Syntax error:Bad property name.',e.info());e.next()}return t}function ae(e,t){var n='',r;e.next();while(!e.end()){if((r=e.curr())==t){if(e.curr(-1)!=='\\')break;else n+=r}else n+=r;e.next()}return n}function pe(e){var t=[],n=[],r='',u;while(!e.end()){if(re.open_bracket(u=e.curr()))r+=se(e);else if(/['"]/.test(u))r+=ae(e,u);else if(u=='@')n.length||(r=r.trimLeft()),r.length&&(n.push(te.text(r)),r=''),n.push(fe(e));else if(/[,)]/.test(u)){r.length&&(n.length?(r=r.trimRight(),r.length&&n.push(te.text(r))):n.push(te.text(ce(r))));t.push(n.slice());[n,r]=[[],''];if(u==')')break}else r+=u;e.next()}return t}function fe(e){var t=te.func(),n='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();t.name=n;t.arguments=pe(e);break}else n+=r;e.next()}return t}function he(e){var t=te.text(),n;let r=[];while(!e.end()){if((n=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(n)){t.value.length&&r.push(t);t=te.text();break}else n=='@'?(t.value.length&&r.push(t),t=te.text(),r.push(fe(e))):(!re.white_space(n)||!re.white_space(e.curr(-1)))&&(n==':'&&oe('Syntax error:Bad property name.',e.info()),t.value+=n);e.next()}t.value.length&&r.push(t);r.length&&(r[0].value=r[0].value.trimLeft());return r}function me(e){var t='',n;while(!e.end()){if((n=e.curr())=='{')break;else re.white_space(n)||(t+=n);e.next()}return t}function de(e){var t={name:'',arguments:[]},n;while(!e.end()){if((n=e.curr())=='(')e.next(),t.arguments=pe(e);else if(/[){]/.test(n))break;else re.white_space(n)||(t.name+=n);e.next()}return t}function ye(e){var t=te.psudo(),n;while(!e.end()){if((n=e.curr())=='}')break;if(re.white_space(n)){e.next();continue}else t.selector?t.styles.push(ge(e)):(t.selector=me(e));e.next()}return t}function ge(e){var t=te.rule(),n;while(!e.end()){if((n=e.curr())==';')break;else if(!t.property.length)t.property=le(e);else{t.value=he(e);break}e.next()}return t}function xe(e){var t=te.cond(),n;while(!e.end()){if((n=e.curr())=='}')break;else if(!t.name.length)Object.assign(t,de(e));else if(n==':'){var r=ye(e);r.selector&&t.styles.push(r)}else if(n=='@')t.styles.push(xe(e));else if(!re.white_space(n)){var u=ge(e);u.property&&t.styles.push(u)}e.next()}return t}function _e(e){let t=ue(e),n=[];while(!t.end()){var r=t.curr();if(re.white_space(r)){t.next();continue}else if(r=='/'&&t.curr(1)=='*')n.push(ie(t));else if(r=='#'||r=='/'&&t.curr(1)=='/')n.push(ie(t,{inline:!0}));else if(r==':'){var u=ye(t);u.selector&&n.push(u)}else if(r=='@'){var o=xe(t);o.name.length&&n.push(o)}else if(!re.white_space(r)){var c=ge(t);c.property&&n.push(c)}t.next()}return n}function we(e,t){return ee(_e(e),t)}let be=1,ve=16;function ze(e){let[t,n]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(t||be,1,ve),y:f(n||t||be,1,ve)};return Object.assign({},r,{count:r.x*r.y})}let ke="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class Le extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=we(this.innerHTML,this.size=ze(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:t}=e.props;this.doodle.innerHTML=`
${this.html_cells()}
`;t&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n
";return e.repeat(this.size.count)}set_style(e,t){let n=this.shadowRoot.querySelector(e);n&&(n.styleSheet?(n.styleSheet.cssText=t):(n.innerHTML=t))}update(e){if(!e){return!1}this.size||(this.size=ze(this.getAttribute('grid')));let t=we(e,this.size);this.set_style('.style-container',this.style_size()+t.styles.host);this.set_style('.style-cells',t.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,t,n){e=='grid'&&t&&(t!==n&&(this.grid=n))}}customElements.define('css-doodle',Le)})) \ No newline at end of file +!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function h(e){return`-webkit-${e}${e}`}let m={};function d(e,n){return function(...t){let r=e+t.join('-');if(m[r])return m[r];return m[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&en){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(b);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(b);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function b(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:v,sin:z,tan:k,sqrt:L,pow:T,PI:H}=Math,M=H/180;function S(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[v(e),z(e)]);var t=e.split||120,r=e.scale||1,u=M*(e.start||0),o=e.deg?e.deg*M:H/(t/2),c=[];for(var s=0;s[v(e)*1.1,z(e)*1.1+.2])}function C(){return S({split:4})}function R(){return S({split:5,start:54})}function q(){return S({split:6,start:30})}function B(){return S({split:7,start:-90})}function E(){return S({split:8})}function O(){return S({split:5,start:54,deg:144})}function P(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function D(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function F(e = 3){e=f(e,3,5);e==4&&(e=2);return S({split:240},n=>{var t=v(e*n)*v(n),r=v(e*n)*z(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function G(e = 3){e=f(e,3,6);var n=1-e;return S({scale:1/e},t=>{var r=n*v(t)+v(n*(t-H)),u=n*z(t)+z(n*(t-H));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function I(){return G(4)}function J(){return S(e=>{var n=.7*L(2)*v(e),t=T(z(e),2)+1;return[n/t,n*z(e)/t]})}function K(){return S(e=>{var n=.75*T(z(e),3),t=v(1*e)*.7222222222222222-v(2*e)*.2777777777777778-v(3*e)/18-v(4*e)/18;return j(n*1.2,(t+.2)*1.1,180)})}function N(){return S(e=>{var[n,t]=[T(z(e),3),T(v(e),3)];return j((n+t)*v(e)*1.3-.45,(n+t)*z(e)*1.3-.45,-90)})}function Q(){return S(e=>j(v(e),T(z(e),2)/(2+z(e))-.5,180))}function U(){return S(e=>[z(e),(1+z(e))*v(e)/1.4])}function V(){return S(e=>[v(e)-T(z(e),2)/L(2),z(2*e)/2])}function X(){return S({split:240},e=>{var n=3.4*(T(z(e),2)-.5)*v(e);return j(v(e)*n+.75,z(e)*n*1.2,180)})}var Y=Object.freeze({circle:A,triangle:W,rhombus:C,pentagon:R,hexgon:q,heptagon:B,octagon:E,star:O,diamond:P,cross:D,clover:F,hypocycloid:G,astroid:I,infinity:J,heart:K,bean:N,bicorn:Q,pear:U,fish:V,whale:X});function Z(e,n,t){return e=>t}function $(e,n,t){return n=>e}function ee(e,n,t){return e=>n}function ne(){return function(...e){return y.apply(null,e)}}function te(){return ne.apply(null,arguments)}function re(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function ue(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(Y[e]){return Y[e].apply(null,n)}}})}var oe=Object.freeze({index:Z,row:$,col:ee,any:ne,pick:te,rand:re,shape:ue});class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=oe[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=oe[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=h(u),u+=';overflow:hidden;');t=='size'&&(u=`width:${r};height:${r};`);return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function me(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=me(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=me(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ze(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=be(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ze(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ze(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`
${this.html_cells()}
`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n
";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)})) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6af4ec9..fe1e34d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,8 +7,8 @@ - - + + @@ -678,7 +678,7 @@ - +